やっほう！WEBエンジニアのテツヤマモト(@okapo192)です。
今回は「”STORK”のブログトップに、カテゴリー切り替えタブを実装する方法」を共有します。
この辺りの疑問に答えていきます。
今回は、くまぺさん(@bearpe_)のカスタマイズ記事を参考に、一部改良してコードを書きました。
とてもわかりやすい方法でコードを書いてくれて感謝です。
参考：STORK(ストーク)にJINやSANGOのようなタブ機能を追加するカスタマイズ【WordPress】
今回紹介する方法を使えば、特にプログラミングの知識が無くとも、5分程度でカスタマイズ可能です。
最新記事が並んでいるだけの味気ないトップページよりは、読者の導線が一気に改善するかと思います。
やりたいこと
ブログトップページに、カテゴリーごとに記事を切り替えるボタンを作りまります。
このブログのトップページに実装しているので確認してみてください。
これができたら、読んで欲しいカテゴリーに辿り着いてもらいやすくなりますね！
ちなみに、くまぺさんのコードから2点改良を考えてみます。
- ①各記事の抜粋欄を削除する
- ②記事が１ページで収まらないカテゴリーを選んだ場合は、NEXTボタンを表示する
WordPressに詳しくない人でも難しくないよう、管理画面からのみの編集可能にしたので、さくさく進めていきましょう。
手順①：CSSをコピペ
管理画面「外観」→「テーマの編集」に進み、編集するテーマを「stork_custom」を選択します(①)。
次に、スタイルシートファイルに進みまして(②)、以下コードを適宜コピペしましょう(③)。
最後に「ファイルを更新」をクリック(④)して、こちらは完了です。
手順②：テーマのための関数にコピペ
続きまして、「スタイルシート」の下にある「テーマのための関数」を選択しまして(①)、同じように以下のコードをコピペします(②)。
▼ほんの一部コードを改良しました。
コピペ完了次第、ファイルを更新します(③)。
上は抜粋欄を表示させるコードですが、必要ない場合は、98行目〜105行目記述を削除します。
▼個人的にはブログの抜粋欄は削除派です。
手順③：ウィジェットにコピペ
最後に、管理画面「外観」→「ウィジェット」を編集します。
トップページ上部
まずは「PC：トップページ上部」と「SP：トップページ上部」の2箇所に、テキストウィジェットを追加します(①)。
続いてテキストモードにタブを切り替えた上で(②)、以下コードをコピペします(③)。
コピペ次第、保存です(④)。
PCとSPの2箇所あるのと、カテゴリー名が手入力なので注意です。
トップページ下部
同じく「PC：トップページ下部」と「SP：トップページ下部」の2箇所を編集します。何度も言いますが、2箇所です。
テキストウィジェットを追加し(①)、 テキストモードにタブを切り替え(②)、以下コードをコピペします(③)。
コピペ次第保存です(④)。
またこの際、1行目〜3行目で多少の入力作業が必要になります。
- AAA：STORKで使用しているトップページレイアウトを入力。調べ方下記参照。シンプルはsimple, カード型はcard, マガジン型はmagazine。ex) type=“card"
- BBB：表示したい記事数を入力。最新記事やカテゴリー記事の表示数と統一するといいです。 ex) num=“10"
- CCC：カテゴリーIDを入力。調べ方下記参照。ex) cat=“14"
▼AAAは管理画面「外観」→「カスタマイズ」→「グローバル設定」で、トップページ記事レイアウトをPC・スマホそれぞれ確認してください。
▼カテゴリーIDは、管理画面「投稿」→「カテゴリー」に進み、カテゴリー名にカーソルを当てて(①)、ブラウザ下のURL(②)で確認できます。
完成
ここまででタブ切り替えが完成しました。
このタブでメインカテゴリーを紹介できるので、ヘッダー部分からメニューを削除しました。
いやーかなりスッキリした感じがします！
また何か便利なカスタマイズ思いついたら紹介します。
追記
2018年9月9日コード改善
トップページ下に組み込むコードに誤りがあり、ショートコード が動かずに、そのまま表示されるエラーを多数報告いただきました。
こちら原因把握いたしまして、改善いたしました。ご迷惑おかけして申し訳ございません。
もしエラー直らなかったら、Twitter(@okapo192)に連絡いただければ対応します。
2018年9月16日エラー事例
WordPress4.8以降のテキストウィジェットの使用で、トップページ下部の部分のscriptコードにpタグが挿入され、切り替えが動かないことがあるようです。
こちらは寝ログさんの記事の記事を参考に解決することができました。
functions.phpに以下記述を追記することで回復できます。
|
1 |
remove_filter('widget_text_content', 'wpautop'); |
もし、動作しない場合は試してみていただけると嬉しいです。
2018年10月14日：スワロー実装
STORKの姉妹テーマのスワローでも実装したいと問い合わせいただきました。
少しコード変更が必要ですが、実装は可能ですので、希望であれば、Twitterで連絡いただければと思います。
個別で対応いたします。
2018年11月15日：キャッシュプラグイン
CSSが反映されないエラーについて、問い合わせいただきました。
こちら私では対応致しかねますので、キャッシュ系のプラグインを入れていないか確認お願いします。
2018年12月8日：CSSが反映されないエラー
Simple Custom CSSというプラグインを使っていると、テーマ編集から子テーマのCSSにコピペを行なった際に、CSSが反映されないエラーがあるません。
CSSが反映されず、デザインが崩れてしまった場合は、こちらご確認ください。
