简介
本篇文章介绍如何制作header模板,一个网站的开头部分。下图红色部分就是头部部分。难点是搜索框和菜单栏。
图1header制作
一个网页最常见的结构是:
html
head/head
body/body
/html
我们从head部分开始制作起。
1搜索框
我们用下述代码就可以展现搜索框。get_search_form()函数wordpress做了什么动作呢。
divclass=top
?PHPget_search_form();?
/div
首先,wordpress搜索框会去找searchform.php脚本内容。下图是我的searchform.php脚本内容,大家可以自己手敲,这样印象比较深刻。
图2上述内容页面上就展现出了搜索框,用于填写关键词。还有搜索按钮。点击搜索后,会展现搜索内容,搜索内容是如何展现的,wordpress调用的是search.php模板,这个search.php模板后续再介绍。
菜单栏
菜单栏在wordpress后台可以先制作好。我从最简单的说起,只制作一个菜单栏,比较复杂的可用制作多个菜单栏,各个页面调用的菜单栏可能不一样,就如同菜鸟教程,我们之前的截图里就可用看到,首页的菜单栏和具体页面的菜单栏是不一样的。
我们点击后台外观页签下的菜单按钮,制作菜单。我是将3个大类别作为菜单选项,你们可用根据自己的需求制作,比如再加上菜单项(关于我们)。
图3后台菜单栏制作好了,主题如何调用呢。
首先,在functions.php模板文件里增加菜单注册功能。代码如下;
/**
*建立菜单*/
functionBing_register_nav_menus(){
register_nav_menus(array(
header_menu=__(顶部菜单,Bing),
footer_menu=__(页脚菜单,Bing)
));
}
这样我们就注册好了菜单功能,也就是我们可以在模板文件里调用菜单栏了。wordpress调用菜单栏最简单的函数是wp_nav_menu();我们没有加任何参数,则它都有自己默认的参数,大家可用自行网上查看,如果有特殊需求,你们可用加上对应的参数。
nav
?phpwp_nav_menu();?
/nav
加上上述代码后,页面就会展示出我们刚才后台制作的菜单栏了。
3其他头部信息
head里通常还会有其他信息,比如网站title,其他link信息等。大家将下述代码复制到自己的header.php即可。
图4代码里主要有两个wordpress专有的函数。
bloginfo(‘name’):调用网站标题,如果将name替换成url,则调用网站地址url
wp_title():能在不同的页面自动生成不同的标题(比如首页就是网站标题、文章页就是文章标题)
四总结
本篇我们完成了header.php的编写,包括常规的header信息,还有菜单栏,搜索栏的制作等,我们下节课再见