出力される投稿タグそれぞれに別のclassを付与して見た目をいじる[WordPress使えそうなスニペットシリーズ]

コーポレートサイトでよくありがちなのが、新着情報タイトルをトップページに表示させるってやつで、
言わずもがなget_postsでちょちょいとやるわけなんですが、こういう感じのサイトもよくあるよね。

冒頭のアイコンっぽい部分は投稿タグを出力。CSSでそれっぽくスタイリング。
タグごとに色分けしたいから、それぞれのタグをあたりで囲んで、タグごとにユニークなclassを付ける、というのがやりたいこと。

この手の質問は過去にフォーラムでも挙がっていたのだけど、

まー正直、どれも[解決済み]になってないし、まったくもってしっくり来ない。
日本語のブログではなかなか情報が見つからない。

日本語でダメなら英語で検索

そこで、検索ワードを「wordpress add class the_tags」という感じで英語に変えて調べてみたところ、
このページがヒットした。

stackoverflowっていう海外のQ&Aサイトですね。

そうかそうか。the_tagsじゃなくてget_the_tagを使うのか。ふむふむ。

で、Codexに戻って確認。

ふむふむ。
で、stackoverflowに書いてあったコードそのままではイマイチだったので、ちょっとだけ書きなおしたのがこれ。

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

spanじゃなくてaタグで囲むならこうかな。

<?php
$posttags = get_the_tags();
$homeurl = home_url();
if ($posttags) {
     foreach($posttags as $tag) {
          echo '<a href="' . $homeurl . '/archives/tag/' . $tag->slug . '" class="' . $tag->slug . '">' . $tag->name . '</a>';
}} ?>

これでなんとなくそれっぽくなった。
投稿タグのスラッグをそのままclassとして吐き出すというだけのコード。

が、問題点も多々ある。

  • 英語圏なら何の問題もないが、我々日本語ユーザーがこれをやるときには、面倒だがタグのスラッグ名をダッシュボードから英数字に変更してやらないと、付与されるclassが日本語になる(正確には%e3%83%97%e3%83っていうような感じでエンコードされるけど)
  • パーマリンクを変えたら/archives/tag/ という部分のパス指定書きなおし
  • カスタムフィールドのほうがいいんじゃないかっていうのは言わない約束

今回は自分でもイマイチ感があるけど、とりあえずPHPを操れない自分は、普段こうして情報を探ってるという手順の紹介くらいにはなったかな。
【普通に検索 → 日本語フォーラム内検索 → 英語で検索 → それっぽいのが見つかったらCodexに戻って調べる】

おまけ:結局・・・

色々考えたあげく、実務では結局カスタムフィールドでやることにした。

コメント / トラックバック 1 件

出力される投稿タグそれぞれに別のclassを付与して見た目をいじる[WordPress使えそうなスニペットシリーズ] | マイペースクリエイターの覚え書き « なるぱらブックマーク2012/03/01 07:13

[…] リエイターの覚え書き出力される投稿タグそれぞれに別のclassを付与して見た目をいじる[WordPress使えそうなスニペットシリーズ] | マイペースクリエイターの覚え書き. Share this:TwitterFacebookL […]

コメントをどうぞ

メールアドレス (必須・公開されません)
コメント本文

  • スパム・迷惑コメント投稿防止のため、メールアドレスの入力が必須ですが、公開はされません。何卒ご協力のほどお願いいたします。
  • 投稿いただいたコメントは管理者のチェック後掲載しておりますので、即時には反映されません。
  • 記載内容に関する批判や間違いの指摘などはそのまま掲載する方針ですが、投稿内容と無関係な誹謗中傷、一方的な罵詈雑言の場合は削除させていただく可能性があります。
  • 通常業務の合間にコメントチェックをしておりますので、すべてのコメントへのお返事が出来ない場合もございます。あらかじめご了承ください。
  • 管理人個人への連絡等は、コメント欄ではなくコンタクトフォームをご利用ください。

書籍を執筆しました

WordPress 標準デザイン講座【Version 4.x対応】


翔泳社さんより、2015/02/27発売しました。2年経ちますのでもう賞味期限切れだとは思いますが、一応実績として...

寄付歓迎(・ω<)☆

当ブログの記事があなたの役に立ったら、気が向いたらでいいのでドネーションいただけると更新の励みになります!
気が向いた方はこちらから

ブログ内検索