WordPress投稿テンプレートの作成方法（ブロックエディター、Elementor、Divi、コーディング）

WordPressのカスタム投稿テンプレートを利用すると、従来のレイアウトにとらわれない独自性のあるコンテンツをWordPressサイトで作成・公開することができます。テンプレートを活用することで作業が効率的になるだけでなく、サイト全体に統一感を出すこともできます。

特定の目的にあわせてテンプレートを作成することで、ユーザーエクスペリエンスとワークフローの改善が捗ります。要件に応じた投稿テンプレートの作成は比較的簡単で、ブロックエディター、Elementor、Diviなどを使用するか、自分でコードを書くことができます。

今回は、WordPressのカスタム投稿テンプレートをさまざまな方法で作成する手順をご紹介します。

WordPress投稿テンプレートとは

WordPressの投稿テンプレートとは、型を定義したレイアウトやデザインです。これをブログ記事に構造を持たせるために使用します。標準的なレイアウト（あるいは空白のページ）とは異なり、事前に決めたレイアウトに従ってコンテンツを配置することができます。

標準的なものではなく、独自のレイアウトでコンテンツを見せたい場合には、自分でテンプレートを作成することができます。一度作成すれば、投稿ごとにテンプレートを選択するだけで良くなるため、日々のコンテンツ作成がスムーズになります。いちいちブロックを挿入したり、並べ替えたりする手間も省けます。

投稿テンプレートを使用する利点

投稿テンプレートを自作することには以下のようなメリットがあります。

• 一貫性：すべての投稿を同じスタイルに統一して、ブログをプロフェッショナルでまとまりのあるものにできます。フォントのスタイル、ヘッダーの大きさ、画像の配置などもすべてテンプレートで統一できます。
• 効率性：コンテンツ作成プロセスが大幅に高速化でき、投稿を作成するごとに手作業で設定を行う時間を執筆にあてることができます。頻繁にコンテンツを公開するブロガーや企業にとって大きな武器になります。
• デザイン性の向上：高度にカスタマイズできるため、本格的なコーディングスキルなしでデザインにこだわることができます。ブロックエディター（Gutenberg）やElementorのようなツールを使用すれば、サイト訪問者思いの視覚的に美しいレイアウトを作成し、保存して繰り返し使用することも可能です。動的ウィジェット、カスタムヘッダー、特定の投稿タイプやカテゴリに応じたフッターも設置できます。

投稿テンプレートを使用して作業時間を削減することができます。独自の投稿テンプレートを作れば、ブログの投稿が簡単になるだけでなく、手間なく魅力的なコンテンツを提供することができます。

カスタム投稿テンプレートの用途

WordPressのカスタム投稿テンプレートは多機能で、自由にコンテンツの見せ方を決めることができます。具体的にどのように使用できるか、いくつか例を見てみましょう。

まずは以下のような投稿タイプに使用し、コンテンツの魅力をさらに引き出すことができます。

• ブログ投稿：フォント、見出し、画像の配置を統一し、すべての記事に一貫性を持たせる。
• ランディングページ：目を引くCTAを設置し、邪魔になる要素を最小限に抑え、効果的な要素でコンバージョンに焦点を当てたテンプレートを作成。
• 製品レビュー：製品の特徴、長所と短所、購入者の声を見やすく並べて紹介するテンプレートを作成。
• ポートフォリオ：画像や動画などの視覚的コンテンツを表示し、プロジェクトをわかりやすく紹介するためのクリーンなレイアウトをテンプレートで作成。

投稿タイプだけでなく、多数のレイアウトを試してみたり、さまざまなデザイン要素を取り入れたりすることも可能です。例えば、投稿へのギャラリーセクションの追加や、レビューへの比較表の設置などが考えられます。

特に以下のようなレイアウトが一般的に使用されています。

• 全幅レイアウト：写真ブログや導入事例など、広々としたレイアウトが必要なコンテンツに理想的。
• サイドバーレイアウト：最近の投稿、カテゴリ、広告など、追加のナビゲーションや情報が必要なブログに便利。
• グリッドレイアウト：ポートフォリオやECサイト向きで、複数の要素をすっきりと見せることができる。
• カスタムヘッダー＆フッター：特定の情報、ナビゲーションリンク、あるいは投稿内容に応じたブランディングを加えることができる。

このようにカスタム投稿テンプレートを活用すれば、各コンテンツを効果的に公開しながら、作業を合理化することができます。

