WordPressの使い方(投稿・メディア・固定ページ編)

WordPressの使い方(投稿・メディア・固定ページ編)

前回、WordPressのインストール方法を説明しました。想像されているよりは簡単だったのではないかと思います。サーバーやドメインを自分で用意するのは最初は手間がかかったりすることもありますが、WordPress本体のインストールはそれほど大変ではなかったと感じられる方が多いようです。インストールと同じようにWordPressの使い方も基本的な部分においてはそれほど難しくないと感じられるでしょう。

今回は、WordPress管理画面より新しい投稿・メディア(写真など)の追加・編集・固定ページの方法をわかりやすく説明していこうと思います。

1.WordPressの使い方(投稿編)

これから投稿について説明していきます。

投稿は主にブログなどの記事をWordPressでは指すことが多いです。言葉で説明するのは難しい部分もありますが、インターネット上を検索してみると「動的なページ」などと言われたりもします。しかし、ちょっとこの言葉では分かりにくいですよね。

感覚として捉えておくだけで問題ないかと思いますが、わかりやすい言葉を選ぶとしたら「流れていく記事」というイメージを持ってみてください。記事は新しいものを書くたびにどんどん古い記事が増えていきますよね。時間軸を「川」とするならば、記事は「流れる葉っぱ」というイメージです。こういうことを「動的」と言われたりします。

ですので、投稿とは「どんどんと新しい記事が流れていくもの」というイメージを持っていただければ良いかと思います。(後ほど説明します「固定ページ」との違いでももう一度触れることになります)

1-1.新しく投稿を作成する

では早速新しい記事を投稿してみましょう。

管理画面にログインします。

create-post-01

左サイドバーの【投稿】もしくは上部の【+新規】にマウスオンすると、上のようなメニューが表示されます。そこからそれぞれ【新規追加】もしくは【投稿】をクリックして進みましょう。

create-post-02

するとこのような画面になるかと思います。今回サンプルとして用意しているWordPressは初期状態ですのでこのような画面になります。お使いになっているテーマによっては画面に表示される内容が異なる場合があります。

この画面が各投稿を管理・編集するページとなります。では項目を詳しく見ていきましょう。まずは「ここにタイトルを入力」と表示されている部分にタイトルを入力してみましょう。

create-post-03

今回は例として「新しい記事を書いてみます」というタイトルをつけました。そして、記事を書いていきましょう。

1-2.ビジュアルエディタとテキストエディタの違い

記事を書く方法として2通りの方法があります。一つはビジュアルエディタモードで書く。もう一つはテキストエディタモードで書くです。

上の画像はビジュアルエディタモードで記事の内容「ビジュアルエディタモードで書いています。」と入力した状態です。ビジュアルエディタモードとは、簡単な言葉で説明すると「見たままの状態が記事になるモード」と言えます。

create-post-10

このようなボタンが配置されているのが見えるはずですが、左から「太字」「斜字」「訂正」「箇条書き」などなど、感覚としてはMicrosoft Wordで文章を編集するような感じで記事を書いていくことができます。

では、もう一つのモード「テキストエディタモード」もみてみましょう。

create-post-04

テキスト入力欄の上のメニュー部分が少し変わったことに気付かれましたか?少し拡大してみるとこのようになっています。

create-post-11

内容としては、ビジュアルエディタモードとさほど変わりません。何が違うのかというと、

ビジュアルエディタ
見た目で記事を執筆していくモード。ですのでHTMLタグやコードは見えない。
テキストエディタモード
タグなども自分で入力しながら執筆していくモード。ですのでHTMLタグやコードが見える。

という部分が大きな違いになります。執筆するモードに関しては個人の好き嫌いもありますので、どれが良いというものもありません。自分で書きやすい形を見つけていかれた方が良いかと思います。

記事の内容はこのように入力していきます。次はスラッグについて説明します。

1-3.スラッグの変更方法

create-post-05

記事タイトル下にこのような表示がみられるかと思います。こちらはスラッグを設定する部分となります。スラッグとはそもそも何でしょうか。

スラッグとは、投稿や固定ページを表すいくつかの単語のこと。スラッグは(WordPress によって自動生成された)URL に適する形式の投稿タイトルであることが多いが、その他の好きなフレーズでもかまわない。URL にあるコンテンツを説明する支援として、スラッグはパーマリンクで使われる。

