学做网站培训课程介绍

当前位置:

wordpress头部模板(header.php)制作

本课程视频是VIP会员课程,学习请进入VIP学习区

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

基本上网站可以分为三大部分:顶部,主体,底部。头部模板(header.php)就是控制网站的顶部部分的。头部模板(header.php)一般是包括网站logo,网站导航部分,也有的网站会有二级下拉菜单

顶部模板(header.php)制作

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

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

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

第三步:网站title标签的修改。HTML网页的TITLE标签内容都是固定文字,而我们需要的是动态变化的标题。所以将header.php中的title标签部分替换成以下的代码:(当然,我们也可以使用SEO插件来写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模板中的顶部模板就制作好了。

发表评论

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

相关教程

  • 漂亮的wordpress淘客模板 图文教程 (111434 次浏览)
    今天再次给大家分享一款自己仿的一个wordpress淘客模板。这个模板是我自己在别人模板的基础上进行二次开发,自己比较喜欢。注意:此模板不支持IE6,
  • 用什么建网站?Wordpress建网站好不好?这些问题经常被新手问上问起。可以这样说,wordpress程序可以建各种类型的网站,它的功能强大之处令人称赞,
  • 上一节,静态HTML页面转化成WP模板我们已经将HTML静态页面中的一些静态的代码用WP动态标签替换了 。这一节我们开始制作模板中的头部模板(header.php)
  • 在仿站教程中,我们讲到了需要分离头部和底部模板,方便后面制作其它模板时调用。那么不同的网站,我们在分离公用头部和底部时,怎么确定它们的位置呢
  • 自己做的模板阁网站 图文教程 (17235 次浏览)
    这是我学习了论坛课程后自己做的一个模板阁网站,这款自己做网站的主题个人DIY成纯主题下载站,可以通过填加自定义字段demo、down、thumbnails来分别
  • 仿站长网admin5主题模板 图文教程 (17308 次浏览)
    这是一款模板站长网admin5的wordpress主题模板,这个模板综合了门户和企业网站所有特点,内容特别丰富,而且有大量的广告位可供站长放广告图片,实现网站
  • 零基础新手要学习网站建设,以下的网站建设教程是零基础新手必须学习的网站制作教程。只有将以下的基础知识学会了,才能为以后建网站打下坚实的基础。
  • 这是一家上海电气公司网站,网站制作时采用传统企业网站制作方法与布局结构。网站顶部使用大尺寸的LOGO,网站导航制作使用全屏宽度菜单,每个菜单项宽