WP主题研发08：wordpress主题首页头部模板的修改-天涯论坛

m5k1umn 发表于 2024-10-6 10:28:06

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

测试数据库导入到wordpress本地网站后，咱们就能够正式起始wordpress主题动态模板的编写了。在前面的章节中，咱们已写好了wordpress主题的静态模板trans，那只是给wordpress主题创建了一个架子，给别人看一个第1印象，但它是无灵魂的，它是一个死的，无任何动态。因此，在开发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>< /li>< li>< /li>< li>< /li>< /ul>< ul>< form action="/" method="get">< input type="text" name="search" id="">< input type="submit" value="搜索">< /form>< /ul>< /div>< /div>< /header>
针对头部这部分代码，此刻咱们需要修改的部分重点有3部分，如下图所示：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/f13939b9082b46628494b6e60cd5b4f5~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728358616&x-signature=%2BTzJi%2BDxUSqEQeZURBDncRemCJA%3D" style="width: 50%; margin-bottom: 20px;"></div>
好，咱们就来对这几个部分的代码做出相应的动态代码修改。wordpress主题静态代码变成动态代码，重点是经过wordpress程序供给的功能函数来实现。
<h3 style="color: black; text-align: left; margin-bottom: 10px;">第1部分：网页标题。</h3>
亦便是< title >标签中的内容，这个网页标题是在浏览器的头部表示的，亦是全部网页的标题。修改后的代码如下：
< title>< ?php bloginfo("name"); ?> < /title>
这儿调用了bloginfo()函数，这个函数可以调用网站的常规选项，如：标题、副标题、网站URL、wordpress的URL路径、主题路径等等。在后面trans主题修改中，咱们会经常用到。这儿的bloginfo()函数的参数"name"，是代码网站标题。
<h3 style="color: black; text-align: left; margin-bottom: 10px;">第二部分：CSS样式调用。</h3>
倘若不修改CSS样式的路径位置，根据上面静态代码中的CSS路径，会直接调用网站根目录下的style.css样式表文件。可是，此时的根目录下，是wordpress程序的所有PHP文件，而不是trans主题的文件了。而咱们要调用的是trans主题目录下的style.css。因此，咱们这儿把代码修改成如下：
< link rel="stylesheet" href="< ?php bloginfo("stylesheet_url"); ?>">
这儿的参数stylesheet_url，暗示调用的是trans主题的style.css样式表文件。
<h3 style="color: black; text-align: left; margin-bottom: 10px;">第三部分：修改logo照片位置。</h3>
在trans静态模板中，logo照片位置，亦是网站根目录下，这儿，咱们一样要修改它的路径到trans主题目录下，代码如下：
< img src="< ?php bloginfo("template_url")."/images/logo.png"; ?>" alt="" >
这儿bloginfo()函数的参数是 template_url ，暗示当前主题trans的路径，而logo.png照片在这个trans主题目录下的images目录下。
<h3 style="color: black; text-align: left; margin-bottom: 10px;">第四部分：调用顶部导航菜单。</h3>
在trans静态代码中，顶部导航菜单是写死的。咱们这儿要调用wordpress本地网站后台创建的顶部菜单数据。此时，咱们亦要分2步走。
1、给wordpress主题添加菜单功能。
在trans主题目录下创建一个functions.php文件，这个是主题函数文件。在这个functions.php文件中添加如下代码来添加菜单功能模板：
//菜单register_nav_menus( array(menu_top => 头部导航,menu_bottom => 底部导航,) );
此时，咱们在后台创建菜单时，就会有“头部导航”和“底部导航”的选项。如下图：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/e1b5467b190c43189e297840a7952b98~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728358616&x-signature=Y6ly0WGmMulb9EpTRNmVrftIKMI%3D" style="width: 50%; margin-bottom: 20px;"></div>
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网站后台的修改而做出相应的变化。这便是咱们所需要的前后台互动的效果，后台不动，前台就不动。后台一动，前台就马上行动。

wrjc1hod 发表于 2024-10-20 07:25:35

你的见解真是独到，让我受益匪浅。

页: [1]

天涯论坛's Archiver

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