【ha-Basic】投稿や固定ページ本文の任意の場所へ新着記事一覧をショートコードで挿入できるようにしました

公開日: 更新日: Ver1.0の更新情報

機能追加というよりも、もともとあった機能なのに紹介するのを忘れ、更には中途半端な形でリリースしていました(笑)。

2019年5月31日以降でテーマをダウンロードされた方は既に動作する状態になっています。それ以前にテーマをお使いの方でこの機能が必要な方は、後程紹介する「2列表示の新着記事一覧をショートコードで表示させるようにする仕組みと方法」を参考に足りない部分の設定を行ってください。

WordPressはブログ+αのサイト作成ツールなのでインストール段階ではブログの一覧がトップページとして表示されるようになっているのはご存知かと思います。

そこから一歩進んで固定ページを使ったトップページを作ろう!!とななるのですが、その時困るのが「ここに新着記事の一覧を表示したいんだけどどうすればいい?」ということだと思います。

更に欲を言えば、多くのテーマにあるブログ一覧のように横幅一杯に1つ1つの記事が並んでいる(いわゆる1カラム)のではなく、2列で表示したいという方も多いのではないでしょうか??

WordPressでは投稿や固定ページの本文内でphpコードを直接実行できないようになっています。これはセキュリティ対策ということのようです(詳しいことは分かりませんが、ログインされなければ投稿本文に改編を加えることもできませんから別にいいんじゃない?とも思えますが・・・)。本文内でPHPが実行できるプラグインもありますので探して導入し、独自の表示用コードを入れるのも一つの手かも知れません。

が、今回は正攻法でPHPで作ったテンプレートをショートコード化して挿入するという機能としています。

まずは何より今回紹介する機能で表示される記事一覧をご覧ください↓↓

【ha-Basic】本文内に挿入した画像の「alt」「title」を自動でページタイトルに置き換える方法

カスタマイズいろいろ
SEOに効果があるのかどうかは別として、属性があるのだから設定しておいて間違いはないでしょ!というカスタマイズです。 WordPressの投稿編集画面からメディ

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

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

【ha-Basic】テーマを使ったサイト例 その2

サイト制作例
今見ていただいているサイトはなるべく余分なものを追加せずに【ha-Basic】テーマのデフォルトに近い形にしておきたいので、私が管理している別のサイトで、【ha

【ha-Basic】テーマを使ったサイトをダーク系にするカラーCSS

カラーCSS
テーマカスタマイザーがない=色の調整はすべてCSSからとしている【ha-Basic】。 管理画面でのカラー変更はできないようにしているものの、テーマファイルの中

【ha-Basic】テーマの本文上や任意の場所へ自動で目次を表示させる方法

カスタマイズいろいろ
最近のテーマでよく見かける記事本文上の目次表示機能。個人的には 必要な部分だけ斜め読みされてしまうのでは??(ページ閲覧時間の低下を招くかも) いきなりバーンと

【ha-Basic】テーマでカスタム投稿タイプを使う場合の設定いろいろ

カスタマイズいろいろ
WordPressにはカスタムなんちゃらという用語がいっぱい出てきますね。今回はそのうちの1つ、カスタム投稿タイプを【ha-Basic】テーマで使う場合の設定方

こんな感じのものが【ha-Basic】テーマではショートコードで任意の位置へ簡単に挿入できるようにしています。

どうするのかって??↓のショートコードを本文内へ挿入するだけです

[myphp file='post-list2x5']

・・・これだけの紹介記事ではちょっと寂しいので、ついでにこの機能を別のテーマでも応用する方法、この機能が不要な場合にどうやって無効にするのか?他のリストを作るにはどうするのか?などを紹介しておきます。

2列表示の新着記事一覧をショートコードで表示させるようにする仕組みと方法

偉そうなこと言ってますけど、この方法は

で紹介されているコードをほぼそのまま流用しただけです。こういう機能追加はいいものは何でも取り入れる【ha-Basic】の柔軟性ととらえていただければありがたいです。

紹介記事の通り、テーマファイル内のテンプレートをショートコードで呼び出すため、以下のコードをテーマのfunctions.phpへ挿入しています。

//ショートコードを使ったphpファイルの呼び出し
function my_php_Include($params = array()) {
 extract(shortcode_atts(array('file' => 'default'), $params));
 ob_start();
 include(STYLESHEETPATH . "/$file.php");
 return ob_get_clean();
}
add_shortcode('myphp', 'my_php_Include');

そして表示させたい場所へ

[myphp file='post-list2x5']
を挿入することで、ここに「post-list2x5.php」の内容を動かして結果を表示させなさいよという命令に基づいて新着記事一覧が表示されるようになっているのです。

「post-list2x5.php」の内容についてはテーマ編集画面で確認できますのでどんな風になっているのか見てみてくださいね。

一覧出力する件数を変えたいときは

「post-list2x5.php」の10行目にある

‘posts_per_page’ => 10,
の数字を任意の数に変更するだけです。

他の条件の記事一覧を表示させたいときは

