WP主题开发13：拆分trans主题首页模板，创建公共模板

通过前面几节课的操作，我们为WordPress主题trans的首页模板实现了动态代码的调用，网站前端的数据与wordpress数据库的数据正式挂勾上。在接下来的课程中，我们还要修改trans主题的文章列表页、文章详情页、搜索页等等。这个时候，如果你够细心的话，会发现一个问题：trans主题的这些模板页面的头部、右侧边栏、底部的数据都是一样的。也就是说，我们每创建一个动态模板之时，都要重新修改一下这几个部分的代码。这时，我们可能会想到，既然代码都是一样的，为什么不能把这几部分的代码做成几个公共的模板，供其它模板直接调用？这就是我们今天所要探讨的问题——拆分WordPress主题trans的首页动态模板，做成几个公共模板：头部模板、右侧边栏模板、底部模板。下面，我们就一个一个地来实现。

一、头部模板——header.php。

trans主题首页模板的头部，从所有前端页面展示效果看，从最上端到搜索框那里就是首页的头部，发下图：

我们在trans主题目录下创建一个header.php，然后在trans主题首页动态模板中找到头部的所有代码。首页头部的可视化代码是包含在< header>标签里的，这个找起来不难。我们还要把网页代码的头部< head>里的代码也要找出来。简单地说，就是从网页代码的最顶部，一直到这个结束标签，把这段代码剪切下来，粘贴到header.php文件中。代码如下：

< html lang="en">
< head>
< meta charset="UTF-8">
< title>
< link rel="stylesheet" href="/wp-includes/css/dashicons.css">
< link rel="stylesheet" href="">
< /head>
< body>

< header>
< div class="header">
< div class="head">
< ul class="logo">
< a href="">
< img src="" alt="">


< ul>
<?php
$menu = array(
'container' => false, //最外层标签名
'echo' => false, //不让直接输出，而是以一个变量
'theme_location' => 'menu_top', //菜单名
'depth' => 0, //菜单深度
);
echo strip_tags(wp_nav_menu( $menu ), '' );
?>



< div class="search">
< div class="search_head">
< ul>
< li id="prev">< span class="dashicons-before dashicons-arrow-left-alt">
< li id="next">< span class="dashicons-before dashicons-arrow-right-alt">
< li id="brush">< span class="dashicons-before dashicons-image-rotate">

< ul>
< form action="" method="get">
< input type="search" name="s" placeholder="搜索...">
< input type="submit" value="搜索">

二、右侧边栏模板——sidebar.php

trans主题首页模板的右侧边栏，如下图所示：

在trans主题目录下创建一个sidebar.php文件，然后，从首页模板index.php的代码中找到右侧边栏的代码。右侧边栏的所有代码包含在< div class="c_right">这对div中，我们把整个< div class="c_right">的所有代码剪切下来，粘贴到sidebar.php文件中，代码如下：

< div class="c_right">
< div class="c_right_0 right_con">
< ul class="c_right_t">
< span class="dashicons-before dashicons-admin-post">最新文章

< ul class="c_right_article">
<?php
query_posts('posts_per_page=10&caller_get_posts=1&orderby=new');
while (have_posts()) : the_post();
echo '';
echo get_the_title();
echo '';
endwhile;
wp_reset_query();
?>


< div class="c_right_1 right_con">
< ul class="c_right_t">
< span class="dashicons-before dashicons-admin-post">热门文章

<?php
query_posts('posts_per_page=8&caller_get_posts=1&orderby=comment_count');
while (have_posts()) : the_post();
?>
< ul class="c_right_con">
< div class="hot_left">
< a href="">
<?php
if(has_post_thumbnail()) { //如果有特色图片，就调用特色图片
the_post_thumbnail(
'thumbnail' ,
array(
'alt' => trim(strip_tags( $post->post_title )),
'title' => trim(strip_tags( $post->post_title )),
'class' => 'home-thumb'
)
);
}else { //否则调用文章第一张图片
echo '';
}
?>


< div class="hot_right">
< li>< a href="">
< li>
< span class="dashicons-before dashicons-calendar-alt">


< span class="dashicons-before dashicons-visibility">
ID,"views",true); ?>






< div class="c_right_2 right_con">
< ul class="c_right_t">
< span class="dashicons-before dashicons-welcome-widgets-menus">热门标签

< ul class="c_right_tag">

三、底部模板——footer.php

trans主题首页模板的底部效果如下图：

在trans主题目录下创建一个footer.php文件，然后在首页index.php找到底部的代码，底部是包含在< footer>这个标签里的。我们从< footer>开始，一直剪切到index.php模板的代码结尾，粘贴到footer.php文件中，代码如下：

< footer>
< div class="foot_menu">
< ul class="foot_menu_list">
<?php
if(is_home()){ //如果是首页，就调用友情链接
wp_list_bookmarks('title_li=&before=&after=');
}else{ //否则就调用底部导航
$menu = array(
'container' => false, //最外层标签名
'echo' => false, //不让直接输出，而是以一个变量
'theme_location' => 'menu_bottom', //菜单名
'depth' => 0, //菜单深度
);
echo strip_tags(wp_nav_menu( $menu ), '' );
}
?>


< div class="foot">
< ul class="foot_list">
< li>© | | < a href="">网站地图
< li>Power by WordPress | Theme

四、引入公共模板。

通过上面三步的操作，我们就把index.php模板的头部代码、右侧边栏代码、底部代码给独立出来了，做成了公共的模板：header.php、sidebar.php、footer.php 。在index.php模板中，我们剪切掉了这几部分，只剩下了左侧边主体列表的。这时，我们要做的就是，在index.php模板中引入这几个公共模板。

方法一：使用wordpress提供的函数来引入。

wordpress已经为我们提供了这几个公共模板的引入方法：

头部模板引入：
侧边栏模板引入：
底部模板引入：

方法二：通过include()这个PHP原生函数来引入。

头部模板引入：
侧边栏模板引入：
底部模板引入：

include()方法可以用来引入任何php文件，而wordpress提供的这几个函数就有所限制，只能引入指定名字的PHP文件。

能过上面的操作，我们就完成了wordpress主题trans首页模板的切割，把它切割成4个模板：index.php首页、header.php头部模板、sidebar.php侧边栏模板、footer.php底部模板。这样的好处是，以后，我们创建其它trans主题模板时，就不需要再写头部、侧边栏、底部的代码了，后期代码修改和维护也更加方便。