【STORK】トップページにカテゴリー切り替えタブを導入する【カスタマイズ】

やっほう!WEBエンジニアのテツヤマモト(@okapo192)です。

今回は「”STORK”のブログトップに、カテゴリー切り替えタブを実装する方法」を共有します。

JINとかSANGOを使ってるブロガーみたいに、トップページを便利にしたい!
わざわざ購入するのはなぁ…。今使ってるSTORKでできませんか?

この辺りの疑問に答えていきます。

 

今回は、くまぺさん(@bearpe_)のカスタマイズ記事を参考に、一部改良してコードを書きました。

とてもわかりやすい方法でコードを書いてくれて感謝です。

参考:STORK(ストーク)にJINやSANGOのようなタブ機能を追加するカスタマイズ【WordPress】

 

今回紹介する方法を使えば、特にプログラミングの知識が無くとも、5分程度でカスタマイズ可能です。

最新記事が並んでいるだけの味気ないトップページよりは、読者の導線が一気に改善するかと思います。

スポンサーリンク

やりたいこと

ブログトップページに、カテゴリーごとに記事を切り替えるボタンを作りまります。

このブログのトップページに実装しているので確認してみてください。

スクリーンショット 2018 06 24 19 49 47

これができたら、読んで欲しいカテゴリーに辿り着いてもらいやすくなりますね!

 

ちなみに、くまぺさんのコードから2点改良を考えてみます。

スクリーンショット 2018 06 24 19 53 15
  • ①各記事の抜粋欄を削除する
  • ②記事が1ページで収まらないカテゴリーを選んだ場合は、NEXTボタンを表示する

WordPressに詳しくない人でも難しくないよう、管理画面からのみの編集可能にしたので、さくさく進めていきましょう。

以下編集作業は、子テーマを使用して行います。STORKの公式ホームページから、子テーマをダウンロードして、WordPressに適用させる準備をお願いします。

手順①:CSSをコピペ

管理画面「外観」→「テーマの編集」に進み、編集するテーマを「stork_custom」を選択します(①)。

スクリーンショット 2018 06 24 20 10 49

次に、スタイルシートファイルに進みまして(②)、以下コードを適宜コピペしましょう(③)。

最後に「ファイルを更新」をクリック(④)して、こちらは完了です。

スポンサーリンク

手順②:テーマのための関数にコピペ

スクリーンショット 2018 06 24 20 21 50

続きまして、「スタイルシート」の下にある「テーマのための関数」を選択しまして(①)、同じように以下のコードをコピペします(②)。

 

▼ほんの一部コードを改良しました。

コピペ完了次第、ファイルを更新します(③)。

 

上は抜粋欄を表示させるコードですが、必要ない場合は、98行目〜105行目記述を削除します。

▼個人的にはブログの抜粋欄は削除派です。

【WordPress】STORKで記事抜粋を削除する手順【カスタマイズ】

2018.06.14

手順③:ウィジェットにコピペ

最後に、管理画面「外観」→「ウィジェット」を編集します。

トップページ上部

まずは「PC:トップページ上部」と「SP:トップページ上部」の2箇所に、テキストウィジェットを追加します(①)。

スクリーンショット 2018 06 24 20 36 40

続いてテキストモードにタブを切り替えた上で(②)、以下コードをコピペします(③)。

コピペ次第、保存です(④)。

PCとSPの2箇所あるのと、カテゴリー名が手入力なので注意です。

トップページ下部

同じく「PC:トップページ下部」と「SP:トップページ下部」の2箇所を編集します。何度も言いますが、2箇所です。

スクリーンショット 2018 06 24 20 52 28

テキストウィジェットを追加し(①)、 テキストモードにタブを切り替え(②)、以下コードをコピペします(③)。

コピペ次第保存です(④)。

 

またこの際、1行目〜3行目で多少の入力作業が必要になります。

  • AAA:STORKで使用しているトップページレイアウトを入力。調べ方下記参照。シンプルはsimple, カード型はcard, マガジン型はmagazine。ex) type=“card"
  • BBB:表示したい記事数を入力。最新記事やカテゴリー記事の表示数と統一するといいです。 ex) num=“10"
  • CCC:カテゴリーIDを入力。調べ方下記参照。ex) cat=“14"

 

▼AAAは管理画面「外観」→「カスタマイズ」→「グローバル設定」で、トップページ記事レイアウトをPC・スマホそれぞれ確認してください。

スクリーンショット 2018 06 24 20 28 49

▼カテゴリーIDは、管理画面「投稿」→「カテゴリー」に進み、カテゴリー名にカーソルを当てて(①)、ブラウザ下のURL(②)で確認できます。

スクリーンショット 2018 06 24 20 56 18

スポンサーリンク

完成

ここまででタブ切り替えが完成しました。

スクリーンショット 2018 06 24 19 49 47

このタブでメインカテゴリーを紹介できるので、ヘッダー部分からメニューを削除しました。

いやーかなりスッキリした感じがします!

また何か便利なカスタマイズ思いついたら紹介します。

追記

2018年9月9日コード改善

トップページ下に組み込むコードに誤りがあり、ショートコード が動かずに、そのまま表示されるエラーを多数報告いただきました。

こちら原因把握いたしまして、改善いたしました。ご迷惑おかけして申し訳ございません。

もしエラー直らなかったら、Twitter(@okapo192)に連絡いただければ対応します。

2018年9月16日エラー事例

WordPress4.8以降のテキストウィジェットの使用で、トップページ下部の部分のscriptコードにpタグが挿入され、切り替えが動かないことがあるようです。

こちらは寝ログさんの記事の記事を参考に解決することができました。

functions.phpに以下記述を追記することで回復できます。

もし、動作しない場合は試してみていただけると嬉しいです。

 

WordPress制作で月10万円稼ぐための最速勉強法【未経験から3ヶ月】

2018.05.30

【WordPress】STORKで記事抜粋を削除する手順【カスタマイズ】

2018.06.14

【WordPress】エリアで分けるカテゴリーグループを作る方法【旅ブロガー必見】

2018.06.08

ABOUT

海外ノマド系フリーランス, ブロガー, WEBエンジニア, 24歳。フットワーク軽く生きたくて、新卒でフリーに。その後、海外35カ国を旅しながらノマドワーク。現在は1ヶ月ごとに拠点を変えつつ、旅生活を継続中です。勉強が大好きで年に3回語学留学をします。 

>>詳しいプロフィールはこちら!