WordPress ショートコードで『ブログカード風』『関連記事一覧』を表示

WordPress Twenty Seventeen
Twenty Seventeen のカスタマイズ
ショートコードで『関連記事一覧』を表示
 
任意のページの、任意の場所に、任意のカテゴリーの『記事一覧』を、任意の数だけ、サムネイル付きで表示する『関連記事一覧を表示するショートコード』を作成した。 記事一覧は、『ブログカード』風のデザインにした。
 
ショートコードで、ブログカード風『関連記事一覧』を表示した例。
ショートコードで『関連記事一覧』を表示 
 
スポンサー リンク
 
 
任意の場所に、カテゴリー別の記事一覧を表示する為に『ショートコード』を使った。

ショートコードとは
外部のプログラムを、短いコードで動作させることができる機能で、いわば、サブルーチンを呼び出す命令と考えてよい。(往年のプログラマー概念か?)
 
 
1. functions.php の編集
 
子テーマの、functions.php に『ショートコード』で呼び出す『 記事一覧表示ルーティン 』を追記する。
 
記事一覧表示ルーティン 。
 
52行目で、記事の抜粋を【90文字】としている。これで、続きを読むが表示されなくなる。
 
 
2. style.css の編集
 
style.css に『記事一覧を表示するスタイルシート』を追加する。
ショートコードでの記事一覧表示。
 
 
 
3. 『ショートコード』の記述要領
 
『関連記事一覧』を表示したい場所に、次の『ショートコード』を記述する。

num=”3″ : 表示する記事数を指定
cat=”5″ : 記事のカテゴリーIDを指定
 
※1:この『ショートコード』は、投稿ページでも使用可能。
※2:アイキャッチ画像が設定されていなければ、ディフォルトのサムネイルを表示。
 
参考:記事のカテゴリーID を調べる方法。
[投稿]→[カテゴリー]のカテゴリー項目の『編集』をクリック。

 
カテゴリーの編集画面のURLに記載された、”tag_ID=xx”の”xx”部分がカテゴリーID。
 
このようにショートコードを使えば、任意のページの、任意の場所に、任意のカテゴリーの『記事一覧』を任意の数だけ表示可能になる。
 
 
 
「続きを読む」まで表示する『関連記事一覧』の例
 
「続きを読む」まで表示した『関連記事一覧』。
ショートコードで『関連記事一覧』
 
記事一覧表示ルーティン 。

 
スタイルシート。

 

 

以上。
(2017.11.12)

 
             

スポンサー リンク
 

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください