メタボックス用のMBビューアドオンを使用してカスタムテンプレートを作成する

公開: 2020-03-19

Meta Boxは先週、MBViewsアドオンプラグインをリリースしました。 新しい拡張機能により、開発者はWordPress管理者の快適さからカスタムテンプレートを作成できます。 目標は、テーマファイルを編集せずにカスタムフィールドを出力するための使いやすいインターフェイスを提供することですが、その柔軟性はフルサイト編集の限界を押し広げます。

簡単な説明: MBビューは、確かな開発者エクスペリエンスを提供しますが、コードに慣れていない人にとってはやや親しみやすいものではありません。

私は長い間、MetaBoxチームがコアプラグインと拡張機能を使って行ったことのファンでした。 プロジェクトの開発者は、十分に文書化されたコードベースを作成し、堅実な文書を作成し、他の人が失敗した詳細に一般的に注意を払っています。 MBビューも例外ではありません。 拡張機能をアクティブ化してから数分で、カスタムビューを設定し、テストサイトのフロントエンドに展開しました。

インターフェイスは、WordPress管理者からほぼすべてのものを構築するのに十分な柔軟性を備えており、ほぼ即座に利用できるほどシンプルです。

全体として、チームの新しいアドオンは、79ドルから349ドルの範囲の利用可能なプレミアムバンドルの1つの価格に見合う価値があります。 いくつかの小さな問題がないわけではありませんが、バージョン1.0リリースではそれが予想されます。

フロントエンド編集のための強力なツール

MBビュープラグインのビューコードエディタのスクリーンショット。
プラグインのビューエディタを使用してカスタムビューを作成します。

ビュー編集画面での私の経験は自然に感じました。 コードエディタは、コードミラーとそのOceanicNextテーマを使用します。 自動タブとオートコンプリートが組み込まれているため、ほとんどのオフラインエディターのように感じられます。 開発者は、カスタムビューをすばやく作成することに慣れている必要があります。

最近はTailwindCSSを主に使用しているため、数分で偽のメール登録フォームを作成し、利用可能な表示設定を使用して投稿のすぐ下に表示することができました。

MBViewsプラグインを使用したカスタムビルドの電子メールサインアップフォームのスクリーンショット。
MBビューを備えたカスタムビルドの電子メールサインアップフォーム。

コードエディタには、画面の右側にスライドアウトボックスを開く「新しいフィールド」ボタンがあります。 これにより、ユーザーは投稿、サイト、ユーザー、およびクエリの各フィールドを挿入できます。 オプションには、メタボックスプラグインを介して作成されたカスタムフィールドも含まれます。

テンプレートの編集に加えて、ユーザーはビューコードエディターから直接カスタムCSSとJavaScriptを追加することもできます。

これらのフィールドの出力はすべて、最新のPHPテンプレートエンジンであるTwigを介して処理されます。 多くのPHP開発者は、すでにTwigに精通しており、その構文に慣れているでしょう。 このシステムを通じて、プラグインユーザーはHTMLに限定されません。 条件とループを使用して、ビューコンテンツの出力をカスタマイズできます。

開発者のエクスペリエンスを向上させるには、[新しいフィールド]ボタンをクリックしてから特定のフィールドをクリックする代わりに、新しいフィールドを挿入するためのオートコンプリートオプションが表示されると便利です。 ほとんどの場合、開発者は時間の経過とともにフィールドを記憶し始め、単純に入力します。 オートコンプリートは、カスタムフィールドに適しています。

MBビュープラグインの設定メタボックスのスクリーンショット。
設定と条件を表示します。

MBビューが本当に優れているのは、そのビュー設定です。 プラグインを使用すると、ビューはテーマのヘッダーとフッターの間のページ全体、またはコンテンツ領域のみを引き継ぐことができます。 これにより、ユーザーは、組み込みのショートコードを使用して、単一の投稿、アーカイブページ、またはカスタムのビューを表示するかどうかを選択できます。 ユーザーは、さまざまな方法でグループ化できる条件に基づいて、ビューが表示される場所をさらに分類できます。 必要に応じて、単純または複雑にすることができます。 カスタムPHP条件で可能なことと完全に同等ではありませんが、ほとんどのユースケースをカバーするのに十分に近いです。

