wordpress自定义首页布局

WP主题开发08：wordpress主题首页头部模板的修改

测试数据库导入到wordpress本地网站后，我们就可以正式开始wordpress主题动态模板的编写了。在前面的章节中，我们已写好了wordpress主题的静态模板trans，那只是给wordpress主题创建了一个架子，给别人看一个第一印象，但它是没有灵魂的，它是一个死的，没有任何动态。所以，在开发wordpress动态模板时，我们会给trans添加上灵魂，让它拥有让人着魔的动态效果，也就是让trans可以从wordpress数据库中调用到相关的数据，在wordpress前端网站上展示。今天，我们首页来修改wordpress主题的首页的头部文件。

我们先来看一下trans首页头部的静态代码，如下：

< !DOCTYPE html>< html>< head>< meta charset="UTF-8">< title>Document</title>< link rel="stylesheet" href="style.css">< /head>< body><!-- 头部 -->< header>< div>< div>< ul>< a href="/"><img src="./images/index_02.jpg" alt=""></a>< /ul>< ul>< a href="index.html">首页</a >< a href="list.html">列表页</a >< a href="page.html">单页面</a >< a href="single.html">文章页</a >< a href="search.html">搜索页</a >< /ul>< /div>< /div>< div>< div>< ul>< li>< span class="dashicons-before dashicons-arrow-left-alt">< /span>< /li>< li>< span class="dashicons-before dashicons-arrow-right-alt">< /span>< /li>< li>< span class="dashicons-before dashicons-image-rotate">< /span>< /li>< /ul>< ul>< form action="/" method="get">< input type="text" name="search" id="">< input type="submit" value="搜索">< /form>< /ul>< /div>< /div>< /header>

对于头部这部分代码，现在我们需要修改的部分主要有3部分，如下图所示：

好，我们就来对这几个部分的代码做出相应的动态代码修改。wordpress主题静态代码变成动态代码，主要是通过wordpress程序提供的功能函数来实现。

第一部分：网页标题。

也就是< title >标签中的内容，这个网页标题是在浏览器的头部显示的，也是整个网页的标题。修改后的代码如下：

< title>< ?php bloginfo("name"); ?> < /title>

这里调用了bloginfo()函数，这个函数可以调用网站的常规选项，如：标题、副标题、网站URL、wordpress的URL路径、主题路径等等。在后面trans主题修改中，我们会经常用到。这里的bloginfo()函数的参数"name"，是代码网站标题。

第二部分：CSS样式调用。

如果不修改CSS样式的路径地址，按照上面静态代码中的CSS路径，会直接调用网站根目录下的style.css样式表文件。可是，此时的根目录下，是wordpress程序的所有PHP文件，而不是trans主题的文件了。而我们要调用的是trans主题目录下的style.css。所以，我们这里把代码修改成如下：

< link rel="stylesheet" href="< ?php bloginfo("stylesheet_url"); ?>">

这里的参数stylesheet_url，表示调用的是trans主题的style.css样式表文件。

第三部分：修改logo图片地址。

在trans静态模板中，logo图片地址，也是网站根目录下，这里，我们同样要修改它的路径到trans主题目录下，代码如下：

< img src="< ?php bloginfo("template_url")."/images/logo.png"; ?>" alt="" >

这里bloginfo()函数的参数是 template_url ，表示当前主题trans的路径，而logo.png图片在这个trans主题目录下的images目录下。

第四部分：调用顶部导航菜单。

在trans静态代码中，顶部导航菜单是写死的。我们这里要调用wordpress本地网站后台创建的顶部菜单数据。这时，我们也要分2步走。

1、给wordpress主题添加菜单功能。

在trans主题目录下创建一个functions.php文件，这个是主题函数文件。在这个functions.php文件中添加如下代码来添加菜单功能模板：

//菜单register_nav_menus( array('menu_top' => '头部导航','menu_bottom' => '底部导航',) );

这时，我们在后台创建菜单时，就会有“头部导航”和“底部导航”的选项。如下图：

?2、调用wordpress后台创建的菜单。

原trans静态模板的头部菜单的代码如下：

< a href="index.html">首页</a>< a href="list.html">列表页</a>< a href="page.html">单页面</a>< a href="single.html">文章页</a>< a href="search.html">搜索页</a>

现在我们通过wp_nav_menu()这个菜单函数来调用我们在后台创建的菜单，代码如下：

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

添加好trans主题的顶部导航菜单功能后，我们再在wordpress网站后台创建菜单时，勾选“顶部导航”，就可以给wordpress本地网站添加顶部的菜单了。

通过上面的几步，我们为trans主题首页的头部做出了相应的修改，它们不再是死的了，不再是一成不变了。它们会随着wordpress网站后台的修改而做出相应的变化。这就是我们所需要的前后台互动的效果，后台不动，前台就不动。后台一动，前台就立马行动。

WP主题开发09：wordpress主题trans首页左侧主体的修改