ここからは応用編になります。この機能の基本仕様は「投稿で公開されている公開日が新しい記事から10件を表示しなさい」となっています。これは前述した「post-list2x5.php」内で定義しています。

別の切り出し条件を指定した一覧を出力するには

  1. 「post-list2x5.php」をパソコンへダウンロード
  2. 1の名前を適当に変更して、再びテーマフォルダ内へアップロード
  3. 2のコードをカスタマイズ
  4. 2の名前を入れたショートコードを挿入

という手順で行います。

今回はカテゴリーで絞り込んだ例のみ紹介しますので、その他の切り出し方についてはWordpressのコーデックなどで調べてください。

2のファイル名は「cat-post-list」という名前にしたと仮定して解説します。

3までが完了したらテーマの編集から「cat-post-list」を開いてください。

14行目あたりから始まる

‘orderby’ => ‘post_date’,
‘order’ => ‘DESC’,
‘post_type’ => ‘post’,
‘post_status’ => ‘publish’
);
が記事の抽出条件になります。

上から、

  1. 投稿の並び変えは「公開日」を基準にして
  2. 並び順は「新しい順」にする
  3. 「投稿」という投稿タイプから抽出して
  4. 「公開」されている記事のみを抽出する

という条件で記事が抽出されます。

ここに「〇〇というカテゴリーに属する記事だけ」という条件を追加します。

‘orderby’ => ‘post_date’,
‘order’ => ‘DESC’,
‘post_type’ => ‘post’,
‘post_status’ => ‘publish’,
‘cat’ => ‘カテゴリーID’

「’post_status’ => ‘publish’」の後に「,」が入っているのと、その下に「’cat’ => ‘カテゴリーID’」というのが入っているのが違いです。

PHPの条件では条件の最後となるものの後ろには「,」を入れないという約束になっていますので、先ほどのコードの最後は最後じゃないよ!ということで「,」を追加し、追加したカテゴリー指定には「,」を入れないという風にします。

カテゴリーIDについては管理画面から「投稿」→「カテゴリー」で目的のカテゴリーをマウスオーバーすると画面下に数字部分が表示されますので、その数字を入力します。

コードの変更が終わったら保存して、実際に投稿本文などへ

[myphp file='cat-post-list']
というショートコードを入れて表示を確認しましょう。

おまけ 複数のカテゴリーを含めるときは

一覧表示する場合に複数のコードを含めたいときがあると思いますのでついでに紹介しておきます。

先ほどの

‘cat’ => ‘カテゴリーID’
という部分を以下に変更します

‘cat’ => array(‘カテゴリーID’,’カテゴリーID’,’カテゴリーID’)

要するにarrayで複数ありますよ!として必要な分だけカテゴリーIDを追加していくだけです。これもPHPのお約束ですから最後になるカテゴリーIDの後の「,」は不要となりますので注意しましょう。

新着記事一覧機能が不要なときは

単純に前述したショートコードを投稿や固定ページの本文へ挿入しない限り機能は全くしませんが、できれば不要なコードは徹底削除したい!!という方向けの情報になります。

このページの中ほどで紹介した仕組みの中のコードを削除していくだけです。

まずfunctions.phpから

//ショートコードを使ったphpファイルの呼び出し
function my_php_Include($params = array()) {
 extract(shortcode_atts(array('file' => 'default'), $params));
 ob_start();
 include(STYLESHEETPATH . "/$file.php");
 return ob_get_clean();
}
add_shortcode('myphp', 'my_php_Include');
を見つけて削除します。

そして、記事一覧のデザイン要素を「style.css」から削除します。削除する部分は385行目付近から始まる以下のコードです。

/******* 2列表示用のCSS [myphp file='テーマの中のファイル名']で挿入する *******/
#entry-list {display: flex;flex-wrap: wrap;align-items: stretch;justify-content: space-between;}
.entry {width: 49.7%;padding: 13px;margin-bottom: 10px;text-decoration: none;position: relative;box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.18);-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, .29);-webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.18);}
a.entry:hover {opacity: .7;transition: .6s;}
.entry img {width: 100%;border: solid 1px #eee;}
.entry .text {color: #333;}
/*タイトル*/
.entry h2 {margin-bottom: 10px;font-size: 90%;line-height: 1.3;color: #333;}
/*抜粋文*/
#entry-list .excerpt {font-size: 70%;color: #555;margin: 10px 0;padding-bottom: 5px;}
/*タイル2列表示*/
.title_2type {width: 49.7%;}
/*投稿日*/
.blog_type .kiji-date {position: absolute;right: 12px;bottom: 5px;}
.entry .kiji-date {position: absolute;bottom: 1px;right: 5px;text-align: right;font-size: 70%;color: #666;}
/*カテゴリ情報*/
.entry .cat-data {max-width: 80%;top: 0;left: 0;position: absolute;font-size: 65%;padding: 0.3% 3%;border-left: 0;border-radius: 0;font-weight: bold;}

いつでもご相談・お見積りの依頼を受け付けています

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

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


【スポンサーリンク】








コメントは受け付けていません。