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

wufei123 发布于 2024-08-22 阅读(10)

测试数据库导入到wordpress本地网站后,我们就可以正式开始wordpress主题动态模板的编写了在前面的章节中,我们已写好了wordpress主题的静态模板trans,那只是给wordpress主题创建了一个架子,给别人看一个第一印象,但它是没有灵魂的,它是一个死的,没有任何动态。

所以,在开发wordpress动态模板时,我们会给trans添加上灵魂,让它拥有让人着魔的动态效果,也就是让trans可以从wordpress数据库中调用到相关的数据,在wordpress前端网站上展示。

今天,我们首页来修改wordpress主题的首页的头部文件我们先来看一下trans首页头部的静态代码,如下:Document首页列表页单页面文章页搜索页

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

好,我们就来对这几个部分的代码做出相应的动态代码修改wordpress主题静态代码变成动态代码,主要是通过wordpress程序提供的功能函数来实现第一部分:网页标题也就是标签中的内容,这个网页标题是在浏览器的头部显示的,也是整个网页的标题。

修改后的代码如下: 这里调用了bloginfo()函数,这个函数可以调用网站的常规选项,如:标题、副标题、网站URL、wordpress的URL路径、主题路径等等。

在后面trans主题修改中,我们会经常用到这里的bloginfo()函数的参数"name",是代码网站标题第二部分:CSS样式调用如果不修改CSS样式的路径地址,按照上面静态代码中的CSS路径,会直接调用网站根目录下的style.css样式表文件。

可是,此时的根目录下,是wordpress程序的所有PHP文件,而不是trans主题的文件了而我们要调用的是trans主题目录下的style.css所以,我们这里把代码修改成如下:< link rel="stylesheet" href="">

这里的参数stylesheet_url,表示调用的是trans主题的style.css样式表文件第三部分:修改logo图片地址在trans静态模板中,logo图片地址,也是网站根目录下,这里,我们同样要修改它的路径到trans主题目录下,代码如下:。

< img src="" 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静态模板的头部菜单的代码如下:首页列表页单页面文章页搜索页。

现在我们通过wp_nav_menu()这个菜单函数来调用我们在后台创建的菜单,代码如下: false, //最外层标签名echo => false, //不让直接输出,而是以一个变量theme_location => menu_top, //菜单名 depth => 0, //菜单深度);echo strip_tags(wp_nav_menu( $menu ), );? >

添加好trans主题的顶部导航菜单功能后,我们再在wordpress网站后台创建菜单时,勾选“顶部导航”,就可以给wordpress本地网站添加顶部的菜单了通过上面的几步,我们为trans主题首页的头部做出了相应的修改,它们不再是死的了,不再是一成不变了。

它们会随着wordpress网站后台的修改而做出相应的变化这就是我们所需要的前后台互动的效果,后台不动,前台就不动后台一动,前台就立马行动

亲爱的读者们,感谢您花时间阅读本文。如果您对本文有任何疑问或建议,请随时联系我。我非常乐意与您交流。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。