如何创建使用BootStrap的WordPress主题?

时间:2014-01-16 15:52:51

标签: css wordpress twitter-bootstrap wordpress-theming twitter-bootstrap-3

我是WordPress中的新手,在BootStrap开发方面是全新的(我昨天开始研究BootStrap),我对如何创建一个从0使用BootStrap的自定义WP模板有以下疑问。

例如,我使用BootStrap创建了此页面的源代码:http://www.html.it/guide/img/bootstrap/demo/home.html

我想尝试从它开始创建一个WP模板。

前段时间我已经实现了WP的标准HTML \ CSS模板,我可以使用相同的tecnique将前一页划分为(页眉,页脚,内容,etcetc)并在这些部分中放入WP php代码来显示文章和其他WP功能?

这是正确的方法吗?

其他疑问与上部幻灯片有关,在此幻灯片中,immage是固定的,并以静态方式定义:

<!-- Sezione slider con Flexslider -->
<div class="row">
<div class="col-sm-12">
 <div id="main-slider" class="flexslider">
  <ul class="slides">
   <li>
   <img src="assets/img/flexslider/flex-1.jpg">
   <div class="flex-caption">
   <p class="flex-caption-text">
   <span>Lorem ipsum</span><br>
   <span>sit dolor</span><br>
   <span>adipiscing elitur</span>
   </p>
   </div>
   </li>
   <li>
   <img src="assets/img/flexslider/flex-2.jpg">
   <div class="flex-caption">
   <p class="flex-caption-text">
   <span>Lorem ipsum</span><br>
   <span>sit dolor</span><br>
   <span>adipiscing elitur</span>
   </p>
   </div>
   </li>
   <li>
   <img src="assets/img/flexslider/flex-3.jpg">
   <div class="flex-caption">
   <p class="flex-caption-text">
   <span>Lorem ipsum</span><br>
   <span>sit dolor</span><br>
   <span>adipiscing elitur</span>
   </p>
   </div>
   </li>
  </ul>
 </div><!-- /.flexslider -->

如果我希望管理员可以选择应该从后端显示的图像(我想在主题配置面板中),我该怎么办?

你能告诉我一些关于这些事情的看法吗?

TNX

安德烈

1 个答案:

答案 0 :(得分:1)

我不是100%确定这将涵盖您的所有问题,但使用Bootstrap和WP与使用WP创建常规主题相同,您只需包含其他引导程序文件,然后使用标记中的相关类。显然,你还可以使用一个插件:http://wordpress.org/plugins/wordpress-bootstrap-css/

最大的区别是如何处理菜单 - 我通常使用此walker生成它,然后我可以使用默认的Bootstrap菜单样式:https://github.com/twittem/wp-bootstrap-navwalker

至于轮播,请尝试:http://www.lanexa.net/2012/04/how-to-make-bootstrap-carousel-display-wordpress-dynamic-content/