この記事では、“ショートコードで人気記事や新着記事を表示させる方法”について紹介しています。
WordPressの無料テーマcocoonを使ってブログを運営している方におすすめの記事です。
初心者でもおしゃれなトップページを作ることができるようわかりやすく説明しています。
この記事を書いている人
- メガバンク勤務の30代女性
- 夫と共同でブログを運営中
- ブログ運営、ファッション誌のモニターや記事執筆などの副業で収入を得ている
ショートコードとは
ブログのトップページをサイト型にカスタマイズする際に役立つのがショートコードです。
サイトトップに設定する固定ページにショートコードを入力しておけば、ショートコードで指定した記事が自動的に表示されるようになります。
例えば、本ブログの場合、ショートコードを使い、サイトトップページに人気記事と新着記事が表示されるようにレイアウトしています。
ショートコードの使い方
cocoonでは様々なショートコードやオプションが用意されていますが、この記事では初心者でも簡単に使える基本のショートコードの使い方を紹介します。
ショートコードの入力方法
ショートコードは、ブロックに直接ショートコードの文字列を入力して指定することも可能ですが、ショートコードのボタンを利用すると簡単にコードを入力することができます。
トップページに指定する固定ページを開き、記事を設置したい場所で＜／＞というボタンを押すとショートコードが表示されます。
「新着記事一覧」を押すと、下記のようなショートコードの文字列が表示されます。
new_listという文字列が、新着記事一覧を表示させるショートコードになります。
それ以降の文字列は、オプションと言い、表示させる記事数や、表示カテゴリーなどの指定に使われます。
入力したショートコードで表示される新着記事一覧のプレビュー画面がこちらです。
ショートコードを入力するだけで、新着記事が5記事自動的に表示されるようになります。
人気記事を表示させる場合も同じようにショートコードを固定ページに埋め込めばOKです。
ショートコードのオプションを活用する方法
ショートコードのオプション部分に手を加えることで、表示する記事をカスタマイズすることができます。
先ほどの新着記事のショートコードがこちらです。
| オプション内容 | 初期の入力内容 | |
| count | 表示する記事数 | “5”＝5記事表示 |
| type | 記事の表示スタイル | “default”という表示スタイル |
| cats | カテゴリー | “all”＝全ての記事を表示 |
| children | 子カテゴリーを含めるか | “0”＝子カテゴリーは含めない |
| post-type | 投稿ページ、固定ページを表示させるか | “post”＝投稿ページのみ表示 |
例えば、countというオプションの場合、countがオプション名、=”5″という部分がオプションの内容指定というイメージです。
count=”5″というショートコードであれば、表示数を5記事に指定するという内容になります。
” “の間を変えることで、自分の実現したい記事表示に近づけていきます。
覚えておきたいショートコードオプション
様々なショートコードオプションがあるなかで、便利なオプションコードをいくつか紹介します。
count
先ほども紹介したcountというオプションを活用することで、表示するブログの記事数を指定することができます。
入力例：count=”4″
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
cats/tags
表示する記事のカテゴリーやタグを限定するときに使います。
例えば、旅行というカテゴリーの新着記事のみを表示したい場合、catsに旅行のカテゴリーIDを入力します。
同じようにタグで記事を絞ることも可能で、その場合はtagsというコードを使います。
全てのカテゴリーまたはタグの記事を表示させる場合は、catsまたはtagsのコードを削除するか、”all”と入力します。
入力例：tags=”28,40″
bold
記事タイトルを太字にする場合に使います。
入力例：bold=”1″（太字にする） ／ bold=”0″（太字にしない）
太字
通常の太さ
応用編
別記事で、ショートコードを活用して指定した記事を一覧表示する方法や記事表示のレイアウトを横並びに変更する方法なども紹介しています。
自分で選択した記事をサイトに表示する
ブログ記事を横並び表示へカスタマイズ
まとめ
ショートコードを使えば、簡単に自分の好みのトップページを作成することができます。
このサイトでは、他にもブログのカスタマイズに関する記事を用意していますので、あわせてご覧ください。
関連記事
他にもブログのトップページのカスタマイズに必要な情報を発信しています。
