WordPress制作入門②WordPressの使い方と基本操作 - はじめてのWebデザイン【図解たっぷり】

「このままコーダーで、3年後も食べていけるだろうか？」
AIが進化するほど、手を動かすだけの作業者の単価は下がり続けます。これからのWeb制作で生き残るのは、AIに指示を出す「司令塔」側に回った人だけです。

14日間で「作業者」から「AI Webディレクター」へ転身する集中プラン『10倍速 AIワークフロー マスタープラン』を公開中です。プロの個別メンタリング＆8日間の全額返金保証付き。

（先着限定、5月10日まで）

» 「司令塔」側に回る14日間プランを見る

ローカル環境でWordPressが立ち上がったら、WordPressを使ってみましょう。 今回はWordPressの管理画面、基本操作を中心に行っていきます。

最初は似た機能があったり、WordPress特有の呼び名があったりと、混乱するところがあるかもしれません。管理画面に表示されるメニューは項目が多いですが、まずはサイト運営に必要な項目が使えればOKです。 操作はとても簡単なので、気負わず触ってみましょう。

• WordPressの管理画面について知る
• WordPressの管理画面と表示画面
• WordPressを日本語化する
• WordPressサイトのタイトルと説明
• WordPress管理画面のメニューについて
• WordPressを使ってページを作る
• WordPressの投稿と固定ページの違い
• WordPressで投稿を作成してみる
• 投稿を分類するカテゴリーとタグ
• カテゴリーとタグの違い
• 投稿にカテゴリーとタグを設定する
• カテゴリーやタグの編集
• WordPressサイトのテーマ
• WordPressのテーマを変更してみる

WordPressの管理画面について知る

WordPressの管理画面と表示画面

ログインに成功してすぐに表示される、下図のようなページはWordPressの管理画面です。
サイトを訪れた人には見えない、製作者・運営者が使う部分です。

サイトを訪れる人が見る、公開されているページの方を見てみましょう。
左上、赤線で囲った家のアイコン+サイト名の部分をクリックします。

違うページに切り替わります。
こちらが実際に公開される、サイトのトップページです。
（※WordPressのバージョン等により、ページの見た目が違う場合があります。下図と違うデザインでも問題はありません）

もう一度、画面上部のサイト名をクリック。
管理画面に戻ることが出来ます。

WordPressを使って記事を書いたり、ページを作ったりする際には、このように実際に表示されるページの確認を行います。

WordPressを日本語化する

では、実際にWordPressの設定を変えてみましょう。
最初に、言語設定を日本語に変更します。
既に日本語で表示されている、英語のままで良い、という方はスキップして次に進んで下さい。

管理画面の左側にあるメニュー、Settingsの中から「General 」をクリックします。

開いたページを少し下にスクロールしていって下さい。
Site Languageの項目で、日本語を選択します。

Save Changesボタンをクリックして、変更を保存します。

メニューを含む、画面表示が日本語に切り替われば完了です。

WordPressサイトのタイトルと説明

設定 > 一般のページを見てください。
一番上に“サイトのタイトル”と“キャッチフレーズ”の欄があります。
ここでタイトルなどを登録すると、このサイトの共有事項として出力されます。

やってみましょう。 『はじめてのWebデザイン』シリーズ で作ってきたエドベース株式会社の設定にします。
index.htmlから<title>タグとmete descriptionの中身をコピー＆ペーストしておきましょう。

一番下の「変更を保存」ボタンで保存。
もう一度、表示画面の方を見てみましょう。
トップに表示されている文字が、先程入力したものに変わっています。

WordPress管理画面のメニューについて

管理画面のメニューは大まかに分けると、下記のようになっています。

次はオレンジ色の部分、WordPressでページを作ってみましょう。

WordPressを使ってページを作る

WordPressの投稿と固定ページの違い

「投稿」と「固定ページ」は、どちらも入力した内容をページとして書き出すことができます。
同じような機能ですが、それぞれ特徴があります。

違いを分かりやすくするために、お店のサイトを例に考えてみましょう。

投稿（記事）

WordPressの「投稿」は、時間が影響するページを作成する機能です。

時間が影響するというのは、新しい方が読者に影響力のあるものというイメージです。
例えば、ブログやお知らせは、公開や更新日と近い日にちで見てもらったほうが影響力があります。
今回の例であれば、12月に「9月の定休日」のお知らせを読んでも、役に立ちませんよね。

投稿はブログ機能と考えるといイメージしやすいかもしれません。
「記事作成」や「記事投稿」と呼ぶ方もいます。

投稿機能では、日記的な記録だけではなく、お知らせ・コラム・活動記録など「新しい情報をどんどん追加していきたい」というものを投稿します。随時更新され、投稿数が増えていくことが前提です。