WordPressカスタム投稿テンプレートの作成方法

WordPressのカスタム投稿テンプレートの利点がわかったところで、早速その作成方法を見ていきましょう。

以下、それぞれのツールを使った作成方法を順にご紹介します。

1. ブロックエディター
2. Elementor
3. Divi
4. コーディング

方法1. ブロックエディターでカスタム投稿テンプレートを作成

WordPress 5.0で導入されたブロックエディター（Gutenberg）は、WordPressにおける従来のコンテンツ作成方法を大きく変えました。モジュール化されたブロックベースのアプローチにより、コーディング知識は不要。また複数のウィジェットやプラグインを扱うことなく、視覚的に美しいレイアウトを作成することができます。

ブロックを使って投稿ごとにレイアウトを作り上げることも可能ですが、投稿テンプレートを作って再利用すれば、各投稿のレイアウトをいちいち構築する必要がなくなるため、圧倒的に効率的です。

まずは、ブロックエディターを使用してカスタム投稿テンプレートを作成する手順を見ていきます。

1. テンプレートエディターにアクセスする

WordPress管理画面にログインして、ダッシュボードを開きます。

左サイドバーから「外観」＞「エディター」を開き、「テンプレート」を選択して「+」アイコン（新規テンプレートを追加）をクリックします。

2. テンプレートの種類を選ぶ

単一の投稿、固定ページ、カスタム投稿タイプなど、作成したいテンプレートの種類を選択します。

今回は例として、投稿テンプレートを選択します。

3. カスタムテンプレートを作成する

ここからは、標準の投稿レイアウトを構築するのと同じ手順になります。ドラッグ＆ドロップ式のインターフェースでヘッダー、フッター、テキスト、画像などのコンテンツ要素のブロックを追加し、好みのデザインに仕上げます。

例えば以下は、ワークフローを示すためのテンプレートです。新規顧客とのプロジェクト進行のために役立つページを想定しています。

テンプレートの下部には、見出し用のブロック、テキストまたは画像を追加するための3列のコンテナ、作業プロセスを説明するためのブロック、およびCTA用のブロックを設置しています。

テンプレートのデザインが完成したら、右上の「保存」をクリックしてください。

4. 作成したテンプレートを投稿で使用する

テンプレートを投稿で使用するには、ブロックエディターで投稿を開き、右側の設定パネルに移動します。「投稿」タブの「テンプレート」に「個別投稿」と表示されています。これは、Twenty Twenty-Fourテーマのデフォルトの投稿テンプレートです。

これをクリックし、「テンプレートを入れ替え」を選択します。

表示されるウィンドウで、先ほど作成したテンプレートを選択します。

ブロックエディターの利点と欠点

このように、ブロックエディターでのテンプレート作成は非常に簡単ですが、その一方で欠点も存在します。

利点

• シンプル：ユーザーフレンドリーなインターフェースは誰でも使いこなすことができ、操作もドラッグ＆ドロップで簡単。WordPressに標準搭載されているため、別途ツールを追加する必要もない。
• 効率的：再利用可能なブロックとテンプレートは保存されるため、投稿全体の一貫性を確保しながら、コンテンツ作成のプロセスを合理化できる。

欠点

• カスタマイズに限界がある：基本的なカスタマイズは行えるが、機能には限界あり。複雑なデザインを構築したい場合には、プラグインやコーディングが必要になる可能性がある。

ブロックエディターを使用すれば、コーディングの知識がなくても、簡単にWordPressサイトのデザインを洗練させることができます。しかし、高度な柔軟性が必要になる場合は、ページビルダーのようなツールを使うか、コードを記述することになります。

方法2. Elementorでカスタム投稿テンプレートを作成

ElementorはWordPressで人気のページビルダープラグインです。ドラッグ＆ドロップであらゆるカスタマイズを行い、複雑なサイトを構築することができます。続いては、Elementorを使用して投稿テンプレートを作成する方法をご紹介します。

1. Elementorのインストールと有効化

まずは、WordPressの管理画面でElementorプラグインをダウンロードします。「プラグイン」＞「新規プラグインを追加」に移動し、「Elementor」と検索します。

プラグインを見つけたら、「インストール」＞「今すぐ有効化」をクリックして準備完了です。

なお、独自の投稿テンプレートを作成するには、Elementorの有料版が必要になります。

2. テンプレートビルダーにアクセスする

