对于如何在WordPress中显示推荐文章，网上有非常多方法，但似乎不是那么令人满意。在本教程中，我们将与大家分享一种可以让用户选择某些特定文章并通过使用WordPress2.9新增的缩略图功能来显示这些文章的方法。此方法可以避免使用“置顶文章”，在其他一些自定义的方法中由于其他功能不可避免要使用到“置顶文章”。
注意: 使用本教程需要熟悉一些WordPress、PHP、HTML和CSS知识。
我们修改了由W3C Gallery公司San制作的Featured Posts Lists插件。虽然San给这款插件创建了一个高级版本可以显示图片，但它需要一个自定义字段。这样一来，你只能在2.9中使用这个缩略图功能。
最终效果
修改插件
首先，将下面的代码复制到functions.php 文件或将它作为插件上传到一个单独的文件里。
<?php
/*
Plugin Name: Featured Posts List with Thumbnail
Plugin URI: http://www.w3cgallery.com/w3c-css/display-specificmultiple-posts-as-featured-post-list-plugins
Description: Display specific/multiple posts List with Thumbnails on your sidebar or any place of your site. It creates a tab "Featured Posts List" in "Settings" tab
Version: 2.0
Author: SAN – w3cgallery.com & Windowshostingpoint.com & Syed Balkhi
Author URI: http://www.w3cgallery.com/
*/// Main function to diplay on front end
function featuredpostsList() {
global $post, $wpdb, $posts_settings;
// posts_id from database
$posts_id = $posts_settings['posts_id'];if($posts_id) {
$posts_idarray = explode(',',$posts_id);
foreach ($posts_idarray as $list){
$post = new WP_Query('p='.$list.'');
$post->the_post();
?>
<div class="popcontainer">
<div class="popthumb"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
<div class="popcontent">
<h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div class="popauthor"><?php the_time('M j, Y') ?></div></div>
</div>
<?php }
} else {
echo $before ."None found". $after;
}
}$data = array(
'posts_id' => ''
);
$ol_flash = '';$posts_settings = get_option('posts_settings');
// ADMIN PANLE SEETTING
function posts_add_pages() {
// Add new menu in Setting or Options tab:
add_options_page('Featured Posts List', 'Featured Posts List', 8, 'postsoptions', 'posts_options_page');
}/* Define Constants and variables*/
define('PLUGIN_URI', get_option('siteurl').'/wp-content/plugins/');/* Functions */
function posts_options_page() {
global $ol_flash, $posts_settings, $_POST, $wp_rewrite;
if (isset($_POST['posts_id'])) {
$posts_settings['posts_id'] = $_POST['posts_id'];
update_option('posts_settings',$posts_settings);
$ol_flash = "Your Featured List has been saved.";
}if ($ol_flash != '') echo '<div id="message"class="updated fade"><p>' . $ol_flash . '</p></div>';
echo '<div class="wrap">';
echo '<h2>Add Posts ID to Create Featured Post List</h2>';
echo '<table class="optiontable form-table"><form action="" method="post">
<tr><td colspan="2"><strong>This plugin gives full freedom to display multiple posts as Featured Post List to your site.</strong></td></tr>
<tr><td><strong>Post ID :</strong></td><td><input type="text" name="posts_id" value="' . htmlentities($posts_settings['posts_id']) . '" size="50%" /></td></tr>
<tr><td colspan="2"><strong>SAN Hint: To Add Multiple Post IDs use " , " for exmple : " 1, 2, 3" </strong></td></tr>
</table>';echo '<Div class="submit"><input type="submit" value="Save your list" /></div>
<p>Paste this code into where you want it to display featured posts list <strong><?php featuredpostsList(); ?></strong> <br/> Or you can pass variable before and after like this default setting <strong><?php featuredpostsList($before = <li>", $after = </li>") ?></strong></p>
</form>';
echo '</div>';}
add_action('admin_menu', 'posts_add_pages');
?>
完成后，你可以在模板文件的任何地方粘贴该代码即可。
<?php featuredpostsList(); ?>
自定义CSS
这里需要用到自定义的CSS分类，在style.css文件里粘贴下面的代码：
.popcontainer{
border-bottom: 1px solid #D0CDC5;
width: 274px;
float: left;
padding: 0 0 15px 0;
margin: 0 0 15px 0;
}
.popthumb{
width: 60px;
float: left;
background: #D0CDC5;
padding: 5px;
margin: 0 10px 0 0;
}
.popcontent{
width: 185px;
float: left;
}
.popcontent h2{
font-size: 13px;
margin: 0 0 3px 0;
padding: 0;
}
.popcontent h2 a{
text-decoration: none;
}
高级选项
使用上面的代码将显示默认的缩略图和文章标题以及发布日期。问题在于你可能想要使用不同大小的缩略图。然而你的主题很可能还在别处使用了缩略图功能，使用当前的代码你就无法使用两个不同尺寸的缩略图，因此你得稍作调整才能够添加一个新的图片尺寸。
打开functions.php文件找到缩略图代码并添加以下代码:
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true ); // Normal post thumbnails
add_image_size( 'featured-thumbnail', 60, 60 ); // Featured thumbnail size
在前面的插件里找到下面的几行代码:
<div class="popthumb"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
并将它替换为:
<div class="popthumb"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('featured-thumbnail'); ?></a></div>
这样你就可以使用两种不同大小的缩略图了。
不过这里也有一个问题，如果你的缩略图不成比例，那么它会以更小的图片而不是60*60显示，因为WordPress没有修剪功能。为了避免这个问题你可以使用 Additional Image Sizes Plugin 插件，该插件拥有修剪的功能。将自定义的图片尺寸命名为推荐缩略图，同样地也使用上面的代码来代替原来的代码即可。
我们使用这种方法是因为我们需要使用置顶文章来显示另一份文章列表。对于缩略图，我们选择使用Additional Image Sizes 插件而避免使用TimThumb JavaScript 以保持网站加载的速度。
原文：how-to-display-featured-posts-with-thumbnails-in-wordpress
分类：新闻资讯