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

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

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

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

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

WordPressの管理画面と表示画面

「Log In」ボタンをクリックして、表示されたページはWordPressの管理画面（ダッシュボード）です。サイトを訪れた人には見えない部分ですね。

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

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

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

　↓

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

WordPressを日本語化する方法

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

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

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

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

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

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

同じく設定 > 一般のページ。
一番上に“サイトのタイトル”と“キャッチフレーズ”の欄がありますね。

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

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

WordPressを使ってページを作る

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

WordPressにはコンテンツを投稿し、１つのページとして出力する機能として「投稿」と「固定ページ」の２つが用意されています。

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

投稿（記事）

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

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

基本的には投稿＝ブログの機能だと思えば大丈夫。
「投稿」だけだと分かりにくいため、記事作成や記事投稿と呼ぶ方もいます。

投稿は必要に応じて、随時更新されます。
すると投稿（記事）の数はどんどん増えていきますよね。
このため、投稿にはカテゴリーやタグなど「どんな投稿（記事）なのか」を区別する仕組みがセットになっています。

新しい、いわば“旬な”情報を見たいユーザー向けに、新着投稿の一覧を表示したり、RSS送信（Webサイトの更新情報配信）を行ったりもできます。

固定ページ

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

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

固定ページにはカテゴリーや投稿日による一覧表示はありません。
このため、固定ページ＝独立したページと表現されることもあります。

固定ページはカテゴリー等を使ってグループ化することはできません。ただ、親子関係を指定することで関連するページをまとめることができます。
例えば、会社概要というページ（親ページ）があり、それぞれの項目について詳しく書いてある沿革などのページ（小ページ）があるという形です。

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

投稿・固定ページの違い

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

WordPressで投稿を作成してみる

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

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

投稿を行う画面が開きます。
エディタ画面、などと呼ばれているのがこちらです。
ここで入力した文字や画像が、投稿ページ（記事ページ）になります。

左の管理メニューがないと不便な時もあります。
下図のようにすると、メニューが復活しますよ。

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

右上にある「公開」ボタンをクリック。
公開しても良いか確認されるので、もう一度「公開」を押します。

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

サイトのトップページも見てみましょう。
投稿したテスト記事へのリンクが出来ていることが確認できます。

もう一度、作成した記事を編集しましょう。
見ている画面に記事の編集リンクがある方は、そこをクリック。

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

エディタ画面に戻ってきました。
テスト記事に画像を入れてみましょう。
お手持ちの写真をドラッグしてみてください。
画像が挿入されます。

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

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

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

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

アイキャッチ欄に画像が反映されていることが確認できたら、「更新」をクリックして変更を保存して下さい。

ページ最上部のメニューから、投稿を表示をクリック。

記事ページが開きます。
人によって、同じ画像が2回表示されていることもあるでしょう。
これは、アイキャッチとエディタに挿入した画像をそれぞれ表示するように設定されているためです（※後記のテーマによって、表示の仕方は変わります）。

アイキャッチの方は、トップページに出力されている投稿の一覧表示にも使われてます。

同じ画像が２回出るのは嫌、という場合は、投稿本文内の画像を削除しておきましょう。アイキャッチは残しておいたほうが良いです。

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

WordPressのカテゴリーとタグの違いを知る

アイキャッチを設定した付近には、カテゴリー、タグというメニューがあります。

ブログやSNSの投稿などで耳にしたことがある方が多いと思います。どんな機能かのイメージはあっても、２つ並んでいると使い分けに迷ってしまうのではないでしょうか？
２つの違いを知っておくと、記事が増えてきた時の管理が楽になりますよ。

カテゴリーとは

カテゴリーは投稿（記事）を「入れて」分類するための箱・フォルダのようなもの。

カテゴリーはパソコンの“フォルダ”と同じく階層構造をもつことが出来ます。
上図の場合であれば、おうちレシピという親カテゴリーがあり、その中が更にいくつかのカテゴリーで仕切られている形ですね。

タグとは

カテゴリーは投稿（記事）に「付ける」目印・付箋のようなイメージです。
カテゴリーよりも更に細かい分類で、投稿記事の内容や特徴を示します。

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

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

カテゴリーとタグの違い

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

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

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

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

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

せっかくですから、子カテゴリーも作ってみましょう。
カテゴリー名を入力して、親カテゴリーを先程作った「テスト記事」にします。
追加すると、テスト記事の下にカテゴリーが出来ます。

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

灰色の背景色が付いたものが、確定されています。
下図の左側では、犬は確定されていません。
右側のような見た目になるようにしましょう。

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

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

作ったカテゴリー/タグの一覧は、管理画面の左メニューから確認できます。
ここからカテゴリーやタグを作成することも可能です。

WordPressサイトのテーマ

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

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

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

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

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

サイトを表示をクリックしてみましょう。


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

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

と、ここまではクライアントも行う操作。
次回はこの「テーマ」を自作するという、Webデザイナー/Webコーダーのお仕事となる部分をやっていきましょう。WordPressで、世界に1つしか無いビジュアルのサイトを作ることが出来るようになりますよ！