STINGER7:サイドバーのカテゴリーをカスタマイズする方法【ウィジェット】

   

eye_stinger7

STINGER7を使っているほとんどの方はサイドバーにカテゴリーの一覧を表示していると思います。
ウィジェットを使って簡単に表示できるので便利ですよね。

デフォルトだと見た目がイマイチなので、サイトのデザインに合わせてカスタマイズしてオリジナリティを出してみましょう!
今回はこんな感じにしてみます↓

20160412a

記事数も含めた表示のデザインですが、記事数なしにも簡単にできます。
それじゃあやってみよう〜♪

スポンサーリンク

子テーマの使用方法

テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。
子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。

STINGER7での子テーマの使用方法はこちら↓
STINGER7:テーマのインストールと子テーマの使用方法

特にSTINGER7の場合は「header.php」を編集する際には注意が必要です。
こちらの記事を参考にしてください↓
STINGER7:親テーマの任意のファイルを子テーマで編集する方法

ウィジェットでカテゴリーの一覧を表示する

すでにやってる方も多いと思いますが、まずはカテゴリーの一覧を表示方法です。
管理画面左側のメニューから「 外観 → ウィジェット 」を選択します。

左側にある「カテゴリー」を右側の「サイドバーウィジェット」の中にドラッグ&ドロップで持っていきましょう。

20160412b

「タイトル」に入力した文字が見出しになりますのでお好きな文字に変えてください。

投稿数の表示が必要ない方はチェックを外してください。
今回のカスタマイズは「子カテゴリー」は使用しないことが前提なので、「階層を表示」もチェックを外しています。
設定したら「保存」を押すのをお忘れなく。

記事数を<a>タグの中に入れる

まずは記事数を表示する場合に必要なカスタマイズです。
記事数を表示しなくてもよいという方はここは飛ばしてください。

デフォルトだとこんな感じで記事数はリンクタグの外に出ています↓

これだとcssでのスタイリングがやりにくいので、リンクタグの中に記事数も含めるようにします。
以下のコードを子テーマの「functions.php」に追加してください↓

すると下記のようなコードが吐き出され、記事数にもclass名が付けたのでスタイリングしやすくなりました↓

あとは見た目を調整すれば完了です。

CSSでデザインをカスタマイズ!

子テーマの「style.css」に以下のコードを追加します↓

コメント内容を参考に色やサイズなどサイトに合わせてお好みで変えてみてください(^^)

カテゴリーごとにアイコンを表示してみる

カテゴリー毎に違うアイコンを表示することもできます。
WordPressでは自動でカテゴリーごとに違うclass名が付くのでまずはソースを確認しましょう。

class名の確認方法

ブラウザごとの拡張機能を使ったり色々と方法はありますが、手っ取り早いのは「右クリック → ソースを表示」です。

サイトの背景部分など何もないところで右クリックすると「ソースを表示」という項目が出てくると思うのでクリックしてみてください。

ズラズラ〜っとコードが表示されて慣れてないと「なんじゃこりゃー!」って感じですがよく見るとページの文章もちらほら書いてあるので何となくどの部分か分かると思います。
サイドバーのカテゴリー部分のコードを探してみましょう↓

「Ctrl + f」で文字検索を開いて「cat-item」を検索するとすぐに見つかると思います。

見つけたらカテゴリーごと付いている固有のclass名を確認してください。

上記の「WEB」カテゴリーの場合は「 cat-item-13 」ですね。

Font Awesomeでアイコンを表示

確認した固有のclass名を使って「 style.css 」にこのように追加します↓

これをカテゴリーごとに指定するとこんな感じでアイコンを表示できます↓

20160412c

ちなみに「 color: #000000; 」など色の指定も追加すればアイコンだけ色を変えることもできますよ!

STINGER7では「Font Awesome」が最初から使えるようになっています。
他にもたくさんの種類のアイコンがあるので、こちらのページから好きなアイコンを選んでみてください↓

Font Awesome Icons

上記CSS「 content: "\f108"; 」の赤字の部分を変えると好きなアイコンにすることができます。
それぞれのコードはこの部分で確認できます↓

20160411c

まとめ

いかがでしたでしょうか?
カテゴリーのメニューが目立つとサイトの回遊率も上がるかもしれないので試してみてください♪
Font Awesomeも色々と使えて便利なので、ぜひ使い方をマスターしてください!

ではまた〜♪

STINGER7のカスタマイズ記事をまとめました↓

STINGER7:カスタマイズまとめ
このブログでも使用させて頂いているWordPressテーマ「STINGER7」のカスタマイズ記事をまとめました。

スポンサーリンク

この記事をシェアする!

 - WordPress