在上一节中，我们修改好了wordpress主题trans的首页的状况。本节，我们再来介绍如何修改trans主题首页模板的左侧主体代码。trans主题首页左侧主要展现的是最新文章列表以及分页（如下图）。

?目前，这个首页的内容还是死的，是一个静态的文件，wordpress后台发表新的文章，这里也不会发生变化。我们需要实现的是：在我们发表文章后，这里就要发生相应的变化——我们新发表的文章会展示在这个列表中。还有，我们要实现点击分页按钮时，也能跳到对应的页面。下面，我们就来一步一步地操作。

第一步：左侧删除掉所有的文章列表，只保留一条。

原index.html静态模板的左侧列表中有5个文章，代码如下图：

可以看出，他们的代码都是一样的。这里，我们留下第一条< div class="list">，其余4条全部删除掉。它的代码如下：

< div class="left_bottom">< div class="list">< ul class="list_h">< a href="/">网站索引量一直在下降是什么原因</a>< /ul>< ul class="list_con">< ul class="list_con_left">< a href="/">< img src="./images/index_17.jpg" alt=""></a>< /ul>< ul class="list_con_right">< li>所谓网站索引量，就是指搜索引擎把你的网页内容索取到数据库中。… </li>< li>< span class="dashicons-before dashicons-admin-users">木易</span>< span class="dashicons-before dashicons-calendar-alt">2020年5月21日</span>< span class="dashicons-before dashicons-visibility">274</span>< /li>< /ul>< /ul>< /div>< /div>

第二步：添加wordpress循环语句。

因为，在首页左侧文章列表中，每一个模块的布局是一样的，只是每个模块中的数据不一样而已，所以，我们只需要保留一个模块，然后，循环调用wordpress的文章数据添加到这个模块中。这里，我们先调用wordpress循环语句，让这个模块循环输出。wordpress网站有多少篇文章，它就会循环多少次，当然，这个循环会受到分页的限制，这个分页我们在后面再说。

在< div class="left_bottom">这个标签前添加如下代码：

<?php if ( have_posts() ): //如果有文章while ( have_posts() ) : //就循环所有文章the_post(); //循环一次，就调用一次数据?>

在< div class="left_bottom">的结束标签</div>后面，添加结束循环和结束如果的语句，代码如下：

<?php endwhile; endif; ?>

一定要结束循环，也要结束如果，否则会报错。

第三步：给循环体里的模块添加数据。

循环体里包含的是< div class="list">这个标签，我们需要把每次循环获取到的数据，放到这个< div class="list">里的对应的子孙标签里。代码如下：

< div class="list">< ul class="list_h">< a href="< ?php the_permalink(); ?>">< ?php the_title(); ?></a>< /ul>< ul class="list_con">< ul class="list_con_left">< 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>< /ul>< ul class="list_con_right">< li>< ?php echo mb_substr(strip_tags($post->post_content),0,120,'utf-8'); ?> ... < /li>< li>< span class="dashicons-before dashicons-admin-users">< ?php the_author(); ?>< /span>< span class="dashicons-before dashicons-calendar-alt">< ?php the_time("Y年m月d日"); ?> < /span>< span class="dashicons-before dashicons-visibility">< ?php echo get_post_meta($post->ID, 'views', true); ?> < /span>< /li>< /ul>< /ul>< /div>

代码解释：

the_permalink() => 文章链接the_title() => 文章标题the_post_thumbnail() => 文章特色图片the_author() => 文章作者the_time() => 文章发表的时间get_post_meta() => 获取文章自定义字段$post->post_title => 文章标题$post->post_content => 文章内容

上面这些函数与变量，都是wordpress自带的，我们只需直接拿来用就可以了。

当然，上面的代码中，我们也用到一些PHP语言的原生函数，如：trim()去除空白函数、strip_tags()去除html标签函数、mb_substr()截取中文字符串函数。

另外，上面的代码中，我们还调用了一个在trans主题的functions.php文件中创建的一个函数——catch_first_image()，这个函数的功能是获取文章的第一张图片。因为，有时候，我们的文章可能没有添加特色图片，这时，我们可以调用文章第一张图片来作为文章的缩略图。这个函数的代码如下：

// 获取文章第一张图片function catch_first_image() {global $post, $posts;$first_img = '';ob_start(); ob_end_clean();$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);$first_img = $matches [1] [0];if(empty($first_img)){$random = mt_rand(1, 10);$first_img = get_bloginfo("template_url").'/images/random/'.$random.'.jpg'; //默认多张图片，随机显示//$first_img = "/images/default.jpg"; //默认图片}return $first_img;};

好了，到这里，我们就完成了wordpress主题trans首页左侧文章列表的循环调用数据，这样，trans主题的首页左侧就不会再是死代码了，而是动起来的代码，只要wordpress网站的后台文章有变化，这里就会相应的变化，这也就是wordpress动态模板的魔性所在。嗯，分页部分，我们将在下一节介绍。