電話予約
サインアップ

2025年にWordPressでBentoを使用してブロックを構築する方法

  • 更新日
[aioseo_eeat_author_tooltip]
[aioseo_eeat_reviewer_tooltip]
WordPressでBentoを使ってブロックを構築する方法.jpg

WordPressでモダンなウェブサイトをデザインすることは オプションのおかげで、かつてないほど効率的になりました Bentoを使ったブロック構築。この機能は、余分なコーディングや煩わしいプラグインに煩わされることなく、クリエイティブな自由を与えることに重点を置いています。

Bentoを使えば、ミニマルなデザイン、大胆なグリッドスタイルのレイアウト、バランスの取れたページ構造など、ウェブサイトのデザインにシームレスにフィットする、クリーンでレスポンシブなレイアウトを作成できます。時間を節約し、デザインをシンプルにし、初心者でもプロ並みのセクションを作成できるように設計されています。.

Bento はビジュアルだけでなく、パフォーマンスと 応答性。作成したブロックはすべてデバイス間でスムーズに調整されるため、デスクトップ、タブレット、モバイルのいずれでもサイトが洗練された外観になります。

ブロガー、中小企業の経営者、開発者にとって、Bento でブロックを柔軟に構築できるということは、より高度な制御、より高速なワークフロー、そして目立つデザインを意味します。.

でBentoを最大限に活用するための手順を段階的に説明し WordPress、ウェブサイトプロジェクトにおけるBentoの可能性を最大限に引き出す方法をご紹介します。

BentoとGutenbergを理解する

簡素化し、強化するために設計された高性能 Web コンポーネントのコレクションです Web 開発を。これらのコンポーネントは再利用可能で、アクセスしやすく、クロスブラウザ互換性があるため、最新の Web アプリケーションを構築する開発者にとって信頼できる選択肢となります。

弁当について学ぶ

Bento の特徴はその汎用性です。React、Preact、カスタム要素などのコンポーネントを提供し、WordPress を含むさまざまな環境へのシームレスな統合を保証します。.

Bento を使用すると、開発者は次のことが可能になります。

  • 再利用可能なコンポーネントを活用して冗長なコーディングを排除します。.
  • すべてのデバイスでアクセシビリティとスムーズなユーザー エクスペリエンスを確保します。.

Gutenbergは 、Reactをベースに構築されたWordPressの強力なブロックエディターで、ユーザーはブロックを使ってコンテンツをデザインし、構造化することができます。各ブロックは、テキストや画像から複雑なカスタム機能まで、特定の機能を表します。

Gutenberg の本当の魅力はその柔軟性にあり、開発者はネイティブの WordPress ブロックを超えて、特定のニーズに合わせたカスタム ブロックを作成できます。.

しかし、これらのブロックを構築する従来の方法では、多くの場合、Reactエディタ用とフロントエンド用の2つの機能のコーディングが必要になります。この重複は、非効率性と不整合につながる可能性があります。.

Bento と Gutenberg を組み合わせる理由

Bento は、開発者が次のことを行えるようにすることでこのギャップを埋めます。

  • コンポーネントを一度記述すれば、ブロック エディターとフロントエンド全体で一貫して使用できます。.
  • 冗長な作業を排除することで開発時間を短縮します。.
  • カルーセルやアコーディオンなど、十分にテストされた機能豊富なコンポーネントを活用します。.

BentoとGutenbergを組み合わせることで、開発者は機能的かつ視覚的に魅力的なカスタムWordPressブロックを、効率的かつ合理化された方法で作成できるようになります。次のセクションでは、Bentoが 開発ワークフローを。

カスタムWordPressブロックを簡単に構築

当社の専門知識を活用して、サイトの機能性とユーザー エクスペリエンスを向上させるカスタム ソリューションの作成をお手伝いします。.

Gutenberg ブロック開発に Bento を使用する理由

Gutenberg 用のカスタムブロックの作成は、やりがいがありながらも困難なプロセスです。開発者は、React ベースのエディタコンポーネントとフロントエンド実装を行き来することが多く、コードの重複やメンテナンスの煩わしさに悩まされることがあります。Bento はまさにこの点で真価を発揮します。Bento は、プロセスを簡素化し、シームレスなエクスペリエンスを保証する洗練されたソリューションを提供します。.

