WordPressで新着情報をPHPで表示する方法

Posted on by

WordPressは世界中で最も人気のあるコンテンツ管理システム（CMS）であり、その柔軟性と拡張性が多くのウェブサイト運営者に支持されています。その中でも、新着情報を表示する機能は多くのサイトにとって重要な要素です。この記事では、WordPressで新着情報をPHPを使って表示する方法について、具体的なコード例とともに解説します。

1. 準備

まずは、WordPressテーマの編集を行うための準備を整えます。子テーマを作成して、親テーマのアップデートによる変更の上書きを防ぐことをお勧めします。子テーマの作成方法は以下の通りです。

  1. 親テーマのディレクトリ（例: wp-content/themes/twentytwenty）に移動します。
  2. 子テーマのディレクトリを作成します（例: wp-content/themes/twentytwenty-child）。
  3. style.cssファイルを子テーマディレクトリに作成し、以下のコードを追加します。
/*
 Theme Name:   Twenty Twenty Child
 Template:     twentytwenty
*/
  1. functions.phpファイルを子テーマディレクトリに作成し、以下のコードを追加します。
<?php
function my_theme_enqueue_styles() {
    $parent_style = 'parent-style'; // 親テーマのスタイルハンドルを定義
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

これで子テーマの準備が整いました。

2. 新着情報を表示するカスタムクエリの作成

新着情報を表示するために、WP_Queryクラスを使用します。WP_QueryクラスはWordPressの強力なクエリクラスであり、カスタムクエリを作成して特定の投稿を取得することができます。以下に新着情報を表示するための基本的なコードを示します。

<?php
// 新着情報を表示するためのクエリ
$args = array(
    'post_type' => 'post', // 投稿タイプを指定
    'posts_per_page' => 5, // 表示する投稿数
    'orderby' => 'date', // 日付でソート
    'order' => 'DESC' // 降順
);

$new_query = new WP_Query( $args );

// クエリの結果を表示
if ( $new_query->have_posts() ) :
    while ( $new_query->have_posts() ) : $new_query->the_post();
        ?>
        <div class="new-post">
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p><?php the_excerpt(); ?></p>
            <span class="post-date"><?php the_time('Y年m月d日'); ?></span>
        </div>
        <?php
    endwhile;
    wp_reset_postdata();
else :
    echo '<p>新着情報はありません。</p>';
endif;
?>

3. カスタムテンプレートの作成

新着情報を表示するためのカスタムテンプレートを作成します。WordPressテーマのディレクトリに新しいテンプレートファイル（例: new-posts.php）を作成し、先ほどのコードを追加します。このテンプレートファイルをページに適用することで、新着情報が表示されるページを作成できます。

<?php
/*
Template Name: New Posts
*/
get_header(); ?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?php
        // 新着情報の表示コードをここに挿入
        ?>
    </main><!-- #main -->
</div><!-- #primary -->

<?php
get_sidebar();
get_footer();
?>

4. カスタムウィジェットの作成

新着情報をサイドバーや他のウィジェットエリアに表示する場合、カスタムウィジェットを作成することができます。以下はカスタムウィジェットの例です。

<?php
class New_Posts_Widget extends WP_Widget {
    // ウィジェットの初期化
    function __construct() {
        parent::__construct(
            'new_posts_widget', // Base ID
            '新着情報ウィジェット', // Name
            array( 'description' => '最新の投稿を表示するウィジェット' ) // Args
        );
    }

    // ウィジェットの出力
    public function widget( $args, $instance ) {
        echo $args['before_widget'];
        if ( ! empty( $instance['title'] ) ) {
            echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
        }

        // 新着情報を取得
        $query_args = array(
            'post_type' => 'post',
            'posts_per_page' => 5,
            'orderby' => 'date',
            'order' => 'DESC'
        );
        $new_query = new WP_Query( $query_args );

        if ( $new_query->have_posts() ) {
            echo '<ul>';
            while ( $new_query->have_posts() ) : $new_query->the_post();
                echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
            endwhile;
            echo '</ul>';
            wp_reset_postdata();
        } else {
            echo '<p>新着情報はありません。</p>';
        }

        echo $args['after_widget'];
    }

    // ウィジェットの設定フォーム
    public function form( $instance ) {
        if ( isset( $instance[ 'title' ] ) ) {
            $title = $instance[ 'title' ];
        } else {
            $title = '新着情報';
        }
        ?>
        <p>
        <label for="<?php echo $this->get_field_id( 'title' ); ?>">タイトル:</label> 
        <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
        </p>
        <?php 
    }

    // ウィジェットの設定を保存
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
        return $instance;
    }
}

// ウィジェットの登録
function register_new_posts_widget() {
    register_widget( 'New_Posts_Widget' );
}
add_action( 'widgets_init', 'register_new_posts_widget' );
?>

5. ショートコードの作成

ショートコードを使用して、新着情報を投稿やページ内に表示することもできます。以下は、新着情報を表示するためのショートコードの例です。

<?php
function new_posts_shortcode( $atts ) {
    ob_start();

    // デフォルトの属性
    $atts = shortcode_atts( array(
        'posts_per_page' => 5,
    ), $atts, 'new_posts' );

    // クエリ引数
    $query_args = array(
        'post_type' => 'post',
        'posts_per_page' => $atts['posts_per_page'],
        'orderby' => 'date',
        'order' => 'DESC'
    );

    // 新着情報のクエリ
    $new_query = new WP_Query( $query_args );

    if ( $new_query->have_posts() ) {
        echo '<ul>';
        while ( $new_query->have_posts() ) : $new_query->the_post();
            echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
        endwhile;
        echo '</ul>';
        wp_reset_postdata();
    } else {
        echo '<p>新着情報はありません。</p>';
    }

    return ob_get_clean();
}
add_shortcode( 'new_posts', 'new_posts_shortcode' );
?>

このショートコードを使用することで、新着情報を簡単にページや投稿に埋め込むことができます。例えば、[new_posts posts_per_page="5"]のように記述します。

まとめ

この記事では、WordPressで新着情報をPHPを使用して表示する方法について、具体的なコード例とともに解説しました。WP_Queryクラスを使用してカスタムクエリを作成し、カスタムテンプレート、ウィジェット、ショートコードを作成することで、さまざまな場所で新着情報を表示することができます。これらの方法を活用して、より魅力的で動的なWordPressサイトを構築してください。