fbpx
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. [レビュー] Lenovo Ideacentre 720 使えば手放したくなくな…
  2. [レビュー] Lenovo Ideapad 520 スタンダードな充実ノートパソ…
  3. [Facebook] プレビュー機能の脆弱性でトークン流出!アカウントの乗っ取り…
  4. Amazonプライム・ビデオで今見ておくべき作品
  5. プリンター ブラザー DCP-J973N 導入記。お手頃価格でセッティングも取り…

関連記事

  1. WordPress

    [WordPress] ロリポップさんからお願いされていた 『SiteGuard WP Plugin…

    こんにちは。@OfficeTAKUです。ここの大家さん(レ…

  2. Photo by Burst on Unsplash

    WordPress

    [WordPress] Gutenbergからクラシックエディタへ戻しました!

    こんにちは。@OfficeTAKUです。なんでも新しいもの…

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

    WordPress

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

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

  4. WordPress

    Web

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

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

  5. Web

    WordPress : 本当に「死ぬほど簡単」だった Macで WordPress ローカル環境構築…

    こんにちは。なまけもの@OfficeTAKUです。以前、W…

  6. WordPress

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

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

最近の記事

  1. Photo by Estée Janssens on Unsplash
  2. Photo by rawpixel on Unsplash
  3. Photo by rawpixel on Unsplash
  4. Photo by rawpixel on Unsplash

人気の記事

  1. Photo by Marvin Meyer on Unsplash
  2. Photo by freddie marriage on Unsplash
  3. MOS対策テキスト
  4. Photo by rawpixel on Unsplash
  5. Photo by JESHOOTS.COM on Unsplash
  1. ハードウェア

    プログラミング超初心者のための用語解説「シングルボードコンピュータ」
  2. Word

    [Word]「均等割り付け」ボタンを押したらいきなり文字列が右端まで広がってしま…
  3. Security

    【注意!】Googleユーザーのあなた、おめでとうございます!(1)件のGoog…
  4. ハードウェア

    こんどのEchoはスクリーン付き!Amazon Echo Spot 7月26日発…
  5. Photo by JESHOOTS.COM on Unsplash

    Excel

    [Excel] エクセルで「名前」を使ってみよう! Vol.5 数式に[名前]を…
PAGE TOP