Top

WordPressでタグを表示させる際リンク処理をさせない方法

記事一覧などでタグを表示させる際、リンク処理(アンカー処理)させない方法。

example

ワードプレスの通常の関数を使ってしまうと、下図のようにリンクの処理が入った状態で表示されてしまいます。

example

PHP

以下、PHP コードの説明です。

リンク処理ありPHP

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

ワードプレスで設定してくれている関数なので便利ですね!ただ一番上図のように、例えばインデックスページや記事一覧ページなどでタグを表示させる際、リンクだと不都合だったりすることがあります。

ex3

図のように周りを囲っているbox全体をアンカーとして扱っている場合、aタグの中にaタグが入ってしまうため不都合です。それを解消するPHP

リンク処理なしPHP

<?php $posttags=get_the_tags();if($posttags){foreach($posttags as $tag){echo '<span class="nLinkTag">'.$tag->name.'</span>';}} ?>

こちらのPHPを使うとタグのテキストのみ持ってきてくれますので便利です。タグそれぞれを<span class="nLinkTag">で囲っているのでCSSでタグ間の隙間などを設定できます。

実際に表示されるHTMLは下記のようになります。

HTML

<span class="nLinkTag">タグ1</span>
<span class="nLinkTag">タグ2</span>
<span class="nLinkTag">タグ3</span>

タグ間の隙間を設定するCSS

CSS

.nLinkTag{
  margin-right:10px; /*隙間の幅*/
}

使う場合は必ずloop内で使ってください。

まだワードプレスの関数を全部見たわけでないので、もしかしたら一発で出来るものがあるかもしれないのですが・・・
備忘録的な紹介でした。

参考
テンプレートタグ/the tags