参照:用語集 – WordPress Codex

タイトルを入力した後、自動的にそのタイトルがスラッグとして登録されます。しかし、それは日本語でのスラッグとなってしまいます。記事ページのアドレスに日本語が含まれることが良いとするかどうかは考え方次第です。SEO的な観点からの見方も二分するところがあります。(これ以上話を進めると今回のテーマから逸脱してしまうので控えます)

例えば、日本語から英語に変更したい場合はこのように行います。

上の画像の黄色い部分(最初は記事タイトルと同じテキストが入っている)をクリックします。

create-post-06

すると、上の画像のようにテキストを編集することが可能となりますので、ご自由に編集してみてください。

create-post-07

今回はこのように英語で「my first post」と入力してみました。これで【OK】ボタンを押します。

create-post-08

すると「my-first-post」というスラッグが設定されました。覚えておいていただきたいのが、英語入力した場合にスペースを入力すると「-(ハイフン)」で自動的に置き換えられるということです。アドレスのテキストが切れてしまうといけませんので、自動的にこうなるようになっています。

続きまして、カテゴリーとタグについて説明していきます。

1-4.カテゴリーとタグについて

投稿にはカテゴリーとタグを設定することができます。

create-post-09

カテゴリーとは、

WordPress では、投稿はそれぞれ カテゴリー に分類される。投稿をきちんとカテゴリー分けすることで、似ている内容のコンテンツをグループ化し、サイトのナビゲーションを分かりやすくすることができる。”投稿カテゴリー” を、リンクを管理するのに使われる リンクカテゴリーと混同しないように注意が必要。

参照:用語集 – WordPress Codex

と考えられています。また、タグとは

タグとは、投稿の説明となるキーワードのこと。 より小さな範囲に向けたカテゴリーと考えると良い。投稿には複数のタグをつけることができ、軽く関わっているだけのキーワードの場合も少なくない。カテゴリーと同様、各タグはたいていそのタグのついたすべての投稿(へのリンク)を表示するページにリンクされている。タグはフィールドに記入するだけでその場ですぐに作成・入力できる。デフォルトでは、投稿と投稿タイプにだけ、タグを付与できる。
また、様々な色、サイズなどのキーワードの集合である「タグクラウド」としての表示もでき、ブログの内容の全体的な俯瞰図を提供することができる。
タグとカテゴリーは混同されやすいが、違いは簡単である。カテゴリー構成は頻繁に変えるものでないが、タグは投稿ごとに生まれてもよい。そのため、カテゴリー付けと比べてタグ付けのほうが、各投稿の話題により近い(より詳しい)分類になる。

参照:用語集 – WordPress Codex

と言われています。

と言われても意味わかりませんよね。そこで一つの考え方としてわかりやすいものを紹介します。

cat-tag-description

上の図を見てください。縦に赤・青・黄に分かれているのがカテゴリーです。カテゴリー1には記事A、記事D、記事Gがありますね。このようにカテゴリーでは記事を縦に分けるようなイメージを持たれると良いかと思います。カテゴリーという箱を作って、それぞれ記事を整頓しておくというイメージですね。

では、タグの考え方ですが、カテゴリー1のなかにある記事AにはタグIが付けてあります。また、カテゴリー2の記事Hにも同じくタグIが付けてあります。このようにカテゴリーには関係なくタグをつけることができます。タグはカテゴリーが縦に分けるイメージだったのに対して、横に分けるようなイメージとして捉えていただければ勘違いなく運用していただけるかと思います。

1-5.カテゴリーの作成方法

カテゴリーとタグの仕組みがなんとなく分かったところで、実際に作成する方法を説明します。

記事の編集画面右側にカテゴリーやタグの欄があります。

create-post-12

新しいカテゴリーを追加する場合、この【+新規カテゴリーを登録】というリンクを押してみましょう。

create-post-13

すると、このように入力欄が表示されます。こちらに新しく作りたいカテゴリー名を入力します。

create-post-14

今回は例としてテストというカテゴリーを作成してみました。入力に問題なければ下の【新規カテゴリーを追加】ボタンを押します。

create-post-15

