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を使う上で参考になるサイト

Photo by Tim Gouw on UnsplashGoogle Santa Tracker はじまりました!サンタを追いかけよう!前のページ

年賀状印刷:ブラザーのインクジェットプリンターでハガキを下用紙トレーにセットする方法次のページブラザーDCP-J973N ハガキセット

ピックアップ記事

  1. [Amazon] アマゾンで「NHKこどもパーク」開始!月額390円で「ワンワン…
  2. [レビュー] リンダ・リウカス『ルビイのぼうけん こんにちは!プログラミング』:…
  3. [レビュー] レノボ 「TAB4 8 Plus」 画面が美しく動画もマンガも満喫…
  4. [WordPress]ロリポップサーバーで不要になったWordPressサイトを…
  5. 話題のDeepL翻訳はアプリをインストールするとより便利

関連記事

  1. WordPress

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

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

  2. Web

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

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

  3. WordPress

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

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

  4. Web

    WordPress:Instagramの写真を表示するプラグイン 「Instagram Embed」…

    こんにちは。写真、撮られるのは嫌いだけど撮るのは好きな@OffieTA…

  5. トップページ SSL化されていない

    WordPress

    [WordPress] ロリポップ無料独自SSL設定してみましたが…

    こんにちは。@OfficeTAKUです。WebサイトのSS…

LINE公式アカウント:OfficeTAKU

OfficeTAKU Line公式アカウントバナー

最近の記事

人気の記事

  1. Excel

    【Excel】あなたはいくつ知っている? エクセルで連番を作成する7つの方法
  2. WebService

    【U-NEXT】シニアや映画好きがいま無料体験するならこの動画配信サービス!
  3. WEB会議などで使える「スタジオジブリ壁紙」

    WebService

    【Zoom】スタジオジブリ・ヱヴァンゲリヲン・調布市役所さんなどバーチャル背景無…
  4. 【Facebook】不審なメッセージリクエストでグループ作成のお知らせが届いたら

    Facebook

    【Facebook】不審なメッセージリクエストでグループ作成のお知らせが届いたら…
  5. ハードウェア

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