この記事では、“ナビカードを使い自分で指定した記事を表示する方法”について紹介しています。
WordPressの無料テーマcocoonを使ってブログを運営している方におすすめの記事です。
初心者でもお洒落なトップページを作ることができるようわかりやすく説明しています。
この記事を書いている人
- メガバンク勤務の30代女性
- 夫と共同でブログを運営中
- ブログ運営、ファッション誌のモニターや記事執筆などの副業で収入を得ている
ショートコードとは
ブログのトップページをサイト型にカスタマイズする際に役立つのがショートコードです。
サイトトップに設定する固定ページにショートコードを入力すれば、ショートコードで指定した記事が自動的に表示されます。
ショートコードを活用すると、簡単に人気記事や新着記事をサイトトップページに表示することができます。
新着記事一覧を表示させるnew_listというショートコードを活用
新着記事が5記事自動的に表示されます。
ショートコードの使い方については、別記事で紹介しておりますので、詳しくはそちらをご覧ください。
ショートコードで人気記事や新着記事を表示させる方法
ナビカードとは
ナビカードのショートコードを使えば、自分の表示させたい記事のみを表示させることが可能です。
おすすめ記事や、アフィリエイトに繋がる記事などを意図的にサイトトップに表示させることが可能です。
本サイトでもサイトトップの記事は、ナビカードを利用して表示させています。
ナビカードを使い自分で指定した記事を表示する方法
ナビカード用のWordPressメニューを作成する
WordPress管理画面から「外観→メニュー」を選択します。
メニュー画面で「新しいメニューを作成しましょう」を選択し、メニュー名を入力して「メニューを保存」を選択。
表示オプションの設定
「表示オプション」を開き、「cssクラス」と「説明」にチェックを入れる。
ナビカードで表示する記事を選択する
「メニュー項目を追加」からナビカードを作成したい記事を選択していきます。
「ナビゲーションラベル」にはタイトル、「説明」には説明文を入力します。
「CSS class」に、1〜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″（表示しない）
応用編
別記事で、ショートコードを活用して指定した記事を一覧表示する方法や記事表示のレイアウトを横並びに変更する方法なども紹介しています。
ブログ記事を横並び表示へカスタマイズ
まとめ
ナビカードを活用すれば、簡単に自分の意図した記事をサイトのトップページに表示することができます。
このサイトでは、他にもブログのカスタマイズに関する記事を用意していますので、あわせてご覧ください。
関連記事
他にもブログのトップページのカスタマイズに必要な情報を発信しています。
