動的なポスト機能画像でWordPressブロックテーマカバーテンプレートをカスタマイズする方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

動的なポスト機能画像でWordPressブロックテーマカバーテンプレートをカスタマイズする方法

William Shakespeare

Mar 10, 2025 am 09:53 AM

WordPressテーマのダイナミックカバーテンプレート：注目の画像ブロックを使用してユーザーエクスペリエンスを向上させる

How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images

多くのWordPressテーマには、人気のある機能であるカバー画像が機能しています。この傾向は、ブロックテーマカタログのスクリーンショットでも明らかです。

20のテーマを例にとると、単一の記事やページで使用できるカバーテンプレートが含まれています。記事の特集画像は、記事のタイトルとその他のメタデータが以下に、ブラウザ画面全体にまたがる上部に表示されます。カバーテンプレートにより、コンテンツを表示する従来の方法とは異なるコンテンツを作成できます。

現在、カバーテンプレートを作成するには、20のデフォルトテーマのカバーテンプレートなど、PHPコードを作成する必要があります。

ファイルには、カバーテンプレートを使用するときにコンテンツを表示するコードが含まれています。 template-parts/content-cover.php PHPに習熟していない通常のWordPressユーザーの場合、ビデオに示すように、カスタム投稿タイプのUIなどのプラグインを使用する唯一のオプションです。

ブロックテーマのカバーブロック

WordPress 5.8から始めて、トピック著者はブロックエディターのカバーブロックを使用して、カスタムテンプレート（単一の投稿、著者、カテゴリなど）を作成し、書くことなくトピックまたは少量のコードだけを含めることができます。

ブロックテーマテンプレートで大きなカバーブロックを作成する方法に飛び込む前に、リッチタボールの22222のテーマとWABIを簡単に見てみましょう。

22個の22個は、隠された画像をスキーマストレージとして

セクションに追加することにより、大きなタイトルを実装しています。 WABIのテーマでは、単一の記事の大きなタイトルの背景色は、背景色と50pxの高さ間隔ブロックを強調することで達成されます。色の強調は、

ファイルによって管理されます。

header-dark-large他の多くのテーマは、カバーブロックを使用してトップカバーブロックを作成することを選択します。これにより、ユーザーはコードを作成せずに背景色を変更し、静的画像を追加できます。このようにして、記事の特集画像を単一の記事の背景画像として使用する場合は、各記事に画像を手動で追加する必要があります。 assets/js/accent-colors.js ダイナミックな記事を備えたカバーブロックは、写真を特集した写真

WordPress 6.0は、カバーブロックの背景画像として記事またはページの注目の写真を使用できるクールな特集画像カバーブロック機能を提供します。

以下の短いビデオで、Automatticエンジニアは、特集画像をカバーブロックに追加する方法について説明し、例としてArcheoのテーマでそれらを実証しました。

記事の特別な画像を含む画像ブロックは、

の2トーン色を使用してさらにカスタマイズできます。

ユーザーケース（wei、明るいモード）

theme.jsonブロックテーマディレクトリでサムネイル画像を閲覧すると、ほとんどの画像には大きなカバータイトルブロックが含まれていることがわかります。テンプレートファイルをより深く掘り下げると、静的な画像の背景を持つカバーブロックを使用していることがわかります。

最近開発されたトピックでは、ダイナミックな記事が特徴の画像（Archeo、Wei、Frost、Bright Modeなど）の背景を備えたカバーブロックを使用しています。この新機能の簡単な概要は、GitHubビデオにあります。

Rich Taborは、WABIテーマのダイナミックアクセント色の特徴をカバーとポストの特徴的な画像ブロックと組み合わせて、彼の新しいトピックで彼の創造性をさらに拡大して、単一の投稿からダイナミックなカバー画像を表示します。

彼のWeiの発表記事で、Rich Taborは次のように書きました

WEIテーマのタイトルカバーブロックを詳しく見て、独自のカバーブロックを作成する方法を学ぶ場合は、作成プロセスを段階的に説明するFränkKlein（WP Development Courses）の短いビデオを紹介します。 single.html

Weiのテーマと同様に、ブライアンガードナーは、最近の明るいモードのテーマに特徴の画像ブロックを備えたカバーブロックを使用して、魅力的なコンテンツと明るい色を示しました。

