0°

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

上一节中,我们学习了对目标网站进行了本地化并拆分,这一节主要讲解如何制作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://www.xxko.net/feed”>  
  19. <link rel=“stylesheet” href=“demo/style.css”>  
  20. <link rel=“shortcut icon” href=“https://www.xxko.net/favicon.ico”>  
  21. <!–[if IE]> <link rel=“stylesheet” href=“https://www.xxko.net/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://www.xxko.net/” title=“有间客栈”> 有间客栈 </a></span>  
  26.     <div id=“searchbox”>  
  27.       <form action=“https://www.xxko.net/” 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://www.xxko.net/”>博客主页</a></li>  
  41.         <li class=“cat-item cat-item-2 “><a href=“https://www.xxko.net/category/gkong” title=“安全无小事,珍爱生命。”>工控家园</a></li>  
  42.         <li class=“cat-item cat-item-3 “><a href=“https://www.xxko.net/category/life” title=“生活菜米油盐”>生活杂谈</a></li>  
  43.         <li class=“cat-item cat-item-4 “><a href=“https://www.xxko.net/category/internet” title=“网站架设教程服务”>网络教程</a></li>  
  44.         <li class=“page-item cat-item-13 “><a href=“https://www.xxko.net/xxko-sitemap” title=“所有日志列表”>日志存档</a></li>  
  45.         <li class=“page-item cat-item-10 “><a href=“https://www.xxko.net/about” title=“网站简介”>关于本站</a></li>  
  46.         <li class=“page-item cat-item-11 “><a href=“https://www.xxko.net/gbook” title=“留言本站”>给我留言</a></li>  
  47.         <li class=“current-cat-ask”> <a title=“网站投稿” href=“https://www.xxko.net/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://www.xxko.net/wordpress-themes-header.html
「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论