すると、現在すでに選択されている未分類というカテゴリー(初期状態に用意されているもの)とは別に、先ほど新規追加したカテゴリーも同様にチェックマークが付き選択されていることが確認できると思います。このようにカテゴリー追加することができます。

1-6.タグの登録方法

カテゴリーの新規作成方法を説明しましたが、タグに関してはカテゴリーよりも簡単です。

create-post-16

初期状態ではカテゴリー欄の下にタグ欄が見えるかと思います。こちらの入力欄に設置したいタグを入力します。

create-post-17

create-post-17

今回は例としてテストタグというタグをつけてみました。入力が終わったら右側にある【追加】ボタンを押してみましょう。

create-post-18

すると、このように表示され登録されていることが確認できるかと思います。登録を解除したい場合にはタグの先頭にある×(ぺけ)を押せば登録を解除できますし、日頃よく使うタグについてはよく使われているタグから選択をクリックすると表示されます。

1-7.アイキャッチについて

アイキャッチとは、それぞれの投稿に対して目印となるような、もしくはその投稿内容を視覚的にイメージしやすい画像のことを指します。例えば、美味しいケーキの記事を書いた場合にアイキャッチ画像が自動車の画像ではケーキを連想することはできませんよね?やはり、ケーキの記事にはケーキの画像をアイキャッチに設定することによって、読者の方にはタイトルを読まなくてもアイキャッチ画像のイメージで記事の内容を推測してもらえるという効果があります。

画像の設定・追加方法に関しては後述するメディアの部分でご紹介します。

1-8.投稿

これで投稿を公開する準備が整いました。カテゴリーやタグ、スラッグやアイキャッチに関しては登録・設定していなくても投稿を公開することはできます。(テーマによってはできなくすることも可能です)しかし、SEO的な観点から考えると設定しておく方が良いとされますので、可能な限り設定されることをお勧めします。

最後に右側の公開欄にて【公開】ボタンを押せば完了です。

create-post-19

2.WordPressの使い方(メディア編)

ホームページ内のコンテンツ(中身・内容)を作成していく上で、必要となってくるのが画像だと思います。画像はテキストで説明するよりも視覚的に早く認識しいてもらえるので、使い方によっては効果的で伝わりやすいコンテンツとなり得ます。ここではWordPressにおいて画像などを管理するメディアという機能の使い方を紹介していきます。

2-1.メディアを追加

投稿などにおいて記事を書いている途中に画像を挿入したくなることも多々あります。毎回毎回、あらかじめ挿入する画像を先にアップロードしておいて準備しておくのも大変ですからね。

ではまず画像のアップロードの方法を説明します。記事を入力する部分の上に【メディアを追加】というボタンがあります。それをクリックしてみましょう。

create-post-20

すると、背景が黒く透明になりこのような画面になります。

create-post-21

【ファイルを選択】をクリックしてアップロードしたい画像を選択しましょう。

create-post-22

アップロードが完了するとこのような画面になります。

create-post-23

右上に大きな青色のチェックマークが付いているものが現在選択されている画像です。画像をアップロードした場合、自動的に選択されているはずです。複数画像を一度にアップロードした場合はすべての画像にチェックマークがつきます。

画面右側に設定項目があります。これらを簡単に説明します。

キャプション
画像と一緒に表示するキャプション用のテキストを設定します
代替テキスト
画像のimgタグ内のalt要素に設定されるテキストです。画像が表示されなかった場合の代替テキスト、もしくはテキストリーダーなどで使われます
説明
管理用に画像の説明を入力します。
配置
左寄せ、右寄せなどの画像配置方法を選べます
リンク先
記事に挿入した画像をクリックした際のリンク先を設定します。画像にリンクを貼りたくない場合には「なし」を選べます
サイズ
挿入する画像のサイズを選択できます。こちらで選択できる画像のサイズは管理画面の【設定】より設定することが可能です。

必要な項目の設定が完了したら【投稿に挿入】をクリックして挿入します。すると、エディタ内ではこのように確認することができます。

ビジュアルエディタの場合
create-post-24

テキストエディタの場合
create-post-25

ビジュアルエディタの場合だと画像がエディタ内で確認できます。また、テキストエディタの場合ですと、タグやショートコードが自動的に書き出されているのがわかります。

