MENU
カテゴリー

投稿リストを簡単に呼び出せるショートコードの使い方

投稿リストショートコード
記事上のウィジェットエリア

このページでは、WordPressテーマ『SWELL』で投稿リストを簡単に呼び出せるショートコードの使い方を解説していきます。

カテゴリーやタグ・表示件数・レイアウトなどを指定することが可能で、このショートコードを活用することで柔軟にトップページを構築することも可能になります。

トップページでのショートコード活用例

フロントページのデモ動画

このショートコードは ver. 1.2.5 にて追加された機能です。

目次
目次広告表示エリア

基本となるショートコードの呼び出し方

投稿リストは、ショートコード名post_listで呼び出すことが可能です。

属性値を何も指定しない方法であれば、以下のようにするだけで最新の投稿が5件、シンプルなレイアウトで表示可能です。

[post_list]

実際に上記のコードを使用してみます。

こんな感じです

使用できる属性値について

現状、次の3種類が使用可能です。

  • post_type="投稿タイプ"
    • 初期値:'post'
  • count="表示件数"
    • 初期値:5
  • type="投稿リストのレイアウト"
    • 初期値:'simple'
  • order="並び順"
    • 初期値:'DESC'
  • orderby="ソートの基準"
    • 初期値:'date'
  • excerpt="抜粋文を表示するかどうか"
    • 初期値:'off''on'にすると抜粋文が表示されます)
  • col="最大カラム数"
  • col_sp="最大カラム数(SP)"
  • more="MOREボタンの表示テキスト"
  • more_url="MOREボタンの遷移先URLスラッグ"
  • cat_id="カテゴリーID"
  • tag_id="タグID"
各属性の追加説明
  • typeには'simple','card','list','thumb' が指定できます。
  • post_type / order / orderby はWP_Queryに指定できるパラメータと同じものが使用できます。
  • orderby='pv'にすると、SWELLでカウント中のPV数を基準にしてソートできます。
  • excerpt="on"の時の抜粋文の長さは、カスタマイザーでの設定値を引き継ぎます。
  • col / col_sp は typeの指定が'card'または'thumb'の時のみ有効です。(指定しない場合はカスタマイザーの投稿リストの設定値を引き継ぎます。)
  • moreが指定されている時のみ、その指定されたテキストで投稿リストの下にMOREボタンが表示されます。
  • more_urlはホームURLの後のスラッグ部分を指定してください。(例:/news/)
  • カテゴリーとタグを両方指定した場合、「カテゴリーとタグを両方持つ投稿」が呼び出されます。
  • MOREボタンのリンク先は基本的に自動で指定されたカテゴリーアーカイブページなどが設定されますが、人気記事一覧ページなどは直接指定してください。

使用例

何パターンか、使用例を紹介します。

例1

最新記事を3件、説明文あり、カード型レイアウトで最大3カラム、スマホでは1カラムで表示する

[post_list type="card" count="3" col="3" col_sp="1" excerpt="on"]

実際に呼び出すと

例2

人気記事を上位3件、リスト型レイアウトで表示し、人気記事一覧ページへのリンクを「もっと見る」と表示させる。
(人気記事一覧ページのURLが https://example.com/popular-posts/ の場合)

[post_list type="list" count="3" orderby="pv" more="もっと見る" more_url="/popular-posts/"]

実際に呼び出すと

例3

ID3のカテゴリーを持つ記事を5件、シンプルに表示し、カテゴリーアーカイブページへのリンクを「MORE」として表示する

人気記事を上位3件、リスト型レイアウトで表示し、人気記事一覧ページへのリンクを「もっと見る」と表示させる。
(人気記事一覧ページのURLが https://example.com/popular-posts/ の場合)

[post_list cat_id="2" more="MORE"]

実際に呼び出すと

記事下のウィジェットエリア
投稿リストショートコード

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次