WordPressコードエディターでソース表示して編集する方法

WordPressのブロックエディターは、HTMLやCSSのコードをかけなくてもビジュアライズにページを作ることができ便利ですが、ページ全体をソースコードで見たいシーンもあるのではないでしょうか？

そういった場合は、ブロックエディターのビジュアライズな画面をコードエディターに切り替えることで、ソースコードを表示・ソースコード編集することができます。

今回はビジュアルデーターとコードエディターの切り替え方とコードエディターの使い方をわかりやすく解説していきます。

(※)本記事では、WordPress5.6、無料テーマLightningを利用した環境で説明しています。

コードエディターの切り替え方

WordPressでページを作成するときに、はじめに表示される画面がビジュアルエディターです。コードエディターは右上の点が3つ並んでいる部分からクリックして、表示内容からコードエディターをクリックします。

コードエディターが表示されます。コードエディターはHTMLを直接入力できるエディターで、ビジュアルエディターで作成した内容をコードエディターに切り替えて編集したり、HTMLを入力できます。

なお、上記画像にある<!-- wp:paragraph -->の部分は、段落ブロックを意味します。

もし<!-- wp:paragraph -->をはずすとカスタムHTMLブロックとして認識されるようになります。同様に見出しブロックやリストブロックなどもブロックであることを「<!-- wp:xxxxx -->」で囲んで表現しています。
 

ビジュアルエディターへの戻し方

コードエディターを終了したい時は「コードエディターを終了」をクリックしてください。

ビジュアルエディターが表示できます。

 

まとめ

まとめです。今回は、ブロックエディターのビジュアライズな画面をコードエディターに切り替える方法をご紹介しました。

 

コードエディターに切り替えることで、ソースコードを表示・ソースコード編集することができます。

自分で触ってみないことにはなかなかわからないことも多いと思いますので、興味がある方はたくさん触ってみて覚えてください。

今回は以上になります。最後までご覧いただきありがとうございました。
 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました！

最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室