ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

WordPress[Stinger5] フッターにカテゴリを追加するカスタマイズ

   

WordPress[Stinger5] フッターにカテゴリを追加するカスタマイズ

前回、人気記事などをサイドバーに表示させる「WordPress Popular Post」の表示をStinger5と同じような表示にするカスタマイズを行いました。

見た目がそろってとても良い感じになりました。今回は下記の画像のようにフッターにカテゴリーを表示させてみたいと思います。

WordPress[Stinger5] フッターにカテゴリを追加するカスタマイズ

今回もMAMPを使ったローカル環境のWordPressで設定を行って行きます。ちなみに導入方法を書いた記事はこちら、

スポンサーリンク

「Stinger5」に子テーマを導入する方法も書いています。子テーマでの説明となりますので、導入していない方はこちらからどうぞ〜。

まずはfunction.phpを編集

記述を間違えたらブログが真っ白になってしまう(笑)「function.php」を編集します。初心者の方は必ずバックアップをしておきましょう。自分はTransmit4を愛用しているので、それで「function.php」を編集します。


Transmit
カテゴリ: ユーティリティ, 仕事効率化

function.phpの187行目ぐらいに以下の記述があります。

上記の2行目

の最後の4を5に変更して表示するウイジェット数を4から5に変更します。下記のようになっていれば問題ありません。

次にその下225行目ぐらいに空白の行があります。

WordPress[Stinger5] フッターにカテゴリを追加するカスタマイズ

そこに以下の記述をコピペします。

最終的に以下のようになれば問題ありません。

WordPress[Stinger5] フッターにカテゴリを追加するカスタマイズ

スポンサーリンク

ダッシュボードに戻って確認します。

ダッシュボード → 外観 → ウィジェット を確認すると、

WordPress[Stinger5] フッターにカテゴリを追加するカスタマイズ

上記のように「フッター」が追加されています。そこにカテゴリーを追加します。自分は投稿数を表示させました。

WordPress[Stinger5] フッターにカテゴリを追加するカスタマイズ

次にfooter.phpを編集してフッターにカテゴリを表示させます

親テーマに入っている「footer.php」を子テーマにコピーして子テーマの「footer.php」で作業していきます。

まず下記の記述をコピーして、

WordPress[Stinger5] フッターにカテゴリを追加するカスタマイズ

上記のfooter.phpの2行目にペーストします。最終的にこのようになれば問題ありません。一回ブログを確認してみましょう。

WordPress[Stinger5] フッターにカテゴリを追加するカスタマイズ

一回ブログを確認してみましょう。

WordPress[Stinger5] フッターにカテゴリを追加するカスタマイズ

デザインを修正する記述をstyle.cssに書きます。子テーマのstyle.cssの一番下か任意の場所に下記の文章をコピペしてください。

次に親テーマのstyle.cssから下記の部分をコピーして子テーマに貼付けてから編集します。

この中の

この部分を以下に書き換えます。コピペでいいでしょう。

コピペしたら確認ブログを確認してみましょう。

WordPress[Stinger5] フッターにカテゴリを追加するカスタマイズ

フッターにカテゴリーが綺麗に並びました。フッターの背景を白ではなくブログ全体の背景にしたい方は、最後の

footerの部分を抜いてください。又、背景を透過させたい方は最後の行の「 background: rgba(255,255,255,1);」の最後の1を0.7や0.8に変更してください。すると最初に紹介した完成形になります。

WordPress[Stinger5] フッターにカテゴリを追加するカスタマイズ

先日サイドバーの背景を変更するカスタマイズもしました。そちらも行いたい方は下記のリンクからどうぞ。

スポンサーリンク

以前まではサイドバーにカテゴリーを表示させてましたが、新着記事や人気の投稿が目につきやすい方がブログ回遊率が上がるんではないかと思いフッターへ移動してみました。今回参考にさせて頂いたブログはこちら、

また何か思いついたら書きたいと思います。読んで頂いてありがとうございました。

 - WORDPRESS

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

WordPress 蛍光ペン風テキスト装飾をCSSに設定
WordPress 蛍光ペン風テキスト装飾をCSSに設定
WordPressにAmazonアソシエイトのプラグイン「AmazonJS」を導入
WordPress[AmazonJS] Amazonアソシエイトのプラグインを導入
WordPress[Ultimate TinyMCE] ビジュアルエディタを拡張するプラグイン
WordPress[Ultimate TinyMCE] ビジュアルエディタを拡張するプラグイン
WordPress ブログにメンテナンス中と表示 Easy Pie Maintenance Mode
WordPress ブログにメンテナンス中と表示 Easy Pie Maintenance Mode
WordPress[Public Post Preview] 記事を限定公開する
WordPress[Public Post Preview] 記事を限定公開する
WordPressテーマ「Stinger3」のサイドバーの幅を変更する方法
WordPressテーマ「Stinger3」のサイドバーの幅を変更する方法
WordPress[Acunetix WP Security] 基本的なセキュリティー対策と脆弱性対策
WordPress[Acunetix WP Security] 基本的なセキュリティー対策と脆弱性対策
WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更
WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更
WordPress[MAMP] ローカル環境へ本番環境を復元する
WordPress[MAMP] ローカル環境へ本番環境を復元する
WordPress Popular PostをStinger5と同じ表示にカスタマイズ
WordPress Popular PostをStinger5と同じ表示にカスタマイズ