wordpress CMS主题 微信
Home > 网站建设 > WordPress主题header.php制作

WordPress主题header.php制作

高时银博客 网站建设 点击: 1,385 次 0 0

继7月份发布了第一篇主题教学后,很抱歉阿汤近一直忙到不可开交,一直找不到时间续写教学,今天抓到空闲之余我们就来继续主题相关教学,上次準备好了空白的主题档案后,这次我们就接着从顶部的「header.php」来着手开始制作主题,在这一连串的主题教学里,会尽量使用最简单的CSS语法,教大家来「拼凑」主题,避免太过深奥,看的灰杀杀,重点是要让大家了解主题的函数及结构,如果真的有兴趣的同学可以自行研习CSS语法,往后就可以更进阶的调整主题。

整体版面设置:

为了更精简后续的CSS语法,我们可以先在Body(主体)设置一些统一的格式,像是字型、预设字体大小等等。

首先打开先前为各位準备的空白主题档案,使用NotePad++右键编辑后,加入以下CSS语法,body与*是设置统一div格式,而img的部份是让图片不会有週边线条,如果没有设置的话,在Firefox下部份图片都会出现蓝色边框,阿汤都会习惯将部份格式先写入,针对需要设定的部份再各别写入。

*{font-family: Arial, sans-serif;font-size:15px;margin:0;padding:0;}

body{font-family: Arial, sans-serif;font-size:15px;margin:0;padding:0;}

img {border:none;}

WordPress主题header.php制作

设置header範围:

我们先在header.php设置header的div区块,比如阿汤是使用

<div id="header">

</div>

WordPress主题header.php制作

然后再去style.css里定义header的css语法,如果区块是id要用「#」定义,如果是class要用「.」定义,二者最主要的区别是id是独有唯一的,而class是可以重複使用。

现在大部份人的萤幕解析度都是大于1024*768,因此我们可以设置版面宽度在大约980px左右,并且让他置中,CSS语法如下:

#header{width:980px;margin:0 auto;}

WordPress主题header.php制作

加入网站名称及网站描述:

我们先将网站名称及网站描述的div区块定义出来,而且要包在header的区块里面,每个页面会出现的网站名称及网站描述也都只会出现一次,因此我们也是使用ID来定义即可,但由于网站名称及描述通常都会使用H标籤来加重,因此就会改成:

<h1 id="webtitle">  </h1>

<h2 id="webdesc">   </h2>

WordPress主题header.php制作

在定义CSS语法之前,我们先将WP内建的网站名称及描述的程式码加入

网站名称:

bloginfo('url')表示网站位址,bloginfo('name')为网站名称。再套入a href的连结语法,名称就变成超连结啰。

<a title="<?php bloginfo('name'); ?>" href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>

网站描述:

<?php bloginfo( 'description' ); ?>

WordPress主题header.php制作

到目前为止就会像这样子,接下来就可以来简单设置一下网站标题及描述的CSS。

WordPress主题header.php制作

网站名称及描述,主要要调整的部份为字体大小、字体颜色、以及位置,因此我们做了简单的CSS设置如下:

h1#webtitle{padding:15px 0 0 20px;float:left;}

h1#webtitle a{font-size:36px;color:#555;}

h2#webdesc{float:left;font-size:16px;color:#abcaaa;padding:35px 0 0 10px;}

WordPress主题header.php制作

看起来是不是就好多了呢。

加入网站自定义分页选单:

一样先定义区块,再加入选单的程式码,如下:

<div class="menu"><?php wp_nav_menu(); ?></div>

WordPress主题header.php制作

不过这样的程式码只能显示分页,在后台还不能使用Wordpress 3.0所独有的选单功能,我们必需在functions.php里加入一段程式码如下:

<?php

    register_nav_menus( array(

        'wpnote' => __( 'Primary Navigation'),

    ) );

?>

WordPress主题header.php制作

定义完后在后台就会看到外观里多出一个「选单」功能,就可以试试自定义的项目,接下来我们就往下来定义CSS。

WordPress主题header.php制作

menu的CSS我们使用最简单的方式来定义,并设定位置在header右方偏下,语法如下:

.menu{float:right;padding-top:30px;padding-right:20px;}

.menu li{float:left;margin:0 10px;}

.menu li a{color:#666;}

另外我们在定义完后,就可以在header加个高度,将header区块明显示的设置高度,这样往下的区块就会从这个高度再开始堆叠。

WordPress主题header.php制作

到目前为止,就完成了今天的课程,简单的制作出header.php啰,赶紧动手吧!


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

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

发表评论