WordPress主题制作全过程(5):制作header.php。

我介绍了WordPress主题制作的全过程(四):一个小测试。本文继续为大家带来WordPress主题制作全过程(五):制作header.php。来看看吧~

可以尝试用文本编辑器打开WordPress主题制作全过程(3): html静态模板制作下载。HTML文件。不知道大家有没有发现他们脑袋里的代码很像？事实上，我们可以提取这部分类似的代码，并把它放到一个单独的文件header.php。当每个页面都要用到这部分代码的时候，可以用php的include()或者WordPress的get_header()来收录，省去了在每个页面写这部分代码，也可以达到彻底改的目的。

再次提醒:如果你不打算开始写代码，就不要看这一系列教程，对你没什么帮助！

然后我们创建了上次的主题目录wp-content\themes\Aurelius，在这个目录下新建了一个php文件header.php。我们从index.php提取了标题代码，并复制粘贴到header.php。以下代码是目前header.php所有的代码(当然不同主题的表头代码是不一样的，您可以在自己的实际项目中自行决定):

& lt！DOCTYPE html PUBLIC & quot-//W3C//DTD XHTML 1.0过渡版//EN & quot；"http://www . w3 . org/TR/XHTML 1/DTD/XHTML transitional . DTD & quot；& gt& lthtml xmlns = & quothttp://www.w3.org/1999/xhtml" & gt；& lt头部轮廓= & quothttp://gmpg.org/xfn/11" & gt；& ltmeta http-equiv = & quot；内容类型& quotcontent = & quot文本/html；charset = utf-8 & quot；/& gt；& lttitle & gt奥勒留|博客& lt/title & gt；& lt！-样式表-& gt；& ltlink rel = & quot样式表& quothref = & quot。/style . CSS & quot；type = & quottext/CSS & quot；media = & quot屏幕& quot/& gt；& lt/head & gt；& ltbody & gt& ltdiv id = & quot包装& quotclass = & quotcontainer _ 12 clearfix & quot& gt& lt！-文字标志-& gt；& lth1 id = & quot徽标& quotclass = & quot网格_ 4 & quot& gt奥勒留& lt/h1 & gt；& lt！-导航菜单->；& ltul id = & quot导航& quotclass = & quotgrid _ 8 & quot& gt& lt李& gt& lta href = & quotcontact.html & quot& gt& ltspan class = & quotmeta & quot& gt取得联系& lt/span&gt。& ltbr/>；联系我们& lt/a & gt；& lt/李& gt& lt李& gt& lta href = & quotblog.html & quotclass = & quot当前& quot& gt& ltspan class = & quotmeta & quot& gt最新消息& lt/span&gt。& ltbr/>；博客& lt/a & gt；& lt/李& gt& lt李& gt& lta href = & quotindex.html & quot& gt& ltspan class = & quotmeta & quot& gt主页& lt/span&gt。& ltbr/>；Home & lt/a & gt；& lt/李& gt& lt/ul & gt；& ltdiv class = & quothr grid _ 12 clearfix & quot& gt& lt/div & gt；& lt！-标题行-& gt；& lth2 class = & quotgrid_12标题clearfix & quot& gt我们的& ltspan & gt博客& lt/span&gt。，让您了解我们的最新消息。& lt/H2 & gt；& ltdiv class = & quothr grid _ 12 clearfix & quot& gt& lt/div & gt；用文本编辑器打开width.php、archive.php、contact.php、full_width.php、page.php和single.php，删除上面类似的代码，改为:

& lt？PHP get _ header()；？& gt好了，现在打开你的测试博客主页，看看我们做的主题还能不能正常工作。答案是肯定的，和以前差不多，但还是很乱。Get_header()相当于将header.php中的代码复制到当前的php文件中。接下来，我们将详细讨论header.php的动态内容。Header.php将包括在所有模板页面(主页，分类页面，网页，标签页等)。)，所以header.php的代码应该是动态的，适合不同的页面，所以需要PHP代码，而不是纯HTML。让我们一起来修改header.php:

1.变化

