【ha-Basic】ショートコードで簡単に新着記事の一覧が表示できる機能について

公開日: 更新日: カスタマイズ 設定や詳細
Knowledge Base Wordpress ha-Basic テーマ




WordPressで固定ページを使ったトップページを作るときに必要なのが「新着記事」などの一覧。Wordpressは基本として投稿や固定ページの本文内でphpコードを動作させることができませんから、カスタムテンプレートを作って実装するか、記事一覧を表示する機能を持ったプラグインを使うというのが一般的な方法ですね。

でもテンプレートは投稿(固定ページ)編集画面の本文を呼び出すことはできても、本文の途中に何かを呼び出すということはできませんから、本文の上または下に新着記事の表示をするという対応しかできないですから、後者の新着記事リスト作成プラグインを使うのが一番手っ取り早いのかも知れません。

プラグインでおすすめなのは

いろいろな条件を指定して記事を抽出し、一覧表示できるのでとても重宝します。もちろんカスタム投稿タイプの記事にも使えます。個人的には一覧系プラグインの中では最強だと思ってます。

ただ、いろいろな場所でこうしたリストを出すならともかく、ある固定ページ、ある投稿だけに表示したいだけのためにプラグインを使う??ということで、【ha-Basic】テーマではショートコードを挿入するだけで、固定ページや投稿の任意の場所へ簡単に新着記事の表示ができるようにしています。

表示は以下の2種類です。基本的なCSS要素は記述してありますので、ショートコードを挿入するだけです。

ショートコードで簡単挿入できる記事一覧の使い方

2列表示

カードを横に2列並べたような記事一覧が表示できます(最近のテーマではこれが主流だと思います)

挿入するショートコードは

[myphp file='post-list2x5']
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

です。これを挿入すると
Knowledge Base Wordpress ha-Basic テーマ

【ha-Basic】見ている記事と同一カテゴリーの人気記事一覧をサイドバーへ表示する方法

カスタマイズ
当サイトで配布させていただいている【ha-Basic】テーマには管理者以外、検索エンジンクローラー以外(100%ではありません)からページにアクセスされる度にア
Knowledge Base Wordpress パソコン カスタマイズ 設定

【WordPress】カスタム投稿タイプごとにコメント欄を切り替える変える方法

Wordpress
WordPressには 投稿に対していろいろな人からの意見や感想が書ける その意見や感想に対して返信できる 条件の設定によってログインユーザーだけ、必要な事項を
Knowledge Base Wordpress ha-Basic テーマ

【ha-Basic】本文内の任意の場所へ自動で更新日の古い記事にメッセージを表示する方法

カスタマイズ
このサイトはもちろん私が作ったテーマ【ha-Basic】を使っていて、この機能を追加してはいるのですが、まだサイトの歴史が浅いので表示される記事は一切ありません
Knowledge Base Wordpress パソコン カスタマイズ 設定

WordPress5.2.2で始まった【[サイト名] サイトで技術的な問題が発生しています】のメールを止める(機能を停止する)方法

Wordpress
WordPressのバージョン5.2で実装された、Fatal Error(致命的なエラー)が発生した場合のメール機能。何かしていて突然メールが来てびっくりした方
Knowledge Base Wordpress ha-Basic テーマ

【ha-Basic】テーマを「Theme Check」プラグインでチェックし、修正すべき点を直しました

制作備忘録
WordPressには自作テーマを作った際Wordpressで推奨される機能や記述がきちんとされているかをチェックするためのページがあります。 な、なんじゃこり
Knowledge Base Wordpress ha-Basic テーマ

【ha-Basic】ショートコードで簡単に新着記事の一覧が表示できる機能について

カスタマイズ
WordPressで固定ページを使ったトップページを作るときに必要なのが「新着記事」などの一覧。Wordpressは基本として投稿や固定ページの本文内でphpコ
Knowledge Base Wordpress ha-Basic テーマ

【ha-Basic】投稿記事下に自動表示される関連記事について

カスタマイズ
【ha-Basic】テーマには投稿記事の最下部、コメント欄の上に、関連記事を表示するようにしています。 記事の抽出は同じカテゴリーに属する記事の中からランダムに
Knowledge Base Wordpress パソコン カスタマイズ 設定

【WordPress】リンクカード作成プラグイン2つのいいところ、イマイチなところ

Wordpress
先日公開したサイト作りに必要な機能だけを搭載したベーシックなWordpressテーマ【ha-Basic】。このテーマの作成に当たって一番苦労し、そして結局プラグ
Knowledge Base Wordpress パソコン カスタマイズ 設定

【WordPress】選択した投稿だけをエクスポートする方法

Wordpress
別のサイトへ特定の記事だけを移動したい時ってないですか?? そんなときどうしてますか? WordPress標準のエクスポート機能を使ってエクスポートして、インポ
Knowledge Base Wordpress ha-Basic テーマ

【ha-Basic】SEO対策関連済みテーマからの切り替えやSEO対策プラグインを使用する場合の確認事項

設定や詳細
【ha-Basic】テーマには基本的なSEO対策機能として キーワード欄に入力したものがmeta keywordsタグとして出力 キーワード欄に入力がない場合に

という表示ができます

出力する件数を変更したいときは

外観テーマエディタを開き、右のリンクから「post-list2x5.php」をクリックします。

10行目付近に

'posts_per_page' => 10,
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

という記述がありますので、「10」を変更することで自由に表示する記事数を指定できます。