プラグインをインストールしたら、「Elementor」＞「テンプレート」＞「新規追加」をクリックします。

テンプレートの種類として「固定ページ」を選択し、任意のテンプレート名を入力して「テンプレートを作成」をクリックします。

3. レイアウトを編集する

ドラッグ＆ドロップ式のエディターでさまざまな要素を配置することができます。投稿タイトル、投稿内容、アイキャッチ画像、抜粋、投稿メタ、著者ボックスなどが一般的です。

各要素の設定はカスタマイズ可能で、たとえば各要素の「スタイル」タブを開くとフォント、色、間隔などを調整できます。

関連記事、コメント、ソーシャルボタンのような動的な要素も追加可能です。

4. 投稿にテンプレートを適用する

デザインの編集を終えたら、「公開」をクリックします。

すると、テンプレートを使用する場所の条件の設定が促されます。すべての投稿、特定のカテゴリの投稿、特定の著者による投稿、あるいは個別の投稿に適用することができます。

Elementorの利点と欠点

Elementorでも簡単に投稿テンプレートを作成することができます。Elementorでは、以下のような利点と欠点が挙げられます。

利点

• 高度なカスタマイズ：高度な柔軟性を持ち、デフォルトのブロックエディターでは不可能なより複雑なレイアウトやデザインを作成できる。
• 使いやすい：ドラッグ＆ドロップ式のインターフェースで比較的操作も簡単。表示させたい場所に要素をドラッグ＆ドロップするだけで、リアルタイムにプレビューを確認しながら、直感的にデザインを作り上げることができる。
• 動的要素の追加：動的コンテンツも追加可能なため、投稿セクションを最新のコンテンツで自動更新したい場合に便利。

欠点

• 習得がやや難しい：ユーザーフレンドリーなツールではあるが、初心者は機能や設定の多さに圧倒されることも。Elementorの機能を完全に使いこなせるようになるには時間を要する。
• パフォーマンスへの影響：Elementorを多用するとページの読み込み速度が低下する可能性があるため、サイトのパフォーマンスを損なわないように気をつける必要がある。

Elementorは、高度にカスタマイズした投稿テンプレートを作成するのに間違いのない選択肢です。見栄えが良く、ユーザー体験を向上させるテンプレートをデザインすることができます。

方法3. Diviでカスタム投稿テンプレートを作成

Elegant Themes提供のDiviテーマにはテーマビルダーが搭載されており、ブロックエディターやElementor同様、ドラッグ＆ドロップ式のエディターを使って高度な投稿テンプレートを作成することができます。作成したレイアウトは、WordPressサイト全体に簡単に適用できます。

1. Diviテーマビルダーにアクセスする

この方法を選択する場合は、まずDiviを購入する必要があります。テーマと付属のDivi Builderプラグイン購入したら、その他の有料機能と同じようにテーマをインストールします。WordPressの管理画面にアクセスし、「外観」＞「テーマ」を開き、「新しいテーマを追加」をクリックします。DiviのZIPファイルを選択してアップロードしたら、「インストール」をクリックしてください。

これを終えたら、「Divi」＞「テーマビルダー」を開きます。

「新しいテンプレートを追加」をクリックします。

2. テンプレートの設定を調整する

「新しいテンプレートを追加」をクリックすると、テンプレートの設定ウィンドウが表示されます。テンプレートを使用する場所（すべての固定ページ、全ての投稿、特定の投稿など）を選択して、「テンプレートを作成」をクリックします。今回は例として、「投稿」セクションの「ブログ」を選択します。

続いて、「カスタムボディを追加」をクリックして「カスタムボディの構築」を選択します。

3. Diviモジュールを使ってレイアウトを編集する

Diviのビルダーに組み込まれているDiviモジュールを使用して、投稿テンプレートのレイアウトを作っていきます。

Diviには、投稿タイトル、投稿内容、抜粋、投稿メタ、コメントなど、テンプレートをカスタマイズするためのモジュールが多数用意されています。

また、好みの外観や機能の追加に役立つモジュールもあります。

モジュールを選択し、エディターにドラッグ＆ドロップして編集していきます。フォント、色、間隔なども調整も可能です。

また、関連記事や著者情報などの動的コンテンツを追加し、テンプレートの機能を従来の投稿テンプレートに近づけることもできます。

4. テンプレートの保存と適用

デザインが完成したら、「保存」をクリックします。

