当前位置:首页 > 凡人Wordpress > 正文

WP主题模板制作新手教程之博客模板header.php的制作方法

时间:2012年12月02日作者:全职凡人查看次数:1,035 views评论次数:0

在前面我们已经给大家介绍了怎样给模板添加版权信息怎样分离顶部底部和侧边栏,今天我们就来介绍一下博客模板index.php的制作方法。

第一步还是要先打开XAMPP,启用apache和mysql,在浏览器里进入本地网站首页。

博客模板index.php的制作方法,包含的是顶部、底部、侧边栏和index.php这四项内容。一步一步的我们先来介绍顶部博客模板header.php的制作方法。用DW打开主题模板中的header.php。在这里先给大家解决一个问题,如果你的模板在WP后台出现的是乱码,就是模板下面的显示是一些不知道是什么的文字,这是由于Style.css的编码和index.php不一致造成的,只需要在DW里把Style.css的编码改一下就可以了。用DW打开Style.css,点击工具栏的“修改-页面属性-标题/编码”,在编码一栏的下拉框中找到Unicode(UTF-8),选中它,确定后保存就可以了。另外,大家建新的php文件夹时,是建的文本文件夹,然后把它改成.php为后缀的文件夹,才是可用的文件夹。

好了,接着上面的讲。大家启用模板后,在首页看到的肯定是一排排没有任何可看性的列表一样的页面,这是由于我们还没有通过WP的调用代码,把主题中需要调用的各种文件调用过来。现在在header.php中,我们先找到<link href=”style.css” rel=”stylesheet” type=”text/css” media=”screen” />这句代码,这是调用css的代码。把href=”style.css”改成href=”<?php bloginfo( ‘stylesheet_url’ ); ?>“就完成了css的调用。这句代码要记住了。现在大家打开首页看看,是不是正常了!
博客模板header.php的制作方法

博客模板header.php的制作方法

接下来完成顶部的制作:

<meta http-equiv=”Content-Type” content=”text/html; charset=<?php bloginfo( ‘charset’ ); ?>” />

<title><?php if (is_home()||is_search()) { bloginfo(‘name’); } else { wp_title(”); print ” – “; bloginfo(‘name’); } ?> </title>

<?php wp_head(); ?>

这一段代码替换掉<head></head>中的这几句:

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<title>Assiduous by www.865171.cn</title>
<meta name=”keywords” content=”” />
<meta name=”description” content=”” />

就完成了head部分的修改。这是用WP的代码完全替换了原始静态页面的代码,形成WP模板的第一步。现在来看导航栏的修改,在首页中很明显,顶部黑色部分就是导航栏。通过谷歌浏览器,很方便就找到要修改的地方:

在DW中找到这个代码:

把中间的ul下面的li标签全部删除,放上WP调用标签:

<li><a href=” <?php echo get_option(‘home’); ?>”>首页</a></li>
<?php wp_list_pages(‘sort_column=menu_order&title_li=&include=’); ?>
<?php wp_list_categories(‘title_li=0&orderby=name&show_count=0&depth=2’); ?>

现在到首页去刷新看看:

至于搜索框,现在来说还太难,今后再跟大家分享吧!

最后,在header.php的最下面,还有这样一段:

<div id=”logo”>
<h1><a href=”http://www.865171.cn/”>Assiduous </a></h1>
<p><em> template design by <a href=”http://www.865171.cn/”>www.865171.cn</a></em></p>
</div>

把p标签删除,在h1中把a标签换成<?php bloginfo(‘name’); ?>,你的博客的名字就出来了。

OK,到这里,博客模板header.php的制作方法就介绍完了,掌握住这几个红色标记的调用代码,博客模板header.php的制作方法也就完全学会了。只要记住,寻找要替换的标签,利用谷歌或者火狐仔细的找,找到后记住这个标签,再到DW中寻找,就可以轻松完成了。提醒大家一点,修改的php文件不要急着退出DW,一旦出现错误,通过“编辑”按钮撤销就可以恢复原状,但每一步都要记着保存!

好了,博客模板header.php的制作方法到这里全部结束,下次再介绍侧边栏和底部的制作方法。

转载请注明文章转载自: 全职凡人_博客  本文链接地址:http://www.qzfrn.com/wordpress/364.html
0条评论

暂时没有评论!

发表评论

*

*