グーテンベルクブロック開発

Bento が Gutenberg ブロック開発に最適なパートナーである理由を探ってみましょう。.

コードの重複を避ける

従来、Gutenberg ブロックの構築には、機能を 2 回実装することが含まれます。

  • 編集コンポーネント: ブロック エディター用に React を使用して構築されています。
  • フロントエンド コンポーネント: フロントエンドでのレンダリングのために React を使用せずに再実装されました。

この冗長な作業は開発時間を増大させ、エディタとフロントエンドのバージョン間で潜在的な不一致を生じさせます。Bentoでは、再利用可能なコンポーネントを使用することで、機能を一度記述するだけで、両方の環境でシームレスに動作します。.

クロスプラットフォームの互換性

Bento コンポーネントは複数のプラットフォーム間で互換性を持つように設計されており、さまざまなブラウザやデバイスで一貫した動作を保証します。.

React ベースの Gutenberg エディターで作業する場合でも、フロントエンドでブロックをレンダリングする場合でも、Bento のコンポーネントは簡単に適応し、均一なユーザー エクスペリエンスを提供します。.

すぐに使えるアクセシビリティ

アクセシビリティはもはやオプションではなく、優れたユーザー エクスペリエンスを提供するために不可欠です。.

Bento のコンポーネントはアクセシビリティを考慮して構築されており、ARIA ロールやキーボードナビゲーションなどのウェブ標準に準拠しています。これにより、Gutenberg ブロックはあらゆるユーザーにとって包括的かつ使いやすいものになります。.

より高速なウェブサイトを実現する高パフォーマンス

Bento コンポーネントは速度が最適化されており、ページの読み込みが高速化し、 Web サイトのパフォーマンス。

にとって重要です WordPressサイト。WordPressでは、パフォーマンスがSEOランキングやユーザー満足度に直接影響を与えるからです。Bentoの軽量で効率的なコンポーネントを使用することで、ブロックがサイトを肥大化させるのを防ぐことができます。

開発環境の設定

Bento を利用した Gutenberg ブロックの作成に取り掛かる前に、開発環境を正しく構築することが重要です。適切な環境を整えることで、開発プロセスがスムーズになり、後々起こりうる問題を軽減できます。以下の手順に従って、すべての準備を整えてください。.

前提条件

Bento を利用した Gutenberg ブロック開発に着手する前に、次のものが準備されていることを確認してください。

Node.js と npm がインストールされている:

  • をインストールします Node.js 依存関係を管理し、プロジェクトをビルドするには、
  • ターミナルで次のコマンドを実行してインストールを確認します。
ノード -v npm -v

ローカルにインストールされた WordPress:

  • Local by Flywheel、XAMPP、Docker などのツールを使用して、ローカルの WordPress 環境をセットアップします。.
  • カスタム プラグインをインストールしてアクティブ化するには、wp-content/plugins ディレクトリにアクセスできることを確認します。.

React と Gutenberg に関する知識:

  • Gutenberg ブロック開発の基盤となる React の基本を理解しておきます。.
  • Gutenberg ブロック構造、特に編集機能と保存機能の仕組みを理解しましょう。.

@wordpress/create-block のインストール

@wordpress/create-block ツールは、カスタム Gutenberg ブロックの作成プロセスを簡素化します。設定方法は次のとおりです。

Create-Block コマンドを実行します。
ターミナルで、WordPress プラグイン ディレクトリに移動し、次のコマンドを実行して新しいブロック プラグインを作成します。

npx @wordpress/create-block 素晴らしいカルーセル

という新しいプラグイン フォルダーが生成されます awesome-carousel、開発を開始するために必要なすべてのファイルが含まれる

プラグインディレクトリに移動します。
新しく作成されたディレクトリに移動します。

CD 素晴らしいカルーセル

開発環境を起動します。
次のコマンドを実行して開発サーバーを初期化します。

npm スタート

