WordPressブロックエディターで投稿と固定ページを作成する


文字起こし

はじめに

WordPressブロックエディターで投稿と固定ページを作成する。今日は、強力なWordPressブロックエディターを使って、コンテンツ作成の中心に迫ります。

学習内容

このレッスンでは、ブロックエディターの定義、ブロックエディターのインターフェースの操作方法、コンテンツ編集エリアと設定サイドバーの違い、固定ページと投稿の作成、そして最後にブロック、パターン、リスト表示の使用方法について学びます。

ブロックエディターの概要

WordPressブロックエディターを使えば、コードを必要とせず、ブロックでサイトを構築できます。以前ご覧いただいたように、投稿または固定ページを作成するにはWordPressダッシュボードにログインします。ダッシュボードから、左側のメニューにある「投稿」または「固定ページ」に移動します。ブロックエディターのインターフェースを詳しく確認するため、新しい固定ページを作成してみましょう。新しい固定ページを追加したら、ページに適切なタイトルを付けることもできます。インサーターをクリックすると、さまざまなブロックを追加してページを構築できます。

ブロックには、段落、画像、カラム、ギャラリー、料金表など、さまざまなものがあります。ブロックパターンも便利な機能です。これは、あらかじめ設定されたブロックのグループ、またはデザイン済みのブロックで、すばやく追加してセクション全体を構築し、ニーズに合わせて変更できます。

右側の「パターン」の隣では、メディアを追加できます。まず、メディアライブラリから追加する方法、またはOpenverseから追加する方法があります。Openverseでは、自由にライセンスされたメディアを無料で利用できます。

ブロックの追加

ブロックを追加する方法はいくつかあります。まず、左上のインサーター、またはページ内のインサーターをクリックできます。「検索」の下に表示される6つのブロックは、最近使用したブロックです。また、スラッシュコマンドを使うこともできます。例えば、スラッシュに続けて「image」と入力し、すでにアップロードしてあるメディアライブラリの画像を追加します。次にEnterキーを押して、段落ブロックにテキストを追加します。その後、もう1つ段落を追加します。

ブロックエディターのインターフェース:コンテンツ作成エリア、設定サイドバー、リスト表示

インターフェースは3つの主要なセクションに分かれています。コンテンツ編集エリア、ブロックを選択するための左サイドバーまたはリスト表示(これについては後ほど説明します)、そして右側の設定サイドバーです。右側の設定サイドバーには、選択したブロックの追加設定やオプションが表示され、ブロックをさらにスタイル設定できます。もちろん、利用できる設定はブロックごとに異なります。

ブロックを選択すると、そのブロックに固有のブロックツールバーも表示されます。ここでは段落ブロックを例にします。左から順に、ブロックツールバーでは、このブロックを別の種類のブロックに変換したり、ブロックをドラッグ&ドロップして新しい位置に移動したり、矢印を使ってブロックを移動したり、テキストの配置を変更したり、太字や斜体を選択したり、リンクを追加したりできます。ドロップダウン矢印からは、ハイライト、脚注の追加、その他のスタイル設定オプションを利用できます。縦に並んだ3つの点をクリックすると、さらに多くのオプションが表示されます。

次に、リスト表示についても確認しておくことが重要です。この例では、さまざまなブロックを使ってページ全体を構築しています。上にスクロールすると、左上でリスト表示を開くことができます。リスト表示を使うと、コンテンツの階層や入れ子になったブロック間を移動できます。これはWordPressエディターに欠かせない機能で、サイト上のブロックを簡単に操作できます。ページ上のすべてのブロックの正確な順序と構造を確認できるため、コンテンツが多いページでは特に便利です。ほかのブロックが内部に入れ子になっているブロックも選択できます。ブロックをクリックしてドラッグすると、ページの別の場所に移動できます。また、リスト表示で任意のブロックの横にある省略記号(3つの点)をクリックすると、さまざまな便利なオプションが表示されます。

ページの構築

元のページに戻り、ブロックを使ってページの構築を続けながら、ブロックエディターの動作を確認してみましょう。まず、ギャラリーブロックを追加し、メディアライブラリから3つの画像を選択します。挿入したら、ギャラリーブロックを選択し、縦に並んだ3つの点をクリックして「後に追加」を選択します。次に、左上のインサーターをクリックして、デザイン済みのブロックグループであるパターンを追加します。そして、訪問を予定するためのおすすめパターンの1つを選択します。続いてリスト表示を開き、グループブロックを選択して、テキストの配置を変更します。次に、サイドバーの設定を見てみましょう。ブロックを選択すると、サイドバーの設定を使ってブロックをさらにスタイル設定できます。ここでは、画像に角丸効果を追加できます。2つ目の段落を選択し、ブロックツールバーを使ってテキストを太字に変更します。その後、リスト表示を選択し、親となるギャラリーブロックを選択できていることを確認します。サイドバーの設定で、3列から2列に変更します。最後に、ボタンブロックを選択し、背景色を緑に変更します。

これで、ブロックエディターの各要素がどのように組み合わさるかお分かりいただけたと思います。ブロックを使ってコンテンツを追加し、設定サイドバーでコンテンツのスタイル設定や編集を行い、リスト表示でコンテンツを操作します。

サイトエディターで固定ページを作成・編集する

サイトエディターでも固定ページを作成・編集できることに注意してください。それでは「外観」に移動し、「エディター」をクリックしましょう。これでサイトエディターが開きます。次に「固定ページ」を選択し、「ブロックエディターの使用」ページを開いて「編集」を選択します。サイトエディターでは、コンテンツブロックにコンテンツを追加します。その後はまったく同じように操作でき、ブロックを使ってページの構築を続けられます。ここではYouTube埋め込みブロックを追加し、URLを入力して、動画をページに埋め込みます。

投稿の作成・編集

最後に、投稿の作成方法は固定ページの場合と同じです。ブロックを使ってコンテンツの構造を構築します。カテゴリー、タグ、アイキャッチ画像の追加については、別のレッスンで説明します。

まとめ

これで、ブロックエディターの操作方法に加え、ブロック、設定サイドバー、リスト表示の使い方について、よりよく理解できたと思います。