WordPressの新エディターGutenbergでカスタムブロックを作成する[初級編]
Posted: 2018.08.29 / Category: WordPress / Tag: Gutenberg WordPress5.0でデフォルトになる予定の新エディター「Gutenberg」。 ブロックを組み合わせてページを作成できることが特徴となっていますが、このブロックをオリジナルで作成してみたいと思います。 Gutenbergブロックの開発環境の構築 Create Guten Blockという開発ツールキットを使用するとモダンな開発環境が簡単に構築できます。 よかったらこちらの記事もご覧ください。 Create Guten BlockでGutenbergのカスタムブロック開発環境を構築する 一番シンプルなカスタムブロック Create Guten Blockで作成したプラグインのディレクトリは下記のようになっています。 ├── package.json ├── README.
![WordPressの新エディターGutenbergでカスタムブロックを作成する[初級編]](https://cdn-ak-scissors.b.st-hatena.com/image/square/013059453a5603974ecefa934615f2b4692ff33a/height=288;version=1;width=512/https%3A%2F%2Fwww.webopixel.net%2Fblog%2Fwp-content%2Fuploads%2F2015%2F04%2Fwp-logo.png){kind=tracking}
WordPressの新エディタ「Guternberg」でカスタムブロックを追加する方法（基礎編） | WEMO
WordPress5から搭載された新エディタ「Guternberg」で採用されている「ブロック」という概念。 正直まだ慣れないことの方が多いですが、使いこなせるとかなーり便利だと思います。 というのも、標準で用意されているブロックだけでなく、好きなフォーマットでブロックを追加することができるんです。 そんな「カスタムブロック」の追加方法について、今回はまとめていこうと思います。 これからは投稿ページだけでなく、ウィジェット機能などもこの「ブロック」に置き換わっていくようですし、今のうちにカスタマイズ方法に慣れておきましょう！ 参考になる教材 僕がカスタムブロックの追加方法について学ぶ際にお世話になった教材をまずは紹介しておこうと思います。 まず何より、公式ページです。 Gutenberg Handbook : TutorialsGutenberg Handbook : Block Regi
WordpressのGutenbergでできるカスタマイズ・開発に役立つことをまとめてみる - Qiita
Wordpress5.0リリースから標準エディターとなったGutenergのカスタマイズが結構充実しているので自分が主に使っているもの、使う予定のものをメモ。 随時追加していく予定です。 開発環境 Wordpress 5.0 create-guten-block 1.13.0 npm 6.4.1 node 10.13.0 ブロックのカスタマイズをする場合、create-guten-blockを使うとほとんど設定を行う必要なく開発ができます。 実装方法などこちらでまとめてます。 ブロックのカスタマイズ 独自のブロック要素の追加や既存のブロックのカスタマイズについて。 ブロックの追加 registerBlockType関数で独自のブロック要素を登録します。 registerBlockTypeの第一引数にブロック要素の名前を入れるのですが、「名前空間/ブロック名」という形式で指定する必要がありま
Before Gutenberg – テーマをGutenbergに対応させる – Capital P – WordPressメディア
Gutenbergに対応したテーマを利用している場合は特に困らないが、WordPress 5.0でカスタムテーマを使っていた場合、対応が必要になる。今回はその指針およびリソースを紹介しよう。 新たに追加された様々なブロックに対応 Gutenbergから追加されたブロックは最低限のスタイルが当たっているのだが、リンクなどはコンフリクトを起こすことがある。たとえば、「ファイル」というブロックを挿入した場合、筆者が自分のブログで利用しているオリジナルテーマ”Kyom”では、次のように変な感じになってしまった。 「ダウンロード」リンクが見えない。 このCSS自体を修正することはそれほど手間ではないが、こういう「いままで想定していなかったデフォルトスタイル」が結構たくさんある。プルクオート、区切り線、ボタン、カバー画像…… これらに対応する場合、まとめてやるためにはGutenberg Block U
テーマ を Gutenberg に対応させる時、最低限やっておく事 – ねんでぶろぐ
WordPress5.0では新しいエディタ「ブロックエディタ」が搭載されます。 公開画面では「ブロックエディタ」で入力したコンテンツはテーマ側が対応していなくても だいたい表示するようになっています。 【ブロックエディタ 公開画面】 管理画面(編集画面)では、テーマ のデザイン(公開画面) と同じデザインで編集できるようにする事で ユーザーは簡単にイメージ通りのコンテンツを作成する事ができます。 しかし デフォルト(ブロックエディタ非対応テーマ) では 管理画面(編集画面)では テーマのデザイン(公開画面)と だいぶん違う状態になっていますので それぞれテーマ側で対応しなくてはなりません。 【ブロックエディタ 編集画面(非対応)】 ※基本表示幅は 580px になっています。「Gutenberg を試してみよう」画像が大きいのは「幅広」設定になっているためです。 【ブロックエディタ 編集画
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
