ブログ運営

【cocoon】ナビカードを使い自分で指定したブログ記事を表示する方法

ブログ運営
スポンサーリンク

この記事では、“ナビカードを使い自分で指定した記事を表示する方法”について紹介しています。

WordPressの無料テーマcocoonを使ってブログを運営している方におすすめの記事です。

初心者でもお洒落なトップページを作ることができるようわかりやすく説明しています。

おむ子
おむ子

このブログは、30代夫婦が

投資やお金に関する情報について発信しています。

ブログの収益で大好きなハワイに行くのが第一目標です!

スポンサーリンク

関連記事

他にもブログのトップページのカスタマイズに必要な情報を発信しています。

サイトトップに指定する固定ページを作成する方法
新着記事一覧を表示するための固定ページを作成する方法
固定ページをサイトトップに設定する方法

ショートコードとは

ブログのトップページをサイト型にカスタマイズする際に役立つのがショートコードです。

サイトトップに設定する固定ページにショートコードを入力すれば、ショートコードで指定した記事が自動的に表示されます。

ショートコードを活用すると、簡単に人気記事や新着記事をサイトトップページに表示することができます。

ショートコード利用例

新着記事一覧を表示させるnew_listというショートコードを活用

新着記事が5記事自動的に表示されます。

ショートコードの使い方については、別記事で紹介しておりますので、詳しくはそちらをご覧ください。

ショートコードで人気記事や新着記事を表示させる方法

ナビカードとは

ナビカードのショートコードを使えば、自分の表示させたい記事のみを表示させることが可能です。

おすすめ記事や、アフィリエイトに繋がる記事などを意図的にサイトトップに表示させることが可能です。

本サイトでもサイトトップの記事は、ナビカードを利用して表示させています。

ナビカード使用例

ナビカードを使い自分で指定した記事を表示する方法

ナビカード用のWordPressメニューを作成する

WordPress管理画面から「外観→メニュー」を選択します。

メニュー画面で「新しいメニューを作成しましょう」を選択し、メニュー名を入力して「メニューを保存」を選択。

表示オプションの設定

表示オプション」を開き、「cssクラス」と「説明」にチェックを入れる。

ナビカードで表示する記事を選択する

メニュー項目を追加」からナビカードを作成したい記事を選択していきます。

「ナビゲーションラベル」にはタイトル、「説明」には説明文を入力します。

「CSS class」に、1〜5の数字を入れると記事のサムネイル画像にリボンを表示することができます。

  • 1おすすめ
  • 2新着
  • 3注目
  • 4必見
  • 5お得

表示したい記事をナビカードに登録したら、メニューを保存します。

固定ページにショートコードを入力する

固定ページにショートコードを入力します。

ショートコードは、ブロックに直接ショートコードの文字列を入力して指定することも可能ですが、ショートコードのボタンを利用すると簡単にコードを入力することができます。

トップページに指定する固定ページを開き、記事を設置したい場所で</>というボタンを押すとショートコードが表示されます。

ナビカード一覧」を押すと、下記のようなショートコードの文字列が入力されます。

navi_listという文字列が、指定した記事一覧を表示させるショートコードになります。

“メニュー名”という部分に、先ほど記事を登録したメニュー名を入力します。

navi_list以降の文字列は、オプションと言い、表示させる記事数や、表示カテゴリーなどの指定に使われます。

ショートコードのオプション部分に手を加えることで、表示する記事をカスタマイズすることができます。

オプションで記事の表示をカスタマイズする

先ほどのナビカード一覧のショートコードがこちらです。

オプション内容入力内容
type記事の表示スタイル表示スタイル名を入力
bold太字表示“0”=太字なし/”1″=太字あり
arrow矢印表示“0”=矢印なし/”1″=矢印あり

例えば、boldというオプションの場合、boldがオプション名、=”0″という部分がオプションの内容指定というイメージです。

bold=”0″というショートコードであれば、文字の太字を指定しないという内容になります。

” “の間を変えることで、自分の実現したい記事表示に近づけていきます。

覚えておきたいショートコードオプション

様々なショートコードオプションがあるなかで、ナビカードのカスタマイズに使える便利なオプションコードをいくつか紹介します。

type

typeで記事表示のレイアウトを変更することができます。

入力例:type=”large_thumb”

表示内容
default通常のリスト
border_partition(or 1)記事の上下に区切り線を入れる
border_square(or 2)記事に枠線を表示する
large_thumb大きなサムネイル表示
large_thumb_on大きなサムネイルにタイトルを重ねる

default

border_square

border_partition

large_thumb

large_thumb_on

bold

記事タイトルを太字にする場合に使います。

入力例:bold=”1″(太字にする) / bold=”0″(太字にしない)

太字

通常の太さ

arrow

arrowのオプションを利用すると、記事のカードにという矢印記号を表示させることができます。

入力例:arrow=”1″(表示する) / arrow=”0″(表示しない)

応用編

別記事で、ショートコードを活用して指定した記事を一覧表示する方法や記事表示のレイアウトを横並びに変更する方法なども紹介しています。

ブログ記事を横並び表示へカスタマイズ

まとめ

ナビカードを活用すれば、簡単に自分の意図した記事をサイトのトップページに表示することができます。

このサイトでは、他にもブログのカスタマイズに関する記事を用意していますので、あわせてご覧ください。

スポンサーリンク
投資オムタンケ
タイトルとURLをコピーしました