誰かがそれを試してみたい場合は、MBビューをサイトエディタ全体として使用できます。 唯一の実際の要件は、ヘッダーとフッターを使用してテーマを作成することです。 ある時点で、プラグインによってユーザーがページレイアウト全体を引き継ぐことができるようになり、テーマが事実上不要になります。

問題と将来の機能強化

バージョン1.0は、ユーザーの手に何かを出荷することを目的としています。 開発者が最も役立つフィードバックを得る時期です。今後も開発者がプラグインを基に構築を続ける中で、次の点に対処することを期待しています。 大きな障害にはなりませんでしたが、いくつかの小さな問題に遭遇し、改善のためのアイデアがいくつかありました。

私が最初に遭遇した問題は、プラグインがまったく機能しないと最初に信じさせました。 単一の投稿にカスタムビューを表示することを選択しました。 これは、ビュー設定を介して簡単に行うことができます。 「特異」タイプを選択します。 次に、最初のドロップダウン選択で「投稿」を選択します。 これにより、テンプレートがすべての投稿に表示されると思いました。 しかし、保存しても何も起こりませんでした。 私のカスタムコンテンツはどれもフロントエンドに表示されませんでした。 問題は、デフォルトで値が入力されていない2番目のドロップダウン選択があったことでした。 選択する必要のある「すべての投稿」オプションがありました。 対処するのは簡単な問題でしたが、これがプラグイン開発で適切なデフォルトが非常に重要である理由です。

リビジョンのサポートはありません。 WordPress管理者のコードエディタの場合、ユーザーがコードを以前のバージョンに戻すことができるのは理にかなっています。 ユーザーがわずかなコードでビューを作成するだけであれば、これは問題になりません。 ただし、プラグインは、ユーザーがテーマのヘッダーとフッターの間にページレイアウト全体を作成できるようにするところまで行きます。 これは、多くのコードとバックペダルの変更の必要性を意味する場合があります。

MBビューは、投稿コンテンツなどのショートコード対応領域内にビューを出力するための[mbv]ショートコードを提供します。 ただし、ブロックエディタで使用するのに相当するブロックはありません。 この時点で、ショートコードはあるがブロックがないことは大きな見落としのようです。 ショートコードはゆっくりと痛みを伴う死を遂げる必要があります。

ビュー管理画面も少し愛を使うことができます。 少なくともビュータイプの列が表示されると便利です。 カスタムビューのリストが増えると、各ビューがどこで使用されているかが一目でわかりにくくなる場合があります。

使いやすさと未来

メタボックスフィールドの値を取得してフロントエンドテンプレートに配置したいのですが、コーディングにあまり詳しくなく、テーマファイルに触れたくないですか?

MBビューの冒頭の説明によると、プラグインはコーディングに慣れていないユーザーを対象としています。 平均的なユーザーが途中でコーディングの知識を習得せずにそれを利用できるかどうかはわかりません。 インターフェイスは主に開発者を対象としています。 文字通り、ビューエディタはコードエディタです。 クリックしやすいフィールドインサーターがありますが、HTMLやCSSに精通していなければ、これらのフィールドは役に立たないことがよくあります。

このツールはその機能に優れていますが、ブロックエディタの時代の一時的な対策のように感じられます。

MBビューをより便利なエンドユーザーツールにするには、デザインオプションを備えたより視覚的なポイントアンドクリックインターフェイスに移行する必要があります。 それ以外の場合は、ほとんどの場合、ビュー出力を完全にカスタマイズできる開発者の土地にとどまります。

チームが優れた開発者エクスペリエンスに集中したいのであれば、MBビューがその方向に進む必要があるとは限りません。 ただし、現在のところ、コードにあまり詳しくない人にとっては親しみやすさという主張に応えていません。

ブロックシステムを介したフルサイトの編集経験から、少なくとも1年はまだ可能性があります。 メタボックスチームによる取り組みは、そのシステム内でビュー編集を統合するために費やすのが最善かもしれません。 MB Viewsアドオンは、今日の多くのMeta Boxプラグインユーザーにとって便利で必要なツールですが、フルサイト編集がコアに入る前に牽引力を得る時間がない場合があります。 その時点で、プラグインチームは、WordPressを使用したユーザーエクスペリエンスのはるかに異なる世界にすでに移行している必要があります。