• wordpress CMS主题:ssmay主题 wordpress CMS主题:ssmay主题
  • 首页 > 网站建设 > WordPress主题header.php制作

    WordPress主题header.php制作

    作者: 分类:网站建设 点击: 6,203 次
    wordpress CMS主题:ssmay主题

      扫描下面的二维码,“关注”我的百家号。

      继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啰,赶紧动手吧!



      欢迎“关注”我的百家号。

      头条二维码
      加入我的QQ群
      头条二维码
      关注我的百家号

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

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

    或许你会感兴趣的文章:

    发表评论

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

    此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据