Gutenberg【再利用ブロック】の使い方(超便利!AddQuicktagの代打以上としても使える)

Pocket

2019.10.23⇅

ワードプレス新エディタ【 Gutenberg(グーテンベルグ)】では使えないプラグインがあり、まだまだ直感的にあれそれするには不便なことも多いですよね…

『AddQuicktag』は便利ですごく助かってたのですが、Gutenberg では直接は使えない。。。。。。

んが、

【Gutenberg】には、『再利用ブロック』というのが存在します。

この、『再利用ブロック』超便利です。

今回はその、

◆Gutenberg『再利用ブロック』の使い方

について。

ワープレ5.0 新エディタ再利用ブロック_

〜〜項目〜〜〜〜〜〜〜〜

❤︎0、再利用ブロックの優れてる点(特徴)


❤︎1、Gutenberg『再利用ブロック』の使い方

1-1、再利用ブロック追加(保存)の仕方

1-2、再利用ブロックの再利用の仕方

1-3、AddQuicktagの代打としても使える


❤︎2、再利用ブロックの管理

2-1、一括編集

2-2、再利用ブロックの『インポート・エクスポート』

〜〜〜〜〜〜〜〜〜〜〜

スポンサーリンク

❤︎0、再利用ブロックの優れてる点(特徴)

優れてる点・特徴は、

  • ブロック単位で保存でき、一回書けば再利用できる
  • エクスポート・インポートもでき、別のサイトでも使いまわせる
  • ブロックごとの内容も一括管理できる
  • 全てのタイプのブロックを保存できる
  • 呼び出してからそのブロックを『通常のブロック』に戻すこともできる

というところあたり。。。。

なので例えば何度も使うような内容は、
一度書いて保存しておけば各投稿ページ内にすぐに呼び込んで使える

テーブルでも画像でもHTMLでもスペースでも、どのブロックタイプでも再利用ブロックに追加しておけるので、定型文や、定型的な枠組みなどもパッと使い回すことができるようになる。

なので工夫次第でオートマチックに記事が書けるようにもできてしまう。。。

そしてそれを他のサイトでも使い回せるし、

また、例えば、

サイト内全体のその再利用ブロック内容を修正する必要が出てきても、再利用ブロック内で1回修正すれば全て一括で反映させることもできる

逆にその一括編集に反映させたくない場合は、呼び出してから『通常のブロックへ変換』しておけば、単体のブロックとして維持させておける

定型を保存しといて読み込んでから『通常のブロック』にすれば、そのページ(ブロック)毎にアレンジもできるってこと。
(他のページに影響なく編集することもできる)

なのでかなり便利です。

❤︎1、Gutenberg『再利用ブロック』の使い方

1-1、再利用ブロック追加(保存)の仕方

例として使いまわしたいよく使うテーブルがあったとします。

これを何度も書くのは圧倒的に無駄ですよね、なのでコピペでもいいのですが、『再利用ブロック』から、ワンタッチで読み込んだ方が楽ですよね…

手順❶
まずブロックで書く(今回は単なる例としてクラシックパラグラフでテーブル)↓

ブロックでかく

手順❷
ブロック右上のてんてんてんから、『再利用ブロックに追加』↓

再利用ブロックに追加する

手順❸
再利用ブロックに名前をつけて保存↓

再利用ブロックに名前をつけて保存

これで『再利用ブロック』に保存され、使い回すことができる。

1-2、再利用ブロックの再利用の仕方

再利用したい場合は、『再利用可能』ブロックから呼び出せる。


投稿ページ左上の各ブロックを呼び出すプラスボタンから、一番下の『再利用可能』って項目に行けるので、そこから目的の再利用したいブロックを選択するだけw↓

再利用ブロック読み込み

上の画像のように、プレビューも表示されるのでわかりやすい。

呼び込んだ再利用ブロックは、下図のように、右上に『編集タブ』があり、そこからさらに編集できる。

ただし、この状態のまま編集保存すると、再利用ブロックで保存しておいた内容もこれに沿って変更されます

この再利用ブロックを使った全部のページの内容も編集が反映される↓

再利用ブロックの編集

全てに反映させて一括編集したい場合はこれでできるってことでもある。

