wordpress仿站教程#5:制作header.php
上一节中,我们学习了对目标网站进行了本地化并拆分,这一节主要讲解如何制作header.php页面,在第二节WordPress仿站教程 #2:模板文件和模板我们介绍了网站所有的header.php
页面都是共用的同一个文件,所以只要做一个页面就可以了。
打开拆分的header.php,如:
- <!DOCTYPE html>
- <html itemscope="itemscope" itemtype="http://schema.org/WebPage" lang="zh-CN">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <meta charset="UTF-8">
- <meta http-equiv="x-dns-prefetch-control" content="on">
- <meta http-equiv="Cache-Control" content="no-siteapp">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="renderer" content="webkit">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.5">
- <meta name="applicable-device" content="pc,mobile">
- <meta name="apple-mobile-web-app-title" content="有间客栈">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <title>有间客栈-优等的心,不必华丽,但必须坚强。</title>
- <meta name="description" content="一个专注互联网产品,探讨计算机应用,工业自动化控制,分享学习与生活的技术博客.">
- <meta name="keywords" content="网络,软件,博客,WordPress,工控,生活,手机,设计,自建房,信息库,PLC,变频器,有间客栈,电工,自动化,机电维修,随之长风,itxjob">
- <link rel="alternate" type="application/rss+xml" title="有间客栈" href="https://mehuts.com/feed">
- <link rel="stylesheet" href="demo/style.css">
- <link rel="shortcut icon" href="https://mehuts.com/favicon.ico">
- <!--[if IE]> <link rel="stylesheet" href="https://mehuts.com/wp-content/themes/code/ie.css" /> <script> document.createElement('article'); document.createElement('time'); document.createElement('nav'); </script> <![endif]--><script src="demo/push.js"></script><script src="demo/hm.js"></script><script>var _hmt = _hmt || [];(function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?6a8d923352d961a7f112904f13f6219a"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script>
- </head>
- <body>
- <div id="header">
- <div class="wrapper"> <span class="logo"><a href="https://mehuts.com/" title="有间客栈"> 有间客栈 </a></span>
- <div id="searchbox">
- <form action="https://mehuts.com/" id="searchform" method="get">
- <input class="textfield" id="s" name="s" maxlength="150" value="关键字" onfocus="this.value = (this.value == '关键字') ? '' : this.value;" onblur="this.value = (this.value == '') ? '关键字' : this.value;" type="text">
- <input name="sa" class="button" value="搜索" type="submit">
- </form>
- </div>
- <nav class="toggle-nav">
- <ul>
- <li><a href="javascript:void(0)" class="toggle_main">导航</a></li>
- <li><a href="javascript:void(0)" class="toggle_search">搜索</a></li>
- </ul>
- </nav>
- <nav id="main-nav">
- <ul id="nav-all">
- <li><a title="有间客栈的主页" class="current" href="https://mehuts.com/">博客主页</a></li>
- <li class="cat-item cat-item-2 "><a href="https://mehuts.com/category/gkong" title="安全无小事,珍爱生命。">工控家园</a></li>
- <li class="cat-item cat-item-3 "><a href="https://mehuts.com/category/life" title="生活菜米油盐">生活杂谈</a></li>
- <li class="cat-item cat-item-4 "><a href="https://mehuts.com/category/internet" title="网站架设教程服务">网络教程</a></li>
- <li class="page-item cat-item-13 "><a href="https://mehuts.com/xxko-sitemap" title="所有日志列表">日志存档</a></li>
- <li class="page-item cat-item-10 "><a href="https://mehuts.com/about" title="网站简介">关于本站</a></li>
- <li class="page-item cat-item-11 "><a href="https://mehuts.com/gbook" title="留言本站">给我留言</a></li>
- <li class="current-cat-ask"> <a title="网站投稿" href="https://mehuts.com/tougao">在线投稿</a></li>
- </ul>
- </nav>
- </div>
- <div class="fixed"></div>
- </div>
分析上面代码不难发现,header主要包含网站标题,描述,关键字和导航,而且全是纯html代码,而header.php
中代码应该是动态,适合不同的页面,所以需要用到PHP代码,而不是单纯的html,下面我们一起来修改header.php:
首先我们需要了解wordpress主要函数,参照WordPress代码调用大全
1、更改<title>
我们都知道不同页面的title都是不一样,而且title的设置还会直接影响到SEO的效果,所以这里应该谨慎设置。下面提供一种SEO优化的title写法,将<title>
有间客栈-优等的心,不必华丽,但必须坚强。</title>改成:
- <title><?php if ( is_home() ) {
- bloginfo('name'); echo " - "; bloginfo('description');
- } elseif ( is_category() ) {
- single_cat_title(); echo " - "; bloginfo('name');
- } elseif (is_single() || is_page() ) {
- single_post_title();
- } elseif (is_search() ) {
- echo "搜索结果"; echo " - "; bloginfo('name');
- } elseif (is_404() ) {
- echo '页面未找到!';
- } else {
- wp_title('',true);
- } ?></title>
以上添加的php代码运用了条件判断,针对不同的页面采用不同title,这里解释一下这几个条件标签。
is_home()
:当前页面为主页时返回trueis_category()
:当前页面为分类页时返回trueis_single()
:当前页面为单文章页时返回trueis_page()
:当前页面为单页面时返回true- 更详细的内容参阅WordPress文档:条件标签
到目前为止,可能你对这些条件判断标签还没有深入的认识,也搞不懂到底是用了这些标签会对主题造成怎样的影响的,随着我们教程的进一步深入,你会慢慢理解的。如果你不喜欢上面title的写法,可以自行上网搜索相关代码:WordPress SEO title
2、更改样式表style.css路径
- <link rel="stylesheet" href="demo/style.css">
更改为
3、添加Description 和 Keywords
关于添加网页描述和关键字,可以查看我之前写过的文章:WordPress使用经验,独立的Description 和 Keywords
4、显示菜单栏
关于菜单栏可以查看之前文章:WordPress 分类做导航栏,并高亮显示
Wordpress3.0+以上全部支持菜单功能,我们直接用菜单功能制作导航:
1、新建 functions.php 函数文件并添加以下代码:
- <?php
- //自定义菜单
- register_nav_menus(
- array(
- 'header-menu' => __( '导航自定义菜单' ),
- )
- );
- ?>
- [/cc]
- 2、导航位置添加菜单调用代码:
- [cc lang="php"]
- <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
5、添加wp_head
有些插件需要在网页头部执行一些类如添加一些js或css的动作,要让这些插件能够正常的工作,也让你的主题有更好的兼容性,你应该添加wp_head()
函数。打开header.php
,在前面添加以下代码即可:
- <?php wp_head(); ?>
总结
好了,本次练习到此结束!现在总结一些今天讲到的比较重要的知识点:
<?php get_header(); ?>
从当前主题文件夹中包含header.php文件is_home(),is_single(),is_category()
等几个条件判断标签<?php bloginfo('stylesheet_url'); ?>
输出主题文件夹中style.css文件的路径<?php bloginfo('pingback_url'); ?>
输出博客pingback网址<?php bloginfo('template_url'); ?>
输出博客主题目录URL<?php echo get_option('home'); ?>
输出你的博客首页网址<?php bloginfo('name'); ?>
输出你的博客名称<?php bloginfo('description'); ?>
输出博客描述<?php wp_head(); ?>
用于包含WordPress程序输出头部信息<?php wp_list_categories(); ?>
用于列出博客分类页<?php wp_list_pages(); ?>
用于列出博客页面
到目前为止header.php制作完成。