如何创建个人WordPress主题:第2章

2010年5月23日 评论 (0)

WP_part2

这是“如何创建个人WordPress主题”教程的的第二部分。

假如你还没有看过本教程的第一部分，请点击第一章开始第一部分的学习。

开始前你可以点击 Download source files 下载本教程的源文件也可以点击 Live preview 在线预览该主题。

像我在第一章里所说的那样，我们将再添加些内容使你的博客更实用和有趣。

在这里我在介绍下本章所要讲述的内容。

1.可管理侧边栏小工具。

2.创建单独页面模版：评论，自定义区域，作者信息。

3.使用自定义区显示图片或其它文章。

4.制作一个搜索框。

1.管理侧边栏小工具。

就绪的侧边栏小工具是一个博客很重要的部分。虽然对于读者来说它没有什么作用，但对于博客管理者来说作用是很大的。设想一下，你有很多的内容要展现在侧边栏，例发友情链接，文章，分类目录，标签云，广告区域等等。在sidebar.php文件中定下标记虽然很方便，但是让WordPress来管理不更容易吗。可管理的侧边栏小工具让你可以很方便的使用WordPress的管理面板来添加文本，列表和广告区域。
 说不如做，下面就开始。打开你在第一章中已经保存的sidebar.php文件。我们要想想哪部分的代码是需要保留的即使启用了小工具。管理侧边栏小工具的条件是这样：如果侧边栏小工具可用，那么选择它的代码标记并显示小工具。否则，显示原始的侧边栏标记。下面是没有修改的管理侧边栏小工具标记代码。

<!–Code that will stay even if the widgets are used–>

<?php /*  Widgetized sidebar, if you have the plugin installed. */

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

<!–Code to be replaced by Wordpress–>

<?php endif; ?>

这里的说明很清楚。因此我们只需要在自己的侧边栏里面使用它们。你还要知道哪部分是你仍需要保留的。通常搜索区的代码是必需保留的。当然你也可以让WordPress自动去添加它。但是这样的话你就不能添加自定义的搜索表单元素。


 <div id=“navigation”>

<p><strong>Navigation  Here</strong></p>

<ul>
<li><a href=“<?php  bloginfo(‘url’); ?>”>Home</a></li>

<?php  wp_list_pages(‘title_li=’); ?>

</ul>

</div>

<div  id=“extra”>

<form id=“searchform” method=“get” action=“<?php  bloginfo(‘home’); ?>”>

<input type=“text” name=“s” id=“s” size=“15″ /><br />

<input type=“submit” value=“<?php  esc_attr_e(‘Search’); ?>” />

</form>

<?php /* Widgetized  sidebar, if you have the plugin installed. */
if (  !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) :  ?>

<p><strong>Categories</strong></p>

<ul>

<?php  wp_list_categories(‘title_li=’); ?>

</ul>

<?php endif;  ?>

</div>

在里我需要说明一下，我添加了一个搜索表单，使用的是WP定义的值。如果你移除了它们，搜索表单将不能使用。


 <form id=“searchform” method=“get” action=“<?php bloginfo(‘home’);  ?>”>

<input type=“text” name=“s” id=“s” size=“15″ /><br  />

<input type=“submit” value=“<?php esc_attr_e(‘Search’); ?>” />

</form>

这里的侧边栏小部件以外的代码在先前的sidebar.php文件中你已经知道。这些代码的结果是：如果没有任何的侧边栏小工具，只显示分类，否则显示你激活的小工具。
到这我们还没有完成。没有增加功能函数这些代码是不会工作的。通常，不去修改WP的核心代码，我们只是增加一些新的功能到一个你创建的functions.php文件中。把下面的代码添加到这个文件中以激活侧边栏小工具的功能。


 <?php


if ( function_exists(‘register_sidebar’)  )

register_sidebar(array(

‘before_widget’ => ”,

‘after_widget’ => ”,

‘before_title’ => ‘<p><strong>’,

‘after_title’ => ‘</strong></p>’,

));


?>

在这你还需要一些解释吧。在’ ‘中你还需要写下些标记。使小工具前和后能使用div标签，当然你的模版如果需要。对于我们当前的布局，我们不需要添加任何内容。对于每一个小工具（例如类别）的标题都被封装在strong段落的标签中。希望你已经明白了。这就是关于侧边栏小工具你所要了解的一切。
2.添加一个”更多内容“的链接
在你的博客中”更多内容“的链接是用来不在首页显示文章的所有内容。你有很多方法来实现它。

在你在WP面板中发表文章时这个标签可以通过一个小按键来实现。你可以同时按下ALT+SHIFT+T或者像下面那样点击按钮。
more_tag
如果你不知道它是用来做什么的，我将给你举个例子。假如你的一篇文章有两段，但是你只想在首页上显示它的第一段。那么在你的文章的第一段的结束地方点上面据说的按钮，你将会看到出现了一条虚线和一个标签”more“。所有虚线后面的内容将不在首页显示。
还有一些事情是你需要在index.php文件中修改content标记。因为源文件的第一部分并没有为内容标记设置任何的参数，你需要添加它。复制并粘贴下面的代码替代原有的标准内容标记：
<?php the_content(__(‘Read more…’)); ?>