このようにして投稿に画像を挿入することができます。

2-2.画像の編集

次はちょっと便利な機能です。WordPress上で画像のリサイズなどを行うことができる機能です。メディアを挿入する画面から画像を選択してみましょう。すると右上に【画像を編集】というリンクが見えると思います。

create-post-26

こちらを押して進んでみましょう。

create-post-27

すると、簡易的ではありますが画像を編集できる画面に切り替わります。主なメニューとしては以下のことができるようになっています。

左上メニュー

トリミング
画像を好きな形にトリミング(切り抜き)することができます
左に回転
左に90度回転させることができます
右に回転
右に90度回転させることができます
垂直に反転
垂直方向に反転させることができます
水平に反転
水平方向に反転させることができます
戻る
行った作業を戻すことができます
進む
戻った作業を進めることができます

右側のメニュー

画像縮尺の変更
画像の縮尺比率やサイズを変更することができます
画像のトリミング
画像のトリミングを比率やサイズで指定することができます
サムネイル設定
設定を行うサムネイルを選択することができます

この画面にて必要な画像の修正を行い、【保存】ボタンを押すことによって処理が確定します。高度な処理を行うには専門的なソフトが必要になりますが、投稿に挿入する画像のサイズ変更などには十分な機能が備え付けられています。

3.WordPressの使い方(固定ページ編)

では最後に固定ページについて説明します。

3-1.投稿ページと固定ページの違い

先ほど投稿について説明した際に、『「流れていく記事」というイメージ』という言葉で説明しました。固定ページはそれとは真逆で読んで字のごとく「固定されている記事」というように考えてみてください。

固定ページは投稿のように流れていく、時間とともに順に新しい記事が積み重なっていくのではなく、時間経過に左右されないページというイメージで捉えていただければ差し支えないかと思います。投稿ページがブログ記事などの時間が経つにつれて新しく記事が積み重なっていくのに対して、固定ページは「ブログについて」や「お問い合わせ」などのページのような日々変化しないページに使われることが多いです。

3-2.新しい固定ページを作成する

では、新しく固定ページを作る方法を説明します。

と言っても方法は新しく投稿を作るのとほとんど同じです。

create-post-31

上の画像の2箇所から新規固定ページを作っていきます。

create-post-32

入力する内容もほとんど投稿ページを作成する際と同じですね。タイトルを入力するとスラッグを入力する部分も出てきます(タイトルを入力しないとスラッグ修正エリアは現れません)。

一箇所だけ投稿ページを作成した時と違う部分があります。それは右サイドバーのページ属性という部分です。属性と言われるといかにも難しく感じてしまいがちなのですが、簡単な言葉で説明すると固定ページと他の固定ページとの関係性を設定する欄になります。下の図をご覧ください。

page-reration-chart

例として、販売する商品を紹介するページを固定ページ機能を使って作成することにします。まず最初に「商品の紹介」という名前で固定ページを作ります。その後、「電気製品」という固定ページや「キッチン製品」という固定ページを作っていくとします。

その場合、「商品の紹介」というページは商品を紹介することにおいてトップにくるページ(様々なジャンルの商品を抜粋的に紹介しているような雰囲気)になりますので上の図でいう親エリアのページとなります。

そして、「電気製品」や「キッチン製品」という固定ページは、「商品の紹介」ページを細かく分けた内容を紹介するページですので、上の図でいう子エリアのページとなります。

こういったように、ページに親を持たせることができるため固定ページもカテゴリーで分けたような管理をすることが可能となります。また、順序という部分があります(最初は0になっています)が、これは同じ親を持つ固定ページの表示順を指定することができます。ルールとしては0から順に表示することになっていますので必要があれば設定します。

まとめ

今回は、

  • 投稿ページの作り方・考え方
  • メディア機能の使い方
  • 固定ページの作り方・考え方

について説明していきました。

WordPressを用いてホームページを運用する上で、これらの操作は基本中の基本となります。これらの作業を問題なくこなせるようになることによって、より一層ホームページに掲載する内容(コンテンツ)に注力することができるようになります。面倒な作業に思う部分もあるかもしれませんが、何度も触って、何度も失敗して、段階を経てスキルアップしていきましょう。