WordPressにはたくさんの便利なプラグインがあり、機能を手軽に追加することができます。しかし、コードが乱れたり、思い通りのデザインにならなかったり。。と四苦八苦することも。ここではプラグインを使わなくても追加できる機能を紹介します。

プラグインを使わずWordPressに機能をつける 目次

1. 人気の記事を表示する
2. 関連する記事を表示する
3. 記事をランダムに表示する
4. 最新のTwitter記事を表示する
5. タグクラウドを表示する
6. ソーシャルブックマークアイコンを表示する
7. アイキャッチ画像
8. カスタムナビゲーションメニュー
9. Twitterフォロワーの数を表示する

1. 人気の記事を表示する

コメントの数が多い記事が人気の記事となります。このサイトではトップ5が表示されています。

<ul>
    <?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 3");
    foreach ($result as $post) {
        setup_postdata($post);
        $postid = $post->ID;
        $title = $post->post_title;
        $commentcount = $post->comment_count;
        if ($commentcount != 0) { ?> 

        <li>
            <h4>
                <a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
                    <?php echo $title ?>
                </a>
           </h4>
        </li>
    <?php } } ?>
</ul>

WordPress プラグインを使わずWordPressに機能をつける 目次へ。

2. 関連する記事を表示する

同じタグのものを関連する記事として表示します。posts_per_page の値で表示させる記事の数を設定します。このサイトでは4つの関連する記事を表示しています。

追記：このコードでは複数タグを取得できません！下に追記したコードを使ってくださいませ。（2011年7月21日）

<ul>
    <?php $tags = wp_get_post_tags($post->ID);
        if ($tags) { $first_tag = $tags[0]->term_id;
        $args=array( 'tag__in' => array($first_tag), 'post__not_in' => array($post->ID), 'posts_per_page'=>4, 'caller_get_posts'=>1 );
        $my_query = new WP_Query($args);

        if( $my_query->have_posts() ) {
            while ($my_query->have_posts()) : $my_query->the_post(); ?>

        <li>
            <h4>
            <a href="<?php the_permalink();?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
            </h4>
        </li>

        <?php endwhile; wp_reset_query(); ?>
        <?php } else { ?>
            <p>関連する記事は見当たりません…</p>
        <?php } } ?>
</ul>

追記：複数タグを取得した関連記事の表示

「上記コードでは先頭のタグのみを取得して、複数タグがある場合全ての関連記事を表示できない！」との指摘を受けましたので、全てのタグを取得できるよう、別コードを書いてみました。こちらをお使いくださいませ。

<?php
	$original_post = $post;
	$tags = wp_get_post_tags($post->ID);
	$tagIDs = array();
	if ($tags) {
		$tagcount = count($tags);
		for ($i = 0; $i < $tagcount; $i++) {
			$tagIDs[$i] = $tags[$i]->term_id;
		}
	$args=array(
	'tag__in' => $tagIDs,
	'post__not_in' => array($post->ID),
	'showposts'=>4,
	'caller_get_posts'=>1
	);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
	while ($my_query->have_posts()) : $my_query->the_post(); ?>
		<li>
            <h4>
                <a href="<?php the_permalink();?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
            </h4>
        </li>
<?php endwhile; wp_reset_query(); ?>
<?php } else { ?>
	関連する記事は見当たりません…
<?php } } ?>

WordPress プラグインを使わずWordPressに機能をつける 目次へ。

3. 記事をランダムに表示する

今まで書いた記事をランダムに表示させます。過去の記事をユーザーに見てもらえるので名記事を眠らせずにすみます。posts_per_pageの値で表示させる数、カテゴリーを指定する場合はcat=1など、カテゴリーIDを指定します。

<?php if (have_posts()) : query_posts('posts_per_page=5&orderby=rand'); ?>
    <ul>
        <?php while (have_posts()) : the_post(); ?>
        <li>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </li>
    <?php endwhile; endif; ?>
</ul>

WordPress プラグインを使わずWordPressに機能をつける 目次へ。

4. 最新のTwitter記事を表示する

いろんな方法がありますが、このサイトではJavaScriptを使ってTwitterの記事を表示させています。下記コードのwebcreatorboxのところを自分のTwitterIDに、count=5のところを表示させたい数に変えます。

