• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / WordPress / WordPress ブロックパターンディレクトリに自分のブロックを登録・公開できるように

WordPress ブロックパターンディレクトリに自分のブロックを登録・公開できるように

池田祐太郎 | 2022年3月29日 公開 コメントを書く

WordPress 5.8からブロックパターンディレクトリが開始されましたが、先日このブロックパターンディレクトリに自分で作ったブロックを登録・公開できるようになりました。

WordPress.org アカウントがあれば簡単に作成し、公開までできます。一連の流れをご紹介します。

目次

  • 1 ブロックパターンディレクトリとは
  • 2 ブロックパターンを自分で作成して、登録できるようになった
  • 3 ブロックパターンの作成方法
  • 4 将来のウェブデザイン制作フローに影響はあるか

ブロックパターンディレクトリとは

ブロックエディタが開始されたのはWordPress 5.0からなので、もう3年以上経ちました。クラシックエディタで作成していたブログ記事や固定ページ作成は、リニューアル後はブロックエディタで作成するように変更された、というケースは多いのではないでしょうか。

そして、WordPress 5.8から、ブロックパターンディレクトリが公開されました。ブロックパターンディレクトリではカラムやギャラリー、テキストやヘッダーといった、ウェブサイトでよく使われる各種ブロックパターンを検索し、そのままコピーして使えるという機能があります。

ブロックパターンディレクトリで「おすすめ」を表示した画面

現状の各ブロックパターンのカテゴリーは以下です。

  • おすすめ: WordPress.org が作成したブロック(おそらく)
  • カラム: 2カラムや3カラムでお客様の声や料金表などのよく使われるカラムブロック
  • ギャラリー: 横並びやメイソンリー、画像の上に被ってキャッチコピーを配置するといった画像配置系ブロック
  • テキスト: テキストとボタン、キャッチコピーなどテキストが主体となったブロック
  • ヘッダー: 大きな背景画像にタイトルと説明文、固定背景画像の上のテキストカラムなど、ファーストビューに利用できそうなヘッダーブロック
  • ボタン: CTAやテキストとボタンのセットなど、ボタンが主体のブロック
  • 画像: 背景画像、固定画像、カラム上での画像配置といった、各種画像ブロック

掲載されている各ブロックはコピーし、自分のWordPressに利用することができます。

コピーボタンを押すことでブロックをコピーできる
WordPressのブロックエディタにペーストした状態。これをベースに、自分好みに変更できる
コピーしたテンプレートをもとに、テキスト、画像、色などを変更してプレビューした状態

今までカラムを駆使したデザイン性の高いブロックはCSSでレイアウトされ事前に定義されていないと利用できませんでしたが、ブロックパターンディレクトリに目的に合ったブロックがあれば、それを利用して画像や変更したい箇所に手を加えれば、簡単にデザインされた要素が作成できます。しかもレスポンシブ対応。

スタイリング情報はCSSで定義されていますが、CSSはHTMLタグのstyle属性として設定されているため、頻繁に使用するとHTML内にデザイン情報が多く書き込まれることになります。

もちろん細かいところまでこだわりたい場合はより細かい調整が必要だったり、よく使うブロックであれば事前に定義しておいた方が使いやすいしデザインが自由、といったこともありますので、用途に合わせて使うのが賢い使い方にはなります。

一番伝えたいのは、ブロックパターンディレクトリの登場によって、今まで課題があったレイアウト制作がより簡単に作成できるようになったというメリットです。

ブロックパターンを自分で作成して、登録できるようになった

今回の WordPress.com からのニュースは、ブロックパターンディレクトリに自分でブロックパターンを作成し、登録できるようになりましたという案内です。

Get Creative with the All-New Pattern Creator – WordPress News

ブロックを作成、編集してブロックパターンディレクトリへ登録できるため、「この使いやすいブロックをみんなに使ってほしい」「このブロックは他の人にも役立つのでは」といったようにより良いブロックパターンが増えていくことが考えられます。

実際に、各ブロックパターンを最新順にソートすると、 WordPress.org 公式のブロックの上に各個人や法人と思われるアカウントがすでに登録しています。

最新順に並べた画面。各アカウントが登録した最新のブロックパターンが並んでいる

ブロックパターンの作成方法

今回は登録はしませんが、簡単なブロックパターンを作ってみます。

ブロックパターンディレクトリにアクセスし、 「新規パターンを追加」をクリックします。

「新規パターンを追加」をクリック

WordPress.org アカウントでログインします。アカウントがない場合は新規作成します。

WordPress.org アカウントでログイン

ブロックパターンの作成画面に遷移します。まずはウェルカムメッセージが表示されました。

ブロックエディタと同じなのでWordPressを使い慣れていれば特に難しくはないはず

利用する画像はライセンスフリーの画像が利用できるため、ライセンスを気にしなくていいのは気楽でいいですね。

ライセンスフリー画像が利用できると記載有り

作成できたら、カテゴリーを選んで世界中に公開します。ディレクトリに登録されたパターンはどのWordPressサイトにも利用できます。

登録後に規約違反していないかなど確認はされるのだろうか?

サンプルとして、見出しと画像のシンプルなパターンを作成しました。ブロックパターン名も入力します。ブロックエディタを使ったことがあれば、全く一緒の挙動なので簡単に作成できました。今回はテストなので登録せず下書き保存します。

画像はライセンスフリーの画像を利用してみた

このように自分が作成したパターンを管理する画面もあります。

将来のウェブデザイン制作フローに影響はあるか

このように、非常に簡単にブロックパターンを登録できました。今後登録されるブロックパターンが増えていくことが予想されます。

WordPressサイトを制作するフローとして、先にデザインを固めてからWordPressを構築する、といった場合、ブロックパターンに公開されている各種ブロックを利用した方が運用メリットが大きい、というケースも出てくると思います。

その場合は、ウェブデザイン制作時にブロックパターンディレクトリに公開されているこのパターンを組み合わせて利用する、という定義が組み込まれるかもしれません。

ただ、先程も書いた通りCSSはHTMLのstyle属性に書き込まれるため、パフォーマンスを重視するようなサイトでは利用しない方がメリットがあるということも考えられます。そういった場合は独自のブロックを定義しておくのが今の所の最適解といえます。

いずれにしても、今回発表されたブロックパターンディレクトリの新機能、どのような発展をしていくか楽しみです。

メールコンサルティング
WordPress保守管理サービス

Filed Under: WordPress 関連タグ:Gutenberg

池田祐太郎

WordPressの導入を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在はWordPressの保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

この記事と関連する記事

WordPress 5.9から始まるフルサイト編集はサイト制作のワークフローを大きく変える可能性
2021年12月10日
タグ: Gutenberg, WordPressテーマ, フルサイト編集
カテゴリー: WordPress
Gutenberg開始に備えて旧エディターを利用する設定を行う
2018年8月3日
タグ: Gutenberg
カテゴリー: WordPress
WordPress のクロスサイト・スクリプティング被害にあった事例を共有します
2023年1月11日
タグ: セキュリティ, 保守管理
カテゴリー: WordPress

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  4. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  5. WordPress において PHP 8.1 に更新していいかどうか検証
  6. [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  • WordPress のクロスサイト・スクリプティング被害にあった事例を共有します
  • メール作業の生産性を向上させる最低限覚えておくべき Gmail のショートカットキー
  • タブ固定とタブ一発アクセスのショートカットキーの組み合わせでブラウザ作業の生産性を向上
  • メールフォームプラグイン MW WP Form を使いながら WP Rocket を使う場合にエラー回避する設定

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS ssh SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウド クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 改ざん 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.