ウェブサイト構築をスピードアップするためにWordPressブロックパターンを作成する方法

ブロックパターンはすべてのWordPressユーザーにとって大きな問題になるでしょう。この投稿では、独自のブロックパターンを作成する方法を正確に説明します。

 add_action( 'init', function() { register_pattern( 'NAME', [ 'title' => __( 'TITLE' ), 'content' => 'PATTERN' ] ); } );

2日前にビデオを公開し、ブログパターンと呼ばれるWordPressのすぐ近くにあるこの概念を紹介しました。 今は実験的なもので、とてもワクワクしています。 そして、ブロックパターンとは何かという可能性に頭を悩ませれば、その可能性を理解でき、クライアントがいる場合にWebサイトをより迅速に配信できるようになり、クライアントがより多くのことを行えるようになると思います。 Webサイト。

だからお見せします。 このビデオでブロックパターンを作成する正確な方法。 今度は技術者側で少しやることをします。これは非技術者向けのWordPressチャンネルだと知っているので、できるだけシンプルにしようと思いますが、あなたはこれらのブロックパターンの1つを作成することがいかに簡単であるかを実際に最後まで見ていきます。

それでは、先に進んでそれを見てみましょう。 それで、これはそれを作る際にこの機能の新しいリリースについて話しているページです。 平均的な人々だけがブロックパターンを作成することができます。 したがって、下にスクロールすると、そのためのテンプレートのようなものが表示されます。 つまり、それに関係するのは、カスタム関数と呼ばれるものを作成することだけです。

でも心配しないでください。誰でも簡単にできるようにしますが、ここに小さなコードスニペットがあります。 これで、下のビデオの説明にリンクが表示されます。 それは私のウェブサイトにあなたを連れて行きます。 これを行う方法についても、書面による指示があります。 自分のWebサイトにコピーして貼り付けることができるこの小さなコードスニペット。

さて、これが私たちが必要とするものです。 これはGutenbergの新機能であり、Gutenbergプラグインをアクティブ化してインストールする必要があるため、7.8の最小バージョンが必要になります。これは、最近リリースされたものです。 さて、最終的には4〜6か月で、2020年の夏の終わりまでに、これはデフォルトでWordPressに含まれるようになりますが、今のところ、これを試してみたい場合は、そうする必要があります。 、Gutenbergプラグインをインストールする必要があります。

次にできることはオプションです。子テーマにカスタム関数を追加する方法がわからず、子テーマも使用しない場合は、この無料のプラグインを使用することをお勧めします。これは最高の無料プラグインの1つです。 私が今まで出会ったこと、そしてそれはコードスニペットと呼ばれています。 これにより、このカスタム関数と非常に使いやすいマナー、管理しやすいマナーを追加できるようになります。

わかった？ だからあなたはそれを必要とするでしょう。 そして、これはオプションです。 これはケイデンスブロックと呼ばれる無料のプラグインです。 そして、これが行うことは、グーテンベルクに多くのページビルダー機能を追加することです。 それはあなたができることでかなりきちんとしています。 列をドラッグしてサイズを変更できます。 そのページビルダー機能の多くを追加する要素はたくさんありますが、グーテンベルクには完全に無料のプラグインです。

わかった。 それでは、私のWebサイトにジャンプしてみましょう。 これがウェブサイトです。 これですべて設定されました。 そして、プラグインのインストール方法がわからない場合は、先日、プラグインとビデオのインストール方法を示さなかったために、誰かが私に本当に腹を立てました。 プラグインに移動し、[新規追加]をクリックしてから、ここでそのプラグインの名前を検索してから、をクリックします。

ダウンロードするか、申し訳ありませんが、[今すぐインストール]をクリックしてからアクティブにします。 それは非常に単純なプロセスです。 インストールされているプラ​​グインをクリックすると、Gutenbergがインストールされており、これはオプションのケイデンスブロックであり、コードスニペットが表示されます。 先に進んでコードスニペットをアクティブ化すると、ここでアクティブ化されていることがわかります。

次に、先に進んでコードスニペットをクリックすると、付属のコードスニペットが表示されます。 そして、これがこのトグルスイッチで、トグルされています。 これらはすべてオフに切り替えられており、実際には、デフォルトで付属しているものを保持する必要はありません。 ここをクリックするだけですべて削除できますが、すでに先に進んで、ブロックパターンテンプレートと呼ばれるものをここに追加しました。

だからあなたは何をしますか。 [新規追加]をクリックすると、このブロックパターンテンプレートに、ここで示した小さなコードスニペットで名前を付けることができますが、これの修正バージョンを私のWebサイトで提供します。 これをコピーしてここに貼り付けてから、[変更を保存]をクリックします。