また、後で一括編集したい場合も簡単なんですが、それは下記の
▶︎2-1、一括編集 参照

編集を反映させたいのがこのページのみの場合、
(他に反映させず、切り離した編集がしたい場合)は、

読み込んでから『通常のブロックへ変換』させておけばOK↓

通常のブロックへ変換

1-3、AddQuicktagの代打としても使える

まんまAddQuicktagのようにはいかないところもあるけど、どのタイプのブロックも再利用ブロックに追加できるので、

例えば アドセンスコードをワンタッチで貼れる機能の代打としてなんかにも使える。

カテゴリごとの広告バナーをきっちり作って再利用できるようにし、一括管理できるようにしとくなんてこともできるってことだし、

特殊な形態のものなんかも、すぐさま引っ張り出してそのページ用にアレンジできる定型を保存しとくなんていうのにも便利。

例えばよく使うタグをHTMLブロックに書いといてそれを再利用に保存しとくとかも便利。。。

こんな感じ。↓

まずHTML編集ブロックを追加する
※ブロック追加ボタン>フォーマット>カスタムHTMLでもOK↓

ブロックHTML編集

で、書く↓

記述

今現在のグーテンベルグではテキストの部分的カラーも簡単に変更できるけど、新エディタになったばかりの当時はなかったんです。笑
(上の画像の内容が現地点ではもう頭悪そうですね 笑)

なので上記例のタグは今ではもう無意味で削除してますが、

これは応用できますよね。。。

テキストカラーを部分的にかえるやり方は下記のおまけ部分、
▶︎◆テキストカラーを部分的に変えるには?参照

より複雑でグーテンベルグでワンタッチ編集できないようなもののタグを保存しておけばいちいち記述することなくできるw。

単純なのでも用意しとくとやりやすくなったり。。。

あほらしく単純なので言えば….

例えば bタグ(文字を太く装飾するだけのタグ)……

いや、Bタグあるんですけど、storongタグになっちゃうじゃないですか 笑

ま、この場合は再利用に保存するまでもない気もしますが、たくさんやるとなると、
いちいちstorongをbにHTMLで変更するのも地味にだるい笑

AddQuicktag ではそのようなのも私は入れてたので、色々自分がやりやすいように作っておくと便利かなと,,.,,

注意点まとめとしては、

============================

編集する場合は再利用ブロックと連動させるかどうかを考慮しておく
→ブロックを使って記事毎に編集する際はその再利用ブロック自体も上書きされてしまうので、通常ブロックに変換してから編集する。

連続で1個以上保存する場合はブロックを再度追加してやり直さないとリネームしても上書きされるのでご注意をばw

=======================

この辺り…..

そして、

アドセンスタグなどを再利用ブロックに保存しとくなどの場合、呼び出してから『通常ブロックに変換してしまうと、後からの編集が個々のページ毎でやるしかなくなるので、あとで一斉に剥がすとか、一斉に張り替えるとか、編集するなどができなくなる。

なのでアドセンスタグなどの場合は『通常ブロックに変換』はしない方が良さげに思う。

で、アドセンスタグ等を、AddQuicktagに入れて管理しておいてた人などは

当時の記事も記事毎に貼り直さなきゃならなくなるので、過去記事はとりあえずそのままに、

新たな記事で好きな位置に貼る場合は新エディタでWP QUADSなど使って、
ショートコードタグを再利用ブロック』に、定位置のはWP QUADSの自動で引き続き活用として、

AddQuicktagで自由に貼ってた過去のページは順繰りと新エディタブロックに変換してWP QUADSの『ショートコードタグ再利用ブロック』に変更していけば良さそう。。

そうしておけば過去記事も最新の記事も一括管理できる。

ま、新たに最近スタートした人なら設定し直す必要がないので再利用ブロックで一括管理する方が早いと思うけど…..

スポンサーリンク

❤︎2、再利用ブロックの管理

2-1、一括編集

再利用ブロックは、上記に書いた通り、

一括編集』ができる。

その再利用ブロックを使った全てのページのそのブロックを連動して変更させることができるので便利。(通常のブロックに変換していないものに限る)

ページ毎にネチネチ編集する必要がないってことw

手順❶
投稿ページの左上のブロックを呼び出せるプラスボタン>再利用可能>で、
すべの再利用ブロック管理』を開く↓