このため、投稿にはカテゴリーやタグなど「どんな投稿（記事）なのか」を区別する仕組みがセットになっています。
新しい、いわば“旬な”情報を見たいユーザー向けに、新着投稿の一覧を表示することも多いですね。

固定ページ

WordPressの「固定ページ」は、時間の影響をあまり受けないページを作る機能です。

例えば、会社概要やお問い合わせページ。
公開された３年後に開いたとしても、特に問題はないですよね。

固定ページを使う場合は、新着順に一覧表示するということはほぼありません。
カテゴリーやタグの設定も、初期状態では存在しません。
固定ページへの導線は、ヘッダーやフッターのメニューから直接見に行くことが多いです。

こうした性質から、固定ページ＝独立したページと表現されることもあります。

固定ページはカテゴリー等を使ってグループ化することはできません。
ただし、親子関係を指定することで関連するページをまとめることができます。

例えば、会社概要というページ（親ページ）があり、それぞれの項目について詳しく書いてある沿革などのページ（子ページ）がある、という形です。

また、固定ページは、手軽にページごとに異なったデザインを適用することができます。
この性質から、LPなどにも利用されています。

投稿・固定ページの違い

	投稿（記事）	固定ページ
主な用途	ブログやお知らせなど、随時更新（追加）されるコンテンツを公開・更新する。	会社概要やお問い合わせなど、独立したページを作成・更新する。
カテゴリー分け	○	✕
タグ付け	○	✕
ページ同士の親子関係	✕	○
ページ特有のデザイン	✕	○
時系列順に並べる	○	✕

WordPressで投稿を作成してみる

WordPressを使ってブログ記事を書いてみましょう。
「投稿」の方ですね。

投稿エディタ

管理画面から、投稿 > 新規追加を選びます。

投稿を行う画面が開きます。
エディタ画面、などと呼ばれているのがこちらです。

ここで入力した文字や画像が、投稿ページ（記事ページ）になります。

人によっては、全面が文字を打ち込むスペースになっているかもしれません。
右側に表示されているメニューは、歯車のアイコンをクリック。
左のWordPress管理メニューは下図のように表示させます。

投稿の作成と公開

では、お試しで投稿を作ってみましょう。
テストなので、簡単な言葉を入れてみます。

このままでは下書き状態（非公開）なので、公開しましょう。
右上にある「公開」ボタンをクリック。
公開しても良いか確認されるので、もう一度「公開」を押します。

公開しました、のメッセージが表示されたら「投稿を表示」をクリック。
投稿した内容のページが作成されていることが分かります。

WordPressでは、自動的に新しく投稿したページへのリンクも作ってくれます。
サイトのトップページも見てみましょう。
投稿したテスト記事へのリンクが出来ていますね。

投稿に画像を挿入する

作成した記事を編集して、画像を加えてみましょう。

見ている画面に記事の編集リンクがある方は、そこをクリック。

編集リンクが無い方は管理画面 > 投稿一覧から「編集」をクリックします。

エディタ画面に戻れましたでしょうか？

テスト記事に画像を入れてみましょう。
お手持ちの写真をドラッグしてみてください。
画像が挿入されます。簡単ですね。

投稿の画像と「アイキャッチ」

WordPressには「アイキャッチ」という項目があります。
これは一覧ページなどで表示する、その投稿を代表する画像を決める機能です。

設定してみましょう。
右側に表示されている投稿の設定を「投稿」に切り替えます。
表示されている項目の中から、アイキャッチを開いて下さい。

アイキャッチ画像を設定をクリック。

ウィンドウが開きます。
メディアライブラリのタブを選択。
先程ドラッグした画像が入っていますね。

画像をクリックすると「アイキャッチ画像を設定」ボタンが使えるようになります。
設定してみましょう。

アイキャッチ欄に画像が反映されています。

「更新」をクリックして変更を保存。
ページ最上部のメニューから、投稿を表示をクリックします。

記事ページが表示されました。
人によって、同じ画像が2回表示されていることもあるでしょう。

これは、アイキャッチとエディタに挿入した画像をそれぞれ表示するように設定されているためです。
（※後記のテーマによって、表示の仕方は変わります）

アイキャッチは、投稿の一覧表示にも使われてます。 アイキャッチを残しておかないと、一覧表示が見にくくなってしまいますね。
同じ画像が２回出るのは嫌、という場合は、投稿本文内の画像を削除しておきましょう。

投稿を分類するカテゴリーとタグ

WordPress投稿画面でアイキャッチを設定した投稿タブの中には、カテゴリー、タグという項目もあります。

どちらも、ブログやSNSの投稿などで耳にしたことがある方が多いと思います。
どんな機能かのイメージはあっても、２つ並んでいると使い分けに迷ってしまうのではないでしょうか？

