Photo by Hannes Wolf on Unsplash

WordPress

[WordPress] WordPress 5.0 新しいエディタGutenbergでのビジュアルエディタとコードエディタの切り替え方法

こんにちは。 @OfficeTAKUです。

WordPress 5.0にアップデートしました。
以前からアナウンスされていた新しいエディタ Gutenberg を使用してこの記事を書いています。

ブロックで構成される新しいエディタの利点

最近、私は基本的にはテキストエディタで原稿を書き、WordPressの編集画面にコピペしていました。HTMLタグを記述することが多くビジュアルエディタもあまり利用せずに書いていました。

この新しいエディタでは良い意味でビジュアルエディタとテキストエディタが融合したような感じです。

パラグラフ(段落)が明確になり、きちんとした文章が書けるのが一番の利点かもしれません。

よくあるWeb上でのサイト作成サービス。例えば、Jimdoの編集画面など、癖が強すぎてWordPressで書いている人間には使いづらいものです。(私が対応できないだけかもしれませんが)

それに比べるとこのWordPress 5.0のエディタは直感的に使いやすいと思います。文章を書くには人間にとっては非常に使いやすくなったと感じています。

ビジュアルエディタとコードエディタの切り替え方法

とりあえず文章作成にはよい 新エディタ Gutenberg ですが困ったことに現在使用中のテーマ のエディタで表示されていたタグコード挿入ボタンが表示されなくなってしまいました。

クラス付きの見出しタグや独自のショートコードもとりあえずはコードで記述することで対応したいと思っています。

そこで、ソースコード編集画面への切り替え方だけ記しておきます。

WP Gutenberg で Visual Editor と Code Editor を切り替える

  1. エディタ画面左上の縦に・が3つ並んだメニューボタンをクリックします。
  2. [Code Editor]をクリックします。
    Wordpress5.0 Gutenberg 画面

ショートカットキー
[Shift]+[option]+[command]+[M] (Mac)
[Shift]+[Ctrl]+[Alt]+[M] (Windows)

WP Gutenberg のブロックでHTMLコードを入力できるようにする

  1. 新しいブロックの左端にある[+]ボタンをクリックします。
  2. ブロックのフォーマットのメニューが表示されるます。
  3. [HTML](Custom HTML)ボタンをクリックします。
    Wordpress 5.0 エディタ
  4. HTMLで記述できるようになります。
    WordPress5.0Gutenberg

後でカスタムHTMLのブロックをブロックに変換することもできます。

使っていくしか無いかな

こまかな部分で「あれ、どうしたらいいんだろう?」ってことがまだまだ山のようにあります。

  • テキストブロックの中に画像を挿入するにはどうしたいいの?
  • 記事につけるタグの一覧が表示されなくなった
  • あれや、これや、なんだかんだ…

ありますが、使って慣れていくしかないのでしょうかね。時間がかかりそうです。ただ、あまりHTMLタグなど意識せずに書いていた方はこのエディタを使った方が文書構造としてはよくなるのかも知れません。

なんも意識せず、アップデートしてしまいましたが、まぁ、そんな感じです。

Gutenbergを使う上で参考になるサイト

ピックアップ記事

  1. [レビュー] リンダ・リウカス『ルビイのぼうけん こんにちは!プログラミング』:…
  2. Apple Music や Amazon Musice でクラシック音楽の楽曲・…
  3. [Google] Chrome 拡張機能「Password Checkup」導入…
  4. [Amazon] アマゾンで「NHKこどもパーク」開始!月額390円で「ワンワン…
  5. [iTunes] Apple Music ライブラリ内の曲を再生したら全く別の曲…

関連記事

  1. 『.htaccess』によるログインページ(wp-login.php)へのアクセス制限
  2. WordPress

    [WordPress]ロリポップサーバーで不要になったWordPressサイトを削除する方法

    こんにちは。@OfficeTAKUです。別れと新たな出会い…

  3. WordPress

    Web

    WordPress : カテゴリによって異なるランキングバナーを表示させる

    ブログランキングサイトに登録したままでほったらかし状態です。「…

  4. Web

    [WordPress] ログイン履歴を記録してくれるプラグイン Crazy Bone を導入してみた…

    こんにちは。しょっちゅうパスワードを忘れてしまう @OfficeT…

  5. WordPress

    Web

    WordPress : 「Facebook Comments for WordPress」のエラー

    以前のエントリ「Facebook : Facebookページのコメント…

最近の記事

  1. Kindle 日替わりセール 24
  2. Kindle 日替わりセール 23
  3. Kindle 日替わりセール 22
  4. Kindle 日替わりセール 21

人気の記事

  1. マンガ『スティーブズ』
  2. ネット詐欺専用セキュリティソフト「詐欺ウォール」
  3. Canva
  4. Photo by Taskin Ashiq on Unsplash
  1. WebService

    Amazonプライム・ビデオで今見ておくべき作品
  2. WebService

    Apple Music や Amazon Musice でクラシック音楽の楽曲・…
  3. Microsoft PowerPoint MVP 河合浩之

    PowerPoint

    [PPT] あなたのPowerPointプレゼンテーションを劇的に変えてしまうで…
  4. WordPress

    [WordPress]ロリポップサーバーで不要になったWordPressサイトを…
  5. Lenovo TAB4 8 Plus

    ハードウェア

    [レビュー] レノボ 「TAB4 8 Plus」 画面が美しく動画もマンガも満喫…
PAGE TOP