より良い体験のためにグーテンベルクブロックテンプレートを作成する

公開: 2019-05-02

@Cloudwaysをフォローする

WordPress 5.xは、世界で最も人気のあるCMSの最新バージョンです。新しいバージョンの興味深い機能は、WordPressersがプラットフォーム上でコンテンツを作成する方法に革命を起こす準備ができているGutenbergEditorです。少なくともそれは公式バージョンです！

グーテンベルクエディターについてどのように感じているかに関係なく、このエディターが今後のWordPressリリースでなくなることはないことを理解することが重要です。理由は簡単です。「クラシック」なWordPressエディターがその時代を示し始めています。さらに、他の同様のプラットフォームで利用可能なエディターに精通している新世代のユーザーは、従来のエディターよりもグーテンベルクスタイルのエディターに慣れています。

グーテンベルクブロックのカスタマイズ

グーテンベルクエディターは、コンテンツに必要な機能を追加するために自由に使用できる個別のコンポーネントである「ブロック」の概念に基づいています。これらのGutenbergブロックを介して、ユーザーは、読者に付加価値を与える調整可能で独立して管理可能なセクションを追加できます。

カスタマイズはWordPressの中核であるため、Gutenbergエディターは、ユーザーがCMSにカスタムブロックを追加するのに役立つカスタマイズされたブロックテンプレートをサポートしています。

カスタマイズされたグーテンベルクブロックテンプレートを作成するには、2つの方法があります。どちらの方法でも、WordPress開発の知識が必要であることに注意してください。

グーテンベルクブロックを登録する

最初の方法では、事前入力されたブロックを作成するために使用できるカスタムブロックテンプレートを作成します。このために、functions.phpファイルに次のコードを追加します

add_action（ 'init'、function（）{
    $ args = array（
        'public' => true、
        'ラベル' => 'ニュース'、
        'show_in_rest' => true、
        'template_lock' => 'all'、
        'テンプレート' => array（
            array（ 'コア/段落'、array（
                'プレースホルダー' => 'ニュース速報'、
            ））、
            array（ 'コア/イメージ'、array（
                'align' => 'right'、
            ））、
        ）、
    ）;

    register_post_type（ 'news'、$ args）;
}）;

グーテンベルクブロックのこのカスタムテンプレートが実際にどのように見えるかを次に示します。

グーテンベルクブロックテンプレート

上記のコードスニペットでは、配列パラメーター 'core / paragraph'がブロックのコンテンツを担当しています。同様に、配列パラメータ「core / image」を使用すると、直接アップロード、メディアライブラリからの選択、URLを使用した埋め込みの3つの方法で画像をアップロードできます。

'show_in_rest'パラメーターは、このカスタムブロックがWordPress RESTAPIを介してフェッチできる必要があることをWordPressコアに示します。

'template_lock'引数を 'all'に設定すると、カスタムブロックがテンプレートに追加（または削除）されなくなります。

このテンプレートにカスタムブロックを追加する場合は、「template」サブ配列を使用します。たとえば、次のスニペットについて考えてみます。

 'テンプレート' => array（
            array（ 'core / heading'、array（ 'level' => '4'、 'content' => 'Heading'））、
            array（ 'コア/段落'）、
        ）。

グーテンベルクプラグインを作成する

カスタムテンプレートとグーテンベルクテンプレートを使用する場合のベストプラクティスは、カスタムグーテンベルクエディタープラグイン用のカスタムプラグインを作成することです。

すべてのプラグインと同様に、このプラグインは、Webサイトにインストールされているすべてのプラグイン用の個別のフォルダーを含むwp-content / pluginsディレクトリに配置されます。

プラグインを作成するには、wp-content / pluginsディレクトリに移動し、新しいフォルダを作成します。フォルダの名前は、カスタムGutenbergテンプレートプラグインの名前である必要があります。このチュートリアルの目的のために、プラグインに「GutenbergBlocks」という名前を付けました。したがって、フォルダの名前は「 Gutenberg-Blocks 」になります。

このフォルダーに、Gutenberg-blocks.phpという名前のファイルとそれに次のコードを作成します。

 / **
 *プラグイン名：Gutenberg Blocks
 *著者：Muhammad Owais Alam
 *説明：このプラグインを使用すると、ユーザーはGutenbergエディター用のWordPressGutenbergカスタムテンプレートを追加できます。
 *バージョン：1.0.0
 * /

add_action（ 'init'、function（）{
    $ args = array（
        'public' => true、
        'ラベル' => 'ニュース'、
        'show_in_rest' => true、
        'template_lock' => 'all'、
        'テンプレート' => array（
            array（ 'コア/段落'、array（
                'プレースホルダー' => 'ニュース速報'、
            ））、
            array（ 'コア/イメージ'、array（
                'align' => 'right'、
            ））、
        ）、


    ）;

    register_post_type（ 'news'、$ args）;
}）;

このコードはガイドとしてのみ意図されており、要件に合わせて詳細を変更できることに注意してください。インストールすると、このプラグインは利用可能なプラグインリストに表示されます。

プラグインを使用したGutenbergブロックテンプレート

グーテンベルクワードプレスのテーマの例–グーテンベリー

新しい気晴らしのないエディターであるグーテンベルクは、ほぼ1年前からWordPressコアの一部となっています。しかし、グーテンベリーが登場するまで、ウェブ上で完成度の高い、よく考えられたグーテンベルクのテーマを見つけるのはかなり困難でした。

グーテンベリーは現在、グーテンベルクに対応した最高の100％テーマの1つです。このクリーンで最小限のテーマはグーテンベルクで作成され、前例のない編集の容易さと模範的なスピードをもたらします。たとえば、GoogleSpeedはGutenberryA97を評価します。

このヒントトップのテーマには、5つのホームページデザインも付属しています。これらはすべて、リッチメディアが統合された最新のブログ用に作成されています。さらに、Gutenberryは、大量のブログと投稿のレイアウト、10を超えるウィジェット、作業フォーム、および強力なソーシャルメディア統合を提供します。

グーテンベルクテーマの注目すべき機能は次のとおりです。

サンプルデータインストーラー
生涯24時間年中無休のサポート
最適化されたソースコード
MailChimp対応
完全にレスポンシブ
代替モジュールレイアウト
3つの動的なブログレイアウト

まとめ！

グーテンベルクテンプレートのカスタマイズは、カスタム要件を処理するためにグーテンベルクエディターをカスタマイズするための優れた方法です。すべてのWordPressと同様に、カスタムGutenbergテンプレートを作成するプロセスは、インラインコードを追加するか、カスタムプラグインを設定するだけです。