• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > 制作wordpress主题教程(4):主题头部文件header.php

    制作wordpress主题教程(4):主题头部文件header.php

    作者: 分类:wordpress CMS主题制作 点击: 2,669 次
    wordpress CMS主题:ssmay主题

      上一章,我们制作了一个简单主题的框架,只包含index.php和style.css 2个文件,只要有这2个文件,wordpress就可以识别。本章,我们进一步深入,制作wordpress主题的头部文件header.php

      首先在wp-content/themes/wanlimm 这人主题文件夹下创建一个header.php文件,然后通过dreamweaver打开header.php文件,在文件中添加下面这段代码:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head profile="http://gmpg.org/xfn/11">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Wanlimm | Blog</title>
      <link rel="stylesheet" href="./style.css" type="text/css" media="screen" />
      </head>
      <body>
      <div id="wrapper" class="container_12 clearfix">
      <!-- 网站LOGO -->
      <h1 id="logo" class="grid_4">Wanlimm</h1>
      <!-- 顶部导航 -->
      <ul id="navigation" class="grid_8">
      <li><a href="contact.html"><span class="meta">Get in touch</span><br />
      Contact Us</a></li>
      <li><a href="blog.html" class="current"><span class="meta">Latest news</span><br />
      Blog</a></li>
      <li><a href="index.html"><span class="meta">Homepage</span><br />
      Home</a></li>
      </ul>
      <div class="hr grid_12 clearfix">&nbsp;</div>
      <!-- Caption Line -->
      <h2 class="grid_12 caption clearfix">Our <span>blog</span>, keeping you up-to-date on our latest news.</h2>
      <div class="hr grid_12 clearfix">&nbsp;</div>

      上面这段代码只是一个静态代码,是我从别的网页的源代码中复制过来的,不能根据网站的不同页面的改变而改变,如网页的标题,我们需要对代码做相应的修改。

      1、修改标题代码:

      <title>Wanlimm | Blog</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>

      代码解说:
      is_home() :判断是否为首页,
      is_category():判断是否为分类页,
      is_single():判断是否为文章页,
      is_page():判断是否为page页面,
      is_404():判断是否是404页面

      2、修改css文件的路径。

      原代码<link rel="stylesheet" href="./style.css" type="text/css" media="screen" />这句正常情况可以,但如要主题在网站目录变动了,如不在根目录,而在二级目录或三级目录,就可能出现找不到CSS样式文件,我们将这句改成下面这句:

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

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

      3、修改网站名称和描述。

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

      修改成:

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

      这里我们又看到bloginfo和get_bloginfo函数,这两个函数经常用到,可以搜索一下本站的这2个函数详细介绍。

      4、添加wp_head()。

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

      5、修改导航菜单。

      原代码是:

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

      这段代码是静态的,我们把它们改成动态的,如下:

       <?php wp_nav_menu( array( 'theme_location' => 'primary','container'=>'<ul>','menu_id'=>'menu','menu_class'=>'menu','link_before' => '<span>','link_after' => '</span>',)); ?>

      这句代码意思是,我们可以通过wordpress后台中的菜单来设置它们,要想让这句导航代码能正常使用,我们还要为主题在后台注册一个菜单。在wanlimm文件夹下创建一个functions.php文件(主题的核心函数文件),在这个文件中添加以下代码即可:

      //注册菜单
      register_nav_menus( array('primary' => '顶部导航菜单','footer' => '底部导航菜单') );

      好了,到这里,wordpress主题制作头部文件header.php就完成了。今天就讲到这里。



      QQ二维码

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201505213985.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.