构建一个Bootstrap WordPress主题#2 构建一个Bootstrap主题

让我们从头开始使用我们的WordPress Bootstrap主题：

1.转到 WordPress 根目录下，打开 wp-content -> themes 文件夹
这里只有WP默认的几款主题

WP 主题文件夹

2.在此目录下新建一个叫 wpstrap 的新文件夹

wpstrap文件夹

3.在编辑器中打开 wpstrap 文件夹
4.新建一个 style.css 文件，在文件头部输入以下代码：

/*
 Theme Name: WPstrap
 Author: 埼玉
 Author URI:  
 Description: Simple Bootstrap Theme For Wordpress
 Version: 1.0
 */

5.创建一个 index.php 文件
如果我们去站点后台 外观| 主题，你可以看到我们现在有这个 WPstrap 主题：

WPstrap

6.在主题文件夹中随便放一张 screenshot.jpg 的主题缩略图
7.在index.php文件中加入以下HTML基本标签：

8.接下来，我们需要Bootstrap。 转到https://getbootstrap.com/docs/3.4/然后下载它

bootstrap 3.4

9. 打开下载的ZIP文件和我们的主题文件夹。在 wpstrap 文件夹中创建一个css文件夹，然后放入 bootstrap.css 文件；同理在创建一个 js
文件夹，然后放入bootstrap.js 文件。

10. 回到index.php文件并包含几个 link 标签，添加bootstrap.css文件。 接下来，我们还要确保包含主样式表。 为此，Bootstrap为我们提供了一个我们可以使用的功能。 我们将添加样式表然后再添加href。 我们还可以添加一些php标签，添加bloginfo，这里我们只放入stylesheet_url。 它现在将包含所有系统样式表。

11. 接下来创建一个导航栏
在Bootstrap网站上，我们转到 Components 然后 navbar ，复制所有的事例代码，将它粘贴到 index.php 文件的body部分。

事例代码

12.保存代码，到站点后台激活主题，然后到前端重载页面

页面出错

出现这个错误的原因是WordPress没有找到 bootstrap.css 文件，查看前端页面源码， 你可以看到前端正在查看/ css / bootstrap，但是这个文件实际上在themes文件夹中：

wp-07.png

13.让我们回到index.php修复这个错误，找到 link 标签升级其中的代码，如下：

保存代码，刷新前端页面，导航栏出现了

导航栏

14.要稍微更改导航栏，我们将缩进 nav 标记。我们现在将去掉相当多的代码。 首先，我们将摆脱 fluid; 我们希望它只是容器：

15.接下来删除一些不需要的代码部分
对于Brand，让我们稍微改变一下代码。 我们希望它能反映出WordPress中的网站名称。 我们将添加<？php bloginfo（）; ？>然后传递名字。 对于href，我们将添加<？php bloginfo（）; ？> 链接并输入网址

修改后的完整 nav 部分代码如下：

  

    
    

      
        Toggle navigation
        
        
        
      
      
    

    
    

      
      

        
      
      
    

  

回到前端刷新页面

基本样式

你可以看到它是非常基本的样式。 我们只是拥有自己的品牌，我们稍后将添加 walker-nav 或 nav-walker 类; 但是，让我们继续添加一些基本的HTML

16. 我们将在结束标记的正下方创建一个< div >标签，并为其提供一个container类，并添加索引。我们再添加一行，因为我们将使用Bootstrap的网格系统。 在 row 类中，我们将使用 col-md-8 添加一个列，因此它将是一个8列div，我们还将有一个4列div，它将是侧边栏

因此，在8-column div中，我们将使用class =“panel”和panel-default添加一个面板

    

        

             
Blog Posts
        
        

              
                 
                
             
        
    

接下来，我们将添加两列，一列用于图像，另一列用于所有数据。 所以让我们添加一个名为row的类，然后我们将添加一个div类，其值为col-md-3。 接下来我们将在此处添加 IMAGE HERE，然后使用col-md-9添加9列。 然后我们将使用< h2 >添加the_title（）：

     

          
IMAGE HERE
          

               

          
     

保存代码，刷新前端页面：

页面样式

正如您所看到的，我们有3-column div，图像将在那里，然后是9-column 用来存放内容。 我们将回过头来添加所有内容，但接下来我们将添加侧边栏代码。