カスタム投稿タイプから投稿した記事を一覧表示する方法

no_image ワードプレス
no_image

カスタム投稿タイプから投稿した、記事を一覧表示させる方法はたくさんあって戸惑います。

さらに、カスタム投稿のfnctionの状況で記載するコードが変わってくるので、サイトの情報通りに行ってもうまくいかないこともしばしば…

 

この記事では勉強中に感じた難しいと思うポイントを抑えながら解説して行こうと思います。

 

結論

今回は一覧ページを固定ページとして作ってきます。

  • page-〇〇.phpファイルを作る
  • header/sidebar/footerなどのパーツを用意する
  • ループを記載する
  • テーマ内にアップする
  • wordpressの管理画面の『固定ページ』からページタイプを選択して公開する

手順は以上になります。

 

まずはpage-〇〇.phpファイルを制作していきましょう。

〇〇の部分は任意の名前にします。カスタム投稿をfunctionから制作する際に『register_post_type(‘custom’,$Supportcustom);』という部分がありますが、ここのurlとなる第一引数の部分に使用した名前が無難でしょう。

次に環境に合わせてheaderなどのパーツを設置し、メインとなるループを書いていきます。

以下のコードで表示させることができます。

制作したファイルの頭に固定ページのテンプレートとして認識させるよう以下のコメントを残しておきます

テーマ内に制作したファイルをアップロードし、wordpress管理画面の『固定ページ』のページタイプからこちらを選択し、公開します。

これで完了です。

解説

解説は基本コメントの通りです。

こちらで表示する記事を選定しています。

『example』の部分に表示したいカスタム投稿タイプの名前を入力します。

『,』カンマ区切りで複数設定することができます。例えば

とすれば投稿記事も表示することができます。

 

こちらで日付け順で並び替えます。

 

こちらで大きい順か小さい順で並び替えることができます。
DESCで大きい順、つまり、日付が新しい順です。ASCで小さい順つまり、日付けが古い順です。

 

こちらで何ページ目の記事を表示したいかを設定します。

例えば1ページに5つの記事を表示する設定になっていおり、カスタム投稿タイプから公開された記事が25記事存在するとすると、全部で5つのページが存在し、それらをページネーションで移動することとなります。

この場合、例えばページネーションで3ページ目に移動した際、11記事目〜15記事目を取得しなければなりませんが、このpagedが設定されていない場合、もしくは1など限定されている場合はずっと同じ記事を表示してしまうことになります。(ページを移動しても1記事目〜5記事目が表示される)

ですので、ページネーションに合わせてpagedの値を変更してあげないといけません。

上記のコードで現在のページを取得することができます。

 

1ページに表示する記事の数です。

 

これらをWP_Queryで設定しthe_queryに保存しループを回します。

もし、表示する記事があれば

その記事が存在する分ループを回す。

こちらのループの中でthe_permalinkやthe_titleを使ってコンテンツを取得し記事を表示していきます。

 

ちなみに$the_query->the_post()の部分はwhile文のカウントアップに相当します。

通常のwhile文を回す時i++しますよね。これと同じです。

ですので、この記載を忘れると永遠にループしますので気をつけて。

 

最後に必ずクエリをリセットします。

functionを確認しながら具体的に当てはめてみる

実際にwordpressに実装しなら具体的にした方がわかりやすりと思うので実施に実装して行こうと思います。

今回はわかりやすくするため、シンプルなテーマ『SANGO』を使っていきたいと思います。

デザインはアーカイブページと同じように一覧で表示したいのでarchive.phpの中身をみてみます。

archive.php

記事一覧はget_template_part(‘parts/post-grid’);こちらから表示しているようですので、次にこちらをみてみます。

post-grid.php

構造は

表示する記事があるか確認

横長型かカードタイプを選び、ループを回す

ナビゲーションを表示

記事がなかった時の処理

クエリをリセット

となっていますね。

表示のさせかたに横長型と縦に2列型がありますが、今回は縦に2列型で表示させようと思います。

必要な部分だけを切り出してみました。

ここのループを今回紹介したコードに置き換えればカスタム投稿タイプから投稿した記事を表示することができます。

当てはめるとこうなります。

そしてexampleの部分を表示させたいカスタム投稿タイプの名前に変更します。

カスタム投稿タイプの名前は作る時に書いたfunctionから確認できます。

 

カスタム投稿タイプの作り方は別記事の『カスタム投稿タイプを作る方法』で紹介しています。

https://trytrytry.work2020/04/26/hoe_to_custom_post/

こちらの記事では投稿名を『custom』としているので、exampleの部分をcustomに変更します。

そしてテンプレートと認識されるようにコメントを記載しておきます。

テンプレートの名前はカスタムポストテーマとでもしておきましょう。名前はなんでも大丈夫です。

Template Post Typeは今回は固定ページとして認識して欲しいのでpageとします。ちなみに、こちらをpostにすると投稿ページとして認識します。

 

完成!このファイルの名前をpage-custom.phpとでもしてサーバーにアップします。

 

ページを公開する

完成したファイルをサーバーにアップできたらwordpressの管理画面から固定ページとして公開します。

固定ページ→新規追加からタイトルを適当に決め、右サイドバーのページ属性→テンプレートからcustom-post-themeを選択し、公開します。

カスタム投稿_記事一覧img1.png

まとめ

手順

  • page-〇〇.phpファイルを作る
  • header/sidebar/footerなどのパーツを用意する
  • ループを記載する
  • テーマ内にアップする
  • wordpressの管理画面の『固定ページ』からページタイプを選択して公開する

コード↓

exampleの部分を取得したい投稿タイプ名に変更する。

 

 

コメント

タイトルとURLをコピーしました