このコマンドはブロック ファイルをコンパイルし、開発中の変更を監視します。.

WordPressでプラグインを有効化します。

に移動します WordPress 管理ダッシュボード。

に移動し 「プラグイン」→「インストール済みプラグイン」、 「Awesome Logo Carousel」 プラグインを有効化してください。

カスタム プラグイン がアクティブになり、Gutenberg エディターで基本ブロックが使用できるようになります。

カスタム Bento ブロックの作成: ステップバイステップガイド

Bento を利用したカスタム Gutenberg ブロックの構築は、適切な準備から始まります。プラグイン構造の設定、必要な Bento コンポーネントのインストール、そしてエディターで最初のブロックをレンダリングする作業です。このステップバイステップガイドに従って、シームレスで機能的なカルーセルブロックを作成しましょう。.

ブロックと弁当

初期設定

初期設定を始めることで、プロジェクトにカスタムGutenbergブロックを構築するための適切な基盤が整います。これらの手順に従うことで、Bentoコンポーネントで拡張可能な、完全に機能するプラグイン構造を作成できます。このセットアップには、シームレスな開発に必要なすべてのファイルと設定が含まれています。.

@wordpress/create-block を使用してブロックプラグインを作成する

@wordpress/create-block ツールを使用して、新しいブロックプラグインをスキャフォールディングします。これにより、必要なファイルとディレクトリがすべて生成され、すぐに使用できる構造が提供されます。.

次のコマンドを実行します。

 npx @wordpress/create-block 素晴らしいカルーセル

という名前の新しいディレクトリ awesome-carousel WordPress のプラグイン フォルダーに

プラグインディレクトリに移動する

新しく作成されたブロック ディレクトリに移動します。 

CD 素晴らしいカルーセル

開発サーバーを起動する

開発環境を起動します。これは、開発中にコンパイルして変更を監視するものです: npm start

WordPressでプラグインを有効化する

  • WordPress 管理ダッシュボードにログインします。.
  • に移動し 「プラグイン」 → 「インストール済みプラグイン」、 Awesome Carousel プラグインを見つけて有効化します。

初期設定が完了すると、カスタマイズ可能な基本的な Gutenberg ブロック プラグインが完成します。.

探索： WordPressでWeb3ウェブサイトを構築する方法のステップバイステップガイド

Bentoコンポーネントのインストール

Bento コンポーネントをブロックに統合することは、再利用性とパフォーマンスの可能性を最大限に引き出す重要なステップです。.

Bento ベースカルーセルコンポーネントは、カスタムブロックのバックボーンとして機能し、既成でありながら柔軟なカルーセル機能を提供します。わずか数個のコマンドで、Bento のアクセシビリティとクロスプラットフォーム互換性をプロジェクトに組み込むことができます。.

Bento ベースカルーセルコンポーネントをインストールする

npm を使用して Bento Base Carousel コンポーネントをインストールします: npm install –save @bentoproject/base-carousel

ブロック内のBentoカルーセルをインポートする

src/edit.js ファイルを開き、次のインポートを追加します。

'@bentoproject/base-carousel/react' から { BentoBaseCarousel } をインポートします。'@bentoproject/base-carousel/styles.css' をインポートします。

BentoBaseCarousel Reactコンポーネントはカルーセル機能を提供し、 CSS

エディターとフロントエンドの両方で適切なスタイルを保証します。.

Bento をインストールしてインポートしたら、Gutenberg で最初のカルーセル ブロックをレンダリングする準備が整いました。.

こちらもご覧ください: WordPressでSaaSウェブサイトを構築する方法

Gutenberg でカルーセルをレンダリングする

Gutenberg でカルーセルをレンダリングすることで、WordPress ブロックエディター内で Bento の動作を確認できます。このステップでは、BentoBaseCarousel React コンポーネントを統合し、期待どおりに動作することを確認することに重点を置いています。.

また、ブロックのスタイル設定方法も学び、エディタとフロントエンドの両方で美しく表示されるようにします。このステップを終える頃には、Bento のパワーを存分に発揮できるカルーセルブロックが完成しているはずです。.

