ブログ運営

【cocoon】ショートコードでブログの人気記事や新着記事をサイトに表示させる方法

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

この記事では、“ショートコードで人気記事や新着記事を表示させる方法”について紹介しています。

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″(太字にしない)

太字

通常の太さ

応用編

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

自分で選択した記事をサイトに表示する
ブログ記事を横並び表示へカスタマイズ

まとめ

ショートコードを使えば、簡単に自分の好みのトップページを作成することができます。

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

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