WordPressのサイドバーに記事一覧を取得して表示する

WordPressのサイドバーに記事一覧を取得して表示する

WordPressを使用しているテーマのサイドバーに記事一覧を取得するときには、どのようなPHPコードを記述して記事一覧を表示するのかを説明します。

WordPressのトップページで取得するときのようなwhile(have_posts()) : the_post();のメインループとは違うループ処理の書き方でWordPressのサイドバーに記事一覧を取得して表示させることができます。

 

WordPressのサイドバーに記事一覧を取得する

 

WordPressのサイドバーに記事一覧を取得して表示するには、テーマのサイドバーを表示しているsidebar.phpのテンプレートファイルに記事一覧を取得するためのPHPコードを記述します。

 

<aside class="side_loop">
    <ul>
    <?php
        $args = array(
            'post_type' => 'post',
        );
        $my_query = new WP_Query( $args );
    ?>

    <?php if ( $my_query->have_posts() ): ?>
    <?php while( $my_query->have_posts()): $my_query->the_post(); ?>
        <li>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </li>
    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
    <?php endif; ?>
    </ul>
</aside>

 

上記の記述がWordPressテーマのsidebar.phpに記述するPHPコードの例です。

WordPressのサイドバーに記事一覧を取得するPHPコードの出力は、WordPressテーマの<get_sidebar(); ?>を記述をしているテンプレートファイル、index.phpのトップページやsingle.phpの投稿ページのサイドバーに記事一覧がリスト形式で表示できます。

WordPressのサイドバーに記事一覧を取得した出力結果の表示は、例としてトップページのサイドバーで記事一覧を表示した以下の画像です。

 

 

WordPressのサイドバーに表示する記事一覧を取得する全体のPHPコードをはじめに紹介しましたが、記事一覧を取得するコードにはWordPressのサブループを使用しています。

サブループでどのようにWordPressのサイドバーに記事一覧を取得して表示できるかについての詳細は以降で説明します。

 

サイドバーに記事一覧を取得するサブループ

 

WordPressの記事一覧を取得してサイトバーに表示することができるサブループはWP_Queryを使用します。

WP_Queryはwp-includes/class-wp-query.phpに定義されているクラスで、WordPressの投稿やページの情報を取得することができるWP_Queryクラスです。

WordPressのサイドバーに表示する記事一覧の形式はサイトによって色々な形式になるかと思いますが、WP_Queryのサブループを使うと例えば「カテゴリーごと」「特定の記事のみ」などを投稿件数を指定して記事一覧にできる優れものです。

サブループの書き方はメインループとは違う書き方をします。

 

<aside class="side_loop">
    <ul>
    <?php
        $args = array(
            'post_type' => 'post',
        );
        $my_query = new WP_Query( $args );
    ?>

    <?php if ( $my_query->have_posts() ): ?>
    <?php while( $my_query->have_posts()): $my_query->the_post(); ?>
        <li>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </li>
    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
    <?php endif; ?>
    </ul>
</aside>

 

上のコードは、HTMLのasideタグでマークアップした親要素の中で、WordPressのサイドバーに投稿のタイトルをリンクして記事一覧を表示するためにサブループした記述です。

<ul>タグのすぐ下の<?phpから?>までのPHPコードがサイドバーに表示する記事一覧をどのような形式で表示したいか決定するために条件を書く部分です。該当部分だけを切り分けた以下のコードで説明します。

 

<?php
    $args = array(
        'post_type' => 'post',
    );
    $my_query = new WP_Query( $args );
?>

 

WordPressのサイドバーに表示する記事一覧をどのように表示するかの条件を作成します。

条件の作成は変数$argsを作り、arrayの連想配列を使います。

連想配列ではキーと値のペアでWordPressのサイドバーに表示する記事一覧を取得する条件を書きます。

条件に使用できるパラメータは、たくさんあるので一つ例を出して説明しますが、例えば’post_type’ => ‘post’,を使用すると「投稿」を取得の条件にできます。

他のWP_Queryのパラメータは以下のWordPress Codexのページをご確認ください。

 

関数リファレンス/WP Query

 

また、先に作成した変数$argsを左辺にして右辺の連想配列で条件を作成したため、サイドバーに表示する記事一覧の取得条件は変数$argsに代入(格納)されます。

 

Advertisement

 

次に$my_query = new WP_Query( $args );の部分です。

WP_Queryを new で指定することでWP_Queryクラスのインスタンスが作成でき、インスタンスのプロパティを参照できるようになります。

任意の変数を作成します、例では$my_queryです。作った変数を左辺にして代入演算子(イコール)で右辺のインスタンス化したnew WP_Query( $args );を$my_queryに代入します。

new WP_Query()のカッコ内に記述した$argsは先ほどWordPressのサイドバーに表示する記事一覧の条件を配列で作成して格納した変数です。

これにより右辺の$my_queryに格納した記事一覧を表示する条件をWordPressのサイドバーに表示するサブループ処理の記述で使用できます。

 

<?php if ( $my_query->have_posts() ): ?>
<?php while( $my_query->have_posts()): $my_query->the_post(); ?>
    <li>
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</ul>

 

