WordPressの使い方!初心者でもサイト作成が簡単に

2019年4月8日(月)
TechAcademy

WordPressを使用するとデザインの変更や機能のカスタマイズ、データの管理を手軽に行える多機能なブログサービスを作成することができます。

実際、このTechAcademyマガジンもWordPressを使って作られたサイトです。他にも企業のコーポレートサイトやブログサイトなどの多くはWordPressを使われているのです。

サイト作成に便利なプラットフォームなので、ぜひ使えるように理解していきましょう。

そもそもWordPressとは何なのかよく分からない方は、今さら聞けない!WordPressとは【初心者向け】をご覧ください。

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

20160620

田島メンター!!WordPressのことはなんとかわかったんですけど、どうやって使うんですか〜?

20163020-2

WordPressを使うにはインストールや初期設定が必要なんだ。

20160620

なんだか難しそうですね・・・。

20163020-2

きちんと手順に従えば簡単にできるよ。インストールさえしてしまえば、簡単に記事の作成とかサイトデザインとかもできるから。それじゃあ教えてあげるね。

20160620

よろしくお願いします!!!

目次

WordPressのインストール手順

用意するもの

  • PHP・MySQLが使用できるサーバー(レンタルサーバーなど)
    以下の条件があります。

PHP バージョン 5.6 以上
MySQL バージョン 5.6 以上 または MariaDB バージョン 10.0 以上
(2016年11月時点)

  • FTPクライアント(今回はFileZillaを使用します)
  • 独自ドメイン(yahoo.co.jpのように自分のサイトを公開する場合に必要です)

独自ドメインレンタルサーバーについては別途記事内で比較しています。合わせてご覧ください。

本体の入手とサーバーへのアップロード

まず、以下のサイトにアクセスしましょう。

https://ja.wordpress.org/

このボタンをクリックしてWordPress本体をダウンロードします。

wp_xp_1

ダウンロードし、解凍した「wordpress」という名前のフォルダを任意の半角英数字の名前に変更します。ここではwpとしています。(変更せず、「wordpress」のままでもOKです)

FTPクライアントを使用してサーバーに本体をアップロードします。今回はFileZillaを使用します。
サーバーに接続し、WordPressを設置したい場所にフォルダごとアップロードします。

wp_xp_2

アップロードしたフォルダのある場所にアクセスします。

例えばhttp://xxxx.ne.jp/に「wp」と名前変更したWordPressフォルダをアップロードした場合、アクセスする場所はhttp://xxxx.ne.jp/wpとなります。また、これがそのサイトのアドレスになります。

初期設定とインストール

データベースの設定を行います。「さあ、始めましょう!」のボタンをクリックします。

wp_xp_3

データベース名ユーザー名パスワードデータベースのホスト名を入力し、「送信」ボタンをクリックします。これらは使用しているレンタルサーバーにより設定が異なります。

wp_xp_4

以下は、レンタルサーバーのミニバードでの例です。(管理画面の「データベース設定」から見ることができます)パスワードはこのデータベースで設定したものを入力します。

また、データベースの文字コードは「UTF-8」にしておきます。

wp_xp_5

wp_xp_6

「インストールを実行」をクリックします。

wp_xp_7

ここではWordPressサイトの基本的な設定を行います。また、これらの項目は全て後でいつでも変更できます。
「検索エンジンがサイトをインデックスしないようにする」にチェックを入れるとサイトが検索エンジンに表示されない状態にしておくことができます。

入力後「WordPressをインストール」をクリックします。

wp_xp_8

インストール完了のメッセージと、ログイン用のユーザー名とパスワードに関する情報が表示されます。

wp_xp_9

続いてログイン画面が表示されます。設定したユーザー名とパスワードを入力し「ログイン」をクリックします。

wp_xp_10

管理画面の基本設定

ログインするとWordPressの管理画面が表示されます。

記事の投稿やサイトデザインの変更、プラグインの追加や各種設定はこの画面から行います。

wp_xp_11

サイトの基本情報変更

左メニューの「外観」から「カスタマイズ」を選択します。

wp_xp_25

「サイト基本情報」を選択します。

wp_xp_26

サイトのタイトルとキャッチフレーズはここからいつでも変更できます。

wp_xp_27

ログイン・ログアウト方法

管理画面からログアウトする場合は上メニューのユーザー名から「ログアウト」を選択します。

wp_xp_28

再び管理画面にログインするときはサイト上の「ログイン」(テーマにより表示されないものもあります)か、WordPressフォルダ内にあるwp-login.phpにアクセスすることでログイン画面に移行することができます。

