登录 注册

wordprss 主题制作教程(五):制作头部文件 -header.php

本贴最后更新于 4358 天前，其中的信息可能已经时移世异

一般说来我们网站的所有页面的头部和底部基本相似，所以我们可以将这些相似的代码放到一个文件中，然后在每个模板文件载入这个头部和底部文件即可，这样我们就不需要给每个模板都把头部和底部文件都写一遍，而且修改方便，改了头部文件，所有页面都会生效。

接着上一篇教程，我们在做主题文件夹content\themes\Aurelius下面新建一个头部文件header.php，然后将index.php中的头部代码提取(剪切)出来，写入这个文件：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head profile="http://gmpg.org/xfn/11">  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>Aurelius | Blog</title>  
  6. <!-- Stylesheets -->  
  7. <link rel="stylesheet" href="./style.css" type="text/css" media="screen" />  
  8. </head>  
  9. <body>  
  10. <div id="wrapper" class="container_12 clearfix">  
  11.     <!-- Text Logo -->  
  12.     <h1 id="logo" class="grid_4">Aurelius</h1>  
  13.     <!-- Navigation Menu -->  
  14.     <ul id="navigation" class="grid_8">  
  15.         <li><a href="contact.html"><span class="meta">Get in touch</span><br />  
  16.             Contact Us</a></li>  
  17.         <li><a href="blog.html" class="current"><span class="meta">Latest news</span><br />  
  18.             Blog</a></li>  
  19.         <li><a href="index.html"><span class="meta">Homepage</span><br />  
  20.             Home</a></li>  
  21.     </ul>  
  22.     <div class="hr grid_12 clearfix">&nbsp;</div>  
  23.     <!-- Caption Line -->  
  24.     <h2 class="grid_12 caption clearfix">Our <span>blog</span>, keeping you up-to-date on our latest news.</h2>  
  25.     <div class="hr grid_12 clearfix">&nbsp;</div>  

保存好头部文件，在index.php的前面加上代码：

  1. <?php get_header();?>  

get_header()函数会自动载入主题文件夹中的header.php文件，所以头部文件的文件名命名为header.php然后使用get_deader()函数即可，同样的编辑主题文件夹的其它文件：archive.php、contact.php、full_width.php、page.php和single.php，删掉以上类似代码，也改成

  1. <?php get_header();?>  

现在头部文件已经制作好了，接下来的工作就是编辑头部文件header.php将里面的静态html代码换成动态的php代码。
首先我们需要更改信息，一般我们将title信息改成这样的： 文章页面标题 | 网站名称 当然你也可以根据自己的seo只是更改，比如有的人在标题中加入网站描述。将header.php中的<title>Aurelius | Blog</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>  

上面的代码通过判断将首页、文章页、分类页、404页面的<title>信息设置成不一样的形式，这样是很有必要的。

几个判断函数的解释如下：

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

所以如果想根据自己的需要制作一个主题，不会php的话会很不方便，所以个人建议，如果打算制作主题，有必要去学习一下php。

第二步：修改css文件的路径。
在header.php文件中找到下面代码

  1. <link rel="stylesheet" href="./style.css" type="text/css" media="screen" />  

也许你有会问，主题文件夹中不是有个style.css文件吗？为什么访问网站的时候没有加载样式表呢？

因为这个样式表的路径./style.css其实是网站根目录，在以后的教程中我们会讲到，如果你不想让别人轻易看出你的网站是使用wordprss程序，那么你可以改变图片、样式表等文件的路径，比如本工作室，将图片、样式表都移到了网站根目录，在网页代码中就不会出现wordprss站才有的wp-content/themes之类的路径。好了，将上面的代码改成：

  1. <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />  

bloginfo()函数很常用，函数参数和用法如下：

  1. <?php   
  2. bloginfo();   
  3. /*
  4. 该函数会根据参数直接输出信息，参数：  
  5.     name 博客标题-默认  
  6.     description-描述信息  
  7.     url-博客url  
  8.     rss2_url-博客的rss2.0feed地址  
  9.     template_url 模板地址  
  10.     charset 编码方式  
  11.    stylesheet_url 样式表路径
  12. home网站首页url
  13. */  
  14. /*
  15. 如果不需要直接输出而是获取对应的参量，使用下面的get_bloginfo，参数同上  
  16. */  
  17. get_bloginfo();   
  18. ?>  

