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. [レビュー] レノボ 「TAB4 8 Plus」 画面が美しく動画もマンガも満喫…
  2. 3.11復興とは?問うドキュメンタリー:メディアが語らない真実「被災地の水産加工…
  3. [iTunes] Apple Music ライブラリ内の曲を再生したら全く別の曲…
  4. [レビュー] Lenovo Ideacentre 720 使えば手放したくなくな…
  5. プリンター ブラザー DCP-J973N 導入記。お手頃価格でセッティングも取り…

関連記事

  1. Wordpress ビジュアルエディタ

    WordPress

    [WordPress] ビジュアルエディタならExcelの表を簡単にはりつけ可能

    こんにちは。タグは手打ち派 @OfficeTAKUです。普…

  2. Web

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

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

  3. WordPress

    WordPress,XAMPP,Mac OS X,ロリポップ

    今回、このサイトを構築するに当たって、MacBook、OS X 10.…

  4. WordPress

    Wp Super Cashe を 有効化すると「警告! PHPセーフモードが有効になっています」

    ここ最近、複数のサイトをWordPressに移行したり、いままであまり…

  5. WordPress

    [lolipop] WordPress に ログインしようとしたら 403 エラー

    こんにちは。@OfficeTAKUです。オリジナルドメイン…

最近の記事

  1. Kindle Daily Sale 25
  2. Kindle Daily Sale 24
  3. Kindle Daily Sale 23
  4. Kindle Daily Sale 22
  5. Kindle Daily Sale 21

人気の記事

  1. マイクロソフト製品の新元号対応について
  2. Time Machine からの復元
  3. マンガ『スティーブズ』
  1. Security

    [Instagram] インスタグラムで勝手にレイバンサングラスの投稿がされたら…
  2. IT資格

    公認会計士と司法試験/予備試験合格の勉強のプロが教えてくれる「メモリーツリー」勉…
  3. ブラザー DCP-J973N インクのセット

    ハードウェア

    プリンター ブラザー DCP-J973N 導入記。お手頃価格でセッティングも取り…
  4. Photo by Debby Hudson on Unsplash

    WebService

    記憶と記録をデジタル化しておくことの重要性と検討すべき項目を整理してみた
  5. Lenovo Ideapad 520

    ハードウェア

    [レビュー] Lenovo Ideapad 520 スタンダードな充実ノートパソ…
PAGE TOP