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

こんにちは!くまぺです。

今回はSTORK(ストーク)でJINやSANGOのようなタブ機能をつかえるようにするカスタマイズの紹介です:3

Twitterにデモの動画をアップしたので、動きをご確認ください。
(トップページでも確認できます。)

今回はこのタブ機能を実装します!

くまぺ
コピペと少しの書き換えだけで実装できるようにしました!

もしわからない部分があったり行き詰まってしまったら僕のTwitterまでリプライやDMでご連絡ください!

できるかぎりサポートさせていただきます:3

18年6月27日追記:
テツヤマモトさん(@okapo192)が改良版を書いてくださいました!
ぜひこちらもご覧ください:3
【STORK】トップページにカテゴリー切り替えタブを導入する【カスタマイズ】

カスタマイズの流れ

  1. style.cssにコピペ
  2. functions.phpにコピペ
  3. 今の記事のレイアウトをチェック
  4. ウィジェットにコピペ
  5. 完成!

という流れです。

デザインを整えて、
タブごとにカテゴリー記事を表示できるようにして、
ウィジェットでタブ機能を表示。

というふうに進めて行きます!

1. style.cssにコピペ

まずはタブの見た目を調整するCSSのカスタマイズです。

WordPress管理画面の

「外観」→「テーマの編集」

から、スタイルシート(style.css)の編集画面を開いてください。

ご注意ください
テーマのカスタマイズをする際は子テーマを利用しましょう。
詳しくは公式サイトの説明をご覧ください。
専用「子テーマ」のダウンロード・解説 | OPENCAGE

style.cssの最後に、次のコードを書き加えましょう。

最後の行で改行した後にコピペしてください。

 

ここで、1つポイントがあります。

このCSSで選択中のタブの背景色と文字色を変更できるので、

とコメントがある部分(3ヶ所あります)のカラーコードを、お好みの色に書き換えてください。

上のコードでは背景色が#ff7d44, 文字色が#fffになっています。これはくまぺクリップと同じ設定です。

背景色をサイトに合ったカラーに変更し、文字も白や黒など見やすい色に変えましょう。

 

2. functions.phpにコピペ

次に、タブで表示するカテゴリー記事一覧を出すためのショートコードを追加するカスタマイズです。

同じくWordPress管理画面から、

「外観」→「テーマの編集」→「テーマのための関数(functions.php)」

を開いてください。

補足
functions.phpも、style.cssと同じように子テーマを利用しましょう。

functions.phpを開いたら、最後の行で改行した後に次のコードをコピペしてください。

5月23日追記: 動作が軽くなるようにコードを改善しました!

このコードをfunctions.phpに追加することで、 [getCatArticles] というショートコードが使えるようになりました! このショートコードは、指定したカテゴリーの記事一覧を表示できるショートコードです。

3. 今の記事のレイアウトをチェック

これでタブごとにカテゴリーの記事一覧を表示する準備ができました! さっそくウィジェットにショートコードを入れて……といきたいところですが、 その前に「記事のレイアウト」をチェックしましょう。 「外観」→「カスタマイズ」→「グローバル設定」 と進んで下にスクロールすると、

    • [PC]トップページ記事レイアウト

 

    • [SP]トップページ記事レイアウト

 

という箇所があると思います。 そこでチェックされているものを確認しましょう。

    • シンプル

 

    • カード型

 

    • マガジン型

 

この記事レイアウトによって、これから使うショートコードが少しだけ変わります。 PCとSP(スマホ)それぞれの記事レイアウトが確認できたら次に進みましょう!

レイアウト「ビッグ」はあまり使われていないので対応していません。 もしビッグで使いたい!という方がいらっしゃいましたらご用意しますのでTwitterなどでご連絡ください。

4. ウィジェットにコピペ

レイアウトが確認できたら、いよいよ最後のステップです。 ウィジェットにタブやショートコードをコピペしていきましょう。 「外観」→「ウィジェット」 でウィジェット画面を開いてください。

4箇所のウィジェットにコピペ

