ワードプレス便利帳

WordPressの使い方を初心者から上級者までわかりやすく画像で解説

© ワードプレス便利帳 All rights reserved.

bsfvgs1s

201610/6

WordPressの記事・固定ページを親ごとに出力する。

投稿・カスタム投稿・固定ページのループ出力について

WordPressではquery_postsWP_Queryなどのループを使うとページの一覧を簡単に記述することができます。一定のデザインで、全ての記事、もしくは最新の○件などを表示したい場合に使用すると思います。

階層を持たせたまま出力したい

今回目指すのはこちら。

bsfvgs1

階層がわかるように全ての記事を出力したいというもの。
「親ごと WordPress」「階層 ループ」などで検索しても全然見つからなかったのでこちらに記します。(みつからないということはあまり使う機会がないのかもしれません…)
カテゴリーやタクソノミーを親ごとに出力というのは検索するといくつも出てくると思います。

人間用のサイトマップなどに使用できるのではないでしょうか。

ソースコード

PHPのタグが部分的にコメントタグになっているので書き換えてやってください。

                                       
 $paged ,
'post_type'   => 'custom-post-name' , 
'post_parent' => 0,
'order'   => asc 
) ); ?>

        have_posts() ):  while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        
        

    $paged , 'post_type' => 'custom-post-name' , 'post_parent' => $this_id , 'order' => asc ) ); ?> have_posts() ): while ( $the_query2->have_posts() ) : $the_query2->the_post(); ?>

一つ目のループは親記事のみを拾って回すループになります。
‘post_parent’ => 0,なのでトップページの次の下層を取得するようにしています。サイトマップだとこの方式で大丈夫です。商品ページの一覧を表示する場合などは一覧ページの記事IDを’post_parent’ => 0,の部分に設定してください。

インデントのついた部分は、一番目のループで拾ってきた「親記事」を親にもつ「子ページ」を出力するループ
get_the_ID()でループで拾われている親記事のIDを取得します。それを変数にいれて、子ページを出力するループの絞り込みに設定しています。(’post_parent’ => $this_id ,の部分)

ループの中にループを追加ていかないといけないので階層が深すぎるサイトにはあまり向かないかもしれません…。

この方法だと子記事にインデントをつけたり、リストマークをつけたりとCSSでデザインも触れるので気が向いたらぜひお試しください。

  • このエントリーをはてなブックマークに追加

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

gsvgadvg

20172/17

カスタムフィールドでカレンダーを自作【プラグインいらず】

カスタムフィールドだけでカレンダーを自作 プラグイン不要というのはカレンダープラグインを使わずという意味であってカスタムフィールド系のプラ…

20161102200516

201611/2

ループの中に罫線を追加する方法

ループ出力の中に区切り線を追加する ブログや製品・商品情報として、1行ごとに罫線を追加したい、というデザインもあると思います。 しかしル…

20161017154512

201610/17

『WordPress importer』と『Search Regex』を使って画像ごと記事の引越しを行う

『WordPress importer』について WordPressからWordPressへ投稿記事の引越しに関して、WordPressは…

20160801185626

20168/1

WordPressのtitleタグのデザインを変更する

WordPressの見出しに工夫を加える WordPressは用意されたテーマを使うにしろ、独自テーマを使うにしろ、共通したページのレイア…

160721_eye

『WP ULike』の見方

『WP ULike』の確認方法 前回のWordPressの独自のいいね機能『WP ULike』の続きで、もらったいいねに対するその数値の確…

ページ上部へ戻る