再利用ブロックの管理

※『すべの再利用ブロック管理』は、
投稿ページの一番右上のてんてんてん>ツールエリアにもあり、そこからもできるのでどちらかやりやすい方からどうぞw↓

再利用ブロックの管理2

手順❷
下図のような画面になるので、一括編集したいもののタイトル下の、『編集』をクリック↓

再利用ブロックの管理 編集

※この画面で不要になった再利用ブロックの確認&削除もできる。

そうすると、そのブロックが開けるので、そこで編集できる。

ここで編集した内容は一括で反映される。

2-2、再利用ブロックの『インポート・エクスポート』

で、再利用ブロックに保存してあるものは、一回作ったら他のサイトへエクスポートしたり、他のサイトからDLしたのをインポートしたりもできる。。

やり方は、

手順❶
上記と同じくまず、
投稿ページの左上のブロックを呼び出せるプラスボタン>再利用可能>で、
すべの再利用ブロック管理』を開く↓

ブロック追加-再利用可能-再利用ブロックを管理

その管理画面から、インポートエクスポートできる
(ただし、1ブロックごと笑)↓

エクスポートインポート

※インポートしても一覧にすぐ表示されない場合、『そのページをリロード』してみてください

キャッシュのせいですぐに表示されない場合が多いと思いますが、リロード(再読み込み)すれば表示されるようになる。

  • Macの場合 command+R
  • または、検索バーの再読み込みタブのクルッとしたタブをクリック

でリロード(再読み込み)できます。

詳しくは、
▶︎ブログ・サイトカスタマイズが反映されないときはまずアレをチェック!
を参照ください

そんな感じです。。。

Gutenberugにはもうかなり慣れたので、かなり便利な部分もわかってきたのですが、まだやはり旧エディタの使いやすさを上回ってないところも沢山あるように感じる。。。。

早くもっと使いやすくより一層進化してくれることをお祈りしてます!
合掌w

おまけw ↓

◆テキストカラーを部分的に変えるには?

すでに使ってる方も多いと思いますが、現在、プラグインTinyMCE Advanced の設定で、Block Editor でも部分的にカラーを編集できるようになっています。。。。

ワープレダッシュボード>設定>TinyMCE Advanced>Block Editor (Gutenberg)の設定で、

Enable setting of selected のとこをYesにチェック入れると普通にブロックエディタでテキストに部分的にカラーをつけたり、カラー帯つけたりを簡単にできるようになっています。。。↓

TinyMCE Advance-Block Editor

上記の設定をすると、通常のブロックで右側に『Text Color』という項目が付け足され、そこから好きな色にできる↓

ブロックでText Color

その他、上記の設定画面で、『Unused buttons for the blocks toolbars』のとこから、『Main toolbar (shown above the block)』のとこに使いたいやつをドラッグして保存すればそれらもブロックエディタで使えるようにできるです…..↓

ツールバーに追加

     ↓

少し付け足せる

このように色々進化していってくれてるのでだんだんやりやすくなってきてはいます。

ってことで、

楽しいクリエイトをば!

しゃらんるあぁああああ❤︎

目次とかもプラグイン無しでサクサク作れるですyo!w ↓

他、Gutenberg関連↓

ワードプレス5.0新エディタGutenbergの注意点

【Classic Paragraph】新エディタ『Gutenberg 』内で『TinyMCE Advanced』をフルで使うには?

『Gutenberg:グーテンベルグ』で複雑なテーブル(表)を簡単にカスタマイズして書く方法

ワードプレスメジャーアップデート更新5.0以降の動作環境とは?の巻

\(`^`)b

スポンサーリンク

 

REACH_rh.jam project / Creative Support
REACH_rhがあなたのクリエイトをサポートします
サポート内容をチェックしてみる ↓

rhjampj_v-min

 

❤色々やり散らかしております、宜しくどうぞ御贔屓に<(_ _)><(_ _)><(_ _)>

Twitter-REACH_rh Facebook-REACH_rh G+ -REACH_rh Insta-REACH_rh note-REACH_rh

YouTube-REACH_rh SoundCloud-REACH_rh PIXIV-REACH_rh CREATORS BANK_REACH_rh

関連コンテンツ

Pocket