ブライアンはWptavernに次のように語っています。「彼のお気に入りのテーマは、カバーブロックが単一ページで使用される方法です。それは、注目の画像をカバーブロックに引き込み、影とフルハイトのオプションのカスタムブロックスタイルを提供します。

詳細については、デモのウェブサイトとブライアンの明るいモードのテーマの完全なレビューをご覧ください。

ブロックエディターを使用した複雑なレイアウトを設計します

最近、WordPressは、ログインホームページを設計してページをダウンロードするための新しいブロックエディターをリリースしました。この発表は、このような「シンプルなページ」を設計および公開するのにかかった33日間についてコメントした自動のMatt Mullenwegを含む読者からのさまざまな反応を引き起こしました。他の舞台裏の議論をここで見つけることができます。

これに応じて、PootlepressのJamie MarslandはこのYouTubeビデオを作成し、20分近くでほぼ同じホームページを再現しました。

WP TravernのSarah Goodingは、Marslandのビデオにコメントしました。

ブロックエディターは大きな進歩を遂げましたが、ほとんどのテーマ開発者と平均的なユーザーの複雑なレイアウトを作成および設計することにはまだいくつかの困難があります。

TT2 gopherブロックに拡張機能を追加します

このセクションでは、以前の投稿で述べたTT2 Gopherブロックのテーマに強化を追加する方法について説明します。前述のテーマのカバーブロックに触発されて、テーマに3つのカバーテンプレート（著者、カテゴリ、およびシングルページカバー）を追加したいと思いました。

ウェブサイトを閲覧するとき、2種類のカバータイトルに気付くでしょう。最も一般的なタイトルは、カバーブロックがウェブサイトタイトル（サイトタイトルとトップナビゲーション）とカバーブロックに融合していることです（例：20、212、Wei、Wabi、frost、Bright Modeなど）。また、タイトルカバーブロックはWebサイトのタイトルとブレンドされていませんが、BBC Future Webサイトなどのすぐ下にあることがわかります。 TT2 Gopherブロックのテーマでは、後者を選びました。

カバータイトルモードの作成

最初に、著者、単一の記事、およびカバーブロックを使用してその他の（カテゴリ、ラベル）テンプレートのカバータイトルパターンを作成しましょう。次に、それらをパターンに変換し、対応するタイトルカバーパターンをテンプレートに呼び出します。

ブロックエディターに精通している場合は、タイトルブロックをサイトエディターにカバーブロックで設計し、カバータイトルコードをパターンに変換します。ただし、FSEエディターに慣れていない場合は、最も簡単な方法は、記事のパターンディレクトリからパターンをコピーし、必要な変更を加えて、パターンに変換することです。

以前のCSS-Tricksの記事で、ブロックパターンの作成と使用について詳しく説明しました。 1つの記事カバータイトルパターンを作成するためのワークフローの概要を次に示します。

単一の記事カバータイトルモード

ステップ1

：FSEインターフェイスを使用して、新しい空白のファイルを作成し、左パネルに表示されているブロック構造の構築を開始します。 代わりに、これは最初に記事またはページで実行し、次にマークアップをスキーマファイルにコピーして貼り付けることができます。

ステップ2

：次に、上記のマークをモードに変換するには、最初にコードマークをコピーして、コードエディターの新しい

ファイルに貼り付けます。また、必要なスキーマファイルタイトルタグ（タイトル、スラグ、カテゴリ、インサルターなど）を追加する必要があります。以下は、/patterns/header-single-cover.phpファイルの完全なコードです：

/patterns/header-single-cover.php

ステップ3

<?php /**
     * Title: Header cover single
     * Slug: tt2gopher/header-cover-single
     * Categories: tt2gopher-header
     * Block Types: core/template-part/header
     * inserter: yes
     */
?>
<div style="margin-top:0px;margin-bottom:0px;min-height:50vh">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159443067.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="" data-object-fit="cover" data-object-position="40% 37%"   style="max-width:90%">
    <div>
        <div>
            <div>


                <p>|</p>


            </div>


        </div>
    </div>
</div>

：このデモでは、写真ディレクトリのこの画像を塗りつぶしの背景画像として使用し、

ミッドナイト2トーン色を適用しました。注目の画像を動的に使用するには、上記の塗りつぶし画像リンクを置き換えて、を前に追加する必要があります。または、dimRatio:50をクリックして"useFeaturedImage":trueを選択して注目画像を使用して

