かわたま.net

Enjoy Creative! かわたまのwebメモ

【wordpress】各記事に付けられたタグを表示するテンプレートタグ「the_tags()」をカスタマイズしてみた

2014 March 12

Tag:

wordpressで各記事に付けたタグ(tag)を表示して、そのタグの記事一覧ページへのリンクを表示するためのテンプレートタグ「the_tags()」を使ってみました。
デフォルトの「タグ:〇〇」のままでもいいのですが、せめて英語にしたい・・・。
と思って調べたら簡単にカスタマイズできたので具体的な設定方法をメモします。

基本

roop.phpやsingle.phpなど、テンプレートファイル内で使用します。

<?php the_tags(); ?>
#または
<p><?php the_tags(); ?></p>

この基本のまま使うと

<p>タグ: <a href="#" rel="tag">タグA</a>, <a href="#" rel="tag">タグB</a></p>

と出力され、表示は

タグ: タグA,タグB

となります。

このテンプレートタグ「the_tags()」のパラメータ

<?php the_tags('前', '区切り文字', '後'); ?>

それぞれ初期値は

・・・タグ一覧の前に表示する文字列。初期値は Tags: 。
区切り文字・・・タグ名とタグ名の間のに表示する文字列または記号。初期値は、カンマ(, )。
・・・最後のタグの後ろに表示する文字列。初期値は表示なし。

となっています。

見出しを変える(タグ;)

<?php the_tags('Tags:', ' '); ?>

タグ一覧の前に表示する文字列を指定できます。

Tags: タグA タグB

区切りを変える(カンマ, 線| など)

<?php the_tags('Tags:', ' | '); ?>


Tags: タグA | タグB

リスト表示する

htmlを追加する場合は以下のように書きます。リスト表示したい場合は、

<?php the_tags('<ul><li>','</li><li>','</li></ul>'); ?>

タグ: <ul><li><a href="#" rel="tag">タグA</a></li>, <li><a href="#" rel="tag">タグB</a></li></ul>

となります。同じようにそれぞれにcssを追加することもできます。

タグそれぞれにcssを追加する

<?php the_tags('<span class="tags">','</span><span class="tags">','</span>'); ?>

タグ: <span class="tags"><a href="#" rel="tag">タグA</a></span>, <span class="tags"><a href="#" rel="tag">タグB</a></span>

タグごとに異なるcssを指定するにはまた違う方法が必要みたいです。
プラグインも色々ありますができればプラグインなしでシンプルにカスタマイズしたい。。。

その方法についてはまた調べて記事にしますね^O^

オススメのwordpress教本

▼WordPressデザインブック3.x対応
webデザイン上、WordPressの基本的ことが、実用例と一緒に体系的かつ網羅的にわかりやすく解説されていてかなりオススメです。

▼WordPressデザイン、仕事のネタ帳、見た目と効果を向上させるプロのテクニック
サイトの目的に応じたデザインカスタマイズ、追加機能の実装方法などの解説がのっています。

▼本格ビジネスサイトを作りながら学ぶ WordPressの教科書
XHTML/CSSでのサイト制作はできるが、WordPressを使うのは初めての方
ビジネスレベルのWebサイトをWordPressで構築しようとしている方
html,cssは使えるけどphpは初心者
そんな方にオススメです。