コクーンではショートコードを利用してページ一覧のカスタマイズをすることは出来ますが、ブログカード付きでページネーションを表示させてすべての記事一覧(全記事)を表示する事が出来ません。
ユーザーによっては全ての記事を最初から順番に読みたい方もいるはずです。今回の記事ではワードプレスのfunctions.phpを編集して全記事一覧の表示を実現する方法をご紹介します。
スポンサーリンク
ワードプレスfunctions.phpを編集してコクーンで記事一覧取得ポイント
- ワードプレスでfunctions.phpを編集すればショートコードを使用するより自由度の高い全記事一覧ページを作る事が出来る。
- cocoonのfunctions.phpを編集する前には必ずバックアップを取る事。間違えて編集するとページが表示できなくなったりエラーが出力される原因になる。
- cocoonのテーマの機能面をカスタマイズしたいならfunctions.phpを編集できるようにPHPを覚えよう。
ワードプレス functions.phpを編集するメリット。Cocoonでもショートコードはあるがデメリットも
私がこのドメインで使っているワードプレスのテーマはCocoon(コクーン)で、開発者はわいひらさんです。無料とは思えない程高機能でとても快適に利用させて頂いていますが、Cocoonで出来ない事を自分でカスタマイズしたいと思う事もあります。
私が個人的に変更したかった点が記事一覧の表示です。ブログの記事ってカテゴリーやタグで分けられていますが、人によっては最初から全ての記事を読んでいきたいという読者も多いはずです。
コクーンにもショートコードでそのような機能は実装されていますが、不便な点もあります。それはページネーション付きで記事一覧を全て表示できない点です。(新規実装されていたらすみません)
コクーンデフォルトのショートコードではページネーションの設定までは出来ず、一度に表示できる記事の表示件数も固定されています。この機能をカスタマイズして全ての記事の一覧をページネーション付きで表示する方法をご紹介します。ページのブログカードの表示パターン(列)も変更する事が出来ます。
ワードプレス functions.phpを編集して記事一覧を表示させるには？
ブログの読者の立場になって考えた場合、カテゴリーやタグで分けられたページで素早く該当記事にアクセスしたい読者もいる一方で、最初から最後まで順番に記事を読みたい読者も居ると思います。
そういった読者の為に、固定ページで記事一覧を取得するページを作成します。(固定ページと言っても、ダッシュボードの固定ページで作るわけではありません)
Cocoon以外のテーマを使用している方はデフォルトでこういった機能が付いている場合も多いかもしれませんが、Cocoonのワードプレステーマで過去記事を含めたページネーション(ページ遷移)付き全記事一覧取得方法を色々試して一番やり易かった方法を記録を含めて書きたいと思います。
タイトル画像通り、『次のページ』とついた投稿記事一覧ページが、以下のスクリプトをfunctions.phpにコピペするだけで作成できます。特に気にしなければスラッグ名は私と同じものでも問題ありません。(他の固定ページやテンプレートのスラッグと被らないようにしましょう)
この場合の記事一覧URLはこうなります。
後は自分で決めたスラッグ付きのURLのリンクを好きな場所に作れば固定ページの作成が完了です。
https://jpprepper.com/この部分を変更/
*jpprepper.comはご自分のサイトのドメイン全記事一覧を取得するにはDBから直接データを選んで引っ張ってくる等様々な方法がありますが、ワードプレスではあらかじめいくつかの関数が用意されているようです。
表示イメージとしては、画像だと全体像が把握しきれませんが、下記の設定で保存すると2列で一ページの記事表示数が10件となります。(引数を色々と変えて自分の好みの表示件数に調整できます)
PHPで記事の一覧を取得するプログラム
/*
*全記事一覧を取得する
*
*説明：固定ページに10件2列の記事一覧画面を作成する(ページ遷移付き)
*使用方法：① URLのスラッグを自分の好きなものに変える
* ➁ add_filterの引数を変更して1ページに表示できる記事の件数や列を調整する
*適用箇所：テーマファイルエディタ>functions.phpへ記載
*/
function post_has_archive( $args, $post_type ) {
if ( 'post' == $post_type ) {
// has_archiveで設定したスラッグを有効化
$args['rewrite'] = true;
// 投稿アーカイブの有効化(URLの後に付加する任意のスラッグ名)
$args['has_archive'] = 'list';
}
return $args;
}
add_filter( 'register_post_type_args', 'post_has_archive', 10, 2 );今更説明の必要は不要かとは思いますが、初めてfunctions.phpを触る方のために、スクリプトの記載場所を明記しておきます。
外観＞テーマファイルエディタ＞functions.php
他にプログラムが記入されていた場合、記入個所は何処でも構いません。(先頭でも最後でも。自分は最後に記入する事をお勧めします)
最後に管理画面を開き、何も設定しない状態でパーマリンクの保存を行います。(ただパーマリンクの設定ページを開いて保存を押すだけです)
管理画面＞設定＞パーマリンク＞保存
設定したスラッグ付きのURLにアクセスして自分の希望通りの表示になっているか確認します。スラッグの一番最初に表示される記事一覧は最新の記事一覧で次のページや数字や＞を押すごとに過去の記事一覧が最後の記事まで表示できます。(サンプル画像の様に、アイキャッチ画像のサイズが異なっていると自動で切り取りやリサイズされないので文字の位置が左右と異なります。また、モバイルでは二列では表示されず1列で表示されます。この辺の表示はcocoonで設定できるタブがあるのでお好みに応じて調整しましょう)
ワードプレスでおすすめのプラグイン【Twitter(X)への自動投稿】
ワードプレス関連のネタで最近話題なのが、Twitter【X】の経営者が変わったことでツイッターを制御できるAPIが有料になりました。有名なワードプレスのプラグインで今まで簡単にワードプレスで書いた記事をツイッター【X】へ自動投稿していたユーザーも殆どのプラグインが利用できなくなりました。そんな中で筆者も使っている設定は少し難しいけど初心者向けのプラグインと設定を紹介します。
ワードプレスで書いた記事をツイッターへ自動投稿したいというユーザーは非常に多いので、下記の記事を参考に貴方もツイッターへの自動投稿をチャレンジしてみてください。
ワードプレスfunctions.phpを編集してコクーンで記事一覧取得まとめ
cocoonでfunctions.phpをいじれば固定ページ(実際に固定ページを作るわけではないが)で全記事一覧をページネーション付きで取得する事が出来ます。ブログカードの表示件数も変える事が出来ます。
Cocoonは開発者である【わいひら】さんが制作した超有名なワードプレステーマです。非常にデザイン性や汎用性が高く操作性も抜群です。初心者にも分かりやすい作りになっているので、ワードプレスのテーマで悩んでいる場合は、とりあえずCocoonを入れておきましょう。
Cocoonのテーマであれば、利用者が多い分情報量も半端ないので、ちょっと調べれば直ぐに解決方法を見つける事が出来ます。
但し、注意点もあります。functions.phpという子テーマのコアを編集する事になるので、他に記述されているプログラムを間違えて編集してしまうとエラーが表示される原因になりますので必ずバックアップをとってから作業しましょう。
コメント