【WordPress】Gutenberg Componentsを使ってプラグインの設定画面を作る - Qiita
はじめに WordPressプラグインを開発する時に、機能問わず設定ページを作成するケースは多いと思います。 一般的には、add_options_pageフックなどで管理画面に独自ページを追加し、第5引数に指定したコールバック関数内でコンテンツを生成する手法がとられます。 管理メニューの追加 - WordPress Codex 日本語版 今回、カスタムブロック開発にあたって管理画面もReact（Gutenberg Components）で構築してみた所、思っていたよりシンプルに開発できたため、開発の中で得られた知見を、サンプルプラグインを開発するチュートリアル形式で紹介したいと思います。 なぜReactなのか カスタムブロック開発でもないのに、なぜわざわざReactを設定画面に導入するのか、開発の中で感じられたメリットを挙げてみます。 コンテンツ部分をComponentとして切りだせる 従
WordPress 6.0 をチェックしています
WordPress6.0 RC1 が 公開されました。 WordPress6.0 は 2022年5月24日に リリースされる予定なので いろいろチェックをしています。 その中の WordPress6.0 で気がついたところを取り上げていきます。 これから追加・変更があるかもですので、説明や画像等がリリース時と違う場合もありますが随時チェックしていく予定です。 リリースまでのスケジュールは WordPress 6.0 Development Cycle に載っています。 WordPress 6.0 Beta1 https://wordpress.org/news/2022/04/wordpress-6-0-beta-1/ WordPress 6.0 Beta2 https://wordpress.org/news/2022/04/wordpress-6-0-beta-2/ WordPress
WordPress：Gutenbergのデフォルトブロックを非表示にする方法（Ver 5.8対応） - NxWorld
以前Gutenbergのデフォルトブロックを非表示にする方法について紹介したことがありますが、その後バージョンアップによってフック変更（allowed_block_types() → allowed_block_types_all()）・新ブロック追加・ブロックスラッグの変更・方法によっては一部ブロックの表示制御ができなくなるなど何かと変更がありました。 新ブロックや埋め込みブロック関連などまだ内容を把握しきれてなかったり不明点も多いんですが、現状の最新版であるVer 5.8対応版の備忘録として分かる範囲で再度まとめました。 はじめに 以下では必要ブロックを指定するホワイトリスト形式と逆に不要ブロックを指定するブラックリスト形式の2パターンを紹介しており、それぞれをPHPのみで実装する方法とJavaScriptも用いて実装する方法とで同じく2パターン紹介しています。 ただ、以前は可能だった
3月末にリリース予定のWordPress 5.4に関する情報とともに、Block Based Theme（フルサイトエディタ）の話もよく見かけるようになってきたので、ちょっと試してみました。 Block Based Themeはこれまでのテーマとは異なり、サイト全体をGutenbergのブロックを使って構築してしまおうという考えのもと、新しいテーマの構造として検討が始まったものです。 テーマの構造や作り方に関しては、 以下のページが参考になります。 https://developer.wordpress.org/block-editor/developers/themes/block-based-themes/ 簡単にまとめると、 style.css これまでと変わることはありません。functions.php 基本的には、これまで通りです。今回は、Gutenbergの機能設定とstyle
システム開発課の今門です。 前回はWordPressの新しいエディタ、ブロックエディタとはどんなものなのかを紹介しました。 今回はブロックエディタのチューニングについて話します。 現在、WordPressのコア開発の中心はブロックエディタになっています。アップデートがあるたびに、ブロックエディタの新しい機能が追加され、ブロックの数も増えています。 高機能・多機能になるのはもちろん喜ばしいことですが、管理画面のUIも複雑になり、一部の機能しか使わないような場合には、操作性はすこぶる悪くなってしまいます。必要なもののみを取り入れ、不必要なものを表示しないようにチューニングすることで、操作性は格段に向上します。 そのためのTipsをいくつかご紹介します。 [Tips 1] 特定の投稿タイプのみ、ブロックエディタを有効にする [Tips 2] 必要なブロックのみを表示する [Tips 3] ブロッ
作成した再利用ブロックをまとめて確認したいときなどに見る再利用ブロック一覧へ容易にアクセスできるようにする方法です。 テーマやブロックなどの開発中で頻繁に確認するようなときは地味に便利だと思います。 メニューに追加する イメージのように「投稿」メニューの上に新たに「再利用ブロック」というメニューを追加し、クリックで再利用ブロック一覧ページに遷移するようにします。 実装にはfunctions.phpへ下記を記述し、名称を変えたい場合は第2引数、アイコンを変えたい場合は第6引数を任意のものに変更してください。 また、表示位置を変更したい場合はサンプルコード内で4としている部分を任意の数値に変更してください。 add_action( 'admin_menu', 'add_wp_block_menu' ); function add_wp_block_menu() { add_menu_page(
【PDF無料】2023年最新：WordPress6.2マニュアル（グーテンベルグGutenberg版） ／ THE MANUAL｜浅見 ゆたか
※2023年8月追記 WordPress6.2の仕様に合わせたマニュアル（ver1.3）をアップしました。（6.2版を作ってる最中に6.3がリリースされちゃったので、一つ前のバージョンでごめんなさい） 埼玉県の横瀬町という小さな町で、Web制作を中心としたクリエイティブを手掛ける合同会社 浅見制作所の浅見（@azamixx821）と申します。 弊社の制作実績もまとめています、よろしければぜひチェックしてみてください！ 普段制作させていただいているWebサイト案件では、主にWordPressを利用しているのですが、クライアント様にマニュアルを要望いただくことが少なくありません。 しかしながら、Web記事では使い方やマニュアルが存在するのですが、意外とこのWeb記事を見て使ってみてくださいとご案内しても、印刷できるマニュアルを求められることが多く… この度、WordPressのデフォルト機能を
WordPress Gutenbergブロック開発 | ARCHETYP BLOG | Webビジネスに関するUI/UXデザイン｜株式会社アーキタイプ｜ARCHETYP Inc.
こんにちは！3児のパパエンジニアの笹垣です。弊社では、WordPressをベースにしたサイト制作についてもよくご相談をいただくのですが、今回はWordPressバージョン5から導入された「Gutenberg」のカスタムブロック開発について備忘録も兼ねてご紹介します。 はじめに WordPressバージョン5が正式リリースされてから4か月。 最新機種の登場はもちろん、Mac OSやiOSのバージョンアップが大好物な自分にとって、WordPress v5リリース時はそこそこ興奮したのを覚えています。 WordPress 5.0 “ベボ” v4以前のWysiwygエディター（Classic Editor）は“ブログ”という側面が強く、エディターのツールバーと改行を駆使して記事を書く形で、行間の調整に苦労したり編集者ごとのトンマナの統一が難しく、案件によってはカスタムフィールドを複数作成して回避す
WordPress 5.4 をチェックしています
WordPress5.4 RC1 が 公開されました。 WordPress5.4は 2020年3月31日に リリースされる予定なので いろいろチェックをしています。 その中で WordPress5.4で気がついたところを取り上げていきます。 これから追加・変更があるかもですので、説明や画像等がリリース時と違う場合もありますが随時チェックしていく予定です。 リリースまでのスケジュールは WordPress 5.4 Development Cycle に載っています。 WordPress 5.4 Beta 1 https://wordpress.org/news/2020/02/wordpress-5-4-beta-1/ WordPress 5.4 Beta 2 https://wordpress.org/news/2020/02/wordpress-5-4-beta-2/ WordPress
Gutenberg導入以前からカスタムフィールド製造業界では「入稿の制限」を目的としてACFなどが活用されてきた。多くの場合、レイアウト上の工夫や入稿フローの固定化（e.g. ライターへの説明を省く）が目的なのだが、似たようなことはブロックエディターでも活用できる。 ただ、「ブロックを作るのが大変」という人も多いと思われるので、今回は既存のブロックを組み合わせただけのブロックの作り方を紹介しよう。以前紹介したブロックの入れ子をもっとカジュアルにしたやり方である。 たとえば、下記の様なレイアウトを想定する。 画像は人気テーマOceanWPのデモから。 これはよく見るブロックで、基本的な構成要素は以下の3つ。 画像（アイコン）見出しテキスト（段落） いずれもコアブロックとして含まれているものなので、三つ組み合わせれば完成だ。このためには InnerBlocks のテンプレート機能を利用すること
はじめに WordPress 5.0からGutenbergと呼ばれるブロックエディターがデフォルトのエディターとして採用されました。 そのため、今後はこのブロックエディターによる開発が増えてくると思われます。 個人的には、今までのWysiWygエディターに不満を感じていたわけではありませんが、ブロックエディターという選択肢が増えたことで、できる事の幅が増えてくる と思います。 本記事では、このブロックエディターの新規ブロック（以降、カスタムブロック）の作り方を記載して行きます。 ブロックエディターとは？ ブロックエディターは、名前の通り、HTMLをブロックように積み上げてHTMLを作成していくエディターです。 詳細は、以下を参照ください。 ブロックエディターの特徴の1つとして、上記リンク先のページにも記載がありますが、 実際のサイトと同様に表示されるエディター。 であることです。 これから
Block Pattern Directory
Patterns Add a beautiful, ready-to-go layout to any WordPress site with a simple copy/paste.
Gutenbergとは単にブロックエディターに留まるのみではなくて、Webサイトの編集体験を完全に作り替えるプロジェクトであるということはこれまでもWordPressコアチームから主張されてきた。現在のブロックエディターはそのフェイズ1ということだ。 フェイズ2は「サイト全体のブロック化」ということが言われていてのだが、具体的にそれをどう実現するのかについて草案が公開された。ドキュメントはGithubに公開されている。 ざっとまとめると次の通り。 テンプレートファイルがHTMLになっており、それが多くのテーマ製作者に衝撃を与えている。Gutenbergプラグインの設定から設定をオンすることで”Full Site Editing”機能がオンになるようだ。テンプレートの登録などはおそらくPHPから行う（これはブートスラップファイルがPHPである以上、当然のこと） とりわけ「テンプレートがHTM
この記事では、WordPress有料テーマ「SWELL」の感想・クチコミなどの評価を1000件以上集計・分類し、それを元にレビューしています。 Cocoon、SANGO、AFFINGER、JIN、THE THOR、STORK19、Diver、THE SONICなどとの比較口コミも掲載しています。 SWELLは、個人の初心者ブロガーにおすすめですが、企業サイト（コーポレートサイト）などのWeb制作にも使われているデザインテンプレートです。
WordPress 5.8 では FSE（Full Site Editing / フルサイト編集）関連の機能がいろいろと導入されています。 どの機能を試してみるにも CSS が深くかかわってくるため、改めて、テーマの種類ごとにエディタとフロントに適用されるCSSの構成を確認してみました。 ※確認には WordPress 5.8 RC1 を使っています。 テーマの種類 - ブロックテーマとクラシックテーマ まず、現在のWordPressのテーマは、 FSEに対応した「ブロックテーマ」と、FSEに対応していない「クラシックテーマ」 に分類されます。 クラシックテーマは PHP で作成された従来型のテーマのことで、『WordPressレッスンブック 5.x対応版』や『グーテンベルク時代のWordPressノート』で作っているテーマもこちらになります。 そして、クラシックテーマであっても、Word
「再利用ブロック」を活用してみよう
以下は、Chloe Bringmanna が書いた WordPress.org 公式ブログの記事「Did You Know About Reusable Blocks?」を訳したものです。 誤字脱字誤訳などありましたらフォーラムまでお知らせください。 このチュートリアルは Joen Asmussen @joen が作成しました。 WordPress のブロックエディター (別名 Gutenberg) には「再利用ブロック」という機能があります。後で使うために保存され、一箇所で編集できるブロックです。 こんなことをしたいと思ったことはありませんか ? 投稿やページをまたいで同じスニペット (断片) を再利用すること。複雑なレイアウトを保存して、1つの投稿から別の投稿にコピー & ペーストする手間を省くこと。 再利用ブロックは、これらのことを可能にします。 つまり、テンプレートみたいなもの ?
投稿エディタで Gutenberg を使用している場合に、新規投稿時、任意のブロックをデフォルトで配置しておくことができます。 デザイン上、指定のタグやクラス付きのタグを最初に入力してほしい場合に便利な設定です。 hタグの見出しブロックやpタグの段落ブロックを入れておく 見出しや段落ブロックを入れるには以下のようなコードを functions.php へ記入します。 function my_post_template() { $post_obj = get_post_type_object( 'post' ); // get_post_type_object( 'post' ) → の部分で、設定をしたい投稿タイプのスラッグを記入 $post_obj->template = [ // h2タグを入れる [ 'core/heading', [ 'className' => 'myclass'
![[WordPress] Gutenberg で新規投稿時に任意のブロックを入れておく方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/181ffc12dcbbed83caf2b35fc174ecae0cfc8e32/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2020%2F04%2Fcap01.png)
こんにちは。koyaです。 テレワークを機に自宅を引っ越しました。 自宅にいる時間が長くなると広い部屋が欲しくなりますよね。通勤時間を気にしなくていいので物件探しも幅が広くてよかったです。 OculusQuestやSwitchを所持していても狭い部屋だとやれることが限られていたのでとても快適です。 今回はWordPress5.5で追加された「ブロックパターン」を使う上で外せないと思っているプラグインの紹介をします。 そもそも「ブロックパターン」とは？ カスタムフィールドで言う繰り返しフィールドのようなもので、事前に設定した複数のブロックを一括で呼び出すことができます。 似たようなページを複数作る際に、同じブロックを何度も組む必要性が無くなるので非常に便利です。 ブロックパターンのオススメプラグイン Custom Block Patterns こちらのプラグインを使用することで、記事作成と同
Gutenbergを利用している投稿タイプでの新規追加時に予め任意のブロックを挿入しておく方法で、毎回決まった文章やレイアウトを使うときに便利です。 February 01, 2021 追記 'core/heading'の'level'指定の記述方法が誤っていたので修正しました。 みぞれ（@xxmiz0rexx）さん、ご指摘ありがとうございます。 特定の投稿タイプにブロック挿入する クラシックエディタで同じように予めコンテンツを挿入したい場合は「投稿エディタに予めテキストなどを挿入しておく」で紹介している方法などで可能ですが、Gutenbergではこの方法だとクラシックブロックを利用した形で挿入されます。 これをGutenbergらしくそれぞれブロックとして挿入したい場合は、functions.phpへ下記のように記述することで実装でき、下記サンプルコードの場合は「投稿」に見出しが2パター
作成したブロックがデフォルトカテゴリのいずれにも当てはまらないときやオリジナルブロックを複数作成していてデフォルトとは異なるのをハッキリ区別したいときに使えます。 ブロックカテゴリを追加する 実装にはblock_categories()を用いてfunctions.phpへ下記のように記述します。 'icon'の部分を指定するとカテゴリ名の横にアイコンが表示され、「Dashicons」のアイコンならスラッグを記述するだけで表示させることができます。 また、作成したブロックカテゴリはブロックがひとつも属していない場合はカテゴリが表示されないので、併せて属したいブロックのカテゴリ指定も作成するブロックカテゴリのスラッグ名（このサンプルコードの場合はexample-category）にしておきます。 add_filter( 'block_categories', 'add_block_catego
WordPress 5.9の新機能─フルサイト編集、グローバルスタイル、ブロック、パターン、API、UI強化など WordPress 5.9は当初2021年12月14日にリリースされる予定でした。未解決の問題がいくつか残っているため、最終リリース日程は遅れており、現在のリリース予定は2022年1月25日となっています。 WordPress 5.9は「何が違うのか」を一言で言うと、フルサイト編集（FSE）です。 そして、WordPress 5.9の機能の大半はフルサイト編集に対応したテーマでないと利用できません。その一例が、最新のデフォルトテーマである「Twenty Twenty-Two」です。 新しいWordPressデフォルトテーマ「Twenty Twenty-Two」のプレビュー（画像引用元: WordPress.org) WordPress 5.9では、Gutenbergのロードマッ
今回はWordPressのGutenbergで編集画面と実際の表示画面を同じ見た目にする設定方法について説明します。 説明する環境は以下 macOS Catalina v10.15.5Visual Studio Code v1.46.1wordpress v5.8.0 Gutenbergの編集画面と表示画面を同じ見え方にする設定方法 WordPressのGutenbergではブロックエディタが使われており、独自のテーマを作った場合、編集画面と実際の表示画面は同じ見え方になっていません。 同じ見た目にするためには、編集画面用のstyleシートを作成して読み込ませる必要があります。 編集画面用のstyleシートを作成する まずはブロックエディタ編集画面用のstyleシートを作成します。home.phpやsingle.phpと同じ階層に【block-style】の名前でフォルダを作成して、その中
1月25日にWordPress 5.9がリリースされた。フルサイト編集（FSE）が搭載された新バージョンはFSE対応の「ブロックテーマ」Twenty Twenty-Twoを同梱しており、まったく新しい編集体験を提供している。対応テーマも開発のための情報もまだまだ少ないが、今後はホスティング事業者やサービス事業者を中心にフルサイト編集に力を入れるプレイヤーが増えてくることだろう。 フルサイト編集という、Gutenberg プロジェクトの悲願であるPhase 2がリリースされたわけだが、今年は6.0（5月終わり）と6.1（10月半）のリリースが予定されている。これらのロードマップはどうなっているだろう。 先日投稿されたmakeブログの”Preliminary Roadmap for 6.0 (Gutenberg Phase 2)“によると、ブロック、エディター、パターン、レイアウト、デザインに
WordPress 5.3 をチェックしています
WordPress5.3 beta が 公開されました。 WordPress5.3は 2019年11月12日に リリースされる予定なので いろいろチェックをしています。 その中で WordPress5.3で気がついたところを取り上げていきます。 これから追加・変更があるかもですので、説明や画像等がリリース時と違う場合もありますが随時チェックしていく予定です。 リリースまでのスケジュールは WordPress 5.3 Development Cycle に載っています。 WordPress 5.3 Beta 1 https://wordpress.org/news/2019/09/wordpress-5-3-beta-1/ WordPress 5.3 Beta 2 https://wordpress.org/news/2019/09/wordpress-5-3-beta-2/ WordPre
WordPress：Gutenbergでデフォルト表示されているブロックをブラックリスト形式で非表示にする方法 - NxWorld
July 24, 2021 追記 バージョンアップによってフック変更・新ブロック追加・ブロックスラッグの変更などあったために、ここで紹介している内容をそのまま利用できない部分があります。 Ver 5.8以降でのブロック表示制御については、「WordPress：Gutenbergのデフォルトブロックを非表示にする方法（Ver 5.8対応）」を参考にしてください。 以前このブログで紹介した「WordPress：Gutenbergでデフォルト表示されているブロックを非表示にする方法」は、使いたいブロックを指定するホワイトリスト形式でしたが、逆に使いたくないブロックを指定するブラックリスト形式でブロックを非表示にする方法です。 ホワイトリスト形式での指定はPHPを利用しましたがブラックリスト形式の場合はJavaScriptを利用し、それぞれ下記のように指定することで対象ブロックを非表示にできます。
WordPress（Gutenberg）のカテゴリーやタグをラジオボタンに変更できるプラグインを紹介するよ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
バックエンドエンジニアのハルです。 今回は、WordPressの新しい投稿エディタ「Gutenberg」カスタマイズの小ネタを。旧エディタでのカスタマイズ方法が使えなかったので、このプラグインが使いやすかったよの報告記事です。 タクソノミー（カテゴリー）は基本的に複数選択するものですが、たまにラジオボタンにしたいときがあります。 旧エディタの場合は直接jsでHTMLを変更してカスタマイズしてたりしてましたが、新しいエディタであるGutenbergからはその方法が使えず、簡単にできなくなってしまいました。 こうなったらプラグインを使ったほうが楽なので、いくつか試した結果、一番よさそうだと思ったプラグイン「Radio Buttons for Taxonomies」を使った方法をご紹介します。 サンプルのカスタム投稿とカスタムタクソノミーを用意する 練習用にカスタム投稿とカスタムタクソノミーを用
Slide for my presentation at WordCamp Osaka 2019, held on 6-7 December, 2019. WordCamp Osaka 2019 (2019年12月6-7日) 登壇スライド。 https://2019.osaka.wordcamp.org/session/things-to-be-learn-for-theme-developers/ ---- ## 概要 HTMLのマークアップとCSSと多少の JavaScript。そこに WordPress をきっかけとして PHP のスキルを少し足して、「テーマ制作」を主戦場にされている方も多いはず。しかし、ここ1〜2年で Gulp やSassを使ったモダン Web デザインワークフローはもちろんのこと、ブロックエディターの実装で JavaScript や React も学ばなければい
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
Kansai WordPress Meetup Osaka の登壇資料です。 サンプルコード：https://github.com/torounit/my-first-block
WordPress 6.3 を チェックしています
WordPress6.3 RC1 が 公開されました。 WordPress6.3 は 2023年08月08日に リリースされる予定なので いろいろチェックをしています。 その中の WordPress6.3 で気がついたところを取り上げていきます。 これから追加・変更があるかもですので、説明や画像等がリリース時と違う場合もありますが随時チェックしていく予定です。 ※この記事はブロックテーマ「Twenty Twenty-Three」でテストしています。クラシックテーマでは使えない機能もありますのでご了承ください。 リリースまでのスケジュールは WordPress 6.3 Development Cycle に載っています。 WordPress6.3 RC1 https://wordpress.org/news/2023/07/wordpress-6-3-release-candidate-1/
ブロックパターンの作り方
以下は、Beatriz Fialho が書いた WordPress.org 公式ブログの記事「So you want to make block patterns?」を訳したものです。 誤字脱字誤訳などありましたらフォーラムまでお知らせください。 テーマやプラグインなど、WordPress のブロックエディターで何かを作ったことがある人は、ブロックパターンについても聞いたことがあるかもしれません。 WordPress に同梱されているパターンを眺めていて、これについて短い記事を書くのも良いかなと思いました。パターンは知っているととても便利なショートカットなのですが、一体何なのかとか、使う場面を知らない方も多いと思います。 ブロックパターンとは パターンはあらかじめ配置されたブロックの集まりで、多様に組み合わせたり配置を変えることができるので、美しいコンテンツをもっと簡単に作れるようになりま
カラーを追加する 現時点で12種類のグラデーションカラーがデフォルトとして用意されており、そこへ任意のカラーを追加したい場合はfunctions.phpへ下記のように記述します。 add_theme_support( 'editor-gradient-presets', array( array( 'name' => __( 'Vivid cyan blue to vivid purple', 'themeLangDomain' ), 'gradient' => 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)', 'slug' => 'vivid-cyan-blue-to-vivid-purple', ), array( 'name' => __( 'Light green cyan to vivid g
概要 みなさんこんにちはcandleです。今回は最近メジャーバージョンアップグレードがあったwordpressのgutebergでmarkdownがかけるよという話をします。 主題の通りなのですが、これまでwordpressはmarkdownを書くならプラグインのJP MarkdownやMarkdown EditorやWP-Markdownなどのを使って書く必要がありました。しかしOSSであるがためにやはり更新が遅かったり他のプラグインと干渉してエラーが出たりしました。もちろんgutenbergもまだ十分に問題なく使えるわけではありませんが、標準で導入されたのは大きいと思います。 早速使ってみましょう。 前提 wordpressのバージョンが5.0.0以上である gutenbergのmarkdownを使う wordpressの管理画面から「記事一覧」 から「新規追加」ボタンを押します。 最
Gutenberg ブロックエディターの機能を拡張してブログの書きやすさを爆上げするプラグイン Snow Monkey Editor をリリースしました！
Snow Monkey Editor の主な機能 ブロックツールバーの機能拡張 部分文字列の文字色・背景色・文字サイズ変更・蛍光ペン、テキストバッジ、書式クリアボタン コアブロックにいくつかのブロックスタイルを追加 各ブロックにブラウザサイズによる非表示機能を追加 例：スマホサイズのときだけ非表示 各ブロックにロールによる非表示機能を追加 例：非ログインユーザー、購読者には非表示 各ブロックにロールによる編集ロック機能を追加 ブロックツールバーの機能拡張 ブロックエディターには、標準で文章の文字色や背景色、文字サイズを変更する機能があります。が、標準機能でできるのは「段落ブロック全体」の文字色・背景色、文字サイズを変更できるだけで、「一部分だけ」の文字色や背景色、文字サイズを変更することはできません。 以前一部分だけもできるようにしたいという issue を Gutenberg のリポジト
COVID-19によってWordCamp Asia 2020が中止された頃は「ちょっと大げさだったんじゃないの？」と思ったものだが、まさかWHOによってパンデミックと宣言されるまでになるとは思いもよらず、自宅勤務を余儀なくされる毎日である。 さて、今回は「アイキャッチ画像の設定パネルに説明文を追加する」という非常によくありそうなTipsを紹介する。 WordPressに慣れ親しんでいると忘れがちだが、「アイキャッチ画像」というのはあまり一般的な用語ではない。「外連味けれんみのない記事」というぐらい一般的ではない。また、テーマ次第では必ずしも投稿のシングルページに表示されるとは限らないので、次のような要望はよく上がるだろう。 「アイキャッチ画像」を「ヘッダー画像」や「カバー画像」に変えたい。どこに表示されるかについての説明文を追加したい（例・この画像は記事一覧ページと個別記事ページに表示され
エンジニアの酒井です。突然ですが、みなさんはWordPressの「再利用ブロック」をご存知でしょうか？WordPressでページを編集していると、中の文章や画像だけ変えて同じパーツを使いまわしたい場面って、よくありますよね。そんなときに活躍するのがこの「再利用ブロック」という機能です。 この「再利用ブロック」という機能を利用すると、あるページで一度作成したパーツをテンプレートとして登録し、それを他のページで呼び出して繰り返し利用できるようになります。 この記事では、以下のような「吹き出し」の作成を例に、再利用ブロックの使い方を説明していきます。 再利用ブロックの登録は以下の流れで行っていきます。 1. デフォルトのブロックを組み合わせる まずはレイアウトを組みます。吹き出しの完成形を見てみると左右にカラムが分かれているので、カラムの「50 / 50」を追加します。 すると、左右のカラムごと
WordPress スライダーを表示するブロックの作成 WordPress のブロックエディタ Gutenberg でスライダーのプラグイン Swiper を使ってスライダーを表示するカスタムブロックの作り方についての覚書です。 以下は(旧)ブロックの作成 チュートリアル（削除予定）などの古い情報を参考にしているため部分的に古い情報になっています。 ブロックの基本的な作成方法や環境の構築方法については以下を御覧ください。 関連ページ カスタムブロック MediaUpload で複数の画像を挿入 スライダーでアイキャッチ画像を表示するブロックを作成 Gutenberg ブロックの作成（JSX を使用しない場合） Gutenberg ブロック開発の環境構築 JSX を使った Gutenberg ブロックの作り方 ダイナミックブロックの作り方 カスタムカードブロックの作り方 Code-Prett
Extending Gutenberg Core Blocks with Custom Attributes and Controls - Jeffrey Carandang
Extending Gutenberg Core Blocks with Custom Attributes and Controls Extensibility is one of WordPress features that I love the most. From custom filters to actions, now they are applying the same thing with the new Gutenberg Editor. It’s pretty great but aside from the WordPress handbook, there are only few tutorials available for Gutenberg development as of the moment. This is the main reason I’v
WordPress ブロックエディター（Gutenberg）のコアブロック一覧です。 設定できる項目もリストしています。※WordPress 5.3 時点。 一般ブロック（common） 名前 配置揃え 幅広/全幅 色設定 HTML アンカー
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressのBlock Based Themeを試してみて思うこと | エビスコム - EBISUCOM
WordPressのブロックエディタのチューニング - シナプス技術者ブログ
WordPress：管理画面にGutenbergの再利用ブロック一覧へのリンクを追加する方法
既存ブロックを活用したInnerBlocksテンプレートの紹介 – Capital P – WordPressメディア
【WordPress】カスタムブロックの作り方を書いてみた - Qiita
Full Site Editing 完全編集可能テーマの草案が公開 – Capital P – WordPressメディア
【口コミ1000件】SWELL評判・比較レビュー【デメリット10・メリット10】 | マニュオン
WordPress 5.8 と theme.json と CSS | エビスコム - EBISUCOM
[WordPress] Gutenberg で新規投稿時に任意のブロックを入れておく方法
【WordPress】ブロックパターンおすすめのプラグイン | バシャログ。
WordPress：Gutenbergで新規追加時に予めブロックを挿入しておく方法 | NxWorld
WordPress：Gutenbergにオリジナルのブロックカテゴリを追加する方法 - NxWorld
WordPress 5.9の新機能─フルサイト編集、グローバルスタイル、ブロック、パターン、API、UI強化など
【WordPress5.0～, GutenbergでもOK】公開済みの記事を修正し、レビュー待ちにする
【Gutenberg】ブロックエディタの編集画面と、実際の表示画面を同じ見た目にする設定方法
WordPress 5.9 がリリース、6.0はどうなる？ – Capital P – WordPressメディア
Gutenberg 以降のテーマ作成に向けて、今学ぶべきこと
【WordPress】「Ultimate Addons for Gutenberg」で簡単にテーマをカスタマイズ！ | バシャログ。
WordPress：Gutenbergでグラデーション設定部分をカスタマイズする方法 - NxWorld
wordpress gutenbergはmarkdown書けるよという話 – joppot
ブロックエディターでアイキャッチ画像パネルに説明文を追加する – Capital P – WordPressメディア
WordPressのページ編集をより効率化できる「再利用ブロック機能」を知ってますか？ | knowledge / baigie
WordPress Gutenberg スライダーを表示するブロックの作り方
WordPress ブロックエディター（Gutenberg）ブロック一覧表 - Qiita