& lttitle & gt& lt？PHP if(is _ home()){ bloginfo(& # 39；姓名& # 39；);回声& quot-& quot；；bloginfo(& # 39；描述& # 39；);} else if(is _ category()){ single _ cat _ title()；回声& quot-& quot；；bloginfo(& # 39；姓名& # 39；);} else if(is _ single()| | is _ page()){ single _ post _ title()；} else if(is _ search()){ echo & quot；搜索结果”；回声& quot-& quot；；bloginfo(& # 39；姓名& # 39；);} else if(is _ 404()){ echo & # 39；找不到页面！'；} else { WP _ title(& # 39；'，真)；} ?& gt& lt/title & gt；上面添加的php代码使用了条件判断，不同的页面使用不同的标题。在这里，我将解释这些条件标签。

Is_home():当前页面为主页时返回trueis_category():当前页面为分类页面时返回trueis_single():当前页面为单页时返回trueis_page():当前页面为单页时返回true。到目前为止，你可能对这些条件判断标签还没有很深的理解，你可能也不知道这些标签到底会对主题产生怎样的影响。随着我们教程的发展，如果不喜欢上面标题的写法，可以在网上搜索相关代码:WordPress SEO title。

2、更改样式表style.css路径在此之前，你看到的首页是混乱的，因为css样式还没有加载。现在我们一起来添加样式。您可以在header.php中找到这段代码:

& ltlink rel = & quot样式表& quothref = & quot。/style . CSS & quot；type = & quottext/CSS & quot；media = & quot屏幕& quot/& gt；聪明的你可能会问:wp-content\themes\Aurelius目录里不是已经有style.css了吗？那为什么header.php不加载css呢？结果你可以看到页面很乱，可以确定没有加载到css里。因为这是WordPress的主题，需要WordPress的主程序调用，经过层层解析后才能显示你的博客，而不是简单的html静态网页文件。正确的更改:

& ltlink rel = & quot样式表& quothref = & quot& lt？PHP bloginfo(& # 39；样式表_ url & # 39);？& gt"type = & quottext/CSS & quot；media = & quot屏幕& quot/& gt；bloginfo(& # 39；样式表_ url & # 39)输出的是你的主题css文件的绝对URL，比如http://localhost/WP/WP-content/themes/au relius/style.css . WordPress程序会自动识别你的WordPress安装地址和当前启用的主题，并自动输出这个style . CSS链接。现在你可以试着改变它，然后刷新你的博客主页，检查页面的源代码。style.css的链接是你的吗？页面能正常显示吗？

如果你的css文件不是style.css，不在主题根目录下怎么办？我们可以使用

但是还是有少数图片的路径不对，所以无法显示。现在让我们用文本编辑器打开width.php、archive.php、contact.php、full_width.php、page.php和single.php，给这些图片添加正确的URL，搜索代码，把所有:src = & quotImages/，替换为src = & quot& lt？PHP bloginfo(& # 39；template _ url & # 39);？& gt/images/.现在刷新你的主页，看看文章的缩略图是否能正常显示。& lt？PHP bloginfo(& # 39；template _ url & # 39);？& gt用于输出主题目录的URL。

3、添加pingback至于什么是pingback，你可以在搜索引擎中输入关键词:WordPress pingback就可以得到你想要的答案。如果你需要这个功能，你可以在

& ltlink rel = & quotpingback & quothref = & quot& lt？PHP bloginfo(& # 39；pingback _ url & # 39);？& gt"/& gt；4.在header.php更改博客名称和描述，下面两行代码用于显示博客名称和描述:

& lth1 id = & quot徽标& quotclass = & quot网格_ 4 & quot& gt奥勒留& lt/h1 & gt；& lth2 class = & quotgrid_12标题clearfix & quot& gt我们的& ltspan & gt博客& lt/span&gt。，让您了解我们的最新消息。& lt/H2 & gt；以上是静态代码，现在进行以下更改:

& lth1 id = & quot徽标& quotclass = & quot网格_ 4 & quot& gt& lta href = & quot& lt？PHP echo get _ option(& # 39；首页& # 39；);？& gt/& quot；& gt& lt？PHP bloginfo(& # 39；姓名& # 39；);？& gt& lt/a & gt；& lt/h1 & gt；& lth2 class = & quotgrid_12标题clearfix & quot& gt& lt？PHP bloginfo(& # 39；描述& # 39；);？& gt& lt/H2 & gt；现在你在博客主页上看到的是你的博客名称和描述，logo也是你博客主页的链接。这里就说说这些php代码的作用吧。

& lt？PHP echo get _ option(& # 39；首页& # 39；);？& gt输出你博客的主页地址

5.添加订阅源链接。我相信每一个发布的WordPress博客主题都会提供feed订阅。当然，我们的主题也应该提供这样的功能。在</head & gt；在之前添加以下代码:

& ltlink rel = & quot替代& quottype = & quot应用程序/RSS+XML & quot；title = & quotRSS 2.0-所有文章" href = & quot& lt？PHP echo get _ bloginfo(& # 39；rss2 _ url & # 39);？& gt"/& gt；& ltlink rel = & quot替代& quottype = & quot应用程序/RSS+XML & quot；title = & quotRSS 2.0-所有评论" href = & quot& lt？PHP bloginfo(& # 39；comments _ rss2 _ url & # 39);？& gt"/& gt；6.添加wp_head有些插件需要执行一些类比如在页面头部添加一些js或者css动作。要让这些插件正常工作，让你的主题更兼容，就要添加wp_head()函数。打开header.php，在

& lt？PHP WP _ head()；？& gt现在打开你的博客主页，检查源代码。

& ltlink rel = & quotEditURI & quottype = & quot应用程序/RSD+XML & quot；title = & quotRSD&quothref = & quothttp://ludou.co.tv/blog/xmlrpc.php? RSD & quot；/& gt；& ltlink rel = & quotwlwmanifest & quottype = & quotapplication/wlwmanifest+XML & quot；href = & quothttp://ludou.co.tv/blog/wp-includes/wlwmanifest.xml"/>；& ltlink rel = & # 39index & # 39href = & # 39http://ludou . co . TV & # 39；/& gt；& ltmeta name = & quot发电机& quotcontent = & quotWordPress 2 . 9 . 2 & quot；/& gt；7.添加描述和关键词关于添加网页描述和关键词，可以看我之前写的文章:WordPress体验(1)独立描述和关键词。

8.显示菜单栏目前菜单栏里有几个菜单:首页、博客、联系我们，但这些都是静态内容，不是你博客上的页面。现在让我们将菜单栏更改为您的菜单。这里，菜单栏中只列出了页面。当然，你也可以放置一个类别。来吧，根据你的喜好，把header.php放进去:

& ltul id = & quot导航& quotclass = & quotgrid _ 8 & quot& gt& lt李& gt& lta href = & quotcontact.html & quot& gt& ltspan class = & quotmeta & quot& gt取得联系& lt/span&gt。& ltbr/>；联系我们& lt/a & gt；& lt/李& gt& lt李& gt& lta href = & quotblog.html & quotclass = & quot当前& quot& gt& ltspan class = & quotmeta & quot& gt最新消息& lt/span&gt。& ltbr/>；博客& lt/a & gt；& lt/李& gt& lt李& gt& lta href = & quotindex.html & quot& gt& ltspan class = & quotmeta & quot& gt主页& lt/span&gt。& ltbr/>；Home & lt/a & gt；& lt/李& gt& lt/ul & gt；更改为:

& ltul id = & quot导航& quotclass = & quotgrid _ 8 & quot& gt& lt？PHP WP _ list _ pages(& # 39；深度= 1 & amp李= 0 & ampsort _ column = menu _ order & # 39);？& gt& lt李；？PHP if(is _ home()){ echo & # 39；class = & quot当前& quot'；} ?& gt& gt& lta title = & quot& lt？PHP bloginfo(& # 39；姓名& # 39；);？& gt"href = & quot& lt？PHP echo get _ option(& # 39；首页& # 39；);？& gt/& quot；& gt主页

WordPress制作主题导航菜单的方法(1)

WordPress制作主题导航菜单的方法(2)

9.刷新缓存于

就这样，这个练习结束了！现在总结一下今天提到的一些比较重要的知识点:

& lt？PHP get _ header()；？& gt从当前主题文件夹来看，有几个条件判断标签如header.php文件is_home()、is_single()、is_category()<？PHP bloginfo(& # 39；样式表_ url & # 39);？& gt输出主题文件夹中style.css文件的路径

推荐学习:WordPress教程

以上是WordPress主题制作的全过程(五):制作header.php的详细内容，请多关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 如何清除WordPress缓存？（WordPress消耗内存）
• 如果将图像上传到 WordPress 网站时出现 HTTP 错误，我该怎么办？
• 如何解决WordPress媒体库图片加载错误（WordPress媒体库文件路径）
• 如果您的WordPress站点无法更新怎么办（如何设置WordPress站点地址）
• 如何防止独立WordPress外贸网站被搜索引擎索引

本文由主机参考刊发，转载请注明：WordPress主题制作全过程(5):制作header.php。 https://zhujicankao.com/93222.html