wordpress头部模板(header.php)制作
本课程视频是VIP会员课程,学习请进入VIP学习区。
上一节,静态HTML页面转化成WP模板我们已经将HTML静态页面中的一些静态的代码用WP动态标签替换了 。这一节我们开始制作模板中的头部模板(header.php)。
基本上网站可以分为三大部分:顶部,主体,底部。头部模板(header.php)就是控制网站的顶部部分的。头部模板(header.php)一般是包括网站logo,网站导航部分,也有的网站会有二级下拉菜单。
顶部模板(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>
<?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站标。网站站标可以很好的提高网站的整体形象,也方便用户找到你的网站。
- 用PS制作一个16*16px 的图标,然后将它保存到images文件夹里,取名为favicon.ico;
- 使用这段代码来调用自己制作的网站站标图片。
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico" >
第五步:网站菜单导航的制作。
- 删除原来HTML网页中的菜单导航的静态代码,使用下面的动态调用代码替换。
<?php wp_nav_menu( array( 'container' => '','menu_class' => 'navigation','menu_id' => "nav_sgBhgn",'depth' => 2, ) ); ?> - 新建一个HTML网页,取名为functions.php[模板函数文件],将下在的函数放入其中,让网站模板支持菜单调用功能。
<?php //添加菜单功能
if (function_exists('add_theme_support')) {
add_theme_support('nav-menus');
register_nav_menus( array( 'primary' => __( 'Primary Navigation', 'primary' ) ) );
}?> - 网站的菜单导航就可以在网站后台添加相应的内容了。
- 更多关于制作二级菜单导航,三级菜单导航方法。
第六步:有的网站会有幻灯片,可以参照 网站幻灯片制作方法。这样WP模板中的顶部模板就制作好了。