を作成しますか WordPressのプラグイン 単純なグーテンベルク ブロック?
私たちはみんなWordPressが好きではありませんか？ プラットフォームは、開発者が絶えず新しい機能を追加することで、その開始以来大成功を収めてきました。 最近の傑出した機能のXNUMXつは、WordPressブロックエディター、コードネームです。 グーテンベルク.
グーテンベルクは、WordPressユーザーに、コンテンツを公開してWebサイトをカスタマイズするための刺激的な新しい方法を提供します。 非常に使いやすく、初心者にも開発者にも朗報です。 最新バージョンのWordPressを使用している場合は、ブロックエディターとブロックの概念に既に精通しています。
デフォルトでは、WordPressブロックエディターには、テキスト、画像、引用符、オーディオ、ビデオ、埋め込みなどを含めることができるいくつかのブロックが付属しています。さらに、壊れることなくエディターを拡張できるGutenbergアドオンがたくさんあります。汗。
ただし、独自のカスタムブロックを作成するように求める特定のニーズがある場合があります。 この記事では、特定のニーズを満たすカスタムグーテンベルクブロックを作成する方法をいくつかの段落で示します。
学ぶことがたくさんあるので、これ以上面倒なことはせずに始めましょう。
しかし、前に、WordPressをインストールしたことがない場合は、 WordPressのブログ7の手順をインストールする方法 et あなたのブログにワードプレスのテーマを、見つけインストールしてアクティブにする方法
それから私たちがここにいる理由に戻りましょう。
とにかく、ブロックとは何ですか？
ブロックは、段落、見出し、メディア、および埋め込みをコンポーネントとして扱い、それらをつなぎ合わせると、WordPressデータベースに保存されているコンテンツを構成し、従来のテキストの概念をメディアと埋め込みに置き換えます。組み込みのショートコード。
以前は、WordPressユーザーはコンテンツを追加するためにテキストとショートコードに依存していました。 グーテンベルクは 圏。 新しいエディターでは、ブロックユニットを使用して、管理しやすいリッチで柔軟なレイアウトを作成できます。 現在、投稿やページにブロックエディタを使用できますが、積極的な計画があります 将来的に完全なサイト編集をサポートする.
ブロックを操作すると、WordPressでのコンテンツ作成が非常に新鮮になります。 さらに、多くの既存のプラグインは新しいエディターをサポートし、プラグインからコンテンツを簡単に追加できるようにするすぐに使用できるブロックが付属しています。 エディターを使用すると、ブロックをページにドラッグアンドドロップできるため、公開ボタンをすばやく押すことができます。
WordPressに直接統合されたページビルダーのように。
あなたが精通している場合 Elementorなどのページビルダー、あなたはおそらくドラッグアンドドロップページ構築の概念に精通しているでしょう。 グーテンベルクは、ドラッグアンドドロップのウェブサイト構築をWordPressコアに完全に統合する試みです。
それでは、今日の記事の最良の部分に取り掛かりましょう。 簡単なブロックを作成する方法を学びましょう。 これは手動で行うことも、次のようなプラグインを使用して行うこともできます。 ジェネシスカスタムブロック （以前のBlockLab）、 怠惰なブロック ou ACF。 カスタムブロックの作成は少し技術的であるため、今日の記事ではプラグインを使用します。
カスタムブロックを作成する方法（ジェネシスカスタムブロックを使用）
カスタムGutenbergブロックを最初から作成するには、HTML、CSS、PHP、そして最も重要なjavaScriptを十分に理解している必要があるため、プラグインルートを使用する方が簡単です。 また、Reactを理解する必要があります。
次のセクションでは、Genesisカスタムブロックを使用します。 無料版は公式のWordPressリポジトリで入手できます。つまり、WordPress管理ダッシュボードにインストールできます。
Genesisカスタムブロックをインストールする
WordPress管理ダッシュボードにログインし、に移動します 拡張機能>追加、以下に示すように。
次に「 ジェネシスカスタムブロック キーワード検索ボックスと クリック シュールルブートン 今すぐインストール
その後、 アクティブ 始めるためのプラグイン
次に、新しいカスタムブロックを作成しましょう。 説明のために、公開するすべての記事の最後に追加するカスタムの召喚状（CTA）を作成しましょう。 最良の部分は、ブロックを再利用して、同じブロックを何度も作成する必要がないことです。
WordPress管理メニューで、に移動します カスタムブロック>新規追加、以下で強調するように。
これにより、カスタムブロック（この場合はCTA）を作成するためのすべてのオプションが表示される次のページに移動します。
上のスクリーンショットに表示されている内容を説明するためのいくつかの単語を次に示します。 上から始めて、あなたはそれを持っています。
メイン編集エリア：
- ビルダー –ここでは、カスタムブロックの設計に多くの時間を費やす可能性があります。 the Constructeur タイトル、フィールド、スラッグ、キーワード、カテゴリを追加し、カスタムブロックをプレビューできます。 フィールドを追加する方法を学習します。
- テンプレートエディター –カスタムブロックを設計した後（つまり、さまざまなフィールドを追加した後）、でブロックテンプレートを作成する（読み取り、コードを追加する）必要があります。 モデルエディタ。 CTAを設計するときに、詳細を学習します。
- エディタープレビュー –WordPressブロックエディターでカスタムブロックをプレビューできます。
- フロントエンドプレビュー– ここでは、カスタムブロックがWebサイトでどのように表示されるかをプレビューできます。
- EditorField –投稿またはページのメイン編集領域にフィールドが表示されます（WordPressエディターで通常の投稿を表示するのと同じように）
- InspectorField –ブロックインスペクターの下の右側のサイドバーにフィールドを表示します。
サイドバーオプション
- ナメクジ – カスタム ブロックに付けたタイトルに基づいて、自動的に入力されます。 これは、ブロック モデルを作成するときに重要です。
- アイコン –このオプションを使用すると、カスタムブロックにアイコンを追加できます。
- カテゴリー –カスタムブロックにカテゴリを割り当てることができます。 組み込みのカテゴリのXNUMXつを使用してカスタムブロックを分類することも、まったく新しいカテゴリを作成することもできます。
- キーワード –カスタムブロックに最大XNUMXつの関連キーワードを追加して、ブロックピッカーで簡単に見つけられるようにします。
- 所定の位置にレンダリングする代わりに、モーダルでブロックフィールドを開きます –モーダルでフィールドを開く場合は有効にします。 これは、多くのフィールドを持つカスタムブロックがある場合に役立ちます。
- ポストタイプ –チェックボックスをオンにして、カスタムブロックを各投稿タイプに表示できるようにします。 たとえば、[投稿]のチェックを外すと、ブロックはどの投稿にも表示されません。
カスタムブロックを作成する
ユーザーインターフェイスと各部分の機能について理解が深まったところで、作業を始めましょう。
で ビルダー-ビルダー–、カスタムブロックに適切なタイトルを付けます。 以下に示すように、これにはCTAを選択します。
新しいフィールドを追加する前に、以下に示すように、アイコン、キーワードを追加し、カスタムブロックのカテゴリを選択しましょう。
これに、カスタムブロックにいくつかのフィールドを追加しましょう。 この例のCTAブロックでは、画像、テキスト、電子書籍をダウンロードできるファイルフィールドのXNUMXつのフィールドを次の順序で追加します。
また読みます： あなたの商品をまとめて編集するための5 WooCommerceプラグイン
ブロックフィールドの追加
セクションで エディターフィールド、cliquezシュール プラス（+）アイコン 以下に示すように、最初のフィールドを追加します。
次に、画像フィールドを追加しましょう。 サイドバーで、 上のフィールドタイプ 画像 他のオプションを設定します。 また、ブロックモデルを作成するときに使用するスラッグについても検討してください。
その後、同じ方法でテキストフィールドとファイルフィールドを追加します。
切り替える テンプレートエディター >マークアップ。
ここでは、カスタムブロックがWebサイトでどのように表示されるかを設計します。 モデルエディタ HTML、CSS、およびフィールドスラッグ（2つの角かっこで囲む必要があります）を受け入れます。 PHP言語を使用する必要がある場合は、次を使用してテンプレートを作成できます。 PHPモデリング手法
心配しないでください、それは簡単です。
DANS モデルエディタ、 下 マークアップタブ、次のコードを追加します。
<div class="cta-block">
<div class="cta-image">
<img src ="{{image-field}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Telecharger</button></a>
</div>
</div>コードを書くと、次のことに気付くでしょう。 モデルエディタ フィールドスラッグ（例：{{image-field}}）をオートコンプリートします。
次に、セクションに移動します CSS 次のコードで単純なスタイルを追加するには：
.cta-block {
text-align:center;
background-color:orange;
width:100%;
height:auto;
border: 2px solid orange;
}
.dwnld {
background-color: black;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
border-radius:2px;
}
これらのスタイルは好きなようにカスタマイズできます。
上をクリックします パブリッシュ :
新しいカスタムブロックの動作を確認するには、WordPress管理ダッシュボードに戻って、通常どおりに投稿を作成し、[ プラス（+） 以下で強調するように、新しいブロックを追加して、新しいカスタムブロックを選択します。
次に、必要に応じてカスタムブロックに入力し、メッセージを投稿します。
ここで、フロントエンドで新しいカスタムCTAブロックを確認すると、これが表示されます。
カスタムCTAはすぐそこにあります！ 設計機能について心配する必要はありません。もちろん、実際のシナリオでは、ブロックのカスタマイズにもう少し時間がかかります。 しかし、ここで何かを学んだことを願っています。
その他の推奨リソース
ご相談もお待ちしております ressources あなたのウェブサイトとブログのより多くの所有権と制御を取得するには、以下をご覧ください。
- プログラムを作成するための10のアフィリエイトWordPressプラグイン
- WordPressで複数の列を追加する方法
- WordPressで複数の列を追加する方法
- 異なる背景を使用してワードプレス
- Elementor：ホバーでアニメーションを作成する方法
まとめ
カスタム ブロックの構築は簡単な作業ではありません。 しかし、 WordPressのプラグイン Genesis Custom Blocks や Lazy Blocks など、初心者であろうとなかろうと、作成に成功するでしょう。 必要に応じて、最も基本的なものから複雑なものまで。
WordPressWebサイトにカスタムフォントを追加する方法を示すこの記事は以上です。 ぜひお試しください。 ご不明な点やご提案がございましたら、内でお知らせください commentaires.
しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
一方で、 さまざまなソーシャルネットワークでこの記事を共有する.
...
