wordpress CMS主题 微信
  • 全部教程
  • Home > wordpress CMS主题制作 > 制作wordpress主题教程(4):主题头部文件header.php

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

    高时银博客 wordpress CMS主题制作 点击: 1,440 次 0 0

    上一章,我们制作了一个简单主题的框架,只包含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就完成了。今天就讲到这里。


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

    目前还没有评论。赶快来坐沙发吧。

    发表评论