例えばhttp://xxxx.ne.jp/wpというサイトの場合はhttp://xxxx.ne.jp/wp/wp-login.phpがログイン画面へのアクセスになります。

wp_xp_29

記事の投稿

左メニューの「投稿」から「新規追加」を選択します。

wp_xp_30

「ここにタイトルを入力」の部分にタイトル、下の欄に本文を入力します。

wp_xp_31

また、「メディアを追加」ボタンからは画像を挿入することができます。

wp_xp_32

入力が完了したら「公開」ボタンをクリックすると記事がサイトに反映されます。

wp_xp_33

wp_xp_34

予約投稿の方法

「公開」ボタンを押せば、その瞬間記事として公開されますが、中には決まった時間に公開したいと思う人も多くいるでしょう。

記事編集ページの右上にある「公開」と書かれた項目をご覧ください。

「すぐに公開するor予約投稿」の右にある編集をクリックします。

公開する日時のフォームが出現して、時間を自由に決めることができます。トップページには出したくないから過去の記事として公開したい、明日の9時に公開したいので、予約投稿にする際に便利です。

今より先の時間に設定すると、「公開」から「予約投稿」というボタン名に変わります。

設定した時間になったら自動的に公開されるので、時間に合わせて手動で公開する必要がなく便利な機能でしょう。

カテゴリとタグの管理

WordPressでは投稿した記事を分類するために、カテゴリーやタグを利用することが出来ます。一般的に、カテゴリーは、記事を大まかにグループ分けする場合に使われ、タグはさらに細かく分ける場合に用いられています。

WordPressで投稿する記事は、必ずカテゴリーを選択しなければなりませんが、タグは必ずしも設定しなくてもよいことになっています。

新規カテゴリーの作成方法

ログインした後、「投稿」から「カテゴリー」を選択すると、カテゴリー新規追加、既存のカテゴリー編集の画面が開きます。

名前にカテゴリー名を書いて、下のほうにある新規カテゴリーを追加ボタンを押すと、新規カテゴリーが追加されます。

スラッグというのは、カテゴリーのアドレスにつける別名みたいなものです。スラッグを設定しない状態で、未分類のカテゴリー一覧の記事を表示した場合、アドレスが以下のようになります。

http://あなたのHPのURL/category/%E6%9C%AA%E5%88%86%E9%A1%9E/

ブラウザのURLを見てみると、

http://あなたのHPのURL/category/未分類/

と表示されていますがそれはブラウザが気を利かせて、日本語に変換してくれただけで、本当はURLエンコードされた日本語文字列になっています。

コピーしてテキストエディタや掲示板などの入力欄に貼り付けるとわかります。未分類のカテゴリーに対して、not-categoryなどのスラッグをつけると「http://あなたのHPのURL/category/not-category/」でアクセスできるようになります。

また、カテゴリーに親カテゴリーを指定することで、カテゴリーに階層構造を持たせることも出来ます。

新規タグの作成方法

ログインした後、「投稿」から「タグ」を選択すると、タグの新規追加、既存のカテゴリー編集の画面が開きます。

タグもカテゴリーと同じで、スラッグを利用することが出来ます。

タグは、記事投稿時に複数設定することが出来るので、該当するものを設定しましょう。

ユーザー管理

WordPressでは、複数人で管理することも出来て、それぞれ権限を設定することでセキュリティを向上させることが出来ます。

管理画面のユーザーをクリックすると、新規登録・編集画面になります。

権限グループごとに何ができるのか

新規追加の前に、権限について見ていきます。権限には以下の5種類のグループがあります。

  • 購読者:WordPressにログインすることが可能。プロフィールの変更が出来る。
  • 寄稿者:記事を投稿できる。ただし、編集者や管理者が許可しない限り公開状態には出来ません。
  • 投稿者:記事を投稿できるが、他のユーザーが作成した記事は扱えないことと、固定ページ作成は出来ない。
  • 編集者:他のユーザーが作成した記事や固定ページなども扱えるが、デザインやプラグインなどWordPressの設定に関わるものは扱えない。
  • 管理者:全ての権限がある。

となっています。寄稿者は記事を投稿できるものの、公開状態にするには編集者以上の権限を持つユーザーの許可が必要。

投稿者は、記事を投稿できるものの、カテゴリーなどの作成や管理権限が必要なもの、他のユーザーが作成した記事の編集は行えません。

編集者は、ほとんど全ての作業が可能ですが、設定にかかわるものは変更できないです。

管理ユーザーに権限を設定することで、複数人の管理人がいてもセキュリティが守られるようになっています。