不要移除段落的标记，只修改content标记。现在在你的每一篇有”更多内容“标记的文章里都有”Read more…”链接了，去试下吧。
2.2使用摘录

另一种方法是通过摘录来实现它。这个有一点困难。当你在WP里面发表一篇新文章时，如果你使用了“更多内容”标签，你会看到一个摘录（excerpt）框摘录框会自动使用虚线前面的内容。如果你在WP编辑区不使用它，它就为空。

这样，你就可以写一些不同的东西，像是简短的介绍和说明。你可以把文章的一些内容写在一个随机的内容描述里。
如果你发表那些内容，你会发现它们出现在单个文章全部内容中。想让你的文字出现在摘录里，你需要修改index.php的loop内容，代替：
<?php the_content(__(‘Read more…’)); ?>

你需要把摘录代码写入：
<?php the_excerpt(); ?>

现在，看一下有什么不同。
2.3使用限制插件
使用这样一个插件有时候是很方便的。通过插件，你可以限制你的显示内容的多少或者只显示文章的第一段。你可以参考下面的三个插件：

你只需要选择一个适合你的。

3.评论模版：在WP中使用评论
当制作一个自己的WP主题时，我最讨厌的部分就是评论的版块了。倒不是因为它有多难，而是因为你需要很多的样式表来实现一个好的评论模块。我不多讲样式表，因为那是靠你的创造力和CSS技巧的。我只在这里说下怎么在一个主题里面启用评论和里面标记的作用。在编辑comments.php里你要先了解点php的基本知识。现在，我只讲怎么使用它们。我们打开WP经典主题里面的comments.php文件（wp-content/themes/classic目录下）。把它保存在你的主题文件夹下（layout7）。如果你不是太了解php也没关系，你并不需要掌握太多。先不要修改它。然后打开你的single.php，在content标签后加添加下面代码：
<?php comments_template(); ?>

这样就启用了评论块。你会看到页面前后都有“no comments”，以及一个“Leave a comment”的表单。你可以作为一个游客留言也可以login后以admin身份留言。下面是你编辑comments.php所要知道的重要代码：

 <?php comment_author_link() ?> <!– The author of the comment  –>

<?php echo get_avatar( $comment, 32 ); ?> <!– The  commenter’s avatar (orGravatar) –>

<?php comment_text() ?> <!–  The commenter’s comment text –>

<?php comment_date() ?> <!– The date when the comment have been posted –>

<?php comment_time() ?>  <!– The time when the comment have been posted –>

<?php  edit_comment_link(__(“Edit This”), ‘ |’); ?> <!– The edit link forthe  comment (if you want to edit something in your comment) –>

现在构建一个新的评论区很容易了，但你要小心而不要把破坏了php代码。默认的评论代码是下面的：


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

<ol id=“commentlist”>


<?php foreach ($comments as $comment) : ?>

<li <?php  comment_class(); ?> id=“comment-<?php comment_ID() ?>”>

<?php echo get_avatar( $comment, 32 ); ?>

<?php comment_text()  ?>

<p><cite><?php comment_type(_x(‘Comment’, ‘noun’),  __(‘Trackback’), __(‘Pingback’)); ?> <?php _e(‘by’); ?> <?php  comment_author_link() ?> — <?php comment_date() ?> @ <a  href=“#comment-<?php comment_ID() ?>”><?php comment_time()  ?></a></cite> <?php edit_comment_link(__(“Edit This”), ‘ |’);  ?></p>

</li>


<?php endforeach; ?>


</ol>


<?php else : // If there are no comments yet ?>

<p><?php  _e(‘No comments yet.’); ?></p>

<?php endif; ?>
现在我就解释下吧。从第一行开始：如果你的文章留有评论，评论将以foreach php的格式显示。如果没有，显示一个文本：“No comments yet”。想要改变你的评论样式，你只需要修改foreach内的代码。这是很容易的，我会给你做个演示。
删除<ol>标签foreach内的所有内容，你只需要保留下面的就行：

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


<?php foreach ($comments as $comment) : ?>


<?php endforeach; ?>


<?php else : // If there are no comments yet ?>

<p><?php  _e(‘No comments yet.’); ?></p>

<?php endif; ?>
接着，用<div id=”comments”>封装foreach，像默认部分用ol封装一样。现在，把下面的代码加入到foreach函数里：

 <div id=“comments”>

<p><strong><?php  comment_author_link() ?> said this on <?php comment_date() ?> at  <?php comment_time() ?> <?php edit_comment_link(__(“Edit This”), ‘ |’);  ?></strong></p>

<p><?php comment_text()  ?></p>

</div>
现在你可以看一评论是怎么显示的了。我把一些标签删除了，因为作为一个新手，你不需要在开始就掌握太多。我用div代替列表因为这样会更清楚些。id与class是通过CSS来自定义的。如果你像我说的那样修改，你的代码应该是下面那样：

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


