WordPress でカスタムの単一投稿テンプレートを作成する方法
公開: 2023-02-12同じサイトの他の投稿とはまったく異なるレイアウトの投稿詳細ページを見たことがありますか? これはおそらく、カスタム テンプレートを使用しているためです。 個々の投稿にカスタム テンプレートを割り当てることができるため、サイトの外観の柔軟性が向上します。
カスタムの単一投稿テンプレートの作成方法に興味がありますか? この投稿では、自分で簡単に作成する方法を紹介します。
カスタム テンプレートの利点
テンプレートの作成を開始する前に、カスタム テンプレートが必要な理由とその機能について説明しましょう。
特定の投稿または投稿タイプを他のコンテンツより目立たせたい場合は、カスタムの単一投稿テンプレートの作成を検討することをお勧めします。 このテンプレートは、割り当てた投稿にのみ適用されます。つまり、標準の投稿とはまったく異なるレイアウトを持つことができます。 ユニークなデザインとレイアウトは、その特定の投稿に対するユーザー エンゲージメントを高めることができます。
独自の開発の準備はできましたか? カスタム投稿テンプレートの作成と使用は、カスタム ページ テンプレートに似ています。
カスタム投稿テンプレートを作成する方法
この例では Twenty Seventeen テーマを使用しますが、プロセスはどのテーマでも同じです。
カスタム投稿テンプレートを作成する前に、まず子テーマを作成します。 メイン テーマで作業できますが、カスタム テンプレートを作成しているため、親テーマを更新するとテンプレートが失われます。 このため、カスタム テンプレートをメイン テーマとは別にしておくことをお勧めします。
カスタム テンプレートの場合、テンプレート名 (テンプレートの名前) とテンプレート投稿タイプ (このテンプレートが使用される場所) を定義する必要があります。 次のようになります。
[php] <?php /* テンプレート名: 全幅投稿 * テンプレート投稿タイプ: post*/ /* 全幅単一投稿を表示するためのテンプレート。 */ get_header( ); ?> [/php]
ファイルを保存するときは、 full-width-post.phpのように、テンプレート名に関連するファイル名を保持してください。 管理パネルから投稿を表示すると、[投稿属性] セクションのドロップダウンに新しいテンプレートが表示されます。
カスタム テンプレートは準備ができていますが、まだ役に立ちません。 もう少しお得にしましょう！
注: 複数のファイルで作業するため、ファイル名とフォルダーを追跡します。
Twenty Seventeen テーマのブログ投稿ページの現在のレイアウトを次に示します。 私はそれで満足しているので、そのままにしておきます。
ここで、いくつかの投稿に全幅のレイアウトが必要だとしましょう。 投稿タイトルをメタデータの上に置きます。 メタ データには上下に境界線があり、タイトルとメタ データの両方が中央に配置されている必要があります。 ワイヤーフレームは次のとおりです。
このレイアウトを作成するには、投稿の詳細ページの表示を担当するファイルを見つける必要があります。 ほとんどのテーマでは、特定の事前定義されたテンプレートがない限り、 single.phpがファイルです。 コード構造はテーマごとに異なるため、特定のテーマがどのように機能するかを理解するには少し学習が必要になる場合があります。
投稿の詳細ページを表示するファイルを見つけたら、別のファイルを呼び出すために関数が使用されているか、テンプレートが直接作成されているかを確認する必要があります。 Twenty Seventeen テーマのこの例では、get_template_part 関数です。
get_template_partパスは、ここに従うべき最も重要な部分です。
[php]
<div class="wrap">
<div id="プライマリ" class="コンテンツエリア">
<メインID="メイン" class=「サイトメイン」 role=「メイン」>
<?php /* ループを開始 */ while ( have_posts() ) : the_post(); get_template_part( 'テンプレート パーツ/投稿/コンテンツ', get_post_format() ); // コメントが開いているか、少なくとも 1 つのコメントがある場合は、コメント テンプレートを読み込みます。 if ( comments_open() || get_comments_number() ) : comments_template(); endif; the_post_navigation( array( 'prev_text' => '<span class="スクリーン リーダー テキスト>' . __( '前の投稿', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle>' . __( ' Previous', 'twentyseventeen' ) . '</span> <span class="nav-title><span class="nav-title-icon-wrapper">' .twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) .'</ span>%title</span>',
'next_text' => '<span class="スクリーン リーダー テキスト">' . __( '次の投稿', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( '次', '二十七' ) . 「</スパン>」 <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . Twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ) . '</span></span>',
) );
末期; // ループの終わり。
?>
[/php]ご覧のとおり、パスを参照しています。
[php] get_template_part( 'テンプレート パーツ/投稿/コンテンツ', get_post_format() ); [/php]
そのため、 single.ph内でcontent.phpファイルが呼び出され、投稿の詳細ページが出力されます。
single.phpファイルがどのように機能するかがわかったので、そこからコードをコピーして、以前に作成した子テーマのfull-width-post.phpファイルに貼り付けましょう。 全幅テンプレートになるので、サイドバーを外します。
上記のパスから content.php ファイルをコピーします。 テンプレート ファイルが存在する同じディレクトリに貼り付けることができますが、親テーマと同じフォルダー構造に従うことをお勧めします。
ファイル名をそのままにしておくこともできますが、デフォルトのテンプレートで何かを変更したい場合は、競合が発生します。 問題を回避するために、ファイルの名前を変更し、 content-full-width.phpなどのテンプレート名に関連したものにすることをお勧めします。
ファイルが配置されたので、コードを変更して、投稿のタイトルと投稿のメタデータを入れ替えましょう。
[php]
<header class="エントリ ヘッダー">
<?php
if ( is_single() ) {
タイトル（ '
<h1 class="エントリータイトル">', '</h1>
');
} elseif ( is_front_page() && is_home() ) {
タイトル（ '
<h3 class="エントリタイトル"><a href="' . esc_url( get_permalink() ) . 「」 rel="ブックマーク">', '</a></h3>
');
} それ以外 {
タイトル（ '
<h2 class="エントリタイトル"><a href="' . esc_url( get_permalink() ) . 「」 rel="ブックマーク">', '</a></h2>
');
}
if ( 'post' === get_post_type() ) {
エコー '
<div class="entry-meta">';
if ( is_single() ) {
Twentyseventeen_posted_on();
} それ以外 {
エコーtwtyseventeen_time_link();
Twentyseventeen_edit_link();
};
echo '</div>
<!-- .entry-meta -->';
};
?>
</ヘッダー>
<!-- .entry-header -->
[/php]このテンプレートを使用するには、WordPress 管理者から目的の投稿を編集し、ドロップダウン メニューからテンプレートを割り当てます。
フロント エンドで投稿を確認すると、まだ全角ではありませんが、タイトルとメタ データの場所が入れ替わっているため、投稿がカスタム テンプレートを使用していることがわかります。
全幅にするには、CSS を追加する必要があります。 WordPress は、本文セクションのテンプレート名に従ってクラスを自動生成します。
そのクラスを使用して、この特定のテンプレートをターゲットにします。 CSS を子テーマのstyle.cssファイルに追加できます。
[CSS]
.post-template-full-width-post.has-sidebar:not(.error404) #primary{
フロート:なし;
幅:自動;
}
.post-template-full-width-post .entry-header{
テキスト揃え:中央;
margin-bottom:1.3em;
}
.post-template-full-width-post .entry-meta{
border-top:1px ソリッド #ccc;
border-bottom:1px ソリッド #ccc;
パディング:15px 0;
}
[/css]これで、希望どおりのレイアウトができました。 このテンプレートを使用した投稿は、まったく同じスタイルになります。
要件に合わせて、カスタム テンプレートをいくつでも作成できます。 投稿カテゴリに基づいてテンプレートを作成することもできます.
これにプラグインを使用できますか?
PHPコードに慣れていない場合は、いくつかのプラグインを使用できますが、認めざるを得ませんが、カスタム投稿テンプレートを作成するために利用できるプラグインはほとんどなく、いずれにせよ手動でテンプレートを作成する必要があるため、それらのほとんどはあまり役に立ちません.
Post Custom Templates Lite プラグインが非常に便利であることがわかりました。 素敵なドラッグ アンド ドロップ インターフェイスでコーディングなしで投稿テンプレートを作成できる無料のプラグインです。 多くのカスタマイズ オプションがあるため、投稿テンプレートをカスタマイズする場合は、通常、このプラグインが役に立ちます。
注: 無料版では、通常の投稿テンプレートのみをカスタマイズできます。 カスタム投稿テンプレートを作成し、いくつかの追加機能を利用するには、プロ バージョンを使用する必要があります。
結論
手動で作業する場合でも、プラグインを使用してカスタムの単一投稿テンプレートを作成する場合でも、最も重要な投稿を他の投稿より目立たせることができます. インスピレーションを得るには、Brian Dean のサイトをチェックしてください。 彼は決定的なガイド投稿に特定のテンプレートを使用して、他の投稿とは一線を画すようにしています。
独自の単一投稿テンプレートを作成してみてください。 構築するすべてのサイトで最高の結果を得るには、WordPress ホスティングの単一ソースとして WP Engine のマネージド ホスティング プラットフォームを選択してください!