編集コンポーネントを更新する

src/edit.js ファイルを開き、Edit コンポーネントを更新して BentoBaseCarousel を含めます。

mport { useBlockProps } from '@wordpress/block-editor'; import { BentoBaseCarousel } from '@bentoproject/base-carousel/react'; import '@bentoproject/base-carousel/styles.css'; export default function Edit() { return ( <div {...useBlockProps()}><div className="awesome-carousel-wrapper"><BentoBaseCarousel autoAdvance={false} loop={false} snap={true}><img src="https://source.unsplash.com/random/1200x800?1" alt="スライド1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="スライド2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="スライド3" /></BentoBaseCarousel></div></div> ); }

このコードは、Bento ベース カルーセル コンポーネントをサンプル画像のセットと統合します。.

学ぶ： アンダースコアテーマを使ってWordPressサイトを構築する方法

カルーセル固有のCSSを追加する

src/style.scss ファイルを開き、次の CSS を追加して、カルーセルの寸法が一定になるようにします。

wp-block-create-block-awesome-carousel .awesome-carousel-wrapper、.wp-block-create-block-awesome-carousel .awesome-carousel-wrapper > * { アスペクト比: 1200 / 800; }

これにより、カルーセルのアスペクト比がデバイス間で維持され、プロフェッショナルな外観が実現します。.

エディターでカルーセルブロックをプレビューする

変更を保存し、開発サーバー (まだ実行されていない場合は npm start) を使用してブロックを再構築します。.

WordPress ブロック エディターに移動し、 Awesome Carousel ブロッ​​クを追加して、カルーセルの動作を確認します。

この段階で、Bento を利用した Gutenberg ブロックはエディターで動作します。次のステップでは、インタラクティブ性を高め、フロントエンドのパフォーマンスを最適化します。.

読む: WordPress画像カルーセルの作成方法

Bentoブロックにインタラクティブ性を追加する

WordPressで魅力的なブロックを作成するには、インタラクティブ性が鍵となります。Bentoの強力なAPIを使えば、ナビゲーションコントロールなどの動的な機能を追加でき、エディターとフロントエンドの両方でユーザーがカルーセルブロックをシームレスに操作できるようになります。.

エディターでのユーザーインタラクション

Gutenbergエディタ内でカルーセルをインタラクティブにするには、ナビゲーション用のカスタムボタン（例：次へ、前へ）を追加できます。BentoのAPIを使用すると、React内でカルーセル機能を直接制御できます。.

まず、src/edit.js ファイルを更新してナビゲーションコントロールを追加します。createRef 関数を使ってカルーセルの API にアクセスします。例えば、次のようになります。

import { createRef } from '@wordpress/element'; import { Button } from '@wordpress/components'; export default function Edit() { const ref = createRef(); const goToNextSlide = () => ref.current.next(); const goToPreviousSlide = () => ref.current.prev(); return ( <div {...useBlockProps()}><div className="awesome-carousel-wrapper"><BentoBaseCarousel ref={ref} autoAdvance={false} loop={false} snap={true}><img src="https://source.unsplash.com/random/1200x800?1" alt="スライド1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="スライド2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="スライド3" /></BentoBaseCarousel></div><Button isSecondary onClick={goToPreviousSlide}>前へ</button><Button isSecondary onClick={goToNextSlide}>次へ</button></div>); }

チェック： 最高のWordPressブロックテーマを探る

これらのボタンを使用すると、ユーザーは ブロック エディターため、インタラクティブかつユーザーフレンドリーになります。

フロントエンドでのユーザーインタラクション

フロントエンドのインタラクティブ性はエディターの機能を反映しています。ただし、Reactコンポーネントではなく、Bentoのネイティブカスタム要素を使用しています。src/save.jsファイルを更新して、カルーセルとナビゲーションボタンを追加します。

エクスポートデフォルト関数save() { return ( <div {...useBlockProps.save()}><div className="awesome-carousel-wrapper"><bento-base-carousel auto-advance="false" loop="false" snap="true"><img src="https://source.unsplash.com/random/1200x800?1" alt="スライド1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="スライド2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="スライド3" /></bento-base-carousel></div><div className="awesome-carousel-buttons"><button className="awesome-carousel-prev">前へ</button><button className="awesome-carousel-next">次へ</button></div></div>); }

