WordPressのカスタムページテンプレートの作成について解説

WordPressのページテンプレートは、特定のページまたはページのグループに使用される特定のテンプレートファイルで、これらのテンプレートは、フロントエンドに表示される単一のページデータに使用されます。また、WordPressでカスタムページテンプレートを作成することも可能です。

ここでは、WordPressでカスタムページテンプレートを作成する方法と、WordPressで特定のページやページグループにカスタムテンプレートを割り当てる方法について、以下のように説明します。

WordPressでカスタムページテンプレートを作成する

WordPressでは、デフォルトで、フロントエンドの外観を処理するために、デフォルトのテンプレートファイルであるpage.phpを使用してページと投稿を作成することができます。

デフォルトのテンプレートファイル ( page.php ) に変更を加えることもできますが、この変更は、すでに作成した他のすべてのページに影響します。

そこで、特定のページレイアウトのデザインをオンデマンドで処理するために、WordPressでカスタムページテンプレートを作成する必要があるわけです。

まずは、カスタムページテンプレートを作成しましょう。

カスタム・テンプレートの作成は、HTML、CSS、PHPの基本的な知識があれば始められます。もちろん、お気に入りのファイルエディターも必要で、私のお気に入りはSublime Text 。

そこで、ファイルエディタを開いて、次のコードを貼り付けます。

<?php
/*Template Name: My Custom Page Template*/
? >

このファイルを "my-custom-page-template.php" という名前で保存してください。必要に応じてファイル名を変更することができます。しかし、拡張子を.phpとして保存することを忘れないでください。

上記のファイルにコメントをつけることで、WordPressに「これはテンプレートファイルであり、テンプレート名はあなたが提供するものである」と伝えます。新しいページを作成すると、「ページのプロパティ」セクションの「テンプレート」ドロップダウンに表示されるようになります。以下、それを見ていきましょう。

さて、このファイルをWordPressサイトをホストしている私のホストにアップロードします。そして、このファイルが機能するかどうかをテストします。

ファイルをアップロードするには、2つの方法があります。

cPanelとファイルマネージャーを使用する FTP（ファイル転送プロトコル）アカウントを使用する

ここでは、FTPアプリケーションのFileZillaを使用した場合を紹介します。FileZillaを開き、私のFTPアカウントの詳細を使ってログインしてみましょう。

このパス " /wp-content/themes/ACTIVETHEME" フォルダに移動します。activeethemes は、現在アクティブなテーマのプレースホルダです。親テーマの子テーマを選択することをお勧めします。子テーマがない場合は、こちらの記事「WordPressで子テーマを作る方法」をご覧ください。

というわけで、現在アクティブなテーマで。では、そのファイルをこのフォルダーにアップロードしてください。下の画像で確認してみてください。

この画像と、あなたが行ったことを比較してみてください。それでは、新しいページを作成して、このファイルをテストしてみましょう。

それでは、WordPressのダッシュボードに移動して、サイドバーのページオプションの下にある「新しいページ」をクリックします。すると、「ページのプロパティ」の下にテンプレートが表示されているのがわかると思います。

ページに新しいタイトルを追加し、ドロップダウンリストからこのカスタムページテンプレートを選択し、ページを公開します。

さて、このページをフロントエンドで開いてみてください。まだこのテンプレートには何もしていないので、空白のページが表示されるでしょう。

フロントエンドで表示するためのコードをテンプレートファイルに追加してみましょう。以下の行をファイルに追加してください。これらの関数は、デフォルトのHeader、Footer、Sidebarサイドバーを表示します。

<?php /*Template Name: My Custom Page Template*/ ? >
 
<?php get_header(); ? >
    
     <div id="primary" class="content-area">
        /*your custom code here*/
     </div>
<?php get_sidebar();

     get_footer();
? >

以下のコードは、post_type =>の投稿をループさせ、すべての記事について記事タイトルと記事内容を表示します。記事のタイトルを表示するために_title()関数を使い、記事の内容を表示するために_content()関数を使用しています。

などなど、他にもたくさんの関数があります。

• the_title()
  the_content()
  the_post_thumbnail()
  the_permalink()
  the_excerpt()
  the_time()
  the_author()
  the_category()
  <?php /*Template Name: My Custom Page Template*/ ? >
   
  <?php get_header(); ? >
   
  <div id="primary" class="content-area">
      <main id="main" class="site-main" role="main">
          <?php $args = array(
                         'post_type' => 'post'
                       );
  
               $post_query = new WP_Query($args);
  
               if($post_query-> have_posts() ) {
                  while($post_query->have_posts() ) {
                    $post_query->the_post();
                  ? >
                    <h2><?php the_title(); ? ></h2>
                    <p><?php the_content(); ? ></p>
                  <?php }
               }
          ? >
      </main> <! -- .site-main -->
   
  </div><! -- .content-area -->
   
  <?php get_sidebar(); ? >
  <?php get_footer(); ? >
  

<?php /*Template Name: My Custom Page Template*/ ? >
 
<?php get_header(); ? >
 
<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <?php $args = array(
                       'post_type' => 'post'
                     );

             $post_query = new WP_Query($args);

             if($post_query-> have_posts() ) {
                while($post_query->have_posts() ) {
                  $post_query->the_post();
                ? >
                  <h2><?php the_title(); ? ></h2>
                  <p><?php the_content(); ? ></p>
                <?php }
             }
        ? >
    </main> <! -- .site-main -->
 
</div><! -- .content-area -->
 
<?php get_sidebar(); ? >
<?php get_footer(); ? >

このコードをテンプレートファイルに保存すると、そのページのすべての投稿がフロントエンドに表示されます。あなたのデザインレイアウトに応じて、より見やすく、使いやすいようにデザインすることができます。

また、要件に合わせて独自のカスタムコードを追加することもでき、以下のようなことが可能です。

• 異なるヘッダーとフッターを作成する
• PSD/ワイヤーフレーム・テンプレートに基づいたレイアウトのカスタマイズ
• サイドバーの位置をカスタマイズしたり、削除することができます。
• 特定の条件下で特定の投稿タイプを表示する

このカスタムページテンプレートでは、さらに多くのアクションを実行することができます。カスタムコードを考え、実行するだけです。

これで終わりです。WordPressのカスタムページテンプレートはこれで終わりです。

さて、WordPressでカスタムページテンプレートを作成するのは基本的にこれで終わりですが、より多くのWordPressのヒントについては、以下の関連記事をクリックしてください。