キャリカク岡山

ビジュアル・エディターとコード・エディター

WordPressでは、ふだん記事を書くときに、

HTMLを全部手で書く必要はありません。

WordPressには、二種類のエディターがあります。

ビジュアルエディターとコードエディターになります。

新規ページの編集画面を立ち上げると、

通常はビジュアルエディターが立ち上がります。

新しいページを編集しようとして、

ビジュアルエディターの画面をクリックしたら、以下のようなツールが出てきます。

上記のツールの“¶”をクリックすれば、

・見出し

・段落

・画像

・箇条書き

などのリストが出てきますので、

必要なものを選んで記事を作ることができます。

これはとても便利です。

ただし、WordPressのビジュアルエディターは、

自動で段落を作ったり、余白を調整したりします。

そのため、自分が思った通りの見た目にならないこともあります。

コードエディターに貼り付ける方法もあります

WordPressには、ビジュアルエディターだけでなく、

コードエディターもあります。

ビジュアルエディターは、見た目を確認しながら記事を書ける画面です。

コードエディターは、HTMLやWordPressブロックコメントを直接扱う画面です。

たとえば、次のようなHTMLをコードエディターに貼り付けると、

WordPressは段落ブロックとして認識できます。

<!-- wp:paragraph -->

<p>これは本文です。</p>

<!-- /wp:paragraph -->

見出しなら、こうです。

<!-- wp:heading -->

<h3>これは見出しです</h3>

<!-- /wp:heading -->

この方法を使うと、WordPressの自動整形に振り回されにくくなります。

WordPressの中身では、ブロック用のHTMLが使われています

WordPressのブロックエディターで記事を書くと、

内部では次のような形で保存されます。

<!-- wp:paragraph -->

<p>これは本文です。</p>

<!-- /wp:paragraph -->

これは、WordPressの段落ブロックです。

普通のHTMLの段落は、

<p>これは本文です。</p>

ですが、WordPressではその前後に、

<!-- wp:paragraph -->

<p>これは本文です。</p>

<!-- /wp:paragraph -->

というコメントが付きます。

このコメントによって、WordPressは、

これは段落ブロックですよ。

と判断します。

見出しの場合は、このようになります

見出しの場合は、次のようになります。

<!-- wp:heading -->

<h3>これは見出しです</h3>

<!-- /wp:heading -->

<h3> はHTMLの見出しタグ(番号毎に文字の大きさが変わります)です。

その前後にWordPress用のコメントが付いています。

つまりWordPressでは、

・HTMLタグを

・WordPress用のブロックコメントで挟んでいる

この2つが組み合わさっているわけです。

HTMLを知っていると、WordPressの動きが分かりやすなる！

WordPressは便利ですが、裏側ではHTMLが使われています。

そのため、HTMLを少し知っているだけで、

・なぜ改行が詰まるのか。

・なぜ段落が分かれるのか。

・なぜ見出しが大きく表示されるのか。

・なぜ画像やリンクが表示されるのか。

こうしたことが分かりやすくなります。

全部を一度に覚える必要はありません。

まずは、

・HTMLは文章に意味を付けるもの。

・WordPressはHTMLをブロックとして扱っている。

この2つだけ覚えておけば大丈夫です。

HTMLとWordPressの関係性

HTMLは、Webページを作るための基本記述法です。

文章をタグで囲むことで、

・見出し

・段落

・箇条書き

・リンク

・画像

などの意味を付けることができます。

そしてWordPressでは、そのHTMLにブロック用のコメントを付けて管理しています。

つまり、WordPressの記事も、見えないところではHTMLと深く関係しています。

HTMLを少し知っておくと、WordPressの記事作成がぐっと分かりやすくなります。

最初は難しく感じるかもしれません。

でも、まずは、

・ <h2> は見出し。

・<p> は段落。

・<ul> と <li> は箇条書き。

このあたりから少しずつ慣れていけば大丈夫です。

HTMLは、Webページを作るための言葉です。

そしてWordPressは、そのHTMLを使いやすくするための道具です。

この2つの関係が分かると、記事作成が少し楽になりますよ。

キャリカク岡山：F.K.

・この記事が難しいと思う方は、以下の記事をご一読ください

・8/21記事　ホームページを表示するには？

・8/24記事　HTMLって、どうやって使うの？