Wordpress

WordPressエディタGutenberg(グーテンベルク)エディタの便利な使い方

10分ほどの動画説明

Youtube

Gutenbergのすごいとこ

再利用可能

今まで人力のコピー・アンド・ペーストで管理していた”おすすめ記事”や”アドセンスコード”,”値段表”などを一括で管理でき、ブログ,サイト運営が劇的に便利になります。

自由度

ブロック単位で開発ができ、そのブロック自体を文章中に挿入できるため、文章中にどんなことでもできるようになります。

例えば今までは文章中にセリフなどを入れる場合はショートコードを多用し、見にくい管理画面が、表画面とほぼ変わらない状態で編集できたりします。(こちらの動画の最後のほうでセリフブロックの編集画面がでてきます)

比較的簡単にブロックを作れる

ある程度熟練したエンジニアなら簡単に gutenberg 用のブロックは作れるようになっております

エンジニアはこちらの記事を是非ちぇけら

再利用ブロック

再利用可能なブロックです

使う場面は主に値段表メンバー表アドセンスコードなどで使用されると想定されます

どんなブロックでもグループでも再利用ブロックに登録できます。

使い方

再利用ブロックに変換
再利用ブロックに変換
再利用ブロックの編集
再利用ブロックの編集

作り方

再利用ブロックにしたい”ブロック”または”複数選択したブロック”の[詳細設定ボタン]を押し、タイトルを決めて保存するだけです

挿入の仕方

普通のブロックとして追加できます

編集の仕方

再利用ブロックを編集する際は、再利用ブロックを選択して編集を押すだけで、その再利用ブロックを使用されているページすべてが書き換わります。

応用: よく使う形式を再利用ブロックとして登録しておく

よく使う形式を再利用ブロックとして登録しておけば、[通常のブロックへ変換]機能を使い同じ使い回しも可能です。

知っておきたい便利機能

MarkDown記法

Gutenbergは基本的にMD記法を取り入れています。ですので文章の初めに”- “と入れればリストになります。

グーテンベルクで使えるMD記法ショートカット
  • “- “: 通常リスト
  • “1. “: 数字リスト
  • “> “: 引用
  • “## “: タイトル
  • `←これを3個: コード

その他

  • 複数選択した状態でも並び替えできます。
  • 最近使用したブロックは[Tab]ボタンで3つまで表示され、選択できます

入れておきたいプラグイン

Bootstrapが入っているテーマならBootstrap Blockをめちゃめちゃオススメします。

あとは~、エンジニアなのでいらないかな

残念な点

  • MD記法ショートカットはかなり便利なんですが、タイトルが##を複数回押す必要があり、ちょっと面倒
  • tableが弱い為,HTMLかクラシックエディタで対応する必要がある
  • まだまだ開発スピードが早くすぐに置いてかれそうになる

最後に

クラシックエディタに慣れているだけでGutenbergの方が優れている

実はクラシックエディターに慣れているだけでグーテンベルグの方がいろいろと優れている点があります。
それを今回は一つ一つ紹介していきたいと思います

それぐらいですかね。

コーディング代行

高品質なソースコードをお約束

詳しくはこちら
背景イメージ
背景はFreepikによるデザイン

information

お問い合わせ