2019.04.26今回はSTORK(ストーク)でJINやSANGOのようなタブ機能をつかえるようにするカスタマイズの紹介です。Twitterにデモの動画をアップしたので、動きをご確認ください。公開までしばしお待ちを。2018今回はこのタブ機能を実装します。記事数が多い場合はボタンを追加タブ機能完成!カスタマイズの流れstyle.cssにコピペfunctions.phpにコピペ今の記事のレイアウトをチェックウィジェットにコピペ完成!という流れです。デザインを整えて、タブごとにカテゴリー記事を表示できるようにして、ウィジェットでタブ機能を表示。いうふうに進めて行きます。style.cssにコピペまずはタブの見た目を調整するCSSのカスタマイズです。WordPress管理画面の「外観」→「テーマの編集」から、スタイルシート(style.css)の編集画面を開いてください。※ご注意くださいテーマのカスタマイズをする際は子テーマを利用しましょう。詳しくはSTORK公式サイトの説明をご覧ください。OPENCAGEstyle.cssの最後に、次のコードを書き加えましょう。最後の行で改行した後にコピペしてください。}}ここで、1つポイントがあります。*/とコメントがある部分(3ヶ所あります)のカラーコードを、お好みの色に書き換えてください。文字色が#fffになっています。(オレンジ背景・白抜き文字)背景色をサイトに合ったカラーに変更し、文字も白や黒など見やすい色に変えましょう。functions.phpにコピペ次に、タブで表示するカテゴリー記事一覧を出すためのショートコードを追加するカスタマイズです。「外観」→「テーマの編集」→「テーマのための関数(functions.php)」を開いてください。functions.phpも、style.cssと同じように子テーマを利用しましょう。functions.phpを開いたら、最後の行で改行した後に次のコードをコピペしてください。$retHtml.='<p>表示する記事がまだありません。いうショートコードが使えるようになりました。このショートコードは、指定したカテゴリーの記事一覧を表示できるショートコードです。このショートコード作成は以下のサイト様を参考にさせていただきました。その前に「記事のレイアウト」をチェックしましょう。進んで下にスクロールすると、[PC]トップページ記事レイアウト[SP]トップページ記事レイアウトという箇所があると思います。そこでチェックされているものを確認しましょう。シンプルカード型マガジン型この記事レイアウトによって、これから使うショートコードが少しだけ変わります。PCとSP(スマホ)それぞれの記事レイアウトが確認できたら次に進みましょう!レイアウト「ビッグ」はあまり使われていないので対応していません。ビッグで使いたい!という方がいらっしゃいましたらご用意しますのでTwitterなどでご連絡ください。ウィジェットにコピペレイアウトが確認できたら、いよいよ最後のステップです。ウィジェットにタブやショートコードをコピペしていきましょう。ウィジェット画面を開いてください。SP:トップページ下部という4ヶ所があると思います。今回はこの4箇所にコピペしていきます。コードをコピペする際は「テキスト」ウィジェットのテキストモードをご利用ください。2「トップページ上部」のコード1と2の「トップページ上部」の2ヶ所には、同じコードをコピペします。その際、「ここにカテゴリー名を入れてください」の部分(3ヶ所)にそれぞれのタブのカテゴリー名を入れてコピペしてください。4「トップページ下部」のコードここで注意点です!3と4の「トップページ下部」の2ヶ所は、先ほど確認した記事のレイアウトやカテゴリーによって、ショートコードの部分が変える必要があります。4の「トップページ下部」の2ヶ所にコードをコピペしてしまいましょう。}});</script>コピペができたらショートコードを変えていきます。今回使うショートコードの使い方をご説明します。「シンプル」レイアウトで、「最新記事(カテゴリー指定なし)」が「10記事」表示されます。タブで表示するために、「記事のレイアウト」と「表示する記事数」と「記事のカテゴリー」を指定したいですよね。そこで、このショートコードでは、「引数」とよばれる値をショートコードに加えることで、それらを指定できるようになっています。cat=”51′′]type=””では、「記事のレイアウト」を指定できます。マガジン型は”magazine”を入れてください。num=””では、「表示する記事数」を指定できます。表示したい記事数を入れてください。(例:20記事表示する場合はnum=”20′′)cat=””では、「記事のカテゴリー」を指定できます。表示したいカテゴリーの「カテゴリーID」を入れてください。(例:cat=”2′′)カテゴリーIDは、カテゴリー編集画面のURLで確認できます。(tag_ID=〇〇の数字です。cat=”27′′]のようになります。タブごとにカテゴリー別の記事が表示されるように、ショートコードに引数を追加してください。JIN同様、最初のタブは最新記事で固定になります。4番目のタブの記事を設定してください。記事数が多い場合はボタンを追加ショートコードで指定した記事数よりも投稿数の方が多い場合は、続きの投稿へのリンクを貼りましょう。ストークのボタンショートコードなどを使うと便利です。ストーク:ショートコードの使い方それぞれの[getCatArticles]の直後に貼ればOKです。href=”カテゴリーページのURL/page/2/”>もっと見る</a>[/btn]※2ページ目と合わない場合はWordPressの設定などをご確認ください。タブ機能完成!これでタブ機能が完成です!トップページでタブ機能が問題なく動くかご確認ください。無事に動いたら完了です!お疲れ様でした:3ショートコードごとに記事レイアウトが変えられるので、PCとスマホ表示で変えたり、タブごとに変えることもできます。下部:今回追加したテキストウィジェットより下に追加してください。5を使う方法こんにちは、ストーク大好きくまぺです。Awesomeが利用できますが、バージョンが4.7.0と少し古くなっています。今回はWINGでJINやSANGOのようなタブ機能を使えるようにするカスタマイズの紹介です。Twitterにデモの動画をアップしたので、動きをご確認ください。AdSenseをトップページだけ非表示にする方法ページに貼ってある広告も検索順位に影響することがあるようです。実際に僕もあるサイトでトップページの広告を表示しないようにしたところ順位が若干上がりました。WING(コノハウィング)」でWordPressを始める方法を解説します。初心者の方にもわかりやすいように、丁寧に解説します。持っているブログをCon...WordPressWordPressのセキュリティ対策のためにやっておきたいプラグインの設定を紹介この記事では、「WordPressのプラグインでできるセキュリティ対策」をまとめて紹介します。WordPressのセキュリティ対策は重要です。WordPressで作ったブログやサイトを悪意のある攻撃やスパムから守るためにも、きちんと対策をしましょう。WING(コノハウィング)」にWordPressのサイトを移転する方法を解説します。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。5を使う方法STORK(ストーク)にJINやSANGOのようなタブ機能を追加するカスタマイズ【WordPress】アーカイブ2019年4月カテゴリーWordPressメモタイトルとURLをコピーしました。