<ul id="twitter_update_list"></ul><!-- ここにTwitterの記事が入ります -->

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/webcreatorbox.json?callback=twitterCallback2&amp;count=5"></script>

WordPress プラグインを使わずWordPressに機能をつける 目次へ。

5. タグクラウドを表示する

タグを使った回数によって文字サイズを変更します。このサイトでは一番小さいサイズを120%、大きいサイズを170%、全てのタグを表示するよう設定しています。

<?php wp_tag_cloud('smallest=120&largest=170&unit=%&number=0'); ?>

その他並び替えや除外するタグの設定など、詳しくはこちらを参照してみてください。

WordPress プラグインを使わずWordPressに機能をつける 目次へ。

6. ソーシャルブックマークアイコンを表示する

ソーシャルブックマークのアイコンを表示してユーザーにブックマークしてもらいやすくしましょう。

Twitter

RT @webcreatorbox の部分を自分のTwitterIDに変更します。

<a href="http://twitter.com/?status=RT @webcreatorbox <?php the_title(); ?> <?php the_permalink(); ?>">Twitter</a>

はてなブックマーク

追記：新しいはてなブックマークボタン。設定変更ははてなブックマークボタンのページを参考に。

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

はてなブックマークへブックマークするアイコン

<a href="http://b.hatena.ne.jp/append?<?php the_permalink(); ?>" title="このエントリーを含むはてなブックマーク" target="_blank">はてなブックマーク</a>

はてなブックマークにブックマークしてくれたユーザーの数を表示

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>">
    <img src="http://b.hatena.ne.jp/entry/image/<?php the_permalink(); ?>" alt="<?php the_title();?>" title="<?php the_title();?>" />
</a>

Facebook

Likeボタン。カスタマイズなどはこちらを参照。

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink();?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:71px; height:65px;" allowTransparency="true"></iframe>

シェアリンク

<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" target="_blank">Facebook</a>

Delicious

<a href="http://delicious.com/post?url=<?php the_permalink();?>&title=<?php the_title();?>" target="_blank">Delicious</a>

Digg

<a href="http://www.digg.com/submit?phase=2&url=<?php the_permalink();?>" target="_blank">Digg</a>

StumbleUpon

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank">StumbleUpon</a>

WordPress プラグインを使わずWordPressに機能をつける 目次へ。

7. アイキャッチ画像

サムネイルとして使えるこの機能。設置も簡単です！

functions.php

<?php add_theme_support( 'post-thumbnails' ); ?>

テンプレートファイル

<?php
if ( has_post_thumbnail() ) {
        <?php the_post_thumbnail(); ?>
}
?>

サイズを変更したい時 (functions.php)

set_post_thumbnail_size( 50, 50, true ); // 幅 50 ピクセル、高さ 50 ピクセル、切り抜きモード
set_post_thumbnail_size( 50, 50 ); // 幅 50 ピクセル、高さ 50 ピクセル、リサイズ（ボックス）モード

もっと詳しく設定したい場合はこちらの記事が参考になります。

WordPress プラグインを使わずWordPressに機能をつける 目次へ。

8. カスタムナビゲーションメニュー

WordPress 3.0から追加された機能です。こちらの動画で使い方を説明しています。オプションも多数設定可能です。

Functions.php

<?php add_theme_support('menus'); ?>

テンプレートファイル

// 基本形。これだけで表示されます。
<?php wp_nav_menu(); ?>

// メニュー名を指定したい場合
<?php wp_nav_menu( array('menu' => 'menu-name' )); ?>

WordPress プラグインを使わずWordPressに機能をつける 目次へ。

9. Twitterフォロワーの数を表示する

Twitterユーザー名のところを自分のものと変更してください。

functions.php

<?php
$twit = file_get_contents('http://twitter.com/users/show/Twitterユーザー名.xml');
$begin = '<followers_count>'; $end = '</followers_count>';
$page = $twit;
$parts = explode($begin,$page);
$page = $parts[1];
$parts = explode($end,$page);
$tcount = $parts[0];
if($tcount == '') { $tcount = '0'; }
?>

テンプレートファイル

<?php echo 'フォロワー'. $tcount .'人'; ?>

WordPress プラグインを使わずWordPressに機能をつける 目次へ。

お役にたてれば幸いです！