テンプレートを投稿に適用するには、テーマビルダーの設定で表示条件を指定します。テンプレートの適用先は、すべての投稿、特定のカテゴリ、タグ、個別の投稿から選択可能です。

Diviの利点と欠点

Diviを使った投稿テンプレートの作成も非常に簡単で、すっきりとしたインターフェースで見やすいのも特長です。Diviのメリットとデメリットとしては、以下が挙げられます。

利点

• 高度なカスタマイズ性：幅広いカスタマイズ設定で独自性の強い投稿テンプレートを作成することができ、外観も完全に制御できる。
• 直感的なインターフェース：視覚的なドラッグ＆ドロップ式エディターは使い勝手が良く、複雑なレイアウトも簡単にデザインできる。リアルタイムのプレビュー機能で、フロントエンドでデザインがどのように表示されるかを正確に確認できる。

欠点

• テーマビルダーへの依存：プラグインに依存することになる。テーマとは別にDivi Builderプラグインを使用することもできるが、それ以外の組み合わせでは制約を感じることがある。
• 設定がかなり多い：Diviは高性能かつ使いやすいツールだが、その豊富な設定や機能から初心者には扱いが難しい可能性がある。

WordPressのカスタム投稿テンプレートを作成するなら、Diviも良い選択肢になります。とはいえ、コーディングの知識があり、さらなるカスタマイズ性を追求するなら、自分でコードを書くのがベストです。

方法4. 自分でコードを書いてカスタム投稿テンプレートを作成

自分でコードを書くことで、投稿のあらゆる面を要件に合わせて調整し、WordPressの投稿テンプレートのデザインと機能を完全制御することができます。この場合は、WordPressのテーマファイル、HTML、CSS、PHPを直接編集することになります。

1. 子テーマを作成する

まずは、親テーマが更新されても編集内容が保持されるよう、子テーマを作成します。

WordPressのディレクトリで、wp-content/themesに移動して子テーマ用のフォルダを作成します。フォルダ名は、「mytheme-child」のようなわかりやすい簡単な名前でOKです。

このフォルダ内に、style.cssファイルとfunctions.phpファイルを作成します。

親テーマとリンクさせるため、style.cssに以下のヘッダーを追加します。

/*
 Theme Name: My Theme Child
 Theme URI: http://example.com/my-theme-child
 Description: My Theme Child Theme
 Author: あなたの名前
 Author URI: http://example.com
 Template: mytheme
 Version: 
*/

In functions.php, enqueue the parent theme’s styles:

<?php
function mytheme_child_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'mytheme_child_enqueue_styles');

ファイルを作成したら、WordPressの管理画面を開き、「外観」＞「テーマ」を開くと、子テーマが表示されます。他のテーマと同じように、この子テーマを有効化してください。

2. テンプレートファイルを追加する

子テーマのフォルダに、「single-custom.php」という名前のファイルを作成します。これがカスタム投稿テンプレートになります。まずは、必要なテンプレートヘッダーを追加します。

<?php
/**
 * Template Name: カスタム投稿
 * Template Post Type: 投稿
 */
get_header();
if ( have_posts() ) : 
    while ( have_posts() ) : the_post();
        // カスタムテンプレートのコードをここに記述
    endwhile; 
endif;
get_footer();
?>

3. HTML、CSS、PHPを使ってテンプレートを編集する

single-custom.phpファイルを編集して、投稿のレイアウトをデザインします。構造とスタイルにはHTMLとCSS、投稿コンテンツを動的に取得するにはPHPを使用します。

以下は簡単な例です。

<div class="post-wrapper">
    <h1><?php the_title(); ?></h1>
    <div class="post-meta">
        <span>Published on: <?php the_date(); ?></span>
        <span>by <?php the_author(); ?></span>
    </div>
    <div class="post-content">
        <?php the_content(); ?>
    </div>
</div>
<style>
    .post-wrapper {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background: #fff;
    }
    .post-meta {
        font-size: 14px;
        color: #555;
    }
</style>

4. 投稿エディターでテンプレートを適用する

作成したテンプレートを使用するには、まずWordPressの管理画面で投稿のエディターを開きます。

投稿設定のサイドバーで「テンプレート」の項目を見つけます。ブロックエディターの手順で見たとおり、現在のテンプレートの名前（通常「個別投稿」）をクリックし、「テンプレートを入れ替え」を選択します。表示されるウィンドウで作成したテンプレートを選択します。

これで、上で作成したsingle-custom.phpテンプレートが投稿に適用されます。

