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

2017年6月29日
Wordpress

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

↑私が10年以上利用している会計ソフト！

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

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

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

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

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

        &amp;lt;li&amp;gt;
            &amp;lt;h4&amp;gt;
                &amp;lt;a href=&amp;quot;&amp;lt;?php echo get_permalink($postid); ?&amp;gt;&amp;quot; title=&amp;quot;&amp;lt;?php echo $title ?&amp;gt;&amp;quot;&amp;gt;
                    &amp;lt;?php echo $title ?&amp;gt;
                &amp;lt;/a&amp;gt;
           &amp;lt;/h4&amp;gt; 
        &amp;lt;/li&amp;gt;
    &amp;lt;?php } } ?&amp;gt;
&amp;lt;/ul&amp;gt;

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

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

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

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

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

        if( $my_query-&amp;gt;have_posts() ) {
            while ($my_query-&amp;gt;have_posts()) : $my_query-&amp;gt;the_post(); ?&amp;gt;

        &amp;lt;li&amp;gt;
            &amp;lt;h4&amp;gt;
            &amp;lt;a href=&amp;quot;&amp;lt;?php the_permalink();?&amp;gt;&amp;quot; rel=&amp;quot;bookmark&amp;quot; title=&amp;quot;&amp;lt;?php the_title_attribute(); ?&amp;gt;&amp;quot;&amp;gt;&amp;lt;?php the_title(); ?&amp;gt;&amp;lt;/a&amp;gt;
            &amp;lt;/h4&amp;gt;
        &amp;lt;/li&amp;gt;

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

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

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

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

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

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

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

&amp;lt;?php if (have_posts()) : query_posts('posts_per_page=5&amp;amp;orderby=rand'); ?&amp;gt;
    &amp;lt;ul&amp;gt;
        &amp;lt;?php while (have_posts()) : the_post(); ?&amp;gt;
        &amp;lt;li&amp;gt;
            &amp;lt;a href=&amp;quot;&amp;lt;?php the_permalink(); ?&amp;gt;&amp;quot;&amp;gt;&amp;lt;?php the_title(); ?&amp;gt;&amp;lt;/a&amp;gt;
        &amp;lt;/li&amp;gt;
    &amp;lt;?php endwhile; endif; ?&amp;gt;
&amp;lt;/ul&amp;gt;

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

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

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

&amp;lt;ul id=&amp;quot;twitter_update_list&amp;quot;&amp;gt;&amp;lt;/ul&amp;gt;&amp;lt;!-- ここにTwitterの記事が入ります --&amp;gt;

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

追記（2012年10月17日）：TwitterのAPI仕様変更により、上記コードでは表示されなくなりました。「TwitterAPIの仕様変更でツイート取得できなくなった時の応急処置」で当面の対処法が紹介されていますが、Twitter公式ウィジェットにて表示することをオススメします。

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

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

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

&amp;lt;?php wp_tag_cloud('smallest=120&amp;amp;largest=170&amp;amp;unit=%&amp;amp;number=0'); ?&amp;gt;

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

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

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

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

Twitter

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

&amp;lt;a href=&amp;quot;http://twitter.com/?status=RT @webcreatorbox &amp;lt;?php the_title(); ?&amp;gt; &amp;lt;?php the_permalink(); ?&amp;gt;&amp;quot;&amp;gt;Twitter&amp;lt;/a&amp;gt;

はてなブックマーク

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

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

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

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

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

&amp;lt;a href=&amp;quot;http://b.hatena.ne.jp/entry/&amp;lt;?php the_permalink(); ?&amp;gt;&amp;quot;&amp;gt;
    &amp;lt;img src=&amp;quot;http://b.hatena.ne.jp/entry/image/&amp;lt;?php the_permalink(); ?&amp;gt;&amp;quot; alt=&amp;quot;&amp;lt;?php the_title();?&amp;gt;&amp;quot; title=&amp;quot;&amp;lt;?php the_title();?&amp;gt;&amp;quot; /&amp;gt; 
&amp;lt;/a&amp;gt;

Facebook

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

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

シェアリンク

&amp;lt;a href=&amp;quot;http://www.facebook.com/sharer.php?u=&amp;lt;?php the_permalink();?&amp;gt;&amp;amp;t=&amp;lt;?php the_title(); ?&amp;gt;&amp;quot; target=&amp;quot;_blank&amp;quot;&amp;gt;Facebook&amp;lt;/a&amp;gt;

Delicious

&amp;lt;a href=&amp;quot;http://delicious.com/post?url=&amp;lt;?php the_permalink();?&amp;gt;&amp;amp;title=&amp;lt;?php the_title();?&amp;gt;&amp;quot; target=&amp;quot;_blank&amp;quot;&amp;gt;Delicious&amp;lt;/a&amp;gt;

Digg

&amp;lt;a href=&amp;quot;http://www.digg.com/submit?phase=2&amp;amp;url=&amp;lt;?php the_permalink();?&amp;gt;&amp;quot; target=&amp;quot;_blank&amp;quot;&amp;gt;Digg&amp;lt;/a&amp;gt;

StumbleUpon

&amp;lt;a href=&amp;quot;http://www.stumbleupon.com/submit?url=&amp;lt;?php the_permalink(); ?&amp;gt;&amp;amp;title=&amp;lt;?php the_title(); ?&amp;gt;&amp;quot; target=&amp;quot;_blank&amp;quot;&amp;gt;StumbleUpon&amp;lt;/a&amp;gt;

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

7. アイキャッチ画像

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

アイキャッチ画像

functions.php

&amp;lt;?php add_theme_support( 'post-thumbnails' ); ?&amp;gt;

テンプレートファイル

&amp;lt;?php
if ( has_post_thumbnail() ) {
        &amp;lt;?php the_post_thumbnail(); ?&amp;gt;
}
?&amp;gt;

サイズを変更したい時 (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

&amp;lt;?php add_theme_support('menus'); ?&amp;gt;

テンプレートファイル

// 基本形。これだけで表示されます。
&amp;lt;?php wp_nav_menu(); ?&amp;gt;

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

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

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

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

functions.php

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

テンプレートファイル

&amp;lt;?php echo 'フォロワー'. $tcount .'人'; ?&amp;gt;

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

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