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

WP主题模板制作新手教程之完成index.phph的制作

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

经过前面几篇文章的文字描述,不知道对于新手来说是否效果,到现在,就只剩下最后一步,就彻底完成index.php的制作了。那就是把首页的文章调用,各种需要显示的元数据,以及分页插件的使用放到index.php中就完成了首页的制作。

在这之前,我们要先把在WP后台能使用的“小工具”制作出来。闲话就不多说了,现在就开始小工具的制作。

制作之前的步骤应该不需要多说了,启动该启动的软件。进入后台后,点击外观下面的小工具选项,看到的是这样两句话:

尚无已定义的边栏

当前主题没有提供“小工具”功能。若希望让您的主题支持“小工具”,请查看这里的说明。

这说明我们的主题模板还没有这个功能。下面看看具体的制作方法:

1、新建一个functions.php。在主题文件夹中右键选择新建-文本文档,然后改名functions.php。用DW打开,复制下面的代码,粘贴进去保存即可。

<?php

if ( function_exists(‘register_sidebar’) )

register_sidebar(array(

‘before_widget’ => ‘<div class=”sidebox”> ‘,

‘after_widget’ => ‘</div>’,

‘before_title’ => ‘<h2>’,

‘after_title’ => ‘</h2>’,

));

?>

2、然后在sidebar.php的最上面放入下面代码:

<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>

3、在最下面放入,然后保存:

<?php endif; ?>

现在,再到点击WP后台“外观”下面的“小工具”试试看,已经可以使用小工具了对吗?!

ok,到这里小工具的制作就完成了。下面就开始完成index.php的制作:

博客模板的首页通常都是由文章的标题和一小段文章的开始部分,作为首页调用内页的一个索引,通过点击标题,或者文章后面的“阅读更多”、“更多内容”等提示性按钮,就可以进入到相关的内容页面。这就是博客模板首页最基本的表现形式,类似一个列表页或者说目录页。所以,对于SEO来说,博客模板就可以通过这些文章的标题,实现对首页的优化。我们要做的就是要让首页的这些文章标题,以我们想要的方式显示。比如,按时间顺序在首页不断的更新文章的标题和现实的内容。要做到这样,就要使用WP的循环调用标签。

现在就详细讲讲具体的放置方法:我们打开index.php,看到中间部分都是原来静态页面写死固定的标题和内容。像这样我们是无法在首页自动完成新文章的更新的。我们要删除它,换上WP的调用标签和循环点用标签。

首先,我们要找到这些文章的框架代码。通过谷歌浏览器或者火狐,我们看到这里三篇文章是在<div id=”content”>…</div>之间的,而每一篇文章又是各在一个<div class=”post”>…</div>中的。三篇的div都是一样的。既然有WP的循环调用标签,说明通过一个div就可以实现这个功能了,所以,我们先删除其中的两篇,留下一个<div>…</div>。然后在这个标签的前面加上

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

在后面加上

<?php endwhile; ?>

<?php endif;?>

然后保存。我们再到首页看看,我们看到了同样标题和同样内容的无数篇文章!这就说明我们的调用代码起作用了,现在只要修改文章标题和内容的调用,就完成了首页的基本制作。上面这两句标签的大概意思就是,查看有没有文章,有文章就调用文章,调用完成就结束。

接下来我们修改标题调用,把h2标签里的a标签全部删除,用如下代码进行替换:

<a href=”<?php the_permalink() ?>”> <?php echo mb_strimwidth(get_the_title(), 0, 36, ‘…’); ?></a>

意思是调用文章标题的前面36个字符,就是18个字。两个汉字算一个字。然后在<div class=”entry”>…</div>里面的p标签中,删除原文字,添加下面的标签。两个p标签只留一个就可以了:

<?php echo mb_strimwidth(strip_tags(apply_filters(‘the_content’, $post->post_content)), 0, 240,”……”); ?>

意思是调用文章内容的前240个字符,120个字。好,我们保存,到首页看看。如果我们只有一篇文章,那么就只会显示一篇,如果有了很多文章,就会显示很多。WP默认的最多显示10篇文章,你可以根据自己的需要,在后台的“设置-阅读”里,更改“博客页面至多显示”后面的数字。如果你有一篇较长的文章,你会发现文章后面采用的是…的形式,后面就什么也没有了。我们可以在后面添加一个“阅读更多”。接着内容调用标签代码,放上这一句:

<a href=”<?php the_permalink() ?>”>阅读更多</a>

保存后到首页看看,是不是每篇文章后面都有了“阅读更多”!

我们看到原文章的标题上面还有关于这篇文章的发布日期和作者信息,我们也把它替换成WP的标签:

<?php the_date_xml()?> | 所属分类:<?php the_category(‘, ‘) ?> |  <?php the_tags(‘标签: ‘, ‘, ‘, ”); ?> | 作者:<?php the_author () ?> | <?php comments_number(‘暂无评论’, ‘1条评论’, ‘% 评论’ );?>

这里“|”表示间隔,第一个间隔前是文章发表的日期,第二个所属分类,依次是文章的标签,作者评论数。

这样就已经全部完成index.php的制作,最后,如果你有超过十篇的文章了,就需要下载分页插件来使用了:wp-page-numbers,下载这个插件安装启用后,需要在index.php文章循环调用标签的结束标签哪里插入一句,记得要插在两句结束标签的中间。

<?php if(function_exists(‘wp_page_numbers’)) : wp_page_numbers(); endif; ?>

至此我们就全部完成index.php的制作了。下次就给大家分享内页模板的制作,今天就到此了。

转载请注明文章转载自: 全职凡人_博客  本文链接地址:http://www.qzfrn.com/wordpress/374.html
1条评论
  1. 钟制君文留言于:2014年06月27日16:02 回复

    ^_^

发表评论

*

*