ウィジェット画面の右のほうに、

    • ① PC:トップページ上部

 

    • ② SP:トップページ上部

 

    • ③ PC:トップページ下部

 

    • ④ SP:トップページ下部

 

という4ヶ所があると思います。 今回はこの4箇所にコピペしていきます。 コードをコピペする際は「テキスト」ウィジェットのテキストモードをご利用ください。

①, ②「トップページ上部」のコード

①と②の「トップページ上部」の2ヶ所には、同じコードをコピペします。 その際、「ここにカテゴリー名を入れてください」の部分(3ヶ所)にそれぞれのタブのカテゴリー名を入れてコピペしてください。

 

③, ④「トップページ下部」のコード

ここで注意点です!

③と④の「トップページ下部」の2ヶ所は、先ほど確認した記事のレイアウトやカテゴリーによって、ショートコードの部分が変える必要があります!

 

ショートコードの部分はあとで変えるとして、とりあえず③, ④の「トップページ下部」の2ヶ所にコードをコピペしてしまいましょう。

コピペができたらショートコードを変えていきます。

ショートコード[getCatArticles]の使い方

今回使うショートコードの使い方をご説明します。

[getCatArticles]

このショートコードのまま使うと、

「シンプル」レイアウトで、「最新記事(カテゴリー指定なし)」が「10記事」表示されます。

タブで表示するために、「記事のレイアウト」と「表示する記事数」と「記事のカテゴリー」を指定したいですよね。

 

そこで、このショートコードでは、「引数」とよばれる値をショートコードに加えることで、それらを指定できるようになっています。

例:[getCatArticles type="card" num="20" cat="51"]

type=””では、「記事のレイアウト」を指定できます。

シンプルは”simple”, カード型は”card”, マガジン型は”magazine”を入れてください。

num=””では、「表示する記事数」を指定できます。

表示したい記事数を入れてください。(例:20記事表示する場合はnum=”20″)

cat=””では、「記事のカテゴリー」を指定できます。

表示したいカテゴリーの「カテゴリーID」を入れてください。(例:cat=”2″)

カテゴリーIDは、カテゴリー編集画面のURLで確認できます。
(tag_ID=〇〇の数字です。下の画像でいうと65)

 

いくつか例をあげると、

例1:カテゴリーIDが6の記事を15記事、カード型で表示したい

[getCatArticles type="card" num="15" cat="6"]

例2:カテゴリーIDが27の記事を10記事、シンプルレイアウトで表示したい

[getCatArticles type="simple" num="10" cat="27"]

のようになります。

タブごとにカテゴリー別の記事が表示されるように、ショートコードに引数を追加してください。

補足
JIN同様、最初のタブは最新記事で固定になります。
ショートコードでは2, 3, 4番目のタブの記事を設定してください。

記事数が多い場合はボタンを追加

ショートコードで指定した記事数よりも投稿数の方が多い場合は、続きの投稿へのリンクを貼りましょう。

ストークのボタンショートコードなどを使うと便利です。

ストーク:ショートコードの使い方

それぞれの[getCatArticles]の直後に貼ればOKです。

例:[btn class="rich_blue"]]<a href=”カテゴリーページのURL/page/2/”>もっと見る</a>[[/btn]

※2ページ目と合わない場合はWordPressの設定などをご確認ください。

 

タブ機能完成!

これでタブ機能が完成です!

トップページでタブ機能が問題なく動くかご確認ください。

 

無事に動いたら完了です!お疲れ様でした:3

 

ショートコードごとに記事レイアウトが変えられるので、PCとスマホ表示で変えたり、タブごとに変えることもできます。
引数を色々変えてしっくりくるデザインを探してみてください:3

くまぺ
もし不具合やわからないことがありましたらお気軽に僕のTwitterまでご連絡ください!
補足
もしトップページ上部と下部に他のウィジェットを追加したい場合は、
上部:今回追加したテキストウィジェットより上
下部:今回追加したテキストウィジェットより下
に追加してください。
ではでは!



コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください