前回、functions.phpの役割について学んで、「課題点が解決されそう」と書きました。
以前、p5.jsのことを紹介した記事に作品を載せようと思ったのですが、上手くいきませんでした。
AIにいくつか質問して、p5.jsのコードをjsファイル化して読み込むという方法を教わったのですが、その時に、カスタムHTMLでdiv要素として表示する方法とカスタム投稿ページを作成する方法を教わったのでした。
カスタム投稿ページとは
ブログ記事とは異なる種類のコンテンツを投稿できるようにする機能です。カスタム投稿ページを作ることでWordPressで既存のテーマとは異なるレイアウトのページを作成できます。
そのための手順をご紹介します。
- 新しいページテンプレートを作成:
- まず、新しいページテンプレートを作成します。これは、既存のテーマとは異なるレイアウトを持つページのためのファイルです。
- ページテンプレートは通常、テーマのディレクトリ内に
page-{slug}.phpという名前で保存されます（{slug}はページのスラッグまたはID）。
- テンプレートファイルの編集:
- 新しいページテンプレートファイルを編集して、必要なコンテンツやレイアウトを追加します。これにはHTML、CSS、およびPHPを使用できます。
- 例えば、特定のカスタムフィールドを表示したり、異なるウィジェットエリアを配置したりすることができます。
- functions.phpでテンプレートを読み込む:
functions.phpファイルに、新しいページテンプレートを読み込むコードを追加します。- 通常、
get_template_part()関数を使用してテンプレートを読み込みます。
例えば、新しいページテンプレートをcustom-page.phpという名前で作成し、それをfunctions.phpで読み込む場合、以下のようになります
// functions.php内でページテンプレートを読み込む
function load_custom_page_template() {
if ( is_page( 'custom-page' ) ) { // ページスラッグが「custom-page」の場合
get_template_part( 'custom-page' );
}
}
add_action( 'template_redirect', 'load_custom_page_template' );
このWordPressのカスタムテーマファイルであるpage-{slug}.phpには、さまざまなカスタマイズが可能です。
- CSSファイルの追加:
page-{slug}.phpファイル内で特定のページに対してスタイルを適用したい場合、別途{slug}-style.cssという名前のCSSファイルを作成できます。- 例えば、
page-custom.phpに対してカスタムスタイルを適用したい場合、custom-style.cssを作成し、page-custom.php内で読み込むことができ、使用しているテーマとは全く違うレイアウトのページを作ることが可能になります。
- JavaScriptファイルの読み込み:
page-{slug}.php内でJavaScriptファイルを読み込むこともできます。これには<script>タグを使用します。
<!-- page-custom.php内でp5-custom.jsを読み込む --> <script src="<?php echo get_template_directory_uri(); ?>/p5-custom.js"></script>
- IDで関連付けて表示:
page-{slug}.php内でHTML要素にIDを追加し、JavaScriptファイル内でそれらのIDを操作することができます。- 例えば、特定の
<div>要素にIDを追加し、p5.jsの作品をその要素に表示させることもできます。
このように、カスタム投稿ページでは、デフォルトの「投稿」と「固定ページ」以外に、独自の投稿タイプを作成できるのです。
つまり、テーマのスタイルに捉われることなく、自分のウェブサイトにあったコンテンツを作ることができるということですね。
