WordPressのブロックエディターは、HTMLやCSSのコードをかけなくてもビジュアライズにページを作ることができ便利ですが、ページ全体をソースコードで見たいシーンもあるのではないでしょうか?
そういった場合は、ブロックエディターのビジュアライズな画面をコードエディターに切り替えることで、ソースコードを表示・ソースコード編集することができます。
今回はビジュアルデーターとコードエディターの切り替え方とコードエディターの使い方をわかりやすく解説していきます。
(※)本記事では、WordPress5.6、無料テーマLightningを利用した環境で説明しています。
(関連記事)ブロックエディターの使い方について
本記事では、コードエディターの切り替え方に絞って説明していますが、エディターの使い方全体を勉強したい方は「【徹底解説】WordPressブロックエディターの使い方」を合わせてご参照ください。
コードエディターの切り替え方
WordPressでページを作成するときに、はじめに表示される画面がビジュアルエディターです。コードエディターは右上の点が3つ並んでいる部分からクリックして、表示内容からコードエディターをクリックします。
コードエディターが表示されます。コードエディターはHTMLを直接入力できるエディターで、ビジュアルエディターで作成した内容をコードエディターに切り替えて編集したり、HTMLを入力できます。
なお、上記画像にある<!-- wp:paragraph -->の部分は、段落ブロックを意味します。
1 2 3 |
<!-- wp:paragraph --> <p>当スクールでは、WordPress、Webプログラミング、Webマーケティング等一人一人に合わせて必要なスキルを習得できます。</p> <!-- /wp:paragraph --> |
もし<!-- wp:paragraph -->をはずすとカスタムHTMLブロックとして認識されるようになります。同様に見出しブロックやリストブロックなどもブロックであることを「<!-- wp:xxxxx -->」で囲んで表現しています。
ビジュアルエディターへの戻し方
コードエディターを終了したい時は「コードエディターを終了」をクリックしてください。
ビジュアルエディターが表示できます。
まとめ
まとめです。今回は、ブロックエディターのビジュアライズな画面をコードエディターに切り替える方法をご紹介しました。
コードエディターに切り替えることで、ソースコードを表示・ソースコード編集することができます。
自分で触ってみないことにはなかなかわからないことも多いと思いますので、興味がある方はたくさん触ってみて覚えてください。
今回は以上になります。最後までご覧いただきありがとうございました。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました!
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。