人気ブログツールWordPressサイト構築入門(中編) - 新世代Web制作テクニック総特集 | デザインってオモシロイ -MdN Design Interactive-

人気ブログツールWordPressサイト構築入門(中編) - 新世代Web制作テクニック総特集

2024.4.20 SAT

【サイトリニューアル!】新サイトはこちらMdNについて

 

web creators特別号
スマートフォン・ソーシャルメディア・WordPress
Web制作テクニック総特集

WordPress 01-02
人気ブログツールWordPress サイト構築入門(中編)

2004年ブログツールとしての公開されたWordPressだが、最近ではCMSとして利用されるケースも増えている。ここではWordPressでのサイト構築の予備知識を紹介する。

解説/高橋のり(Webデザインレシピ)



WordPressのインストールの流れ

PHP + MySQL 環境が整っていれば、WordPress をインストールすることができる。WordPress のインストールは、とても容易だ。インストールの途中でつまづいて、導入をあきらめる … といったことはほとんどないといっていい。

(1)インストールの準備

インストールする前の準備として、MySQL にWordPress用のデータベースを作成する。データベースの作成は、phpMyAdmin(データベース管理ツール)を利用するのが簡単だ。phpMyAdmin は、XAMPP や MAMP をインストールすると、同梱されている。また、レンタルサーバーでも、MySQLが利用できるサーバーであれば、一般的に phpMyAdmin も利用できる(レンタルサーバーのヘルプなどを参照)。

ここでは「wordpress」という名前でデータベースを作成している【01】。この際文字コードを選択できるが、デフォルトの設定「utf8_general_ci」で作成しておこう。続いてWordPressをダウンロードする。公式サイトのトップページでは常に最新バージョンのダウンロードリンクが掲載されている【02】。

【01】任意の名前でデータベースを作成する(上記ではwordpressという名前で作成している)。
【01】任意の名前でデータベースを作成する(上記ではwordpressという名前で作成している)。

【02】WordPress は、WordPressの公式サイトから、最新版をダウンロードしよう。
【02】WordPress は、WordPressの公式サイトから、最新版をダウンロードしよう。

(2)wp-config.phpの作成

ダウンロードしたファイルを解凍し、その中から wp-confing-sample.php というファイルをテキストエディタで開いてみよう【03】。WordPress をインストールするには、wp-confing.php という設定ファイルを作らなければならないのだが、そのサンプルがこの wp-confingsample.php だ【04】。

wp-config-sample.php の 22行目あたりから、データベースへの接続のための記述をしていく。

・データベース名 … 先ほど設定したデータベース名「wordpress」とする。

・データベースのユーザー名 … 今回は特に設定していないため「root」とする。
・ データベースのパスワード … 今回は特に設定していないので、XAMPPの場合は空欄、MAMPの場合は「root」とする。
・MySQL のホスト名 … そのまま「localhost」とする(インターネット上のサーバーの場合は、設定されているユーザー名やパスワードを記入する)

【03】wp_config-sample.php ファイルを使って、WordPressの設定ファイルを作成する。
【03】wp_config-sample.php ファイルを使って、WordPressの設定ファイルを作成する。

【04】データベース情報を環境に合わせて記述する。赤字の部分を書き換えよう。
【04】データベース情報を環境に合わせて記述する。赤字の部分を書き換えよう。

(3)認証用ユニークキー、接頭語の設定

続いて認証用ユニークキー、データベース内のテーブルにつける接頭語を記述する。wp-config-sample.php の 42行目あたりから、認証用ユニークキーを記述していく【05】。この設定はローカル環境で開発するときにはほとんど意味を持たないが、インターネット上にWordPressを設置するときには、セキュリティ強化のために設定しておいた方がいい。

