WordPressカスタムテンプレートを手動で作成する方法–ガイド

公開: 2020-11-20

Webサイトのデザインに満足できず、選択したテーマが必要なレベルのカスタマイズオプションを提供していない場合は、独自のカスタムテンプレートの作成を検討する時期かもしれません。必要に応じて、このWordPressテンプレートは、カスタム投稿テンプレート、ページテンプレート、またはカテゴリビューにすることができます。

WordPressのエキサイティングな点の1つは、WordPress Webサイトがどのように構築されていても、いつでもレイアウトやデザインを自由に変更できることです。これは、事前に作成されたテンプレートをオーバーライドするか、独自のテンプレートを作成することで実行できます。 WordPressは非常に高い柔軟性を提供し、あらゆるものに対して独自のテンプレートを作成する機能を提供します。

独自のテンプレートを作成することでデザインの可能性が広がりますが、ほとんどのWordPressユーザーは、独自のWordPressカスタムテンプレートの作成が複雑すぎることを心配しているため、おそらくこの課題を避けます。この2つの記事シリーズでは、あなたに開かれている両方のオプションを見ていきます。最初にこの記事では、カスタムWordPressテンプレートを手動でコーディングする方法（究極の柔軟性を提供します）を見てから、人気のあるページビルダーを使用して必要な手間のかかる作業を負担する方法を調べます。 WordPressカスタムテンプレートを作成するとき。

この記事では、ページ、投稿、さらには投稿カテゴリのカスタムテンプレートを作成する方法を見ていきます。まず、カスタムテンプレートが必要になる理由を見てみましょう。

注：この記事は、HTML、CSS、およびPHPの実用的な知識があることを前提としています。

カスタムWordPressテンプレートが必要なのはいつですか？

おそらく、WordPressカスタムテンプレートを実際に使用する必要がある理由がまだわからないでしょう。これを説明する最も簡単な方法は、例を使用することです。

あなたがあなたのビジネスのためのウェブサイトを持っていると想像してみましょう。テーマ「TwentyTwenty」がアクティブになり、必要なすべてのページと投稿がすでに作成され、コンテンツ（テキストと画像）、抜粋、および注目の画像で埋められています。

一般設定も構成されており、カスタマイザーを介していくつかの変更を行っています（リンクの色、カバーテンプレートのオーバーレイの色など）。

メニューも5つのアイテムで作成されています：ホームページ–会社概要–サービス–会社概要–お問い合わせ

[サービス]セクションには、サブメニューがあります：サービス1 –サービス2 –サービス3。

したがって、WordPress開発者の観点からすると、基本的に次のようになります。

4つの標準ページ（ホームページ–会社概要–会社概要–お問い合わせ）
1つのアーカイブページ（サービス）
3つの投稿ページ（サービス1 –サービス2 –サービス3）

デフォルトでは、3つのサービス投稿ページすべてが同じレイアウトになります。現在、投稿属性設定で提供される3つのテンプレートのいずれかを選択して、これらの投稿を個別のレイアウトで区別する必要がある唯一のオプション。

異なるテンプレートをそれぞれ選択すると、次のようになります。

デフォルトのテンプレート

全幅テンプレート

カバーテンプレート

運が良ければ、これらのスタイルの1つが機能し、Webサイトにこれらを使用することを選択できます。ただし、そうでない場合でも、特定の要素が「希望どおりに」表示されないことに不満を感じている場合は、心配しないでください。ここで、独自のカスタムWordPressテンプレートを手動で作成します。

カスタムテンプレートで何ができるかを見てみましょう。

カスタムWordPress投稿テンプレートを手動で作成する方法

次のチュートリアルでは、完全にパーソナライズされ、独自のPHPファイル内で指定される単一の投稿ビューを作成します。また、カスタム投稿レイアウトに対応し、独自の構造を提示する投稿属性のドロップダウンテンプレートメニューに、「マイカスタム投稿テンプレート」というオプションを追加します。

ステップ1：WordPressにテンプレートを紹介する

まず、WordPressテーマのルートフォルダーに「my-custom-post.php」のような名前のPHPファイルを作成する必要があります（この例では、これは/ themes / twintytwenty /にあります）。

お気に入りのテキストエディタ（Sublimeなど）でファイルを開き、以下のコンテンツを追加します。

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header();

