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

未分類

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

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

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

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

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


 

(関連記事)ブロックエディターの使い方について

ブロックエディター の概念
本記事では、コードエディターの切り替え方に絞って説明していますが、エディターの使い方全体を勉強したい方は「【徹底解説】WordPressブロックエディターの使い方」を合わせてご参照ください。

 

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

 

弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら


 

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

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

検索して記事を見つけたい方はこちら

検索して記事を見つけたい方はこちらにキーワードを入力してお探しください。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2020年版WordPress(ワードプレス)の使い方総まとめ】

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-未分類
-, ,

© 2021 WEBST8のブログ Powered by AFFINGER5