[WordPress] カテゴリにアイコンをつける

PHP
スポンサーリンク
こんにちは。 雑食会社員🐼くま子です

ブログを始めるとき、
WordPressのいいところは自由にカスタマイズできること、
はてなブログのいいところはカスタマイズに時間がとられないこと、
という文字をよく見ましたが、その通りでした。笑

カテゴリの先頭にアイコンをつけるだけでも丸一日かかってしまった…まだまだだなぁ(・ω・｀)

スポンサーリンク

目的

WordPressのサイドバーにアイコンを付ける!

プラグインは探して設定するのが面倒なので、PHPで処理することにしました。
CSSでbackground-imageで指定する方法もありますが、
いちいちカテゴリを追加するたびにCSSをいじるのも面倒なので、一度PHPを書いてしまえば良いようにします。

完成図

今回の対象は赤く囲んだ部分。
プルダウンメニューにしたり、投稿数をおしゃれーにするのは、別記事です。

Simplicityを使用して試しましたが、おそらくどのテーマでも同じ方法で実現可能です。

方法

1. アイコンを用意

  1. カテゴリごとのアイコンを用意する
    • 必要であれば、アイコンがセットされていなかったときに表示するデフォルト用のアイコンをセットする
  2. カテゴリのスラッグ名をファイル名にする
    • ファイル名は、一意にカテゴリを特定できるものであればなんでも良い。IDとかでも可。
      フォルダを見たときにわかりにくいのといちいちIDを確認するのが面倒なので私はスラッグ名にしました。
    • デフォルトは適当に名前をつける(今回はdefault.pngにしました)
  3. 適当なところに保存
    今回は下記に保存したとして説明します
    /wp-content/themes/<テーマのフォルダ>/images/icon
    Simplicityの場合はこんな感じ
    /wp-content/themes/simplicity2-child//images/icon

2. アイコンURLを返す関数を作成

function.phpに以下のコードを追加。

function catIcon($slug) {
    // アイコンファイルを置いたフォルダ(テーマのフォルダからの相対パス)
    $rootpath = "/images/icon/";

    // アイコンファイルのパスを返す
    return get_stylesheet_directory_uri().$rootpath.
    (file_exists(get_stylesheet_directory().$rootpath.$slug.".png")
                ? $slug
                : "default")
            .".png";
}

カテゴリごとにアイコンがあるかどうかを確認し、あればそのパスを返し、なければデフォルトのアイコンへのパスを返す関数を作成。
デフォルトアイコンを作成しない場合は、空パスを返すなり、適宜変更してください。

上記の例は、スラッグをファイル名にした場合の例です。

今回はテーマフォルダ配下にアイコンを配置したため、
1. get_stylesheet_directory()でアイコンがあるかを確認 (7行目)
2. get_stylesheet_directory_uri()で実際に表示するときのURLを取得 (6行目)

しています。
相対パスではだめでした。

3. アイコンを表示

実際にアイコンを表示したい場所にimgタグを追加して、src=<? php echo catIcon("スラッグ名")?> みたいな感じで、2で作った関数を呼び出して、パスを取得する

Simplicityでサイドバーのカテゴリリストにアイコンをつける場合は、下記をfunction.phpに追記すれば良いはずです。
(v2.6.1で確認)

function theme_list_categories( $output, $args ) {
    $replaced_text = preg_replace_callback(
        '#(<li class="cat-item cat-item-\d*">)(<a href=".*\/(.+)".*>.*</a>)#',
        function ($matches) {
            return "{$matches[1]}<img src=\"".catIcon($matches[3])."\">{$matches[2]}";
        },
        $output
        );
    if($replaced_text != NULL)
        return $replaced_text;
    else
        return $output;
}
add_filter( 'wp_list_categories', 'theme_list_categories', 10, 2 );

無理やりですが、正規表現を用いて、
サイドバーに追加されたカテゴリリンクのURLからスラッグを取得し、
2の関数を通してアイコンを取得して、IMGタグを追加しています。

あとはcss等でいい感じに表示したら完成〜(投げやりー)

まとめ

以上の手順で、画像を表示できます。
これで、以降はアイコンを用意して、指定したフォルダにスラッグ名で保存しておけば、勝手に表示されます。
いえーい└(‘ω’)」

スポンサーリンク

コメント