この行* Template Name: My custom post templateは、テンプレートのドロップダウンメニューに表示される名前を定義します。下のスクリーンショットを見ると、これがどのように表示されるかがわかります。

* Template Post Type: postはオプションであり、テンプレートがオプションとして表示される投稿タイプを定義します。これを「投稿」として定義したため、次の例に示すように、このテンプレートはページのテンプレートオプションメニューに表示されません。

最後の行： get_header(); ?> get_header(); ?>ヘッダーコンテンツを取得します。

この時点で、たとえば「サービス1」の投稿のアクティブなテンプレートとして「マイカスタム投稿テンプレート」を選択すると、出力は空白になります。これは、ページに構造をまだ追加していないため、予想どおりです。次のようなものが表示されます。

WordPressカスタムテンプレートに構造を追加する

ページの構造を完全にゼロから構築することは完全に可能ですが、テーマテンプレートで使用されている既存の投稿構造を取得して、これを変更する方が簡単な場合があります。

WordPressテンプレートの階層を見ると、テーマに応じて、単一の投稿テンプレートがテーマフォルダー内にあるsingular.phpまたはsingle.phpファイルから取得されていることがわかります。

さらに明確にするために–投稿とページが同じ構造を使用する場合、singular.phpファイルが使用されます。そうでない場合（たとえば、人気のあるAstraテーマのように）、single.php、page.php、archive.phpファイルが表示されます。投稿、ページ、ブログのレイアウトにそれぞれ異なる構造を提供するようにコーディングされています。

この例では、Twenty Twentyテーマを使用して、singular.phpファイルがget_template_part関数を使用して、要求されたレイアウトをtemplate-partsフォルダーから取得していることがわかります。

 <main role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); get_template_part( 'template-parts/content', get_post_type() ); } } ?> </main><!-- #site-content -->

上記のコードが巧妙に行うのは、投稿にコンテンツがあるかどうかを確認し、ある場合は、選択したテンプレートで指定された構造を使用してコンテンツを印刷することです。これは、投稿、ページ、またはアーカイブが使用されているかどうかに関係なく、すべての場合に適用されます。

これで、テーマが既存のテンプレートからレイアウトデータを取得する方法を確認でき、独自のテンプレートの作成を開始する準備が整いました。テンプレートがどのように見えるかを定義するには、最初に実際にテンプレートを設計する必要があります。投稿ページを次の形式でレイアウトすることをお勧めします。

レイアウトデザインを決定したら、HTML、CSS、およびPHPを使用してこれをコーディングする必要があります。この記事は、これらの言語の実用的な知識があり、必要なレイアウトを作成できることを前提としています。上記の設計を採用して、my-custom-post.phpファイルに追加された初期コードを次のように記述します。

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header(); ?> <main class="mcpt-post" role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); ?> <h2><?php the_title(); ?></h2> <div> <div><?php the_excerpt(); ?></div> <div><?php the_post_thumbnail(); ?></div> </div> <div> <div> <span class="metakey">Author: </span><?php the_author_posts_link(); ?><br> <span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?><br> <span class="metakey">Category: </span><?php the_category(', '); ?> </div> <div><?php the_content(); ?></div> </div> <?php } } ?> </main><!-- #site-content --> <style> .mcpt-post { width: 80%; margin: 0 auto; } h2 { text-align: center; } div#content-top-left { width: 30%; float: left; font-size: 26px; font-family: book antiqua; font-style: italic; padding: 30px; color: grey; } div#content-top-right { width: 70%; float: left; } div#content-main-left { width: 30%; float: left; padding: 30px; font-family: book antiqua; } div#content-main-right { width: 70%; float: left; padding-top: 30px; font-family: tahoma; color: slategray; } span.metakey { color: grey; } </style> <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> <?php get_footer(); ?>

Twenty Twentyテーマが、公開したいポストメタやその他のデータに提供するショートカット関数があります。これらを使用する代わりに、デフォルトのWordPress関数を使用して、テンプレートが任意のテーマで機能するようにします。使用するものは次のとおりです。

