タグは、ウェブサイトのSEOを向上させる一つの施策となり、また、ユーザーもカテゴリーより詳細に記事を見つけやすくなるため、記事数が多いまたは多くなることを見込んでいるサイト様にとっては重要な要素ですね。ワードプレスの各投稿にタグを表示し、クリックするとそのタグの記事一覧にジャンプする機能を追加する方法をご紹介します。
タグを投稿に付与するには？
まず、初めにタグを投稿に追加する方法を解説いたします。タグはワードプレスに最初から含まれている機能ですので新規投稿画面の右カラムから ,(カンマ) で区切ってそのページの重要な単語を登録できます。
このタグはほかの記事と重複するものを追加した場合、自動的にそのタグリストページが生成され記事をタグごとにひとまとめにしてくれます。
このようにタグとは、小カテゴリーのようなものと考えられてよいかと思います。
すべての投稿にタグリンクを追加するには？
全ての投稿のコメント部分下に、タグリンクを表示してみましょう。管理画面の外観＞テーマの編集 からsingle.phpを選択して、コメントの出力コードの下(comments_templateなどと書いてある部分もしくは、Article等記事本文の囲いの最下部)に下記のコードを追加します(すでにPHPの中にある場合は、＜？PHP ？＞の部分は必要ありません)
<?php the_tags( '関連タグ: ', ', ', '<br />' ); ?>
これで、タグが記事の最下部に表示されるようになりました。
ただこのままだと、デザイン的にタグっぽくありませんね。次の項目ではタグのスタイルを設定する方法を解説します。
タグのスタイルを編集するには？
まず上記のコードを下記のように書き換えます。
<?php the_tags( '関連タグ: <span class="tags">', '</span><span class="tags">', '</span>' ); ?>
これでタグリンクが<span class=”tags”>というクラスのついたspanで囲われるようになりました。
次に、管理画面の外観＞テーマの編集 からstyle.cssを選択し、下記を追記します。このスタイルはタグのリンクに枠をつけるコードとアイコンを表示するためのコードです。
.tags a{
display: inline-block;
line-height: 30px;
margin-right: 5px;
padding: 0 1em;
background-color: #fff;
border: 1px solid #aaa;
border-radius: 3px;
white-space: nowrap;
color: #333;
font-size: 13px;
text-decoration: none;
}
.tags a:before{
font-family: dashicons;
content:"\f323 ";
}
最後にこのタグのアイコンを表示するために、ワードプレスで標準でついているDashiconというアイコンセットを個別ページでも使用できるように読み込む設定を管理画面の外観＞テーマの編集からfunctions.phpに追記します
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}
これでタグらしく見えるようにタグリンクがワードプレスのすべての投稿で表示されるようになりました！
WordPressのテンプレート(テーマ)のカスタマイズのご依頼はWPドクターにお任せください。こちらからお気軽にご相談ください
