Cocoon【Cocoon】サイドバーにおすすめ記事一覧を表示する方法WordPress2019.11.05コメントをいただいたのでCocoonでサイドバーに「おすすめ記事」の一覧を表示する方法を紹介します。実はCocoonに備わっている機能で実装できるので公式でもやり方が紹介されているんですが、初心者でもなるべく分かりやすいように解説したいと思います。簡単に設定できるので皆さんもぜひ挑戦してみてください。それではやっていきましょう!この記事の目次STEP1:メニューを作成する表示オプションを設定するメニューを追加する必要ならオプションを設定するメニューを保存するSTEP2:ショートコードでメニューを表示するショートコードオプションの設定方法CSSでのカスタマイズ方法おすすめ記事でアピールしよう!STEP1:メニューを作成するまずは管理画面の「外観>メニュー」を開いて「新しいメニューを作成しましょう」のリンクからメニューを作成します。表示オプションを設定する画面上部にある「表示オプション」を開いて「CSSクラス」と「説明」にチェックを入れます。普通のメニューと同じように、投稿記事以外にも固定ページやカテゴリーページなどを登録することも可能です。class」と「説明」のオプションが設定できます。class(オプション)とはサムネイル画像にリボンをかけることができます。お得の5種類を設定できます。説明とは「説明」の欄に入力すると補足文を追加できます。上の画像で分かるように、サイドバーに表示する場合は設定しない方がスッキリしますね。記事下ならスペースがあるので説明文を入れても良いかも。メニューを保存する全ての記事を設定したら、最後に「メニューを保存」を押して完了です↓STEP2:ショートコードでメニューを表示する先ほど作成したメニューは、好きな場所で「ショートコード」を使うことによって表示することができます。「タイトル」がサイドバーでのh3の見出しになります。name="メニュー名"]赤字の「メニュー名」のところを先ほど作成したメニュー名に変更してください。これで記事一覧が表示されたと思います。ショートコードオプションの設定方法ショートコードにはオプションを設定することができます。type="border_partition"]オプションを使用することでサムネイル画像を大きくしてタイトルを上に重ねたり、タイトルを太字にしたり、矢印を表示したりできます。意図した記事一覧を作成できる「ナビカード」ショートコードの使い方サイト訪問者を的確に誘導するために、意図したリンクリストを作成するショートコードの使い方です。僕の場合はCSSで少しカスタマイズしているので、その方法も紹介しておきます。1.5em;}フォントサイズを少し小さくして、行間を少し広げました。微妙な調整ですがスッキリ見えるようになったと思います。「.widget-entry-card-title」はウィジェットの新着記事一覧なども共通のクラスなので、ショートコードで表示した一覧だけに適用したい場合は「.navi-entry-card-title」を使えばいけると思います。おすすめ記事でアピールしよう!サイドバーに「人気記事」を表示している人も多いですが、人気記事はすでに検索から流入があるし、必ずしも自分が読んでもらいたい記事じゃなかったりするんですよね。個人的には人気記事よりも「おすすめ記事」として読んでほしい記事をアピールしたほうが良いんじゃないかと思ってます。CacheをアップデートしてFacebookのシェア数が表示されない問題解決!commentコメントをキャンセルメールアドレスが公開されることはありません。超オススメ!iMacの周辺機器&アクセサリ【オシャレ&機能的】タイトルとURLをコピーしました。