[保存してアクティブ化]をクリックするのではなく、[変更を保存する]をクリックします。その理由をすぐに説明します。 わかった。 だから今あなたがしたいのはこのブロックパターンを作成することです。 そして、ブロックパターンは単に保存されたセクションです。 したがって、ページビルダーを使用すると、セクションを保存できることがわかります。一部のセクションには事前に設計されたセクションが付属していますが、ユーザーエクスペリエンスは、グーテンベルクの方がはるかに優れていると思います。

だからあなたがやりたいことはページに行くことです。 そして、[新規追加]をクリックすると、これに名前を付けることができます。 ええと、実際にこのツアーをやめさせてください。 このブロックパターンに名前を付ける必要があります。これが、このブロックパターンを作成する場所です。 ここでは、ブロックパターンの作成については説明しません。

すでに作成したものをお見せします。 ここです。 これが私が作成したブロックパターンです。 あなたはそれがこのセクションであるのを見ることができました。 このカラフルな背景があります。 ここに見出し、いくつかの小見出し、いくつかのボタンがあり、ビデオを挿入します。これをブロックパターンにして、マウスを2回クリックするだけで、Webサイトの任意の場所に追加できるようにします。

だから私がやろうとしているのは右上をクリックすることです、これらの3つの点があります。 それらはちょっと見づらいです、そしてあなたがそれをクリックするとき、コードエディタを言うこのオプションがここにあります。 したがって、コードエディタをクリックすると、そのブログをブロックパターンのブログパターンにするために必要なすべてのコードが表示されます。

わかった？ したがって、ここをクリックしてから、コンピュータの[コントロール]または[コマンド]をクリックして、すべてを強調表示します。 そして、彼らは新年です。 クリップボードに入れます。 だから私はそれをCを制御するつもりです。それで今それは私のクリップボードにあります。 だから今、私がやろうとしているのは、ここから出て行くことです。 実際、このビューから抜け出したい場合は、ここに終了コードエディタを示す小さなXがあります。これで、通常の方法で表示されます。

わかった。 したがって、必要に応じてこれをドラフトとして保存できますが、これは必要ありません。 これはあなたがこのブロックパターンを作成するためだけのものであり、あなたは何でもあるブロックパターンを作成することができます、そしてそれはものの1つのブロックである必要はありません。 たとえば、ブログ投稿のテンプレート全体にすることができます。 さて、ブロックエディタから抜け出すためのwがある場所をクリックします。

次に、コードスニペットに戻ります。 ここで、ブロックパターンテンプレートを作成しました。 クローンをクリックすると、そのクローンが作成されます。次に、タイトルをクリックして編集を開始します。 そのため、タイトルについては、管理しやすいタイトルに変更します。

だから私にとっては、名前を付けるだけです。 ビデオを持つヒーロー。 だから今、私は将来リストを見ているときにこれが何であるかを知っています。 さて、ここで編集する必要があることがいくつかあります。 三つのこと。 とても簡単です。 最初のものは名前です。 したがって、これは任意の名前にすることができます。スペースやファンキーな文字を使用せずに、すべて小文字にする必要があります。

だから私は先に進んで今すぐ名前を入れます。 あなたは私がそれをビデオでヒーローと名付けたのを見ることができます。 次に、ここにタイトルを付ける必要があります。 したがって、この単語のタイトルを置き換えます。これが表示されます。ブログのブロックパターンではなく、ブロックのブログパターンのリストを表示しています。 お気づきの方もいらっしゃると思いますが、これはわかりやすい名前なので、スペースを入れることができます。

ええと、ファンキーなキャラクターは入れません。 スペースは大丈夫です。 これがこのリストaに表示され、次にパターンaと表示されます。 クリップボードにコピーしたものを貼り付けるだけです。 今、私はあなたに一つのことを書き留めてほしい。 これらのそれぞれについて。 前面と背面に小さなアポストロフィを残しました。

そこになければならないアポストロフィがあることがわかります。 誤って取り外してしまった場合は、元に戻してください。 わかった。 私たちはただ変わっています。 テキストプレースホルダーを置き換えているだけです。 したがって、ここでは、すべてを置き換えたくありません。 パターンという単語を置き換えたいので、それを強調表示してから、コピーしたものを貼り付けます。

そして、そこにあります。 次に、下にスクロールして、今度は[変更を保存]をクリックしてアクティブにします。 これで、スニペットが更新されてアクティブ化されたと表示されます。 そして、すべてのスニペットをクリックすると、ビデオ付きのこの1人のヒーローがオンになっていることがわかります。 したがって、将来、追加のブロックパターンについては、ブロックパターンテンプレートと表示されている場所に移動し、クローンをクリックして、そのブロックパターンテンプレートを作成したいと思います。

