201808/02 Memo

【WordPress】ブログに人気のキーワードを表示する方法

たまにはwebブログらしく、技術的な話を。

Twitterなどでよくトレンドのキーワード、人気のキーワードが表示されてますよね。
あれを自身のブログで実装する方法です。

Contents

そもそも「人気のキーワード」とは？
「人気キーワード」の表示方法

そもそも「人気のキーワード」とは？

「人気のキーワード」とは、Twitterなどではよくツイートされている、使用されているキーワードとなります。

WPのタグ機能にはそんな基準はありません。そもそもTwitterとは考え方が少し違いますね。
WPだとよく記事に使用されているタグになりますが、それは人気というわけではないですし。

ブログに当てはめて考えるなら、よく見られているタグ、になるのではないでしょうか。
そうなれば、ブログ内で人気の記事、アクセス数の多い記事に使われているタグが「人気のキーワード」といえるのでは？

という考えから、アクセスランキングの上位記事からタグを抽出し、相対的に「人気のキーワード」を作成します。

「人気キーワード」の表示方法

１）「Simple GA Ranking」プラグインをインストール

人気記事のデータを表示するプラグイン「Simple GA Ranking」をインストールします。
人気記事を表示するプラグインは「WordPress Popular Posts」が有名ですが、アクセスデータをサーバー内に保存する必要があるため、時間がかかってしまいます。あと、少し重いらしいので、「Simple GA Ranking」を使います。

「Simple GA Ranking」はインストール手順が少し難しいので、下記を参照にしてください。

【WordPress】サーバ負荷が軽い「Simple GA Ranking」プラグインで人気記事ランキングを表示する方法｜ Tips Note by TAM

２）functions.phpに以下の関数を追加

以下をfunctions.phpにコピペで追加します。

//GA Rankingから人気のタグを表示する
function my_hot_tags($num){
	if (function_exists('sga_ranking_get_date')) {
		$ranking_data = sga_ranking_get_date();
		if(!$num){$num = 10;}
		if ( !empty( $ranking_data ) ) {
			echo '<p class="my_hot_tags"><span class="title">人気のタグ：</span>';
			$tags = array();
			foreach ( $ranking_data as $post_id ) {
				$gid = $post_id;
				$pTags = get_the_tags($gid);
				if ($pTags) {
					foreach($pTags as $pTag) {
						$tagLink = get_tag_link($pTag->term_id);
						$tagName = $pTag->name;
						$tags[] = '<a href="'.$tagLink.'">'.$tagName.'</a>';
					}
				}
			}
			$tags = array_unique($tags);
			$cnt = 0;
			foreach($tags as $tag) {
				if($cnt >= $num) break;
				echo $tag;
				$cnt++;
			}
			echo '</p>';
		}
	}
}

sga_ranking_get_date();で「Simple GA Ranking」のデータを取得し、そこから人気記事のIDを取得します。
その記事IDデータを元に、タグのリストをつくり表示します。

途中でarray_unique()しているので、タグが重複することはないです。

３）single.phpなど、表示させたい箇所にコードを追加する

single.phpやarchive.phpなど、表示させたい箇所に、以下のコードを追加します。

<?php my_hot_tags('10'); ?>

引数の数字は、表示するタグの数です。指定しない場合は10件表示します。

コードを追加すると、以下のようなかたちでHTMLソースが表示されます。

<p class="my_hot_tags">
<span class="title">人気のタグ：</span>
<a href="タグURL">タグ名</a>
<a href="タグURL">タグ名</a>
：
<a href="タグURL">タグ名</a>
<a href="タグURL">タグ名</a>
</p>

あとはCSSで表示を整えれば出来上がりです。
当ブログでもトップページの上部と記事詳細ページの下部に表示しています。

ただこの方法は、記事のタグ付けがきちんと整理されている必要があります。
表記ゆれや似たような意味合いで違う名前のタグをたくさんつけている場合などは、同じような意味合いで並んでしまう場合があります。

人気記事ランキングや関連記事とも少し違う、新しい記事へ誘導の方法です。
アクセス数や記事の更新数が多いサイト、さまざまなジャンルの記事を扱うメディアブログではちょっとしたアクセントになると思いますよ。