※2列表示ですので偶数にするといいでしょう。

関連記事一覧風の表示

【ha-Basic】テーマで標準の投稿本文一番下に自動表示される関連記事。これとほぼ同じデザインの記事リスト表示ができます。

挿入するショートコードは

[myphp file='news-list']
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

です。これを挿入すると

という表示ができます

出力する件数を変更したいときは

外観テーマエディタを開き、右のリンクから「news-list.php」をクリックします。

10行目付近に

'posts_per_page' => 10,
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

という記述がありますので、「10」を変更することで自由に表示する記事数を指定できます。


どうですか??便利で簡単、しかもプラグインなし!テーマ作者、そして【ha-Basic】の使用者として大変気に入ってる機能です。

ショートコードで記事一覧リスト 応用編

この仕組みは【ha-Basic】テーマのファイル類の中に「post-list2x5.php」と「news-list.php」という2つのファイルがあり、前述したショートコードを投稿や固定ページの本文へ挿入することでこれらのphpファイルに書かれている内容を出力するという動作をさせています。

この仕組みは汎用なので、きちんとテンプレートになったものであればショートコードの「”」の中にファイル名を入れれば出力されるようになっているということになります。これを使っていろいろな切り口で絞り込んだ投稿リストを「post-list2x5.php」を元に作ってみましょう。

まずは「post-list2x5.php」内のコードは以下のようになっています(長いコードなので「コードをすべて表示する」をクリックして表示ください)。

コードをすべて表示する
<?php
// ① ↓ 今現在のページ位置を取得
$paged = (int) get_query_var('paged');
$args = array(
// ② get_option('posts_per_page') ← で管理画面で設定した、記事一覧で表示するページ数を取得
//'posts_per_page' => get_option('posts_per_page'),
//記事数を指定する
	'posts_per_page' => 10,
// ③ (int) get_query_var('paged') ← で取得した、$pagedを挿入
	'paged' => $paged,
	'orderby' => 'post_date',
	'order' => 'DESC',
	'post_type' => array('post'),
	'post_status' => 'publish'
	);
	$the_query = new WP_Query($args);
	?>
<div id="entry-list">
	<?php
	// 記事一覧のループスタート
		 if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
	<!– ここにループを回して表示させるhtmlを –>
		<a href="<?php the_permalink(); ?>" class="title_2type">
		<article
		<?php post_class('entry-content'); ?>>
		<?php if( has_post_thumbnail() ): ?>
			<?php the_post_thumbnail('post_large-thumbnail'); ?>
		<?php else: ?>
			<img src="<?php echo get_template_directory_uri(); ?>/images/no-image.gif" alt="no-img"/>
		<?php endif; ?>
		<div class="text">
			<h3>
			<?php the_title(); ?>
			</h3>
			<span class="cat-data">
			<?php if( has_category() ): ?>
 			<?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
 			<?php endif; ?>
			</span>
		</div>
		<div class="excerpt">
			<?php echo mb_substr(get_the_excerpt(), 0, 80); ?>
		</div>
		<span class="kiji-date">
			<i class="fa fa-pencil">
			</i>
			<time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
			<?php echo get_the_date(); ?>
			</time>
		</span>
			<?php if( time() – get_the_time('G') < 259200 ): ?>
			<div class="New-caption"></div>
			<?php elseif( time() – get_the_time('G') < 604800 ): ?>
		<div class="StillHot-caption"></div>
		<?php endif; ?>
		</article>
		</a>
		<?php endwhile; endif;
		// 記事一覧のループ終わり
			wp_reset_postdata(); ?>
		<!– entry-list –>
		</div>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

パソコンでこのコードをコピーしてテキストエディタなどへ貼り付け、または、テーマファイルの「post-list2x5.php」をコピーして名前を適当なものにしてください(今回はカテゴリーで限定したものを紹介しますので「cat-postlist.php」とすることにします)。

コードの中の

// ③ (int) get_query_var('paged') ← で取得した、$pagedを挿入
	'paged' => $paged,
	'orderby' => 'post_date',
	'order' => 'DESC',
	'post_type' => array('post'),
	'post_status' => 'publish'
	);
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

の部分が記事を抽出する条件になります。

今回はカテゴリーを絞りこんで表示させますので、そのようにコードを変更します。

変更したものがこちら

// ③ (int) get_query_var('paged') ← で取得した、$pagedを挿入
	'paged' => $paged,
	'orderby' => 'post_date',
	'order' => 'DESC',
	'post_type' => array('post'),
	'cat' => array('カテゴリーid'),
	'post_status' => 'publish'
	);
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

'cat' => array('カテゴリーid'),
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

という行が追加されてますね

ここのカテゴリーidという部分に表示するカテゴリーのIDを入力します。

※カテゴリーIDは管理画面のカテゴリー設定画面でカテゴリー名にマウスオーバーすると画面一番下の長いURL内に「id=〇〇」と表示される〇〇の数字になります。

複数のカテゴリーを指定する場合には

'cat' => array(‘カテゴリーid’,’カテゴリーid’),
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

という風に追加していってください。

出来上がったらテーマフォルダにアップロードして、固定ページや投稿本文へ

[myphp file='cat-postlist']
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

というショートコードを挿入すれば、作成した記事一覧が表示されるようになります。

今回はカテゴリーを限定するように条件を追加しましたが、それ以外にもいろいろな条件を追加・削除できます。

指定できるその他のパラメーターについては公式ページ

を見て試してみてください。

いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】