この記事では、私がブログ作成をするときに使ったコードを、参考にしたページのURLとともに備忘録的にまとめています。
無料Wordpressテーマの最高峰『Cocoon』には様々な便利なショートコードが搭載されています。使わないでおくのはもったいないですよね。
ということで、さっそくいきましょう！
人気記事を一覧表示するショートコード
TOPページや個別の記事上で、オススメしたい人気記事を一覧でまとめるときに使えるコードです。
詳細はこちらの公式ページで参照できます。
人気記事一覧を表示するショートコードの利用方法-Wordpress無料テーマ Cocoon-
基本的な使い方は簡単で、
[[popular_list]]
というコードを記事中に置くだけでアクセス数の多い記事だけをランキングして表示することができます。
そしてそこに引数を追加することで、様々な表示オプションを追加することができます。
例えば私のブログのTOPでは『人気記事』がこのように表示されています。
ここで表示されている内容は
[[popular_list count="5" type="1" cats="all" rank="1"]]
というコードで表示させています。
Countは表示記事数を示します。count="5"なので、上位５記事を抽出する指令になっています。
Typeは表示形式です。表示するカードのタイプを選ぶことができます。
default：通常のリスト
border_partition(or 1)：カードの上下に区切り線を入れる
border_square(or 2)：カードに枠線を表示する
large_thumb：大きなサムネイル表示
large_thumb_on：大きなサムネイルにタイトルを重ねる
人気記事一覧を表示するショートコードの利用方法-Wordpress無料テーマ Cocoon-
引用元に画像で詳しく載っているので、参考にしてみてくださいね。
catsは集計するカテゴリを指定します。"all"は『すべての記事の中で上位記事を抽出しないさい』という指定になります。
カテゴリ番号の取得方法はこちらです。
ここにカテゴリ番号を入れると、カテゴリ内の上位記事を抽出してくれるようになります。特定のカテゴリの記事が特段に多い時などには重宝しますね。
rankはランキング順を表示するかどうかを指定します。私の場合１位から５位が表示されるようになります。
このようにおしゃれなランキング表示を簡単に作成することができます。
他にも便利な引数があるので、詳しくは公式ページを参照してみてくださいね。
最新記事を一覧表示するショートコード
TOPページや個別の記事上で、記事を更新順でまとめるときに使えるコードです。
詳細はこちらの公式ページで参照できます。
新着記事一覧を表示するショートコードの利用方法-Wordpress無料テーマ Cocoon-
基本的な使い方は簡単で、
[[new_list]]
というコードを記事中に置くだけです。
ここに『何個記事を表示するか』『どのカテゴリを表示するか』という指示を引数で指定してあげることができます。
例えば、私のTOPページではこういった感じで表示されています。
こんな感じで一番最近に更新したものを一番上にして、新しい順に５記事まとめられています。
これを表示するためのコードは
[[new_list count="5" type="1" cats="21" ]]
のようになります。
countは記事数です。上の例では５記事表示するため"5"としています。数字を変えれば表示される記事数が変わります。
typeは表示形式です。公式ページより、表示形式について以下のようにまとめられています。" "内の数字や文字列を"default"や"large_thumb"にすると反映されます。
default：通常のリスト
border_partition(or 1)：カードの上下に区切り線を入れる
border_square(or 2)：カードに枠線を表示する
large_thumb：大きなサムネイル表示
large_thumb_on：大きなサムネイルにタイトルを重ねる
人気記事一覧を表示するショートコードの利用方法-Wordpress無料テーマ Cocoon-
私は1にしてあるので、カード上下の区切り線だけが入っている感じですね。
catsは、表示をするカテゴリの番号です。私のブログでは『ガジェット』のカテゴリはカテゴリ番号が21なので、"21"とすることでガジェットカテゴリだけの、新着記事を表示してくれます。
カテゴリ番号の取得方法はこちらです。
"all"とすればすべての記事を対象としてくれるため、ブログ全体の最新記事を表示してくれます。
このブログのTOPにある新着記事という欄がそれになります。
ボックスメニューを表示する
記事中やTOPに表示する固定ページなどにメニューを表示させたいときに使うショートコードです。
通常のブログのヘッダーやフッターにつけるメニューではなく、完全に独立したメニューとして自由に配置することができます。
このブログでは、現在はボックスメニューを設置していないので具体的な例がお見せできないのですが、公式HPにはこんな感じで例が載っています。
こういったボックスメニューの作り方はCocoonの公式記事が非常にわかりやすいのでそちらを参照してください。
アイコンや画像が使える「ボックスメニュー」ショートコードの使い方-Wordpress無料テーマ Cocoon-
コード自体は以下のようなシンプルなもので機能します。
[[box_menu name="メニュー名"]]
[[box_menu name="ボックスメニュー"]]
ただ、あくまでこのショートコードは既存のメニューを呼び出すためのコードなので、メニューの作成の仕方は上記のページを参照してください。
