を閲覧すると WordPressテーマディレクトリ、テーマの大部分はカバー画像を紹介しています。 人気の高い機能です。 表紙の傾向は、 ブロックテーマディレクトリ スクリーンショットも。
次の例を考えてみましょう 二十二 (古典的なテーマ) を含む 表紙のテンプレート これは、単一の投稿とページの両方で表示するために使用できます。投稿の注目の画像が上部に表示され、ブラウザー画面全体に広がり、投稿のタイトルとその他の必要なメタデータが下に表示されます。 カバー テンプレートを使用すると、コンテンツを表示するという従来の制約から際立つコンテンツを作成できます。
現在、表紙のテンプレートを作成するには、ここでキャプチャされているように PHP コードを記述する必要があります。 Twenty Twenty デフォルトテーマのカバーテンプレート. 見てみると template-parts/content-cover.php ファイルには、 コード コンテンツを表示するため cover-template 使用されている。
したがって、PHP に関する深い知識がなければ、カスタマイズされたカバー ページを作成することはできません。 多くの通常の WordPress ユーザーにとって、唯一のオプションは次のようなプラグインを使用することです。 Custom Post Type UI で説明されているように この短いビデオ.
ブロックテーマのカバーセクション
Since WordPressの5.8、テーマ作成者は、トップ ヒーロー セクションを使用してカスタム テンプレート (単一の投稿、作成者、カテゴリなど) を作成できます。 ブロックエディタ 最小限のコードまたはコードなしでテーマにバンドルされています。
ブロック テーマ テンプレートで上部の大きなカバー セクションを作成する方法に飛び込む前に、XNUMX つのブロック テーマを簡単に見てみましょう。 二十二十二 & わび Rich Tabor 著 (完全なレビュー こちら).
舞台裏では、Twenty Twenty-Two は大きなヘッダーを次のように実装しています。 パターンとして保存された隠し画像を追加する セクションに header-dark-large 部品。 一方、Wabi テーマでは、XNUMX つの投稿の大きなヘッダーの背景色は次のように実装されています。 アクセントの背景色と高さ 50px のスペーサー ブロック (行: 5-9)。 アクセント カラーは、 assets/js/accent-colors.js ファイルにソフトウェアを指定する必要があります。
他の多くの人は、トップ カバー セクションを作成するために、 カバーブロックこれにより、ユーザーは背景色を変更したり、メディア ライブラリから静止画像を追加したり、メディア デバイスからアップロードしたりできます。コードを記述する必要はありません。 このアプローチにより、 アイキャッチ画像ブロックを投稿する 投稿の注目の画像を単一の投稿の背景画像として使用する場合は、各投稿に手動で追加する必要がありました。
ブロックをダイナミックな投稿のアイキャッチ画像でカバー
WordPress 6.0 が別のクールなバージョンで利用可能に アイキャッチ画像カバーブロック カバーブロックの背景画像として、投稿またはページの注目の画像を使用できる機能。
以下では 短いビデオ、Automatt エンジニアは、ブロックをカバーするためのアイキャッチ画像の追加について、次の例を使用して説明します。 Archaeo テーマ：
ポスト特集画像ブロックを含む画像ブロックは、次を使用してさらにカスタマイズできます duotone の色 theme.json この短い記事で説明したように ドットの接続 YouTube ビデオ (Automattic の Anne McCarthy)。
ユースケース例（魏、 ブライトモード）
サムネイル画像を閲覧すると ブロックテーマディレクトリ、それらの大部分に大きなカバーヘッダーセクションが含まれていることがわかります. 彼らのテンプレート ファイルを掘り下げると、静的な画像の背景を持つカバー ブロックが使用されます。
最近開発されたいくつかのテーマは、ダイナミックな投稿特集画像の背景を持つカバー ブロックを使用しています (例: Archeo、Wei、Frost、Bright Mode など)。 新機能の簡単な概要は、 この短い GitHub ビデオ.
ダイナミックなアクセントカラーの特徴を組み合わせる わび カバーとポスト特集画像ブロックのテーマ、Rich Tabor は彼の新しい作品で彼の創造性をさらに広げます 魏 テーマ (完全なレビューが利用可能 こちら) を使用して、XNUMX つの投稿の動的カバー画像を表示します。
彼の魏の発表の投稿では、 リッチ・タボールは書いています：「舞台裏では、 single.html テンプレートは、投稿の注目の画像を活用するカバー ブロックを使用しています。 次に、ポストに割り当てられた配色によってダブルトーンが適用されます。 このようにして、ほぼすべての画像がきれいに見えます。」
Wei テーマのヘッダー カバー ブロックをさらに深く掘り下げ、独自のヘッダー カバー ブロックを作成する方法を学びたい場合は、こちらをご覧ください。 短いビデオ から フランク・クライン (WP 開発コース) 作成方法を順を追って説明します。
魏のテーマと同様に、 ブライアンガードナー また、彼の最近の記事では、注目の画像ブロックを含むカバー ブロックを使用しています。 明るいモード 目立つコンテンツを表示するテーマ 鮮やかな色.
ブライアンはWPTavernに語った: 「彼が最も気に入っているテーマは、カバー ブロックの使用方法です。 単一ページ. 主役の画像をカバー ブロックに取り込み、影とフルハイト オプションのカスタム ブロック スタイルも提供します。 […] これは、最新の WordPress で可能なことを実際に示しているように感じます。」
詳しくはこちら デモサイト & ブライアンのブライト モード テーマの完全なレビュー.
ブロック エディターで複雑なレイアウトを設計する
最近、WordPress は設計された新しいブロック エディターをリリースしました。 ランディングホームページ フォルダーとその下に ダウンロードのページ. 発表 さまざまな反応を引き寄せた を含む読者から マット・マレンウェッグ (Automattic) は、このような「シンプルなページ」のデザインと立ち上げにかかった 33 日間についてコメントしました。 発見できる ここで追加の舞台裏の議論.
それに応じて、Pootlepress の Jamie Marsland が作成しました。 このYouTubeビデオ 彼はほぼ同じホームページを 20 分近くで再現しています。
マースランドの動画にコメントして、 WP Travern の Sarah Gooding は次のように書いています。: 「彼は、ブロック エディターのパワー ユーザーと呼ばれる人物です。 行、列、およびグループをすばやくシャッフルし、必要に応じてパディングとマージンを調整し、各セクションに対応するデザインの色を割り当てることができます。 現時点では、これはほとんどの平均的な WordPress ユーザーができることではありません。」
ブロック エディターは長い道のりを歩んできましたが、ほとんどのテーマ開発者や一般のユーザーにとって、ブロック エディターを使用して複雑なレイアウトを作成および設計するには、依然として問題が大きくなっています。
TT2 Gopher ブロックへの機能強化の追加
このセクションでは、 TT2 Gopher ブロックのテーマ 前回の記事で引用したもの。 前に説明したテーマのカバー ブロックに着想を得て、XNUMX つのカバー テンプレート (著者、カテゴリ、およびシングル カバー) をテーマに追加したいと考えました。
Web サイトを閲覧しているときに、XNUMX 種類のカバー ヘッダーに気付きます。 最もよく見られるヘッダーは、サイト ヘッダー (サイト タイトルとトップ ナビゲーション) とカバー ブロック (例: Twenty Twenty、Twenty Twenty-Two、Wei、Wabi、Frost、Bright Mode など) にブレンドされたカバー セクションです。 このように、サイト ヘッダーとブレンドされず、すぐ下に配置されているヘッダー カバー セクションも見つかります。 BBCフューチャー Webサイト。 TT2 Gopher ブロックのテーマでは、後者を選びました。
カバー ヘッダー パターンの作成
まず、カバー ブロックを使用して、著者、シングル、およびその他 (カテゴリ、タグ) テンプレートのカバー ヘッダー パターンを作成しましょう。 次に、それらをパターンに変換します（説明どおり ここで以前）、それぞれのヘッダー カバー パターンをテンプレートに呼び出します。
ブロック エディターの操作に慣れている場合は、サイト エディターでカバー ブロックを使用してヘッダー セクションを設計し、カバー ヘッダー コードをパターンに変換します。 ただし、FSE エディターに慣れていない場合、最も簡単な方法は、FSE エディターからパターンをコピーすることです。 パターン ディレクトリ 投稿で、必要な変更を加えてパターンに変換します。
私の中で 以前の CSS トリックの記事、ブロック パターンの作成と使用について詳しく説明しました。 単一の投稿カバー ヘッダー パターンを作成するために使用しているワークフローの概要を次に示します。
シングル ポスト カバー ヘッダー パターン
ステップ 1: FSE インターフェイスを使用して、新しい空のファイルを作成し、左側のパネルに示すようにブロック構造の構築を開始しましょう。
または、これを最初に投稿またはページで実行し、後でマークアップをコピーしてパターン ファイルに貼り付けることもできます。
ステップ 2: 次に、上記のマークアップをパターンに変換するには、まずそのコード マークアップをコピーして、新しい /patterns/header-single-cover.php コードエディターで。 必要なパターン ファイル ヘッダー マークアップ (タイトル、スラッグ、カテゴリ、インサーターなど) も追加する必要があります。
のコード全体は次のとおりです。 /patterns/header-single-cover.php ファイル：
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
ステップ 3: このデモでは、使用しました 写真ディレクトリからのこの画像 フィラーの背景画像として、 ミッドナイト ダブルトーンカラー。 投稿の注目の画像を動的に使用するには、追加する必要があります "useFeaturedImage":true 直前の上記のフィラー画像リンクを置き換えることにより、カバーブロックで "dimRatio":50 10 行目は次のようになります。
または、クリックしてフィラー画像を変更することもできます。 交換する そして、 注目の画像を使用する オプション：
これで、ヘッダー カバー パターンがパターン挿入パネルに表示され、テンプレート、投稿、およびページのどこでも使用できるようになります。
表紙のヘッダーをアーカイブする
触発され このWP居酒屋の投稿 そして、オーサー テンプレート ヘッダーを作成するためのステップバイステップのウォークスルーで、同様のカバー ヘッダーを作成し、TT2 Gopher テーマにも追加したいと考えました。
まず、アーカイブのカバー ヘッダー パターンを作成しましょう。 author.html 上記のワークフローに従って、テンプレートも同様に。 この場合、ブロックを追加して、新しい空白のページにこれを作成しています (以下のリスト ビューを参照)。
表紙の背景には、単発ヘッダーの表紙と同じ画像を使用しました。
著者ブロックに短い著者の略歴を表示したいので、ユーザ プロファイル ページにも略歴を追加する必要があります。そうしないと、フロントエンドに空白が表示されます。
以下は、のマークアップコードです header-author-cover、次のステップでパターンを使用します。
Published by:
マークアップを header-author-cover 必要なパターン ファイル ヘッダー マークアップを前述のように追加する必要があります。 を編集することで、 header-author-cover.php パターン、タグ、分類法、およびその他のカスタム テンプレートの同様のヘッダー カバーを作成できます。
header-category-cover.php 私のパターン category.html テンプレートは GitHub で入手できます.
ヘッダー カバー ブロックを使用したテンプレートの作成
WordPressの6.0 最近の グーテンベルク13.7 テンプレート作成機能をブロックエディターに拡張したため、コーディングの深い知識がなくても、多くの WordPress ユーザーがカスタマイズされたテンプレートを作成できるようになりました。
より詳細な情報と使用例については、こちらをご覧ください。 Justin Tadlockによる徹底したカスタマイズノート.
ブロックエディタ 表紙のテンプレートを含む、さまざまなタイプのテンプレートを作成できます。 結合方法を簡単に概説しましょう カバーブロック & アイキャッチ画像ブロックを投稿する 新しいテンプレート UI を使用すると、コーディング スキルがない、または低い場合でも、さまざまな種類のカバー カスタム テンプレートを簡単に作成できます。
Gutenberg 13.7 では、テンプレートの作成がはるかに簡単になりました。 ブロック テンプレートの作成方法 コード付き & サイトエディターで で説明されています テーマハンドブック または 私の前の記事.
カバー ブロック付きのオーサリング テンプレート
の上部 (ヘッダー セクション) マークアップ author.html テンプレートを以下に示します (6 行目):
...
...
...
... のカバー ヘッダーのスクリーンショットを次に示します。 author.html & category.html テンプレート：
両方のテンプレートのコードは GitHub で入手できます.
カバーブロック付きシングルポスト
単一の投稿にカバー ブロックを表示するには、 header-cover-single pattern ヘッダー セクションの下 (3 行目):
....
....
....以下は、ヘッダー カバー セクションを含む単一の投稿のフロント エンド ビューを示すスクリーン キャプチャです。
single-cover.html テンプレートは GitHub で入手できます.
の作成に関する追加の段階的なウォークスルー チュートリアルを見つけることができます。 ヒーロー ヘッダー ポスト セクション & ポスト特集画像の背景カバー ブロックの使用 on WP Tavern & フルサイト編集 ウェブサイトをご覧ください。
あなたはそれを持っている！
有用なリソース
アイキャッチ画像カバーブロック
ブログの記事
ブロックのテーマは、一般的に、 WordPress コミュニティメンバーから多くの反発を受ける、 私の意見では、 それらは WordPress の未来です、 それも。 ブロック テーマを使用すると、深いコーディング スキルや PHP および JavaScript 言語の習得がなくても、アマチュアのテーマ作成者は、この記事で説明されているように、ヒーロー カバー セクションを含む複雑なレイアウトのテーマを作成できます。 パターン & スタイルバリエーション.
初期のグーテンベルク ユーザーとして、私は次のような新しいテーマ ツールに興奮することはありませんでした。 ブロックテーマを作成する テーマ作成者がコードを記述せずにブロック エディター UI から直接次のことを実現できるようにするプラグインなど:
- （ⅰ） 作ります
- (ii) テーマファイルを上書きしてエクスポート
- (iii) 空白または子テーマを生成し、
- (iv) 現在のテーマのスタイル バリエーションを変更して保存する
さらに、Gutenberg プラグインの最近の反復により、有効にすることができます 流動的なタイポグラフィ & レイアウトの配置 およびその他のスタイルコントロールのみを使用 theme.json JavaScript と CSS ルールの行を含まないファイル。
以下を読んで、コメントや考えを共有していただきありがとうございます！