bloginfo('stylesheet_url')会自动输出网站主题文件夹下style.css文件的绝对网址，如http://localhost/wp/wp-content/themes/Aurelius/style.css

不过，还有几张图片的路径不对，还不能显示出来，用文本编辑器打开index.php、archive.php、contact.php、full_width.php、page.php和single.php，给这些图片加上正确的URL，搜索代码，将所有的：src="images/，批量替换成src="<?php bloginfo('template_url'); ?>/images/。现在再刷新你的主页，看文章的缩略图610×150是否可以正常显示。

第三步：更改博客名称和描述信息，我们要将博客名称和描述，改成我们在后台设置的信息，将header.php中的如下代码：

  1. <h1 id="logo" class="grid_4">Aurelius</h1>   
  2. <h2 class="grid_12 caption clearfix">Our <span>blog</span>, keeping you up-to-date on our latest news.</h2>  

修改成：

  1. <h1 id="logo" class="grid_4"><a href="<?php echo get_bologinfo('home'); ?>/"><?php bloginfo('name'); ?></a></h1>   
  2. <h2 class="grid_12 caption clearfix"><?php bloginfo('description'); ?></h2>  

可以看到这里还是bloginfo和get_bloginfo函数，所以说这两个函数经常用到。

第四步：添加wp_head。

wp_head函数对于要使用插件的主题来说比较重要，一般如果插件需要加载css文件和js文件，都是通过wp_head()函数输出的。在header.php文件的</head>前面添加：

  1. <?php wp_head(); ?>  

在去看你的网站，查看网页源代码，会发现<head></head>标签中多了如下代码：

  1. <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://ludou.co.tv/blog/xmlrpc.php?rsd" />   
  2. <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://ludou.co.tv/blog/wp-includes/wlwmanifest.xml" />    
  3. <link rel='index' title='露兜实验室' href='http://ludou.co.tv' />   
  4. <meta name="generator" content="WordPress 2.9.2" />  

当然这些代码是多余的，比如程序版本？告诉别人程序版本，是不安全的。所以在以后的教程中我们会讲到，如何去除这些多余的头部信息。

第五步：显示菜单栏

当前菜单有几个菜单项，但是都是静态的，我们希望能在后台控制，在头部文件header.php中找到下面代码：

 
  1. <ul id="navigation" class="grid_8">   
  2.     <li><a href="contact.html"><span class="meta">Get in touch</span><br />   
  3.         Contact Us</a></li>   
  4.     <li><a href="blog.html" class="current"><span class="meta">Latest news</span><br />   
  5.         Blog</a></li>   
  6.     <li><a href="index.html"><span class="meta">Homepage</span><br />   
  7.         Home</a></li>   
  8. </ul>  

修改成加载菜单的函数：

  1. <?php wp_nav_menu( array('sort_column' => 'menu_order', 'container_id'=>'menu','menu_id'=>'navigation') ); ?>  

不过添加了菜单函数，还得后台有个菜单控制的哦，所以我们需要再后台注册一个菜单。在functions.php中添加以下代码即可：

  1. //注册菜单   
  2. if( function_exists('register_nav_menus') ){   
  3.     register_nav_menus(   
  4.         array(   
  5.             'primary' => __( '主导航菜单' ),   
  6.         )   
  7.     );   
  8. }  

之后进入后开即可看到后台即可看到主题支持菜单了。这个函数是最新的菜单函数，跟原文不一样。wp_nav_menu函数参数稍多，这里就不加解释了，可以到官网搜索。。

到现在为止，你的主题虽然能够从后台控制头部代码了，但是还是只能看到一个页面，因为只有头部是动态的，其它位置都是静态的。

但是头部文件还有一个重要的信息没有添加，那就是描述和关键字。这个在下一篇教程中专门讲解。