the_title（） –投稿のタイトルをエコーします
the_excerpt（） –投稿の抜粋をエコーします
the_post_thumbnail（） –デフォルトの投稿サムネイルサイズを出力します。 the_post_thumbnail（）オプションを使用して、特定の注目画像サイズを出力できます
the_content（） –投稿コンテンツを出力します

更新を保存して「サービス1」の投稿を見ると、適用されているカスタムテンプレートレイアウトがわかります。

WordPressカスタム投稿カテゴリテンプレートを作成する方法

これで、独自の投稿テンプレートレイアウトを作成するのが比較的簡単であることがわかりました。次に進み、同様の原則を適用して、独自のカテゴリビューレイアウトを作成できます。

これを行う簡単な方法は、index.phpファイル（/ themes / twintytwenty /ルートフォルダーにあります）を直接編集することです。このファイルを直接編集することはチュートリアルの目的には問題ありませんが、Webサイトが公開されている場合は、子テーマを使用して、次にテーマを更新するときに更新が上書きされないようにすることができます。

index.phpコードを見ると、コンテンツのタイプに応じて使用可能な出力を指定するPHPの「if」条件でほとんど満たされていることがわかります。たとえば、次のコードは、コンテンツに投稿（投稿、ページ、またはアーカイブ）が含まれているかどうか、または検索結果ページであるかどうかを確認し、それに応じて適切なコンテンツを表示します。

 if ( have_posts() ) { . . . } elseif ( is_search() ) { . . . }

Twenty Twentyテーマを使用してこのチュートリアルを実行している場合は、index.phpファイルで次のコードを見つけてください。

 $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

template-parts/content.phpでは、「get_template_part」関数を使用してコンテンツが取得されていることがわかります。

これらのテーマ固有の関数を使用して投稿カテゴリページのレイアウトを指定する代わりに、各要素にデフォルトのWordPress関数を使用します。これは、上記のコードを次のように変更することを意味します。

 while ( have_posts() ) { the_post(); include 'my-custom-category-view.php'; }

イーグルアイの場合はmy-custom-category-view.phpというファイルを参照していることがわかります。このファイルを作成して、テーマのフォルダーに追加する必要があります（別の方法として、この情報を直接追加することもできます）。 index.phpファイルに追加しますが、これを別のファイルとして保存しておくと非常に便利です。

my-custom-category-view.phpファイルを作成し、次のコードを追加します。

 <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="intro-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div>

より高度な形式のthe_title（）関数を使用して、投稿のタイトルを指定できることがわかります。単一の投稿ページへのリンクは、get_permalink（）関数を使用して生成されています。

最後に、style.cssファイルにスタイルを追加する必要があります。

 .article { width: 80%; margin: 0 auto; font-family: book antiqua; clear: both; height: 320px; border-bottom: 1px solid darkgrey; } .article:nth-child(odd) .featured-image { float: right; } .featured-image { width: 40%; display: block; padding: 30px; float: left; } .article .content { display: block; padding: 30px; } .post-meta { margin: 0; } .post-meta div { width: 100%; } .article .content h3 { margin: 0; } .article .content h3 a { text-decoration: none; }

これまでに達成したことを見てみましょう。

良い！

ご覧のとおり、画像の比率が異なるため、画像の調整に関してはまだいくつかの問題があります。画像を中央でトリミングして固定サイズにするために、CSSに行を追加することで、これを簡単に修正できます。

 .featured-image img { width: 350px; height: 250px; object-fit: cover; }

もちろん、この方法では、パフォーマンスの観点から必ずしも最適ではない元の画像を使用しています。ここでのベストプラクティスは、WordPressの画像サイズを使用することです。新しいページレイアウトを応答性の高いものにしたい場合は、この広範なガイドで詳細を確認してください。

これで、よくできました。これで、投稿カテゴリビュー用に独自のパーソナライズされたレイアウトとデザインを作成することができました。

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

これまで、投稿ページのカスタムレイアウトと、カテゴリ結果のカスタムレイアウトを作成しました。ページのカスタムテンプレートを作成するときに使用する方法を適用できるほか、まったく同じ原則が適用されます。

ただし、この記事を終了する前に、もう少し複雑なページテンプレートを簡単に見てみましょう。この例では、投稿ページをテンプレートにプルして、カテゴリページと同じように表示できるようにしますが、（カテゴリページではなく）ページによって提供される編集機能の利点を追加します。。