２つの違いを知っておくと、記事が増えてきた時の管理が楽になりますよ。

カテゴリーとタグの違い

カテゴリーとは

カテゴリーは投稿（記事）を「入れて」分類するための箱・フォルダのようなものです。
ポイントは、カテゴリーは階層構造をもつことが出来るという点です。

上図の場合であれば、おうちレシピという親カテゴリーがあり、その中が更にいくつかのカテゴリーで仕切られている形ですね。

タグとは

カテゴリーは投稿（記事）に「付ける」目印・付箋のようなイメージです。
カテゴリーのように階層構造は無く、それぞれのタグが独立している形です。

カテゴリーよりも更に細かい分類で、投稿記事の内容や特徴を示しす場合に利用します。

タグはカテゴリーとは別物、それぞれが独立した構造です。 このため、上図のようにカテゴリーが違う記事にも、同じタグを付けることが出来ます。
カテゴリーによる区分は違うけれど、似た情報・同じ題材が使われている投稿を繋いでくれる存在でもあります。

例えば、カテゴリーにある主菜などではなく「何でも良いから鳥むね肉の美味しい食べ方を知りたい」というユーザー。
その人は、タグを使うことで、“鳥むね肉”に関する記事だけをピックアップして見ることが出来ます。

カテゴリーとタグの違い

WordPressにおける、カテゴリーとタグの違いは下記のとおりです。

	カテゴリー	タグ
主な用途	投稿を分類する。 フォルダのようなイメージ	投稿に目印をつける。 付箋のようなイメージ
階層構造	あり（親子関係を作れる）	なし（それぞれ独立）
分類の範囲	広め	狭め
重要度	高い	低い
1つの記事へ設定する数	基本1つ （親カテゴリーの数は除く）	最大で3～5つ

投稿にカテゴリーとタグを設定する

では、テスト記事にカテゴリーとタグを設定してみましょう。

カテゴリーの追加

投稿の設定パネルから「カテゴリー」を開き、新規カテゴリーを追加をクリック。
カテゴリー名を入力して、追加しましょう。

カテゴリーに、作成した「テスト」が追加されました。 Uncategorizedは未設定用のカテゴリーなので、クリックでチェックを外します。

せっかくですから、子カテゴリーも作ってみましょう。

カテゴリー名（最初の練習用）を入力。
親カテゴリーのところとを、先程作った「テスト記事」に設定します。
追加すると、テスト記事の下にカテゴリーが出来ます。

カテゴリーの追加

次にタグを設定してみましょう。
タグのパネルを開きます。
ここはシンプルに、タグとして使用したい言葉を入力すればOK。
半角コンマを使って区切ると複数のタグをまとめて登録できます。

灰色の背景色が付いたものが、タグとして確定されています。

下図の左側では、犬は確定されていません。
右側のような見た目になるようにしましょう。

右上の「更新」ボタンをクリックすると、タグとカテゴリーが設定されます。
記事を見てみると、本文の下にタグ、カテゴリーが表示されるはずです。

カテゴリーやタグの編集

作ったカテゴリー/タグの一覧は、管理画面の左メニューから確認できます。

カテゴリーとタグでそれぞれ画面が分かれていますが、基本的な構成・使い方は同じです。
左側ではカテゴリーやタグの作成、右側にある既存のタグ/カテゴリー名をクリックすると編集ができます。

カテゴリーやタグの利点は、記事数が増えてくるほど発揮されます。
お時間がある方はいくつか記事を作ってみると、感覚がつかめますよ。

WordPressサイトのテーマ

WordPressには見た目を変更する「テーマ」と呼ばれる機能があります。
ブログサービスなどにある“スキン”や“着せ替え”と似た機能で、表示するページのデザインやレイアウトを手軽に変更することが出来ます。

WordPressのテーマを変更してみる

管理画面のメニューから、外観 > テーマを開いてみましょう。

有効：と表示されているものが、今使用しているテーマです。 別のテーマにカーソルを重ねてみましょう。 画像の下に「有効化」などのボタンが表示されます。

「有効化」をクリック。 新しいテーマを有効化しました、とメッセージが表示されます。 （管理画面の見た目は変わりません）

サイトを表示をクリックしてみましょう。 今までは一面緑色でしたが、見た目が変わりましたね。 アイッキャッチにも、紺色のフィルターがかかったように表示されています。

このように、テーマを切り替えることで、WordPresユーザーは自分の好きなデザインのサイトを作ることが出来るのです。

と、ここまではクライアントも行う操作。 次回はこの「テーマ」を自作するという、Webデザイナー/Webコーダーのお仕事となる部分をやっていきましょう。

WordPressで、世界に1つしか無いビジュアルのサイトを作ることが出来るようになりますよ！