Wordpressでカスタム投稿一覧表示

Wordpressでカスタム投稿一覧を表示する方法です。

今回は、シンプルな公式テーマ「twentytwentyfour」を例にすすめていきます。

1.子テーマを作ろう

WPのテーマはWP本体の更新にあわせて、頻繁にアップデートされます。

テーマ本体（親）を更新によって上書きし、せっかく追加したコードが台無し...とならないために、追加コードは子テーマで管理しましょう。

①「twentytwentyfour」と同じ階層に「twentytwentyfour-child」フォルダを作成しましょう

②作成したフォルダ内にstyle.cssを作成し、子テーマであることを宣言します

/*
Theme Name: Twenty Twenty-Four Child
Template: twentytwentyfour
*/

③function.phpを設置します。CSSは最後に読み込んだコードに上書きされるので、「親テーマ」→「子テーマ」の順でCSSが読み込まれるように定義します

<?php

function  theme_enqueue_styles() {
 //親テーマのCSSファイルを読み込む
 wp_enqueue_style('parent-style', get_template_directory_uri().'/style.css', array());
 //子テーマのCSSファイルを読み込む
 wp_enqueue_style('child-style', get_stylesheet_uri(),array('parent-style'));
}

add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

?>

2.カスタム投稿一覧を表示しよう。

慣れている方は、直接function.phpにコードを記述したりしますが、今回はWPのブロック機能を利用したやり方ですすめていきます。

①プラグイン「Otter Blocks」をインストールします。

Otter Blocksは、インストールするだけで様々な機能を持ったブロックを追加できる便利なプラグインです。

②サイトエディターで一覧を表示したいページで「ブロック追加」→「OTTER」→「Posts」を選択します。

③Post Typeで表示したいカスタム投稿を選択し、レイアウトやデザインなどをカスタマイズします。

リスト形式やグリッド形式、表示件数・ページネーションの有無など細かく設定できるので、サイトに合わせて調整していきましょう。

進化したWordPressの機能とプラグインを利用することで、カスタム投稿一覧を表示することができました！

---

Wordpressの仕様とともにテーマの仕組みも大きく変化し、Wordpressとテーマの組み合わせによって構築方法が複雑化していると感じます。

もちろん、専門知識のない方がホームページを簡単に作成できるようにとの正統進化なのですが、逆に細かい部分を変えようとすると、どこをさわればいいんだ！？ということにもなりかねません。常に新しい情報を仕入れ、対応していくことが、これからのWebデザイナーにとってますます重要になりそうです。

ホームページのことならハンジャ・ネットワークスへご相談ください！