ブロックエディタを使用してミュージックアーティストのWordPressテーマのホームページを再作成する

公開: 2021-03-03

毎週私のお気に入りのアクティビティの1つは、最新のテーマを熟読してWordPressテーマディレクトリに配置することです。多くの場合、興味深いデザインコンセプトがあります。しかし、多くの場合、多くのホームページのデザインがブロックエディタではなくテーマオプションに依存していることを知ってがっかりしています。

エディターにはいくつかのデザイン上の制限がありますが、テーマの作成者には探索する余地がたくさんあります。これらのカスタムホームページデザインのいくつかを、はるかに少ないコード作業で実現するのに十分なパワーがあります。

音楽アーティストは私の目を引く最新のテーマの1つでした。私は大きなヒーローエリアとテーマのデザインのいくつかの要素が大好きでした。インストールしてみると、ホームページのレイアウトはテーマオプションで処理されていることに気づきました。ただし、テーマの作成者は、このページを完全にブロックで作成し、各セクションまたはデザイン全体をブロックパターンにラップすることもできます。

これはすべてブロックエディタで実行できます。

私が説教していることを実践するために、私は数時間かかり、ブロックエディターから直接テーマのホームページデモを再作成しました。コードは必要ありません。トリッキーな部分がいくつかありましたが、これについて説明します。ただし、作成はそれほど難しくなく、テーマがブロックエディターをサポートしていれば簡単に作成できたはずです。

計画は、ミュージックアーティストテーマがインストールされたカスタムページを複製することでした。ただし、テーマのブロックサポートの欠如は、いくつかのものが根本的に壊れていることを意味しました。代わりに、フォントや色など、デザインが類似しているテーマをアクティブにしました。 Ariele Liteがブロックエディターで動作することはすでに知っていたので、それを使用してビルドできるかどうかを確認するのは理にかなっています。それは確固たる基盤であることが証明されました。

以下は、元のMusic Artistテーマのホームページ（最初）とAriele Liteテーマを介したブロックを使用したレクリエーション（2番目）の比較です。

間隔、色、タイポグラフィ、その他の要素には明らかに違いがあります。これの多くは、テーマデザイナーによるスタイルの選択に帰着します。 Editor Plusのようなプラグインを介したより多くの時間と変更を考えると、より近いレプリカを取得するためにこれを十分に調整できたはずです。しかし、私の目標は、WordPressのコアにできるだけ近づけることでした。技術的には、Gutenbergプラグインの最新バージョンがインストールされているため、WordPressにまだリリースされていないアイテムがいくつかある可能性があります。

この実験では、次のものを使用しました。

WordPress5.7ベータ版
グーテンベルク10.1ベータ
Ariele Lite 1.0.8
Editor Plus 2.6

Groupブロックでマージンを調整するために必要なのはEditorPlusだけでした。私はそれを放っておくこともできましたが、より近いレクリエーションを得るために、ページ上のセクション間の間隔の一部を減らしたいと思いました。将来的には、WordPressでより多くのスペーシングコントロールが表示されるため、これは公正なトレードオフであると考えました。

この実験は、テーマの作成者がブロックシステムを使用してカスタムデザインを作成できることを示すためのものです。昔ながらのテーマオプションを削除すると、開発者のコード作業が大幅に減り、開発者はスタイリングに集中できるようになります。エンドユーザーは、カスタム要素を追加したり、不要なパーツを削除したりするなど、柔軟性が向上するというメリットもあります。これには、個々のブロックレベルのスタイルオプションも含まれていません。

2番目の目的は、コードなしでこれらのホームページの一部を作成できることをユーザーに示すことです。ブロックエディタとバランスの取れた、ブロック対応のテーマは、かなり遠くまで行くことができます。

ミュージックアーティストのホームページを再現する

Ariele Liteのベースから始めるということは、デザインが箱入りであることを意味しました。ただし、テーマには、ユーザーがページ全体をデザインできるカスタムの「空白のキャンバス」ページテンプレートがあります。

ブロックエディタの制限により、完全に再現できない要素がありました。他の部分は、テーマから来る問題またはデザインの選択でした。

以下は、私がホームページの各セクションを構築する方法の概要です。レイアウト関連の概念に焦点を当てながら、色の追加やフォントサイズの変更などの部分はスキップします。

ヒーローセクション

WordPressのCoverブロックは、今でも私のお気に入りのブロックの1つです。これにより、ユーザーは多くの作業をせずにヒーローセクションを作成できます。元のデモから背景画像を取得して、それを挿入しました。この旅の最初の本当の一歩を踏み出しました。

次に、Headingブロックを追加し、サイズを少し調整しました。続いて、Spacer and SocialIconsブロックを追加しました。

私はすぐに2つの障害にぶつかった。 1つ目は、WordPressにiTunesソーシャルアイコンが含まれていないことです。これについては、グーテンベルクリポジトリで未解決の問題を見つけることができませんでした。おそらく、それは頻繁に要求される機能ではありません。 2番目の問題は、Social Iconsブロックがソーシャルネットワークラベルを出力しないため、デザインのその部分を複製できなかったことです。

ディスコグラフィーセクション

このセクションを処理する方法はいくつかあります。リストされているアルバムがカスタム投稿タイプであると仮定すると、これらのアルバムがどのプラグインからのものであっても、理想的にはそれらを出力するためのカスタムブロックがあります。これらがブログ投稿または今後のクエリブロックである場合、ユーザーは最新の投稿ブロックを使用することもできます。

簡単にするために、Columnsブロックを追加し、3つのリンクされた画像をにドロップすることにしました。

メディアとテキストのセクション

2列。左側には、埋め込まれたYouTubeビデオ。右側には、見出し、段落、ボタンがあります。

このセクションの私の計画は、コアのMedia＆Textブロックを使用することでした。ただし、セルフホストメディアのみをサポートします。 YouTubeビデオを埋め込む方法はありませんでした。

代わりに、Columnsブロックを使用しました。左の列に、YouTubeビデオのURLをドロップしました。右側に、Heading、Paragraph、およびButtonsブロックを追加しました。

ビデオセクション

これは、再現するのに比較的簡単なセクションでした。レイアウトでは、Headingブロックとそれに続くColumnsブロックのみが必要でした。次に、YouTubeからいくつかのビデオリンクを取得し、URLをエディターに貼り付けました。

フッターサイドバーセクション

技術的には、フッターサイドバーはホームページデザインの範囲外です。これは、サイト全体のテーマのフッターの一部です。しかし、私はすでにロールに参加していたので、それを追加することにしました。

このセクションには、Columnsブロックが必要です。その時点から、各列の見出しブロックにドロップするだけです。段落、カレンダー、ギャラリーブロックを追加して、3つの「ウィジェット」を再作成しました。

Ariele Liteのカレンダーブロックデザインは、明るい色の背景でより効果的に機能します。それは私が見落とした小さな問題点でした。長期的には、WordPressはそれらが欠落しているブロックにデザインコントロールを提供する必要があります。