上のPHPコードは、先ほど作成したWordPressのサイドバーに表示する記事一覧の条件でサブループしてる部分を切り分けた記述です。

メインループの書き方と若干の違いがあるのは、have_posts()、the_post()の記述の箇所で変数が使われていることです。

この変数は先ほど作成したWordPressのサイドバーに表示する記事一覧の形式をセットした条件が入った変数でループ処理をできるようにするためのもの。

書き方としては変数を左辺に記述してPHPのアロー演算子の右辺にhave_posts()とthe_post()を記述します。

 

Advertisement

 

WP_Queryのループ最後にはwp_reset_postdata()の記述も必要です。wp_reset_postdata()はnew WP_Queryを使ってクエリを実行したあとに、メインクエリの$GLOBALS[‘post’]を復元するために記述しておきます。

このような書き方によりサブループは、if ( $my_query->have_posts() ):で作成した条件の投稿でループできる結果があるかを確認し、ある場合にはwhile( $my_query->have_posts()): $my_query->the_post();でループ処理が進みます。

 

WordPressのサイドバーに最新記事一覧を表示してみる

 

WordPressのサイドバーに最新記事一覧を表示してみる場合、ここまでの説明でサブループした記事一覧は、それぞれのサイトによって表示する記事数が多すぎたり、少なすぎたりします。

記事一覧の表示件数はWordPressの設定、表示設定の「1ページに表示する最大投稿数」の件数で表示されるからです。

 

Advertisement

 

例えば10件で表示設定しているけどサイドバーの記事一覧の表示件数を5件の最新記事一覧にしたいからWordPressの表示設定で表示件数を5にしてしまうと、サイドバーの最新記事一覧だけではなくメインループで表示してる記事一覧にも件数設定が影響してしまいます。

そこでWordPressのサイドバーに記事一覧を表示するために取得した条件の部分で、サイドバーに表示している記事一覧だけの表示件数を指定して、メインループに影響のない最新記事一覧を5件にして表示します。

 

<aside class="side_loop">
    <ul>
    <?php
        $args = array(
            'post_type' => 'post',
            'posts_per_page' => 5,
        );
        $my_query = new WP_Query( $args );
    ?>

    <?php if ( $my_query->have_posts() ): ?>
    <?php while( $my_query->have_posts()): $my_query->the_post(); ?>
        <li>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </li>
    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
    <?php endif; ?>
    </ul>
</aside>

 

上のコードはここまで説明で使用した記述の使い回しなのですが、サイドバーに記事一覧を表示する条件を記述したarrayの配列に’posts_per_page’ => 5,を追加で記述します。

 

 

すると、これまでWordPressの表示設定の件数で表示されていたサイドバーの記事一覧は、投稿件数5件の最新記事一覧で表示できます。

 

サイドバーの最新記事一覧にサムネイルも表示

 

せっかくWordPressのサイドバーに最新記事5件で記事一覧の表示をしたので、サムネイルも取得して投稿タイトルとサムネイルをリンクつきにした最新記事一覧の表示をしてみます。

 

<aside class="side">
    <ul>
    <?php
        $args = array(
            'post_type' => 'post',
            'posts_per_page' => 5,
        );
        $my_query = new WP_Query( $args );
    ?>
    <?php if ( $my_query->have_posts() ): ?>
    <?php while( $my_query->have_posts()): $my_query->the_post(); ?>
        <li>
            <a href="<?php the_permalink(); ?>">
            <?php
            if (has_post_thumbnail()) : the_post_thumbnail('medium');?>
            <?php else: ?>
                <img src="<?php echo get_template_directory_uri(); ?>/images/no-image.gif" alt="no-imag"><!--画像読み込み-->
            <?php endif; ?>
            <?php the_title(); ?>
            </a>
        </li>
    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
    <?php endif; ?>
    </ul>
</aside>

 

WordPressのサイドバーに表示させるサブループの記述でwhile文の<li>タグ下にaタグをマークアップしてhref属性にthe_permalink()をPHPで記述します。

そしてif文を使ってサイドバーに表示する投稿にサムネイルが設定されいるかをhas_post_thumbnail()でチェックできるように記述しておき、サムネイルがある場合には、the_post_thumbnail(‘medium’)でミディアムサイズのサムネイルをサブループで表示します。

 

Advertisement

 

またサムネイルの設定がない場合を考えて、else文でimgタグをマークアップしたsrc属性に、PHPでWordPressのget_template_directory_uri()関数をechoで出力します。

get_template_directory_uri()には画像のフォルダにno-image.gifの画像を保存しておき、画像までのパスを繋いでおくことで、サイドバーの記事一覧の投稿でサムネイルが設定してない記事にはno-image画像が表示できます。

 

 

 

今回のサブループの書き方を少し応用してWordPressのサイドバーに記事一覧を取得した表示をCSSでデザインすると上の画像ような最新の投稿一覧の中の最新記事1件だけはNEWマークをつけたりもできます。

WordPressのNEWマークをつけて記事一覧を表示したい場合は、以下の記事が参考になると思います。

 

WordPress 最近の投稿5件を取得して1件目だけ表示を変える

WordPress使い方カテゴリの最新記事