新規ユーザーの登録方法

管理画面の「ユーザー」をクリックすると、登録されているユーザー一覧が表示されます。

ページトップに「新規追加」ボタンがあるので、こちらをクリックしましょう。

必要な情報を設定した後、権限を決めて追加ボタンを押すと追加できます。

権限を間違えると、全ての記事が削除されてしまう恐れもあるので注意が必要です。

ユーザーの削除方法

管理者の権限を持つユーザーでログインすると、削除することが出来ます。

パーマリンクの設定

パーマリンクでは、記事ページなどのURLをカスタマイズすることができます。「設定」から「パーマリンク設定」でパーマリンクの編集を行うことができるので、確認してみましょう。

URLとは、通常であれば、ファイルの場所を示しています。

例えば、URLが「http://ほにゃらら.com/aisatsu/ohayou.html」だった場合「aisatsu」というフォルダの中の「ohayou.html」というファイルの情報が返されます。

ところがWebサーバーの設定でこれを変更することが出来ます。WordPressのインストール先のフォルダに.htaccessファイルがあります。

中身について詳細は解説しませんが、要求したファイルやフォルダがない場合、全てのアクセスを「index.php」というファイルに集める、という設定になっています。

index.phpにアクセスを集めて、ブラウザのアドレスから判断して、プログラムでデータベースから検索して結果を表示しています。

WordPressのデフォルトの設定では、2017年4月18日に投稿した場合のURLは、

http://あなたのURL/2017/04/18/hello-world/

などのようになっています。この/2017/04/18/hello-world/の部分が、パーマリンクになります。

デフォルトでは、日付と投稿名でデータベースから記事を取得しているようです。この部分をある程度自由に変更することが出来ます。

パーマリンクの変更

パーマリンクを変更した場合、どのようにURLが変わるのかを見てみます。

パーマリンクの設定の変更画面は、管理画面から設定、パーマリンク設定をクリックします。

デフォルトの状態は、日付と投稿名です。2017年の4月に投稿した記事であれば、

/2017/04/投稿した記事のタイトル/

というURLになります。

基本に設定すると「/?p=123」という、記事に設定されている番号が付けられます。これはデータベース上で管理されている、その記事唯一の番号です。

月と投稿名だと「/2017/04/投稿した記事のタイトル/」になります。数字ベースだと「/archives/123」といった形になります。

投稿した記事のタイトルだけという設定もあり「/投稿した記事のタイトル/」というURLにすることも可能です。

パーマリンクのカスタム構造

パーマリンク設定では、自分でカスタマイズすることもできます。構造タグというものを使用します。詳しくは使い方を参照してください。

カテゴリーベースを変更することも出来ます。カテゴリーベースのところを.(ドット)にすると「/category/カテゴリー名/」になるURLが「/カテゴリー名/」に短縮することも出来ます。

ただし、その場合投稿記事のパーマリンクが「/記事のタイトル/」になっていた場合、重なる可能性があります。

記事の投稿名がhello-worldで、カテゴリーにhello-worldがあった場合どうなるでしょうか?

どちらも「http://あなたのURL/hello-world/」でアクセスできてしまいます。この場合、投稿した記事が優先して表示されてしまい、カテゴリー一覧が表示されなくなるので注意が必要です。

テーマ

WordPressは「テーマ」という機能によりサイトのデザインを簡単に変更することができます。

各種テーマは公式が作成したものやユーザーが公開しているものが使用できます。個人や企業でWordPressのテーマを作っているところも多いので、費用をかけなくても十分整ったサイトを作ることができるはずです。

テーマの変更方法

左メニューの「外観」から「テーマ」を選択します。

wp_xp_35

インストール済みのテーマの一覧が表示されます。上の「新規追加」かテーマ一覧内の「新しいテーマを追加」をクリックします。

wp_xp_36

テーマは新着や人気順から探せる他、右上の「テーマを検索」からキーワードを指定して見つけることができます。

wp_xp_37

テーマをインストールし、一覧画面から「有効化」をクリックするとサイトに反映されます。

wp_xp_38

テーマの例

「WP Portfolio」テーマは、ポートフォリオ作成に適したテーマです。記事作成時にアイキャッチに指定した写真やイラストなどを一覧できるため作品を見せやすくなっています。

wp_xp_39

おすすめのテーマ

各シチュエーションで使えるWordPressのテーマを紹介します。国内ではブログサイトやコーポレートサイトをWordPressで利用している企業が多いですが、海外ではECサイトなどもテンプレートが用意されているので、ぜひ使ってみてください。

