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

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

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

< !DOCTYPE html>
< html lang="en">
< head>
< meta charset="UTF-8">
< title>Document
< link rel="stylesheet" href="style.css">
< /head>
< body>

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

< /ul>
< /div>
< /div>
< div class="search">
< div class="search_head">
< 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 href="list.html">列表页
< a href="page.html">单页面
< a href="single.html">文章页
< a href="search.html">搜索页

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

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

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

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