それぞれに、ユニーク(一意)な文字列を入力するのだが、これだけの文字列を設定するのも面倒だ。WordPress.org では、自動でユニークな文字列を作成してくれる「秘密の鍵サービス(https://api.wordpress.org/secret-key/1.1/salt/)」があるので、それを利用してコピー & ペーストすれば手間はかからない。

61行目からは、データベース内のテーブルにつける接頭語を設定する【06】。デフォルトでは「wp_」となっているが、初めてインストールする場合は、このままで構わない。2回目以降、同じデータベース内に複数の WordPress をインストールする場合は、この接頭語で区別するため、「blog_」のように任意の接頭語に書き換える必要がある。

最後に変更したwp-config-sample.php を、wp-config.php という名前でwordpressフォルダに保存する。また、wordpress フォルダそのものの名前も、任意の名前に変更する。ここでは「myblog」という名前に変更したと仮定して、インストール作業を進めていくことにする。

【05】ユニークキーの記述には、WordPress.org の「秘密の鍵サービス」を利用するのもいい。
【05】ユニークキーの記述には、WordPress.org の「秘密の鍵サービス」を利用するのもいい。

【06】テーブルの接頭語を設定する。
【06】テーブルの接頭語を設定する。

(4)WordPress のインストール

それではインストール作業に移ろう。先ほど名前を「myblog」としたwordpress のフォルダを、ローカルサーバーの任意のディレクトリに移動する。ここではルートディレクトリ(htdocs)に移動することにした。そして、XAMPPの場合はhttp://localhost/myblog/wpadmin/install.php、MAMPの場合http://localhost:8888/myblog/wp-admin/install.phpにブラウザでアクセスすると、WordPressのインストーラーが立ち上がる【07】。

サイトのタイトル(あとで変更可能)や、ユーザー名(あとで変更不可)、メールアドレスなどの必要項目を入力し、最後に「WordPressをインストール」ボタンをクリックする。プライバシーのチェックを外すと、Webサイトの内に、の一行が追加される。ネット上でのインストールの場合、開発段階では検索エンジンにインデックスされないようにチェックを外しておくのがいいだろう。

インストールが成功すると、【08】のような「成功しました!」画面が表示される。失敗した場合は、wp-config.php に記述したデータベース接続情報を確認しよう。

【07】必要項目を入力した上で、インストールボタンをクリックする。
【07】必要項目を入力した上で、インストールボタンをクリックする。

【08】WordPress のインストールは、必要項目を入力するだけであっけなく完了する。
【08】WordPress のインストールは、必要項目を入力するだけであっけなく完了する。

(5)ログインとサイトの表示

それでは先ほど入力したユーザー名とパスワードでログインしてみよう。初めてログインすると【09】のようなWelcomeページ(WordPress 3.3)が表示される。これが管理画面のトップページだ。メッセージには「新しい WordPress サイトへようこそ!」と表示されている。WordPress はインストールした段階で、すでに Webサイトが作成されている。管理画面上部の黒い「管理バー」には、インストール時につけたサイト名が表示されているはず。そこから現在の Webサイトの表示を確認してみよう。

インストールした直後では、「Twenty Eleven」というWordPress のデフォルトテーマでWebサイトが表示される【10】。デザインを変更したければ、前述したようにテーマをダウンロードして変更すればいい。

ブログ記事の投稿も、[投稿] →[ 新規追加] 【11】から、すぐに始められる。公開ボタンを押せば、【12】のように即座にWebサイトが更新される。

【09】WordPress のインストールは、必要項目を入力するだけであっけなく完了する。
【09】WordPress のインストールは、必要項目を入力するだけであっけなく完了する。

【10】デフォルトテーマである「TwentyEleven」でWebサイトが作成されている。
【10】デフォルトテーマである「TwentyEleven」でWebサイトが作成されている。

【11】PHP はもちろん、HTML + CSS の知識を必要とすることなく、Webサイトの構築ができてしまう。
【11】PHP はもちろん、HTML + CSS の知識を必要とすることなく、Webサイトの構築ができてしまう。

【12】単なるブログではなく独自のデザインを施したWebサイトの作成は、「テーマ」を作成するということと言っても過言ではない。
【12】単なるブログではなく独自のデザインを施したWebサイトの作成は、「テーマ」を作成するということと言っても過言ではない。

(後編に続く)


[目次に戻る]

【本記事について】
2012年7月28日発売のweb creators特別号「新世代Web制作テクニック総特集」から、毎週記事をピックアップしてご紹介! スマートフォンサイト特集ではデザインのルールとコーディングのポイント、ソーシャルメディア特集では従来のWebサイトとの違いと有効な活用方法、WordPress特集ではサイト構築に必要な機能と役立つプラグインなど、基本的な知識と必須テクニックを網羅した内容になっています。

※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。

twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在