<div id=“comments”>


<?php foreach ($comments as $comment) : ?>

<div class=“comment”>

<p><strong><?php  comment_author_link() ?> said this on <?php comment_date() ?> at  <?php comment_time() ?> <?php edit_comment_link(__(“Edit This”), ‘ |’);  ?></strong></p>

<p><?php comment_text()  ?></p>

</div>

<?php endforeach; ?>


</div>


<?php else : // If there are no comments yet ?>
<p><?php  _e(‘No comments yet.’); ?></p>

<?php endif; ?>

更多操作comments.php的内容可以到WordPress codex寻找你需要的信息。这里所说的只是最基本的内容。希望你已经知道所有我在这儿讲的了。

4.使用自定义域为文章显示缩略图
自定义域是WP的一个重要的特色。如果你熟练使用自定义域，你能让你的博客显出一个很好的效果。你可以给每篇文章都做一个缩略图（这里所讲的），显示一些特定的信息和链接（在线预览，演示按钮甚至是你文章的源链接）。
它在哪呢？自定义域在发送Trackbacks下面。在你的管理面板“文章”-“添加新文章”下。

trackback
使用它并不难。你只用知道调用一个指定名称的自定义域标签。如下：

<?php echo get_post_meta($post-&gt;ID, ‘custom field name’, true);  ?>

如果你用image代替“custom field name”，WP将创建一个名为image的自定义域。因此你可以给它起任何一个名字。还不是太清楚吗，我们使用自定义标签来为文章创建缩略图。我们将使用image标签生成一个源链接来介绍自定义域：

<img src=“<?php echo get_post_meta($post-&gt;ID, ‘image’, true); ?>” alt=“<?php the_title(); ?>” />
此标签应该放在index.php和single.php文件中的content标签上面。好了，用image来创建一个自定义域，并在它的值里面给出一个图象的链接地址。
custom field

你要注意，如果不能链接到你的缩略图，文章链接将显示无图片。因此你要为每篇文章添加缩略图，这就是你的全部工作。

5.作者信息：单面模版和配置文件
WP有预定义的函数输出作者的详细信息。如果你想在单页显示你和其它作者的一些信息这将是很有用的。WP也为所有作者创建了一个可以显示信息的配置页面：发布信息和描述。
听起来有点困难，但是很容易。就像其它内容一样，你只需要知道一个或者两个（如果你还想显示作者名字）标签来显示详细的信息（在单页模版和其它地方）。粘贴下面的代码到single.php文件中循环代码的开始或者结束部分。



 <p><strong><?php the_author_posts_link();  ?></strong></p>

<p><?php the_author_description();  ?></p>


第一行是显示作者发布文章页面的链接，第二个是作者的描述信息（来自WP控制面板的信息）。你可以用div id=”author”来封装这些代码。如果你想这样，应该像下面：


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

<p><strong><a href=“<?php the_permalink();  ?>”><?php the_title();  ?></a></strong></p>

<p>Published on <?php  the_time(‘m d Y’); ?> by <?php the_author(); ?></p>

<img  src=“<?php echo get_post_meta($post->ID, ‘image’, true); ?>” alt=“<?php the_title(); ?>” />

<p><?php the_content();  ?></p>

<div id=“author”>

<p><strong><?php  the_author_posts_link(); ?></strong></p>

<p><?php  the_author_description(); ?></p>

</div>

<?php  comments_template(); // Get wp-comments.php template ?>

<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria.’);  ?></p>

<?php endif; ?>


现在，创建作者的配置信息。打开page.php文件保存为author.php。删除整个循环代码和所有不在content div的代码，复制下面的代码。



 <p><strong><?php the_author_posts_link();  ?></strong></p>

<p><?php the_author_description();  ?></p>

<ul>

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

<li><p><strong><?php  the_title(); ?></strong></p><p>Published on <?php  the_time(‘m d Y’); ?></li>

<?php endwhile; else:  ?>

<p><?php _e(‘Sorry, no posts matched your criteria.’);  ?></p>

<?php endif; ?>

<ul>


你知道了，作者的信息是在循环的外面。我们还想显示作者发布有多久了。我们创建一个循环，但这次我们只显示文章的题目和日期。好了，保存文件开始测试吧。


结语

好了，这就是我想说的全部基本知识。还有问题请留言吧。或许我会在以后的教程中说明。快乐的开始自己的WP主题创建吧。如果帮你创建了一个好的主题，请告诉我哦。精彩随后……



源文地址：http://www.1stwebdesigner.com/tutorials/how-to-create-your-first-wordpress-theme-part-2-2/


Tagged: ,

§ Leave a Reply

You must be logged in to post a comment.

What's this?

You are currently reading 如何创建个人WordPress主题:第2章 at Celestial Empire.

meta

  • Author: Trueboy
  • Comments: No Comments
  • Categories: WordPress