首页 文章 wordpress仿站教程#5：制作header.php

wordpress仿站教程#5：制作header.php

Wordpress
2.3k

上一节中，我们学习了对目标网站进行了本地化并拆分，这一节主要讲解如何制作header.php页面，在第二节WordPress仿站教程 #2：模板文件和模板我们介绍了网站所有的header.php页面都是共用的同一个文件，所以只要做一个页面就可以了。
打开拆分的header.php，如：

  1. <!DOCTYPE html>  
  2. <html itemscope="itemscope" itemtype="http://schema.org/WebPage" lang="zh-CN">  
  3. <head>  
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  5. <meta charset="UTF-8">  
  6. <meta http-equiv="x-dns-prefetch-control" content="on">  
  7. <meta http-equiv="Cache-Control" content="no-siteapp">  
  8. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  9. <meta name="renderer" content="webkit">  
  10. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.5">  
  11. <meta name="applicable-device" content="pc,mobile">  
  12. <meta name="apple-mobile-web-app-title" content="有间客栈">  
  13. <meta name="apple-mobile-web-app-capable" content="yes">  
  14. <meta name="apple-mobile-web-app-status-bar-style" content="black">  
  15. <title>有间客栈-优等的心，不必华丽，但必须坚强。</title>  
  16. <meta name="description" content="一个专注互联网产品，探讨计算机应用，工业自动化控制，分享学习与生活的技术博客.">  
  17. <meta name="keywords" content="网络,软件,博客,WordPress,工控,生活,手机,设计,自建房,信息库,PLC,变频器,有间客栈,电工,自动化,机电维修,随之长风,itxjob">  
  18. <link rel="alternate" type="application/rss+xml" title="有间客栈" href="https://mehuts.com/feed">  
  19. <link rel="stylesheet" href="demo/style.css">  
  20. <link rel="shortcut icon" href="https://mehuts.com/favicon.ico">  
  21. <!--[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>  
  22. </head>  
  23. <body>  
  24. <div id="header">  
  25.   <div class="wrapper"> <span class="logo"><a href="https://mehuts.com/" title="有间客栈"> 有间客栈 </a></span>  
  26.     <div id="searchbox">  
  27.       <form action="https://mehuts.com/" id="searchform" method="get">  
  28.         <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">  
  29.         <input name="sa" class="button" value="搜索" type="submit">  
  30.       </form>  
  31.     </div>  
  32.     <nav class="toggle-nav">  
  33.       <ul>  
  34.         <li><a href="javascript:void(0)" class="toggle_main">导航</a></li>  
  35.         <li><a href="javascript:void(0)" class="toggle_search">搜索</a></li>  
  36.       </ul>  
  37.     </nav>  
  38.     <nav id="main-nav">  
  39.       <ul id="nav-all">  
  40.         <li><a title="有间客栈的主页" class="current" href="https://mehuts.com/">博客主页</a></li>  
  41.         <li class="cat-item cat-item-2 "><a href="https://mehuts.com/category/gkong" title="安全无小事，珍爱生命。">工控家园</a></li>  
  42.         <li class="cat-item cat-item-3 "><a href="https://mehuts.com/category/life" title="生活菜米油盐">生活杂谈</a></li>  
  43.         <li class="cat-item cat-item-4 "><a href="https://mehuts.com/category/internet" title="网站架设教程服务">网络教程</a></li>  
  44.         <li class="page-item cat-item-13 "><a href="https://mehuts.com/xxko-sitemap" title="所有日志列表">日志存档</a></li>  
  45.         <li class="page-item cat-item-10 "><a href="https://mehuts.com/about" title="网站简介">关于本站</a></li>  
  46.         <li class="page-item cat-item-11 "><a href="https://mehuts.com/gbook" title="留言本站">给我留言</a></li>  
  47.         <li class="current-cat-ask"> <a title="网站投稿" href="https://mehuts.com/tougao">在线投稿</a></li>  
  48.       </ul>  
  49.     </nav>  
  50.   </div>  
  51.   <div class="fixed"></div>  
  52. </div>  

分析上面代码不难发现，header主要包含网站标题，描述，关键字和导航，而且全是纯html代码，而header.php中代码应该是动态，适合不同的页面，所以需要用到PHP代码，而不是单纯的html，下面我们一起来修改header.php：
首先我们需要了解wordpress主要函数，参照WordPress代码调用大全

1、更改<title>

我们都知道不同页面的title都是不一样，而且title的设置还会直接影响到SEO的效果，所以这里应该谨慎设置。下面提供一种SEO优化的title写法，将<title>有间客栈-优等的心，不必华丽，但必须坚强。</title>改成：

  1. <title><?php if ( is_home() ) {  
  2.         bloginfo('name'); echo " - "; bloginfo('description');  
  3.     } elseif ( is_category() ) {  
  4.         single_cat_title(); echo " - "; bloginfo('name');  
  5.     } elseif (is_single() || is_page() ) {  
  6.         single_post_title();  
  7.     } elseif (is_search() ) {  
  8.         echo "搜索结果"; echo " - "; bloginfo('name');  
  9.     } elseif (is_404() ) {  
  10.         echo '页面未找到!';  
  11.     } else {  
  12.         wp_title('',true);  
  13.     } ?></title>  

以上添加的php代码运用了条件判断，针对不同的页面采用不同title，这里解释一下这几个条件标签。

  1. is_home()：当前页面为主页时返回true
  2. is_category()：当前页面为分类页时返回true
  3. is_single()：当前页面为单文章页时返回true
  4. is_page()：当前页面为单页面时返回true
  5. 更详细的内容参阅WordPress文档：条件标签

到目前为止，可能你对这些条件判断标签还没有深入的认识，也搞不懂到底是用了这些标签会对主题造成怎样的影响的，随着我们教程的进一步深入，你会慢慢理解的。如果你不喜欢上面title的写法，可以自行上网搜索相关代码：WordPress SEO title

2、更改样式表style.css路径

  1. <link rel="stylesheet" href="demo/style.css">  

更改为

3、添加Description 和 Keywords

关于添加网页描述和关键字，可以查看我之前写过的文章：WordPress使用经验，独立的Description 和 Keywords

4、显示菜单栏

关于菜单栏可以查看之前文章：WordPress 分类做导航栏，并高亮显示
Wordpress3.0+以上全部支持菜单功能，我们直接用菜单功能制作导航：
1、新建 functions.php 函数文件并添加以下代码：

  1. <?php   
  2. //自定义菜单  
  3.    register_nav_menus(  
  4.       array(  
  5.          'header-menu' => __( '导航自定义菜单' ),  
  6.       )  
  7.    );  
  8. ?>  
  9. [/cc]  
  10. 2、导航位置添加菜单调用代码：  
  11. [cc lang="php"]  
  12. <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>  

5、添加wp_head

有些插件需要在网页头部执行一些类如添加一些js或css的动作，要让这些插件能够正常的工作，也让你的主题有更好的兼容性，你应该添加wp_head()函数。打开header.php，在前面添加以下代码即可：

  1. <?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制作完成。

除特别注明外，本站所有文章均为我的自留地原创，转载请注明出处来自https://mehuts.com/wordpress-themes-header.html

推荐文章

发表评论 (0)

请后再参与讨论