WordPress・記事とページを作る

ブロックエディタで記事を書く

WordPressの記事は「ブロック」を積んで作ります。段落・見出し・画像——実はぜんぶ、学んだHTMLタグと対応しています。はじめての投稿を公開してみよう。

管理画面の地図を覚えたら、いよいよ記事を書きます。WordPressの執筆画面はブロックエディタと呼ばれ、文章や画像を「ブロック」という積み木で組み立てていきます。じつはこのブロック、HTMLコースで学んだタグと1対1で対応しています。あなたはすでに、ブロックエディタの本質を知っているのです。

ブロックという考え方

投稿の新規作成画面を開くと、まっさらな紙とタイトル欄だけが現れます。

WordPressのブロックエディタ。「タイトルを追加」という入力欄と、ブロックを選ぶための+ボタンが表示されている
新規投稿の画面。本文の「+」ボタンからブロックを選んで積んでいきます。

本文は、1かたまり=1ブロックとして書いていきます。段落をひとつ書けば段落ブロック、見出しを足せば見出しブロック。ブロックの正体は、見慣れたHTMLタグです。

ブロック生成されるHTML
段落<p>
見出し<h2><h6>
リスト<ul><ol><li>
画像<img><figure>つき)
引用<blockquote>
ボタン<a>(ボタン風の見た目)

つまりブロックエディタは、タグを知らない人でもHTMLを組み立てられるようにした道具。タグを知っているあなたには、それぞれのブロックが何をしているのか透けて見えるはずです。

基本の書き方3つ

  1. 文章を書く——本文をクリックしてそのまま打てば、段落ブロックになります。Enterで次の段落へ
  2. ブロックを選んで足す——「+」ボタン、または行頭で/(スラッシュ)を打つと、ブロックの一覧から選べます。/見出しのように名前でしぼりこむのが速い
  3. ブロックを操作する——ブロックをクリックすると出る小さなツールバーで、移動(↑↓)・変換・削除ができます

書いたら「公開」——下書きとの違い

書いている途中の記事は下書きとして保存され、まだ誰にも見えません。右上の「公開」ボタンを押した瞬間、表側のサイトに記事が現れて、世界中から見られる状態になります。

  • 下書き保存——自分だけが見える状態でキープ。何度でも途中保存できる
  • 公開——サイトに掲載。あとから編集も、下書きに戻すこともできる

このレッスンのまとめ

  1. 記事はブロックの積み木で書く——ブロックの正体は学んだHTMLタグ(段落=p、見出し=h2…)
  2. ブロックは「+」か、行頭の/(スラッシュ)で呼び出すのが速い
  3. 記事は下書きでキープ、「公開」を押した瞬間に表側へ——プレビューで確認してから公開

やってみよう:はじめての投稿を公開する

Playgroundで、記事を1本書いて公開してみましょう。

  1. 管理画面の「投稿」→「新規投稿を追加」をひらく
  2. タイトルに「はじめての投稿」と入れる
  3. 本文に、あいさつの段落をひとつ書く
  4. 行頭で/見出しと打って見出しブロックを足し、「すきなもの」と入れる
  5. その下に/リストでリストブロックを足し、すきなものを3つ並べる
  6. 右上の「公開」を押す(確認がもう一度出たら、さらに「公開」)
  7. 左上のサイト名から表側に戻り、記事が一覧の先頭に載ったのを確認する

いま作った構造をHTMLで書くと、h1(タイトル)+p+h2+ulそのもの。ブロックの裏でタグが組まれている感覚がつかめたら、このレッスンは大成功です。