零基础学做网站教程

当前位置:

wordpress模板制作教程(三):顶部模板(header.php)制作

上一节,我们已经将HTML静态页面中的一些静态的代码用WP动态标签替换了 。这一节我们开始制作模板中的顶部模板(header.php)。

基本上网站可以分为三大部分:顶部,主体,底部。顶部模板(header.php)就是控制网站的顶部部分的。顶部模板(header.php)一般是包括网站logo,网站导航部分。

顶部模板(header.php)制作

顶部模板(header.php)制作步骤

第一步:将index.php代码从<html>标签开始一直到网站导航部分的DIV结束选中,然后剪切;

第二步:将剪切的代码放在一个新的HTML页面中,保存为header.php;

第三步:网站title标签的修改。HTML网页的TITLE标签内容都是固定文字,而我们需要的是动态变化的标题。所以将header.php中的title标签部分替换成以下的代码:

<title>
<?php if ( is_home() ) { ?>网站首页的名称<?php } ?>
<?php if ( is_tag() ) { ?><?php single_tag_title(); ?><? $paged = get_query_var('paged'); if ( $paged > 1 ) printf('– 第 %s 页 ',$paged); ?> _ <?php bloginfo('name'); ?><?php } ?>
<?php if ( is_page() ) { ?><?php echo trim(wp_title('',0)); ?><?php if (get_query_var('page')) { echo ' - 第'; echo get_query_var('page'); echo '页';}?> _ <?php bloginfo('name'); ?><?php } ?>
<?php if ( is_category() ) { single_cat_title(); echo " _ "; bloginfo('name'); $paged = get_query_var('paged'); if ( $paged > 1 ) printf('_ 第 %s 页 ',$paged);} ?>
<?php if ( is_single() ) { ?><?php echo trim(wp_title('',0)); ?> _ <?php bloginfo('name'); ?><?php } ?>
<?php if ( is_author() ) { ?>文章列表<?php } ?>
<?php if ( is_month() || is_day() ) { ?><?php the_time('Y - F'); ?> _ <?php bloginfo('name'); ?><?php } ?>
<?php if (is_search() ) {?>"<?php echo $s; ?>"的搜索结果 _ <?php bloginfo('name'); ?><?php } ?>
<?php if (is_404() ) {?>"404页面" _ <?php bloginfo('name'); ?><?php } ?>
</title>

第四步:制作网站的favicon站标。网站站标可以很好的提高网站的整体形象,也方便用户找到你的网站。
制作网站的favicon站标

  1. 用PS制作一个16*16px 的图标,然后将它保存到images文件夹里,取名为favicon.ico;
  2. 使用这段代码来调用自己制作的网站站标图片。
    <link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico" >

第五步:网站菜单导航的制作。

  1. 删除原来HTML网页中的菜单导航的静态代码,使用下面的动态调用代码替换。
    <?php wp_nav_menu( array( 'container' => '','menu_class' => 'navigation','menu_id' => "nav_sgBhgn",'depth' => 2, ) ); ?>
  2. 新建一个HTML网页,取名为functions.php[模板函数文件],将下在的函数放入其中,让网站模板支持菜单调用功能。
    <?php //添加菜单功能
    if (function_exists('add_theme_support')) {
    add_theme_support('nav-menus');
    register_nav_menus( array( 'primary' => __( 'Primary Navigation', 'primary' ) ) );
    }?>
  3. 网站的菜单导航就可以在网站后台添加相应的内容了。
  4. 更多关于制作二级菜单导航,三级菜单导航方法。

第六步:有的网站会有幻灯片,可以参照 网站幻灯片制作方法。这样WP模板中的顶部模板就制作好了。

Tags:

,

上一课: 下一课:

发表评论

*

* 绝不会泄露


相关教程

  1. 竞拍类网站怎么制作
  2. wordpress模板制作教程(六):首页模板(index.php)制作
  3. DW制作背景图片
  4. WP模板制作教程(十一):评论功能模板(comment.php)制作
  5. discuz模板制作调用标签大全
  6. wordpress主题制作(七):分类目录模板(archive.php)制作
  7. wordpress模板制作教程(十):搜索功能模板(search.php)制作
  8. 网站右下角弹出广告信息的制作方法
  9. wordpress模板制作教程(十三):错误页面模板(404.php)制作
  10. wordpress模板制作教程(四):底部模板(footer.php)制作