MENU
アーカイブ
腎機能評価ツールを無料公開中 ➡ココをタップ

【WordPress5.0】使いにくいと評判のGutenbergエディタをレビューするで

この記事で伝えたい事
  • ワードプレス5.0の世界へ踏み出したので記事エディターGutenbergをでレビュー
  • AddQuickTagは使えるか?
  • ショートコードをどうする?
  • 吹き出しが使いにくくなるのでは?
  • Gutenbergエディタは,「再利用可能ブロック」の登録をおぼえると使いこなしやすくなる!

けいしゅけのアイコン画像けいしゅけ

以上のことを書いていこうと思います!

目次

けいしゅけのWordPress環境

タコちゅけ
この記事をお読みの方にとって,まず大事なのは記事を読み終わってから再現性があるか否かでちゅよね??

うちの(ヘンタイな)先生に,このブログ環境をたくさん聞いてきたので共有しましゅね🎵

[/ふきだし]

WordPressのVer.と使用テーマ
  • WordPress バージョン 5.0.2–ja
  • 使用テーマ「SANGO バージョン: 1.7.3」
  • 使用子テーマ「PORIPU tears for SANGO バージョン: 1.03」
使っているプラグイン
  • AddQuicktag
  • All ShortCode of SANGO
  • Rinker
  • SANGO Gutenberg
  • SANGOサポーター
  • こじかツールボックス
  • こじかテンプレートエディタ
  • ふきだしクリエーター
  • TinyMCE Advanced
タコちゅけ
まず,当ブログの作業環境はこんな感じだそうでしゅ🎵

記事作成をサポートするツールが今まで通り使えるか?

実際に記事を書きながら試してみまちゅ!!

先生も気合入ってましゅね…。

[/ふきだし]

ついにWordPress5.0の世界へ踏み出した

— けいしゅけ(神田佳典)@イラストにもアツアツなAHEADMAP広報部 (@keisyukeblog) 2018年12月22日

Gutenberg使いこなしたるっ!!

— けいしゅけ(神田佳典)@イラストにもアツアツなAHEADMAP広報部 (@keisyukeblog) 2018年12月22日

けいしゅけのアイコン画像けいしゅけ

ちなみに,いまのTweet埋め込みは,カスタムHTMLというブロックを選択して行いました☆

埋め込むTweetのリンクは

Twitterを開く➤ツイートの右上を選択➤ツイートをサイトに埋め込むを選択する

出てきたHTMLコードをコピペすれば完成やで☆

Gutenbergエディタでも AddQuickTagは使えますか?

GutenbergエディタでもAddQuickTagは使えます!!

使い方を説明しましょう。

STEP.1
Gutenbergのブロックを展開

Gutenbergはブロックと呼ばれるカタマリごとに見出し・本文・画像などを入れることができます。

この画像には alt 属性が指定されておらず、ファイル名は 1c06fe90454bdc5e30c0ab12893e5675-1024x382.png です

Gutenbergエディタでは色々なところで「⊕」マークが出るので,クリックするとブロックが開くで☆

この画像には alt 属性が指定されておらず、ファイル名は 9dd885b12c43e50d3b03983dcc9b36b3.png です

開いたブロックの中から「フォーマット」タブを選んで開くと【クラシック】が現れる。*ブロックの検索に”クラシック”と打ち込んでも出てくるで🎵

STEP.2
クラシックを開く
クラシックはその名の通り,クラシックエディタ。つまり今まで通りのエディタで記入できまっせ☆という事です。

AddQuickTagやふきだしクリエイター,こじかテンプレートエディタの登録データはコチラから引き出すことが可能になります!(一安心やわ~)

STEP.3
TinyMCE Advancedの設定にご用心
でもここでちょっと違和感を感じると思います。僕はここでちょっと困りました。

SANGOで使いまくっている【スタイル】というタブがクラシックエディタに表示されへんやんけぇ~💦

見出し・ボックス・ボタンなどを一発で表示してくれる【スタイル】タブが使えないのはしんどい!!

 

STEP.4
TinyMCE AdvancedにGutenberg用の設定欄が新しくできてた(笑)
解決法はカンタン。TinyMCE Advancedの設定を開いて下にスクロールしていくとGutenberg用にタブや機能ボタンの配置を設定できるようになってました。

ここで【スタイル】を付け加えたら,無事Gutenbergのクラシックブロックにも【スタイル】タブが表示されました!

注意やっ!
ただし,クラシックエディタ中への画像挿入はちょっとやりにくい。

まだ慣れてないからやり方が間違っているかも知れへんねんけど,一発で挿入が出来へんみたいやわ。

上記のタイムライン上に載せた画像は,ブロックで画像をアップデートしたものを画像コピーして貼り付けるという手順で掲載しました(ちょっと面倒やった💦)

Gutenbergエディタでもショートコードは使える?

Gutenbergエディタでもショートコードは使えます!

けいしゅけのアイコン画像けいしゅけ

ここでも活躍するのはクラシックブロックやで☆

使い方は先のAddQuickTagと全く一緒や。

クラシックブロックを呼び出して,クラシックエディタとして書いていけばショートコートは今までと変わらない使い心地で利用可能やで🎵

Gutenbergエディタになったら吹き出しが使いにくくなるんじゃないの??

Gutenbergエディタでも吹き出しはガンガン使えまっせ☆
とにかくクラシックブロックを使えば余裕ですわ🎵

さっきから使いまくっているので,使えるんやろうなぁ~って思っていただけていると思います。その通りです。

クラシックブロックはTinyMCE AdvancedをGutenberg用に設定すれば旧エディタと変わらない使い心地が再現できるので,吹き出しも使えます☆

タコちゅけ
今まで通りみなさんとお会いできまちゅ!!

[/ふきだし]