css - 如何创建一个使用 BootStrap 的 WordPress 主题?

标签 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模板,我可以使用相同的技术将上一页分成(页眉,页脚,内容等)并在这些部分中放入WP php代码来显示文章和其他 WP 功能?

这是正确的方法吗?

另外一个疑点与上图有关,在这个幻灯片中,图像是固定的,并以静态方式定义:

<!-- 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 -->

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

你能给我一些关于如何做这些事情的想法吗?

谢谢

安德里亚

最佳答案

我不是 100% 确定这会涵盖您的所有问题,但是将 Bootstrap 与 WP 一起使用与使用 WP 创建常规主题相同,您只需包含额外的 Bootstrap 文件,然后在标记中使用相关类。显然还有一个插件可以使用: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/

关于css - 如何创建一个使用 BootStrap 的 WordPress 主题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21166546/

相关文章:

javascript - 表中的动态行添加

html - 水平对齐输入字段

css - 在移动和中型设备中显示更少的类别(列表项)

javascript - 使用 jQuery 检查时间之间的最小间隔是否为 2 小时

wordpress - Woocommerce:订单商品未显示在订单电子邮件中

html - 使用 CSS 将文本添加到顶部栏

javascript - 在模态窗口中显示运行进程的进度

javascript - jQuery .hide() 和 .css 之间的区别 ("display", "none")

javascript - 表单在 Bootstrap 模式表单内提交以执行appendTo html表

html - Bootstrap 全宽设计