オプションを使用して、塗りつぶし画像を変更することもできます。

<code></code>

ここで、タイトルカバーモードはモードインサートパネルに表示され、テンプレート、記事、ページのどこでも使用できます。

アーカイブカバータイトル

このWP Tavernの記事と、著者テンプレートタイトルの作成に関する段階的なウォークスルーに触発されて、同様のカバータイトルを作成して、TT2 Gopherトピックに追加したかったのです。

最初に、上記のワークフローに従って、author.htmlテンプレートのアーカイブカバータイトルパターンを作成しましょう。この場合、ブロックを追加して新しい空白ページに作成します（以下のリストビューに示すように）：

カバーの背景では、単一の投稿タイトルのカバーで使用されている同じ画像を使用しました。

著者ブロックに短い著者プロファイルを表示したいので、ユーザープロファイルページに伝記的なステートメントを追加する必要があります。そうしないと、フロントエンドに空白が表示されます。

以下は、header-author-coverのタグコードです。パターンとして使用します。

<?php /**
     * Title: Header cover single
     * Slug: tt2gopher/header-cover-single
     * Categories: tt2gopher-header
     * Block Types: core/template-part/header
     * inserter: yes
     */
?>
<div style="margin-top:0px;margin-bottom:0px;min-height:50vh">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159443067.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="" data-object-fit="cover" data-object-position="40% 37%"   style="max-width:90%">
    <div>
        <div>
            <div>


                <p>|</p>


            </div>


        </div>
    </div>
</div>

タグを

モードに変換するには、前述のように必要なパターンファイルタイトルタグを追加する必要があります。 header-author-coverモードを編集することにより、ラベル、分類、その他のカスタムテンプレートの同様のカバータイトルを作成できます。 header-author-cover.php

モードは、私のheader-category-cover.phpテンプレートのgithubで使用できます。 category.html

カバーブロックを使用してテンプレートを作成します

WordPress 6.0および最近では、Gutenberg 13.7はテンプレートの作成機能をブロックエディターに拡張するため、多くのWordPressユーザーは、詳細なコーディング知識がなくてもカスタムテンプレートを作成できるようになりました。

詳細とユースケースについては、Justin Tadlockの包括的なカスタマイズ手順を参照してください。

ブロックエディターを使用すると、カバーテンプレートを含むさまざまなタイプのテンプレートを作成できます。カバーブロックを組み合わせて、特集画像ブロックを新しいテンプレートUIと組み合わせて、少量のコーディングスキルなしではさまざまな種類のカバーカスタムテンプレートを簡単に作成する方法を簡単に概説しましょう。

グーテンベルク13.7では、

テンプレートの作成がはるかに簡単です。コードとサイトエディターでブロックテンプレートを作成する方法は、

トピックマニュアルおよび以前の投稿で説明されています。

カバーブロックを備えた著者テンプレート

テンプレートの上部（タイトルブロック）マークは次のとおりです（6行目）：

author.html

次のものは、

<code></code>

および

テンプレートのカバータイトルのスクリーンショットです：author.html category.htmlこれらの2つのテンプレートの完全なコードは、GitHubにあります。

カバーブロックを備えた単一の記事カバーブロックを単一の記事で表示するには、モード（3行目）を呼び出す必要があります。 これは、タイトルカバーブロックを備えた単一の投稿のフロントエンドビューを示すスクリーンショットです。

テンプレートの完全なコードは、GitHubで使用できます。 header-cover-single

ヒーロータイトルの投稿ブロックの作成と、

<code><div style="min-height:200px">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159750414.jpeg?x-oss-process=image/resize,p_40" class="lazy" alt="" data-object-fit="cover" data-object-position="50% 75%"   style="max-width:90%">
    <div>
        <div>
            <div style="padding-top:1rem;padding-right:2rem;padding-bottom:1rem;padding-left:2rem">


                <div>
                    <div>
                        <p>Published by:</p>


                    </div>



                    <hr>
                </div>
            </div>
        </div>
    </div>
</div>
</code>

WP Tavern

および完全なサイト編集Webサイトのポストフィーチャー画像の背景カバーブロックを使用するためのステップバイステップのウォークスルーチュートリアルを見つけることができます。

それだけです！ single-cover.html