投稿テンプレートを自分で書く利点と欠点

当然ながら、この方法はコーディング知識が必要になります。自分でコードを書いて投稿テンプレートを作成する方法には、以下のような利点と欠点があります。

利点

• 完全に制御可能：先に触れた通り、投稿テンプレートのデザインや機能を完全に制御でき、あらゆることを実現可能。
• 究極の柔軟性：要件に応じて特殊なレイアウトや機能も作成でき、妥協する必要がない。真に思い通りのサイトを構築する柔軟性が得られる。

欠点

• コーディングスキルが必要：HTML、CSS、PHPの知識が必要になるため、コーディングの経験がない場合には難しい。
• メンテナンスの手間：自分でコードを書いて作成したテンプレートは、メンテナンスや更新に手間がかかる。互換性確保のため、親テーマやWordPressコアの更新のたびに、調整が必要になる可能性がある。

投稿テンプレートを自分で構築することで、比類のない柔軟性と制御が可能になります。高度にカスタマイズされたソリューションが必要で、コーディング作業に抵抗がない場合には、この方法が適しています。

ブログ投稿テンプレートを効率的に作成するヒント

WordPressで独自の投稿テンプレートを作成することで、コンテンツを投稿するたびにレイアウトを調整する手間を省き、コンテンツの一貫性を保証することができます。また、機能やユーザーエクスペリエンスの面でも、柔軟性が高まります。

最後にいずれの方法でも役立つ、投稿テンプレートを作成する際のヒントもご紹介します。

子テーマを使用する

WordPressのテーマをカスタマイズする場合は、テーマの更新時に変更が上書きされないように、必ず子テーマを作成してください。子テーマを作成することで、構築した投稿テンプレートをそのまま長期的に維持することができます。

ブロックエディターやページビルダーを使用している場合は、テンプレート作成機能が組み込まれているため、子テーマの作成は不要かもしれませんが、いずれにしても、子テーマの作成はベストプラクティスです。

ユーザーフレンドリーなデザインを意識する

読みやすさとナビゲーションを向上させる、クリーンで直感的なデザインを作ることを心がけてください。ごちゃっとしたデザインを避け、サイト訪問者が見出し、画像、CTAボタンなどの重要な要素を簡単に見つけられるようにすることが重要です。

ユーザーフレンドリーなデザインは、訪問者によるなめらかなページ間の移動、エンゲージメント、アクションの実行を促します。サイトデザインのベストプラクティスに従って、テンプレートを作成してください。

トレンドを追いかけて定期的にテンプレートを更新する

デザイントレンドは常に変化しています。おしゃれでプロフェッショナルな外観を維持するには、テンプレートも「最新の状態」に保つことが大切です。投稿テンプレートを定期的に見直し、更新することで、全体的なブランドデザインにこだわりながら、最新のトレンドを取り入れることができます。サイトの魅力と機能性の維持にもつながります。

テンプレートの用途を明確にする

テンプレートの作成を始める前に、その目的を明確化すること。コンテンツの種類によって、必要なレイアウトは異なります。たとえば、製品レビューでは長所と短所、評価、詳細な説明のセクションが重要になり、ブログ記事では読みやすさと視覚的要素に重点を置く必要があるかもしれません。

実際の用途を明確にすることで、テンプレートを活用して効果的に目的を達成することができます。

アクセシビリティを維持する

最後に、障がい者を含むすべてのユーザーが利用できる投稿テンプレートを作成してください。適切なHTMLタグを使用し、画像に代替テキストを提供し、キーボードでもサイトをナビゲートできるようにしましょう。また、適切なコントラスト比を採用し、読みやすいフォントを使用してください。

アクセシビリティを確保することで、訪問者の幅が広がり、ベストプラクティスや法的要件に従うことができます。

独自の投稿テンプレートを作成して最高のユーザー体験を実現

WordPressで独自の投稿テンプレートを作成すれば、サイトデザインとコンテンツ作成プロセスを柔軟に管理することができます。ブロックエディター、Elementor、Divi、そしてコーディングのいずれの方法にも利点と欠点があります。経験値や要件に応じた適切な方法を選んで、作成してみてください。

サイト全体でシームレスなWordPress体験を実現するには、KinstaのWordPress専用マネージドホスティングがおすすめです。業界トップクラスのパフォーマンスとサポートを誇り、重要なコンテンツ作成に集中できるホスティング環境を提供しています。