そうすれば、私はいつもそこにテンプレートを持っています。 これで、カスタム関数を追加する独自の方法をすでに知っていて、独自の方法がある場合は、コードスニペットは必要ありません。また、この種のものはすべて、必要な場所に配置できます。 あなたが私に尋ねれば、これはそれを管理するためのはるかに簡単な方法です。 さて、今度は[新規追加]をクリックしてページに移動します。表示したい場合は。

ブロックパターン。 ええと、ここにそのアイコンがあります。 そして、あなたがそれにカーソルを合わせると、それはブロックパターンを言います。 それをクリックすると、現在実験されているブロックパターンのいくつかが表示されます。 しかし、下にスクロールすると、私が作成したブロックパターンが表示されます。 そして本当に素晴らしいのは、サムネイルプレビューを生成することです。

そして、これを動的に行います。 あなたはこれさえしないページ構築ツールを持っています。 ええと、それはあなたのブロックパターンを管理することをとても簡単にします。 だから、あなたはここでそれがテンプレートを持つヒーローを言っているのを見ることができます。 これを自分のWebサイトのどこでも使用したい場合は、マウスを1回クリックするだけです。 そして、そこにあります。 そして、その時点でいくつかのテキストを変更し始め、ボタンへのリンクを変更するために私がしなければならないことはすべてです。

ここをクリックして、ビデオを変更できます。 そう。 これがブロックパターンの作成方法です。 今、これは大したことです。何が起こるかがテーマだからだと思います。 開発者とプラグイン作成者は、これらのブロックパターンを作成できるようになるため、WordPressにすでに含まれているネイティブブロック構築ツールを使用して、Webサイトを構築するのがはるかに速く、速く、簡単になります。

購入するものはなく、コードの膨張もありません。 これらのものはありません、そして。 それをさらに進めるもの。 独自のブロックパターンを作成するのがいかに簡単であるかを見ることができ、リストでそれを見るのは本当に簡単です。 ボタンをクリックすると、そこに配置されます。 これで、ブロックパターンの独自のライブラリがある場合に、Webサイトを構築するのがどれほど簡単になるかを考えることができます。

したがって、クライアント用のWebサイトを作成していて、ページビルダーを使用したくない場合。 組み込みのブロックビルダーを使用したいだけです。 独自のパターンライブラリを作成できます。 あなたはそれがいかに簡単かを見ました。 できます。 あなたはそれをすることができます。 ええと、サイト間を移動できるブロックパターンの独自のライブラリを作成し、クライアントにこれを構築する方法を示すことができます。

さて、これはページだけではなく、投稿のためでもあり、あなたが見たその1つのセクションだけに限定されません。 基本的に、ページ上に作成できるものは何でも。 ブロックパターンを作ることができます。 したがって、ブログ投稿にのみブロックビルダーを使用していて、ブログ投稿のレイアウトを強化するためにブログ投稿で繰り返し使用したい特定の要素がある場合は、次のブロックパターンを作成できます。それ。

そして、それは本当に簡単です。 ワンクリックで使用できます。 実際、ブログ投稿テンプレート全体。 したがって、ブログ投稿のセクションで従う式がある場合は、そのブログ投稿全体をブロックテンプレートにすることができます。 そのワンクリックが適用され、ポイント、クリック、編集するだけです。

ですから、ここで締めくくる前の最後のことは、これは新しい概念であり、今後数か月にわたって考えることです。 今すぐ試してみてください。 イエティではありません、イエティ。 あなたが気づいたなら、ええと、私が見た唯一のネガティブはあなたがブログを見ているときであるため、それはプライムタイムの準備が整っていません。 ほらまた行きます。

ブロックパターンを見ると、スクロールする必要がある上位の記事リストにすぎないため、分類と整理のプロセスを改善する必要があります。 たぶん、彼らはそれをより視覚的で扱いやすくするためのある種のインターフェースを持っています。 あなたが50の異なるブロックを持つつもりなら。

パターン。 だから彼らはそれを改善する必要があります。 また、コードの構文の一部が少し変更される可能性があります。 これが最終的にいつ出るか誰が知っていますか。 しかし、このビデオの要点は、あなたが始めることができるように、非常にすぐに何が可能になるかをあなたに示すことです。 それがあなたのワークフローにどのように適用できるか、そしてあなたがウェブサイトビルダーとして何をしているのかを考えます。

とにかく、この投稿で私があなたのために持っているのはそれだけです。 このようなWordPressの将来についての高度な調査に感謝します。このビデオに感謝したり、価値を見つけたりした場合は、親指を立ててこのビデオを共有することを検討してください。