フロントエンドでナビゲーションボタンを有効にするには、src/view.js ファイルを作成します。このファイルは、Bento の API と連携してユーザーアクションを処理します。

エクスポートデフォルト関数save() { return ( <div {...useBlockProps.save()}><div className="awesome-carousel-wrapper"><bento-base-carousel auto-advance="false" loop="false" snap="true"><img src="https://source.unsplash.com/random/1200x800?1" alt="スライド1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="スライド2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="スライド3" /></bento-base-carousel></div><div className="awesome-carousel-buttons"><button className="awesome-carousel-prev">前へ</button><button className="awesome-carousel-next">次へ</button></div></div>); }

このスクリプトにより、ナビゲーション ボタンがフロントエンドのカルーセルとシームレスにやり取りできるようになります。.

読む: WordPressブロックパターンとは

スタイリングとフロントエンドの最適化

ブロックがエディターとフロントエンドの両方で適切に表示され、パフォーマンスも向上するには、適切なスタイル設定と最適化が不可欠です。src/style.scss ファイルを使用してカルーセル固有のスタイルを定義し、デバイス間で視覚的な一貫性を確保してください。他のテーマやプラグインとの競合を避けるため、汎用的なクラス名の使用は避けてください。.

パフォーマンスを最適化するには、PHPを使用してスタイルを動的に読み込みます。plugin.phpファイルを更新し、ブロックがレンダリングされるときにのみスタイルを登録してキューに追加します。

function create_block_awesome_carousel_register_assets() { wp_register_script('bento-runtime', 'https://cdn.ampproject.org/bento.js', [], false, true); wp_register_script('bento-base-carousel', 'https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js', ['bento-runtime'], false, true); wp_register_style('bento-base-carousel', 'https://cdn.ampproject.org/v0/bento-base-carousel-1.0.css', []); } add_action('init', 'create_block_awesome_carousel_register_assets');

アセットの登録とレンダリングコールバックの管理

アセットを効率的に読み込むことで、ブロックの軽量化を実現できます。PHPのrender_callbackを使用して、ブロックがページ上に表示されている場合にのみスクリプトとスタイルを読み込みます。plugin.phpファイルを以下のように変更してください。

function create_block_awesome_carousel_block_init() {
    register_block_type(__DIR__, [
        'render_callback' => 'create_block_awesome_carousel_render_block',
    ]);
}

function create_block_awesome_carousel_render_block($attributes, $content) {
    if (!is_admin()) {
        wp_enqueue_script('awesome-carousel-view');
        wp_enqueue_style('bento-base-carousel');
    }
    return $content;
}
add_action('init', 'create_block_awesome_carousel_block_init');


これにより、スクリプトとスタイルはブロックがレンダリングされるページでのみ読み込まれるため、サイト全体のパフォーマンスが向上します。

Bentoブロック開発のベストプラクティス

WordPress で Bento ブロックを使用する場合は、ベスト プラクティスに従うことで、ブロックの効率性、再利用性、ユーザー フレンドリー性を維持できます。.

ブロックを軽量かつ再利用可能にする

弁当箱が食事、おやつ、果物、さらには子供の食べ物などのためにきちんと区切られているのと同じように、ブロックもモジュール化されて再利用可能である必要があります。.

コード内のクリーンなマテリアルの選択に重点を置き、各ブロックが頑丈で耐久性があり、不要な機能で過負荷にならないようにします。.

これにより、持ち運びやすく、保管しやすく、日常使用に便利になり、環境に優しく、漏れがなく、食器洗い機で洗えるランチ容器のように、ピクニックから旅行までどこにでも持ち運べます。.

アクセシビリティの確保（セマンティック HTML と ARIA 属性）

アクセシビリティは、安全で楽しい体験を構築するための基盤です。セマンティック HTML とARIAロールを適切に使用することで、Bentoブロックはよりインクルーシブなものになります。