最后提供露兜博客经过修改后的文件，以提供参考比较

  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台，用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统（CMS）来使用。WordPress 是一个免费的开源项目，在 GNU 通用公共许可证（GPLv2）下授权发布。

    66 引用 • 114 回帖 • 223 关注
1 赞同
924 8 91 114 113 182 7 402

相关帖子

回帖
wordprss 主题制作教程(五):制作头部文件 -header.php

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
figo930
少壮不努力，老大搞IT
回帖
36
 帖子
39
 积分
3471

近期热议

推荐标签 标签

  • B3log

    B3log 是一个开源组织，名字来源于“Bulletin Board Blog”缩写，目标是将独立博客与论坛结合，形成一种新的网络社区体验，详细请看 B3log 构思。目前 B3log 已经开源了多款产品：Sym、Solo、Vditor 和 思源笔记。

    1063 引用 • 3454 回帖 • 189 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商，致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景，七牛先后推出了对象存储，融合 CDN 加速，数据通用处理，内容反垃圾服务，以及直播云服务等。

    27 引用 • 225 回帖 • 163 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA，是一款 Java 语言开发的集成环境，在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似，也就是用各类命令预先放入到一个文件中，方便一次性执行的一个程序文件，主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大，比用其他编程程序编辑的程序效率更高，因为它使用了 Linux/Unix 下的命令。

    123 引用 • 74 回帖 • 2 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统，由瑞典 MySQL AB 公司开发，目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    692 引用 • 535 回帖
  • C

    C 语言是一门通用计算机编程语言，应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖 • 2 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 667 关注
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    23014 引用 • 92572 回帖
  • WebComponents

    Web Components 是 W3C 定义的标准，它给了前端开发者扩展浏览器标签的能力，可以方便地定制可复用组件，更好的进行模块化开发，解放了前端开发者的生产力。

    1 引用 • 4 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端，也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言，在 20 世纪 90 年代中期由日本的松本行弘（まつもとゆきひろ/Yukihiro Matsumoto）设计并开发。在 Ruby 社区，松本也被称为马茨（Matz）。

    7 引用 • 31 回帖 • 216 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流，分享无限上传的图片，发布链接和视频，更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 440 关注
  • Docker

    Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的操作系统上。容器完全使用沙箱机制，几乎没有性能开销，可以很容易地在机器和数据中心中运行。

    492 引用 • 926 回帖
  • MongoDB

    MongoDB（来自于英文单词“Humongous”，中文含义为“庞大”）是一个基于分布式文件存储的数据库，由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似 JSON 的 BSON 格式，因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 1 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具，它能把各种资源，例如 JS、CSS（less/sass）、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 253 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库，强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery，是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 724 关注
  • JSON

    JSON （JavaScript Object Notation）是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖 • 1 关注
  • Vue.js

    Vue.js（读音 /vju ː/，类似于 view）是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    265 引用 • 666 回帖 • 1 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司，即：Kunming Zunyuan Property Agency Company Limited（简称“尊园地产”）于 2007 年 6 月开始筹备，2007 年 8 月 18 日正式成立，注册资本 200 万元，公司性质为股份经纪有限公司，主营业务为：代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 772 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司，该公司位于捷克的布拉格，并在俄国的圣彼得堡及美国麻州波士顿都设有办公室，该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境：IntelliJ IDEA。

    18 引用 • 54 回帖
  • Love2D

    Love2D 是一个开源的， 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 538 关注
  • Solidity

    Solidity 是一种智能合约高级语言，运行在 [以太坊] 虚拟机（EVM）之上。它的语法接近于 JavaScript，是一种面向对象的语言。

    3 引用 • 18 回帖 • 401 关注
  • DevOps

    DevOps（Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

    51 引用 • 25 回帖
  • 反馈

    Communication channel for makers and users.

    123 引用 • 913 回帖 • 250 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统，在 BSD 开源许可证下发布。

    22 引用 • 22 回帖
  • 大数据

    大数据（big data）是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合，是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • 房星科技

    房星网，我们不和没有钱的程序员谈理想，我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源，遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 584 关注

最新标签