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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ステップ2

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

/patterns/header-single-cover.php

<?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/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159443067.jpg" 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>

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

最初に、上記のワークフローに従って、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/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159443067.jpg" 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

グーテンベルク13.7では、

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

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

author.html

<code></code>

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

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

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

<code><div style="min-height:200px">
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159750414.jpeg" 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>

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

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

有用なリソース

注目の画像カバーブロック

• 記事の特集画像ブロック（WordPress Support）
• 記事を使用して、カバーブロックYouTube（wpのデイブ）
を使用して注目画像を使用してください カバーブロックに関するステップバイステップチュートリアル（WordPressサポート）
機能のカバーブロックと、普遍的なWordPressブロックへのバインディングデータの未来（WP Tavern）
WordPress Gutenberg（PootlePress）
• で単一の記事レイアウトをカスタマイズします カバーブロックを動的にして、注目の画像バインディング＃39658（github）
を追加する
ブログ投稿

• 印象を残す：ブロックを使用して記事ヒーロータイトル（wptavern）を構築する方法
• コアエディターの改善：より深いカスタマイズのためにより多くのテンプレートオプションを使用します（WordPress Coreを作成）
ブロックテーマは一般的にWordPressコミュニティのメンバーによって大きくボイコットされていますが、WordPressの未来でもあると思います。ブロックテーマを使用して、詳細なコーディングスキルとPHPおよびJavaScript言語の習得がなくても、アマチュアテーマの著者は、この記事で説明されているパターンとスタイルバリアントと組み合わせたヒーローカバーブロックを使用して、複雑なレイアウトを持つテーマを作成できるようになりました。

初期のGutenbergユーザーとして、私はテーマ作成者がコードを作成せずにブロックエディターUIから次の機能を直接実装できるようにする新しいテーマツール（

create block theme（i）作成

（ii）テーマファイルを上書きしてエクスポート
（iii）空白のテーマまたはサブテーマを生成し、
（iv）現在のテーマのスタイルバリエーションを変更して保存
さらに、Gutenbergプラグインの最近のバージョンでは、スムーズなタイポグラフィとレイアウトアラインメント、およびその他のスタイリングコントロールを
• ファイルのみを使用して有効にすることができます（JavaScriptなしと1行のCSSルールが必要）。