容器が電子レンジ対応、食器洗い機対応、手洗い対応であることを確認するのと同じように、好みに関係なく誰もが使用できる必要があります。.

適切なラベル付けにより、支援技術を使用して操作する際にコンテンツが「こぼれる」または漏れるといった問題も防止され、ユーザーは、不快な臭いを防ぐ適切に設計された製品に保存された食品を楽しむのと同じように、コンテンツを楽しむことができます。.

モバイル対応を最適化する

現代社会では、ユーザーは複数のデバイスでウェブサイトを利用するため、 モバイル対応は 不可欠となっている。

Bentoブロックは、詰める食品の量に応じて適切な容量や容器の数を選ぶのと同じように、さまざまな画面サイズに対応する必要があります。軽食でも本格的な食事でも、デザインは柔軟にスケールする必要があります。.

レスポンシブなブロック レイアウトは、どんなバッグにも収まる弁当箱のように便利で、丈夫で安全、日常使用や旅行中にこぼれないように設計されています。.

React を多用するブロックよりもパフォーマンス重視で Bento を使用する

Bento の強みは、そのパフォーマンスにあります。React ベースの重いアプローチに頼るのではなく、Bento は合理化と効率化を実現しています。.

それは、余分な重量を加えるかさばる容器よりも、環境に優しく、電子レンジ対応で、耐久性があり、漏れない容器を選ぶようなものです。.

Bento を使用すると、スピード、依存関係の減少、より​​クリーンな開発エクスペリエンスに重点を置くことができ、楽しく、安全で、移植性が高く、パフォーマンスの最適化が必要なプロジェクトに最適です。.

WordPressコーディング標準に従う

最後に、互換性、保守性、セキュリティを確保するために、常に WordPress のコーディング標準に準拠してください。.

オランダの製品や世界的に信頼されているブランドが、価格、素材、容量、すっきりとしたデザインなどの品質基準を設定するのと同様に、コーディング標準により、ブロックは高品質で信頼性が高く、手洗いや「メンテナンス」が長期にわたって容易になります。.

ベスト プラクティスに従うことで、開発者が満足し、日常的かつ長期的な使用に最適な Bento ブロックを作成できます。.

詳細はこちら： WordPressでカスタムブロックを作成するガイド

最後に

 Bento を Gutenberg と併用すると、ワークフローが簡素化され、コードの重複が削減され、インタラクティブ性が向上し、ブロック開発が変革されます。.

再利用可能なコンポーネント、クロスプラットフォームの互換性、アクセシビリティが組み込まれた Bento を使用すると、開発者は高性能で将来性のある WordPress ブロックを簡単に作成できます。.

を提供できます シームレスなエクスペリエンス 編集者とユーザーの両方に

個人プロジェクト用に構築する場合でも、クライアント向けに拡張する場合でも、Bento は、Gutenberg ブロックを簡単かつ効率的に次のレベルに引き上げるツールを提供します。.

関連記事

すべての投稿を表示
ウェブサイトのセキュリティを向上させるための、HIPAA準拠のWordPressプラグイントップ10

ウェブサイトのセキュリティを向上させるための、HIPAA準拠のWordPressプラグイントップ10

HIPAA準拠のWordPressプラグインは、医療ウェブサイトが機密性の高い患者情報を保護し、ウェブサイトのセキュリティを向上させ、

オンラインストアの成長におけるWooCommerceのコストを理解する

オンラインストアの成長におけるWooCommerceのコストを理解する

オンラインストアが成長し、より優れたパフォーマンス、セキュリティ、プラグイン、ホスティングが必要になると、WooCommerce のコストは急速に増加します。

擁護団体や政策団体向けのWordPress

擁護団体や政策提言団体向けのWordPress活用法：成長とエンゲージメントのためのベストプラクティス

アドボカシーおよび政策組織向けのWordPressとは何ですか？アドボカシーおよび政策組織向けのWordPressとは

すべての投稿を表示  

Seahawkを始めよう

当社のアプリにサインアップして価格を確認し、割引を受けましょう。.

もっと詳しく知る
始めましょう

…について助けが必要です

人気の検索語: