[Ha-Basic] New article list can be inserted with short code at any place in the post or fixed page text

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

公開日:2019年5月31日 更新情報
Knowledge Base Wordpress ha-Basic テーマ

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

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

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

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

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

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

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

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

Knowledge Base メンテナンス

【WordPress】本文内へ後から変更・追記できる開閉式コンテンツを作る方法

使い方など
過去に書いたかも・・と思いつつ。このサイトでも行っている方法を紹介します。 このサイトはWordpressの使い方やプラグインなどの紹介記事が多いことから、より
Knowledge Base Wordpress ha-Basic テーマ

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

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

【ha-Basic】テーマのサイドバーウィジェットに「最近リニューアルした記事」を表示する方法

カスタマイズ
テーマカスタマイズって面白い!!特にオリジナルテーマだと構造も分かっているのでやりがいがありますね。 そんなのを目指したテーマ【ha-Basic】を使っていただ
Knowledge Base Wordpress ha-Basic テーマ

【WordPress】管理画面の投稿一覧へ並び替え可能な「最終更新日」列を追加する方法

カスタマイズ
長くWordpressサイトを運営していると標準で管理画面の投稿一覧、固定ページ一覧へ表示される「公開日」よりも、公開後に修正した日付である「最終更新日」が気に
Knowledge Base トラブル 対処

スターサーバーのフリーWPプランで「Deprecated: Non-static method WPblogAdProp::setAd1() should not be called statically in…」と表示されたときは

サイト作成日記
以前はサイト公開に利用させていただいていたネットオウル(スターサーバー)の無料プラン。最近では独自ドメイン+有料サーバーで運営していますので申し訳ない話ですがテ
Knowledge Base Wordpress ha-Basic テーマ

【ha-Basic】テーマでCSSをインライン出力する方法

カスタマイズ
なんのこっちゃ??と思われるかも知れませんね。Wordpressのテーマの多くはヘッダー(header.php)内に というようなタグを使ってテーマ内の「sty
Knowledge Base ニュース

2019年12月15日でYahoo!ブログ終了。その後どうする??この際だからWordPressにしては??

日記・雑記
いつかは終わる無料サービス・・・この流れはYahoo!ブログにも訪れたようです。2019年12月15日をもってサービスを終了するそうです。 終了する理由について
Knowledge Base Wordpress ha-Basic テーマ

【ha-Basic】テーマでタイトル上に英語のタイトルを表示させる方法

カスタマイズ
WordPressでトラブルやカスタマイズヒントを検索するときどうしてますか?通常は「Wordpress 日本語の単語」で検索されてると思いますが、特にトラブル
Knowledge Base トラブル 対処

【WordPress】パーマリンクが重複して「-2」などが自動付与されたときのちょっとおかしな現象を発見!?

使い方など
WordPressで昔からあった現象なのかは全く不明ですが、何とも不思議な現象に遭遇しました。それは・・ 下書き保存しておくと、元の記事がそれに置き換わって表示
Knowledge Base Wordpress ha-Basic テーマ

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

カスタマイズ
テーマカスタマイザーがない=色の調整はすべてCSSからとしている【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のカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

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


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報