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

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

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

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

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

< !DOCTYPE html>< html>< head>< meta charset="UTF-8">< title>< ?php echo get_bloginfo("name"); ?></title>< link rel="stylesheet" href="< ?php bloginfo("wpurl"); ?>/wp-includes/css/dashicons.css"> < link rel="stylesheet" href="< ?php echo get_bloginfo("stylesheet_url"); ?>">< /head>< body>< !-- 头部 --> < header>< div>< div>< ul>< a href="< ?php bloginfo("siteurl"); ?>">< img src="< ?php echo get_option("logo_img") ?: bloginfo("template_url")."/images/logo.png"; ?>" alt=""></a></ul>< ul>< ?php $menu = array( 'container' => false, //最外层标签名'echo' => false, //不让直接输出，而是以一个变量'theme_location' => 'menu_top', //菜单名 'depth' => 0, //菜单深度);echo strip_tags(wp_nav_menu( $menu ), '<a>' );?> </ul></div></div>< div>< div>< ul>< li id="prev">< span class="dashicons-before dashicons-arrow-left-alt"></span></li>< li id="next">< span class="dashicons-before dashicons-arrow-right-alt"></span></li>< li id="brush">< span class="dashicons-before dashicons-image-rotate"></span></li></ul>< ul>< form action="< ?php bloginfo("siteurl"); ?>" method="get">< input type="search" name="s" placeholder="搜索...">< input type="submit" value="搜索"></form> </ul></div></div></header>

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

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

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

<!-- 侧边栏 -->< div>< div class="c_right_0 right_con">< ul>< span class="dashicons-before dashicons-admin-post"></span>最新文章</ul>< ul>< ?php query_posts('posts_per_page=10&caller_get_posts=1&orderby=new'); while (have_posts()) : the_post(); echo '<a href="'.get_the_permalink().'" title="'.get_the_title().'">';echo get_the_title(); echo '</a>';endwhile; wp_reset_query(); ?> </ul></div>< div class="c_right_1 right_con">< ul>< span class="dashicons-before dashicons-admin-post"></span>热门文章</ul> < ?php query_posts('posts_per_page=8&caller_get_posts=1&orderby=comment_count'); while (have_posts()) : the_post(); ?>< ul>< div>< a href="< ?php the_permalink(); ?>">< ?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 '< img src="'.catch_first_image().'" alt="'.$post->post_title.'" width="150" height="150" />';}?></a></div>< div>< li>< a href="< ?php the_permalink(); ?>">< ?php the_title(); ?></a></li>< li>< span class="dashicons-before dashicons-calendar-alt">< ?php the_time("Y年m月d日"); ?> </span>< span class="dashicons-before dashicons-visibility">< ?php get_post_meta($post->ID,"views",true); ?> </span></li></div></ul> < ?php endwhile; wp_reset_query(); ?></div>< div class="c_right_2 right_con">< ul>< span class="dashicons-before dashicons-welcome-widgets-menus"></span>热门标签</ul>< ul> < ?php wp_tag_cloud('number=40&orderby=count&order=DESC&smallest=13&largest=13&unit=px'); ?></ul></div></div>

三、底部模板——footer.php

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

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

<!-- 底部 -->< footer>< div>< ul><?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 ), '<a>' );}?></ul></div>< div>< ul>< li>© <?php echo date("Y"); ?> <?php bloginfo("name"); ?> | <?php echo get_option("beian"); ?> | < a href="<?php echo get_option("map"); ?>">网站地图</a></li>< li>Power by WordPress | Theme <?php echo wp_get_theme(); ?></li></ul></div></footer></body></html>

四、引入公共模板。

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

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

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

头部模板引入：<?php get_header(); ?>

侧边栏模板引入：<?php get_sidebar(); ?>

底部模板引入：<?php get_footer(); ?>

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

头部模板引入：<?php include("header.php"); ?>

侧边栏模板引入：<?php include("sidebar.php"); ?>

底部模板引入：<?php include("footer.php"); ?>

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

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

wordpress编辑框不让span过滤的方法

用过wordpress的都知道，编辑框会自动格式化一些代码，如果需要让那个span不被格式化，需要用到下面代码

将以下代码放到激活主题的 functions.php 文件中便可以解决这个问题.

//ALLOWSPANTAGINWORDPRESSEDITOR
functionoverride_mce_options($initArray)
{
$opts='*[*]';
$initArray['valid_elements']=$opts;
$initArray['extended_valid_elements']=$opts;
return$initArray;
}
add_filter('tiny_mce_before_init','override_mce_options');