教你如何用Bootstrap构建WordPress主题

orangeostrich 发布于2年前

开始

开始前还有一点事情需要你去做:
1.安装WordPress
2.下载并解压缩 Bootstrap
3.安装主题测试驱动插件
一旦你准备好这些事情,在WordPress文件目录中打开wp-content > themes

文件结构

多数WordPress主题包含以下文件,你通常看到的要比这些文件多,但我们将要用到这些文件:

index.php

引入header和footer到index.php页面

我们要使用的这两个标签是get_header()和get_footer()。它们定义在WordPress函数中,功能是为了找到 header.php和footer.php文件并且在页面的头部和尾部包含它们。WordPress可以这样做是因为我们命名我们的文件为 header.php和footer.php。如果我们命名这些文件为my-header.php和my-footer.php将不能工作。
现在我们的index.php文件变为:

<?php get_header(); ?>

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div>
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a>Learn more &raquo;</a></p>
      </div>

      <!-- Example row of columns -->
      <div>
        <div>
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a href="#">View details &raquo;</a></p>
        </div>
        <div>
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a href="#">View details &raquo;</a></p>
       </div>
        <div>
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a href="#">View details &raquo;</a></p>
        </div>
      </div>

<?php get_footer(); ?>

你可能会想知道我们为什么那样做?原因是后续我们将要创建多个要引入我们header和footer代码的页面,如果我们只让所有的这些页面保留 header和footer的HTML并且想要在header 或 footer中改变些东西, 我们将不得不更新所有页面的HTML内容。使用“嵌入” 或 “包含” 方法允许我们在一个地方就可修改header和footer代码并且自动会在所有页面生效,这和外链CSS文件而不是在每个页面的顶部包含CSS有点类似。

header.php

将页面顶部被包含的html剪切并且粘贴到header.php文件中。

footer.php

将页面底部的html剪切并且粘贴到footer.php文件中。

sidebar.php

style.css(不能够为其命名为其它任何名称否则我们的主题将不能工作)

screenshot.png(将会在WordPress管理区显示主题的图片,大小300*225px)

style.css

在文件头部添加注释:

Theme Name: WP Bootstrap
Theme URI: http://teamtreehouse.com/wordpress-bootstrap-theme-tutorial
Description: A demo theme built to accompany the Treehouse blog post <a href="http://teamtreehouse.com/wordpress-bootstrap-theme-tutorial">How to Build a WordPress Theme with Bootstrap</a>.
Author: Zac Gordon
Author URI: http://teamtreehouse.com/
Version: 1.0
Tags: responsive, white, bootstrap
License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
License URI: http://creativecommons.org/licenses/by-sa/3.0/
This simple theme was built using the example Bootstrap theme "Basic marketing site" found on the Bootstrap web site http://twitter.github.com/bootstrap/examples/hero.html

登录到控制面板

登录到控制面板并且到外观>主题。可应该可以看到“WP Bootstrap”做为主题中的一个被列出来。
点击WP Bootstrap主题下面的激活设置它为网站的当前主题。
注意: 如果你正在使用一个线上的网站并且不想让人们看到这个主题正在开发中,确保安装并激活 Theme Test Drive plugin
当它被激活后,访问你的网站你可以看到几乎没有排版过的页面。是的它很干净,因为在当前站点没有一个CSS工作,所以下一步我们开始将静态文件转换到正在工作的WordPress主题中。

查看原文: 教你如何用Bootstrap构建WordPress主题

  • blacktiger
  • crazypanda
  • brownpanda