以下では、ブログサイト、ECサイト、コーポレートサイトに分けてそれぞれ人気のテーマを紹介しています。無料のテーマなので、気軽に試してみてください。

ブログサイト

アルバトロス

かなり多くのブロガーが利用しているオープンケージのWordPressのテーマ。

その中でも王道のアルバトロスをおすすめしたいと思います。有料ではありますが、技術的なスキルが全くない人でも簡単におしゃれなWebサイトを作れるのが大きな特徴です。

カスタマイズもかなり自由に行えますし、一度買ってしまえばずっとサイトを運営できるので、多くのブロガーから人気なのでしょう。

アルバトロス

Riba Lite

c839171a15de07cc18de9b2f96581c6b-768x449

画像のサムネイルが大きくバックに表示されているタイプのサイトです。

カメラでよく写真を撮ったり、トップページで写真を強調させたいときにおすすめのテーマです。

ダウンロード / DEMO

Hueman

85a896204cc319a91e4b9a6c5c75462e-768x465

よく見るニュースサイトのような作りになっているテンプレートです。

サイドメニューも充実しており、どこに何を置くか難しい技術を使わなくても選択するだけで設定することができます。個人のブログサイトとしても活用できるので、ぜひ活用してみてください。

ダウンロード / DEMO

ECサイト

Santa Cruz

c1cbf01de1490ee8e54877a3f24f3ec4-800x467

一般的なECサイトのデザインにしたい人におすすめです。

カテゴリも細かく設定できますし、洋服などを販売する際に写真にマウスオーバーすると他の写真も出てくるといった仕掛けもあります。

スマホで見るとカートに入っているアイテム数、購入金額がトップで確認できるのでユーザーとしても使いやすいでしょう。

ダウンロード / DEMO

Make

b70b43163a03c8dc892bdd568c2893ac-800x472

縦長の写真が印象的ですが、全身のコーディネートや縦長動画などを見せる際に使えるテンプレートです。

雑誌を読んでいるような感覚でスマホ上で買い物ができるので、何度も訪れたくなるでしょう。一貫性を伝えやすいので、ブランディングを意識したサイトを作りたい人にはおすすめです。

ダウンロード / DEMO

Fukasawa

482cf5712931650b4c401c2da92771e3-800x449

白を基調としたデザインでより一層アイテムを引き立てるテンプレートでしょう。

商品自体も白をバックに写真を撮っているので、シックな印象を与えますね。ブランディングとしての見せ方としても使えるのでおすすめです!

ダウンロード / DEMO

コーポレートサイト

Zerif Lite

ca19cc070c2b7758b542dde5f2ed89bf-800x428

WordPressのテンプレートの中でも非常に多機能で、出来ないことは無いんじゃないかというくらい多くのことを実現できるはずです。

また、デザイン面でもスクロールすると横からフォームが出てくるパララックス仕様になっており、おしゃれにも見えるでしょう。

ダウンロード / DEMO

Sydney

01adefd94c8115b14d86cab1b81a4c50-800x421

画像がディスプレイいっぱいに表示されたインパクトの大きいテンプレートです。

トップページに会社情報、事業内容、メンバー、SNSアカウント、ニュースなど多くの情報も載せられるのでスクロールしていて飽きが来ないでしょう。

ダウンロードDEMO

他にも初心者におすすめの無料で使えるWordPressのテーマを紹介しているので、合わせてご覧ください。

プラグイン

WordPressではプラグインという拡張機能を使うことによってサイトにさまざまなシステムを追加することができます。

アクセス解析を行うものや問い合わせフォームを追加するもの、スライドショーを表示させるものなどさまざまなプラグインがあります。

プラグインの検索とインストール

左メニューの「プラグイン」から「新規追加」を選択します。

wp_xp_40

テーマのときと同様に、新着順や人気順・キーワードでの検索でプラグインを探すことができます。「今すぐインストール」ボタンをクリックするとプラグインがWordPressにインストールされます。

wp_xp_41

インストールされたらすぐに利用できるわけではなく、まず有効化をしなければなりません。

プラグインの有効化

左メニューの「プラグイン」から「インストール済みプラグイン」を選択します。

wp_xp_43

インストールされているプラグインの一覧が表示されます。
使用したいプラグインの「有効化」をクリックします。

wp_xp_44

プラグインの例

SNSボタンのプラグイン

「Social Media Feather | social media sharing」プラグインを使用すると、サイトの記事にFacebookやTwitterなどの共有用アイコンを追加することができます。利用するサービスやアイコンの大きさなども自由にカスタマイズが可能です。