私たちの目標は、3つのビジネスサービス（この例では、サービス1、サービス2、およびサービス3）を一覧表示する概要の「サービス」ページを作成することです。これらを手動でページに追加するのではなく、動的にページにプルします。実際には、これについて心配する必要はないかもしれませんが、コーディングの原則は、WordPressが提供する柔軟性を理解し、さらに実証するのに役立ちます。

開始するには、テーマのフォルダー内に新しいファイルを作成し、 my-services-template.phpような名前を付けます。これが完了したら、単一の投稿テンプレートで以前に行ったように、いくつかの必要な宣言コメントを追加します。 get_template_part（）関数も使用します。

 <?php /* * Template Name: My post category template * Template Post Type: page */ get_header(); ?> <div class="clear"></div> </header> <!-- / END HOME SECTION --> <div class="site-content"> <div class="container"> <div class="content-left-wrap col-md-9"> <div class="content-area"> <main class="site-main" role="main"> <?php while ( have_posts() ) : the_post(); // standard WordPress loop. ?> <?php get_template_part( 'template-parts/content', 'cat_services' ); // loading our custom file. ?> <?php endwhile; // end of the loop. ?> </main><!-- #main --> </div><!-- #primary --> </div> <div class="sidebar-wrap col-md-3 content-left-wrap"> <?php get_sidebar(); ?> </div> </div><!-- .container --> <?php get_footer(); ?>

get_template_part（）関数は基本的に、再利用可能なコードをロードできるようにするメカニズムです。この場合、 template-parts/content-cat_services.phpします。このファイルに、「サービス」カテゴリの投稿を出力するコードを挿入します。

要約すると、このファイルのコードは次のようになります。

カテゴリページにタイトルを付けます。
データベースから指定されたカテゴリの投稿をクエリします。
投稿をループして、それぞれのレイアウトを表示します。

 <h1 align="center"><?php the_title(); ?></h1><!-- category page title --> <?php $args = array( 'cat'=>4, 'orderby' => 'title' ); $cat_query = new WP_Query( $args ); //Query the specified category's posts if($cat_query->have_posts()) { while( $cat_query->have_posts() ) { $cat_query->the_post(); //Loop through the posts ?> <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="excerpt-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div> <?php wp_reset_postdata(); } } ?>

クエリについては、今後の記事でさらに詳しく検討します。この記事の目的のために知っておく必要があるのは、 $args = array( 'cat'=>4, 'orderby' => 'title' ); ID番号4（ID = 4）の投稿カテゴリを取得しています。「サービス」カテゴリに関連するこのカテゴリ番号。

では、各カテゴリのIDをどのように確認できますか？実はとても簡単です。 [メニュー投稿]>[カテゴリ]に移動し、編集するカテゴリを開きます。 IDは、以下に示すように、カテゴリ編集ページのURLにあります。

新しいテンプレートを表示するには、[ページ]に移動して新しいページを作成する必要があります。ページ編集エリアでは、コンテンツを入力する必要はありません。代わりに、[ページ属性]ドロップダウンテンプレートメニューで[マイ投稿カテゴリテンプレート]オプションを選択するだけです。

最後に、メニューに移動し、新しいページの「サービス」アイテムを追加して、現在のサービスカテゴリアイテムを置き換えます。メニューは次のようになります

私たちが何をしたか見てみましょう：

上記の方法は、特定のカテゴリ（この例では「サービス」）を取得するWordPressカスタムページテンプレートを作成する方法を示しています。同じテンプレートを別のカテゴリページで選択すると、カテゴリID（ID = 4）で特別にリクエストしたため、サービスカテゴリの投稿が再び表示されます。したがって、別のカテゴリを取得する新しいページテンプレートが必要な場合は、そのために別のテンプレートファイルを作成する必要があります（それに応じてカテゴリIDを更新します）。

結論

WordPress Webサイト用に独自のカスタムテンプレートを作成できるため、Webサイトの外観を究極的に制御できます。投稿タイプの単一ビューまたはカテゴリビューのカスタムテンプレートを作成することは、努力する価値があります。もちろん、サイトのデザイン要素を完全に制御できるだけでなく、将来のページのために特定のレイアウトをすばやく複製することもできます。