記事をシェアしてもらうためにもSNSボタンはぜひとも設置しておきましょう。

wp_xp_42

記事編集で役立つプラグイン

TinyMCE Advanced

ar_pl_1

記事作成をする前に必ず入れておきたいプラグインです。

ビジュアルエディタに追加できる各機能を手軽に設定できます。

TinyMCE Advancedの使い方

Video Gallery

ar_pl_8

YouTubeやVimeoといった外部の動画を記事内に埋め込むことができるプラグインです。

URLを入力するだけで追加できるので、簡単に設定できるはずです。

Video Gallery

SEO対策に役立つプラグイン

All in One SEO Pack

se_pl_2

SEO対策全般の設定をまとめて行えるプラグインです。

FacebookやTwitterといったSNSとの連携、SEOにおいて欠かせないタイトルタグ・ディスクリプションタグの設定も行えるので、まず最初に入れておきましょう。

All in One SEO Packの使い方

Google XML Sitemaps

se_pl_1

XMLサイトマップを作成してGoogleに更新を通知させることができます。

サイトマップがあることでサイトにどんなページが存在するのかGoogleに認識させることができるので、SEOの効果も見込めます。

Google XML Sitemapsの使い方

セキュリティ対策に役立つプラグイン

Acunetix WP Security

サイトの脆弱性をチェックして、それに合わせた対策を行うプラグインです。

サイト内のファイルのセキュリティレベルが一目でわかり、セキュリティ対策として十分ではないと判断されると通知が来る便利なプラグインです。

いつも使うわけではないですが、セキュリティを万全にしておきたい際はぜひ入れておきましょう。

Acunetix WP Securityの使い方

Throws SPAM Away

記事を投稿すると英語のスパムコメントが発生する場合があります。

投稿されたコメントに日本語が含まれていなかったり、有害と認定されたIPは無視することができるので、いざという時に便利でしょう。

Throws SPAM Away

WordPressで最初に入れておくべきプラグインも合わせてご覧ください。SEO対策やサイト改善に役立つプラグインを多々紹介しています。

WordPressで知っておきたいその他の設定

ここではWordPressで本格的にサイト運用していく上で覚えておきたい設定です。

SEO対策をより強化したり、サイトの表示を早くしたり、デザインを自分の好きなようにカスタマイズしたりと様々な使い方ができます。

全て最初に設定する必要はありませんが、WordPressの操作に慣れてきたらぜひともチェックしておきましょう。

サイトのデザインをカスタマイズする

WordPressのCSSを編集する方法

子テーマを使ってカスタマイズする方法

WordPressでスマートフォンサイトに対応させる3つの方法

記事投稿時の設定

投稿を予約する方法

記事を非公開にする方法

WordPressでカテゴリーを設定する方法

WordPressでタグを設定する方法

関連記事を表示させる方法

ウィジェット(サイドバー)の設定

ウィジェットを編集する方法

RSSボタンを設置する方法

人気記事を表示するプラグイン3選

検索フォームを追加する方法

固定ページやフォームを作成

固定ページを作成する方法

問い合わせフォームを作成する方法

アクセス解析の設定

Google Analyticsと連携させる方法

アクセス解析に便利なプラグイン10選

様々なシチュエーションに使える設定

サイト内に検索フォームを設置する方法

サイトの情報をバックアップする方法

サイトが真っ白で表示されなくなった時の対処法

WordPressのページ表示速度を高速化できるプラグイン5選

まとめ

過去にWordPressでサイトを作ろうとした経験がある人は分かると思いますが、最初のインストールや設定部分が一番骨の折れる作業です。ここでつまずいて諦めてしまう人も多くいます。

せっかくおしゃれなサイトをコーディングせずとも形にすることができるので、ぜひ一度流れをつかんでおきましょう。WordPressの使い方を覚えておけば、今後Webサイトを作る際にもすぐ完成できるはずです。

20160620

一からコードを書かずにこんなに簡単にサイトが作れるんですね。それにテーマやプラグインもいっぱいあって、選択するだけで使えますし。

20163020-2

そうだね。大まかなテーマを選んでから自分でテーマを触ってデザインを変えることもできるから、自分の作りたいようにも作れるよ。

20160620

そうなんですね!今度、自分なりのサイトを作ってみます!

20163020-2

うん。わからなかったらまた聞いてね♪

20160620

はい!お願いします!

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。


TechAcademyマガジンは、オンラインのプログラミングスクールTechAcademyが運営する教育×ITに関するWebメディアです。トレンドや最新情報など役に立つ記事を発信しています。
https://techacademy.jp/magazine/

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています