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

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

2024.4.20 SAT

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

 

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

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

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

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



人気のブログツールWordPressとは

WordPress【01】は世界中でたくさんのユーザーが利用しているオープンソースのブログソフトウェアだ。2004年にバージョン1が発表されて以来、精力的に開発が進められ、2012年6月現在ではバージョン3.4の配布が始まっている。近年では、GPLライセンスの元で無料で利用できることや、拡張性、カスタマイズ性の高さから、多くの Webサイトで利用されている。WordPress はブログツールとしてだけではなく、Webサイトを管理・運営するCMS(Contents Management System)として利用されるシーンも増えてきた。国内のコーポレートサイトでも、WordPressを利用して構築される事例も増えている【02】。

【01】WordPress 公式サイト - 日本語(http://ja.wordpress.org/)世界中で利用されているWordPressは、日本語にももちろん対応している。
【01】WordPress 公式サイト - 日本語(http://ja.wordpress.org/)世界中で利用されているWordPressは、日本語にももちろん対応している。

【02】クックパッド株式会社のWebサイトもWordPressで構築されている。
【02】クックパッド株式会社のWebサイトもWordPress で構築されている。

ブログツールならではの親しみやすさ

もともとWordPressはブログツールとして進化を続けてきた。その管理画面もブログの更新作業に適した作りになっている。一度WordPressでWebサイトを構築してしまえば、【03】のような「ビジュアルエディター」と呼ばれるエディターでコンテンツを編集できるため、知識のないクライアントでも、更新作業が可能になる。もちろん画像などのメディアファイルも、管理画面からアップロードできる。その「手軽さ」や「親しみやすさ」も人気の理由のひとつになっている。

【03】「コンテンツを書く」ということに適したWordPressの投稿画面(http://tadaya.net/)
【03】「コンテンツを書く」ということに適したWordPressの投稿画面

CMSとしての機能拡大

WordPressの魅力は、単なる「ブログツール」としてだけではなく、バージョンを重ねるにつれ拡張されてきたCMSライクな機能にある。ブログのような更新型のコンテンツの作成だけにとどまらず、コーポレートサイトに必要と思われる「会社案内」や「事業内容」などの静的コンテンツを作成することを前提とした「固定ページ」機能も標準で利用できる。

ほかにも Webサイトのナビゲーションを管理画面から編集できる「カスタムメニュー」機能や、ヘッダーのメインビジュアルをアップロード/変更できる「カスタムヘッダー」機能など【04】【05】、ブログ以外のWebサイト運営にも充分利用できるだけの機能が拡張されてきた。

【04】コーポレートサイトなどには付きもののヘッダーのメインビジュアル。
【04】コーポレートサイトなどには付きもののヘッダーのメインビジュアル。



【05】管理画面からメインビジュアルをアップロード/変更できる「カスタムヘッダー」機能。
【05】管理画面からメインビジュアルをアップロード/変更できる「カスタムヘッダー」機能。


WordPressの特徴

テーマ(機能とデザインのテンプレート)

WordPressサイトの表示には、「テーマ」と呼ばれるデザインテンプレートを利用する【06】。この「テーマ」も「着せ替え」のように簡単に管理画面から変更でき【07】【08】、そして無料で利用できるテーマのダウンロードやインストールも、管理画面から行うことができる【09】。

世界中のクリエイターがテーマを開発し、配布や販売を行っている。WordPressの公式フリーテーマディレクトリ「WordPress.org Free Themes Directory(http://wordpress.org/extend/themes/)」だけでも、1,500以上のテーマが配布されている。写真をメインコンテンツにして「ギャラリー」系のテーマを利用するのもいい。また、コーポレートサイト向けのテーマも存在する。

【06】WordPressのデフォルトテーマ「TwentyEleven」での表示。
【06】WordPressのデフォルトテーマ「TwentyEleven」での表示。

【07】無料で配布されているテーマ「z-Bench」に変更した状態。
【07】無料で配布されているテーマ「z-Bench」に変更した状態。

【08】管理画面では、色やレイアウト、機能など、さまざまな条件でテーマを絞り込み検索でき、そのままダウンロード/インストールすることができる。
【08】管理画面では、色やレイアウト、機能など、さまざまな条件でテーマを絞り込み検索でき、そのままダウンロード/インストールすることができる。

【09】インストールしたテーマは、管理画面からいつでも変更できる。
【09】インストールしたテーマは、管理画面からいつでも変更できる。

さまざまな機能を拡張するプラグイン

テーマではおもにWebサイトのデザインと、前述した「カスタムメニュー」や「カスタムヘッダー」などの基本的な機能が利用できる。しかし、Webサイトを運営する上では、ほかにもさまざまな機能が必要となる場合も多い。

たとえばECサイトであれば「ショッピングカート」や「決済機能」が必要だ。また、コーポレートサイトではユーザーからの問い合わせ用に「コンタクトフォーム」が必要となる。

WordPress にはこれらの「機能」を拡張する「プラグイン」がたくさん用意されている。テーマと同じように、世界中のデベロッパーが開発しては配布/販売しており、無料で利用できるプラグインから、有料のプラグインまでさまざまだ。WordPress の公式プラグインディレクトリ「WordPress.org Plugin Directory(http://wordpress.org/extend/plugins/)」だけでも約20,000のプラグインが登録されている。

ほとんどのプラグインは管理画面での簡単な設定(場合によってはテーマファイルへ数行のコードの記述)のみで設置できる【10】。

【10】ゼロから作成するとなかなか大変なコンタクトフォームも、プラグインを利用すれば簡単に設置できる(利用プラグイン「Contact From 7」)。
【10】ゼロから作成するとなかなか大変なコンタクトフォームも、プラグインを利用すれば簡単に設置できる(利用プラグイン「Contact From 7」)。

日本語フォーラムやドキュメントの充実

ここまで紹介してきたように、WordPressの魅力には、「コンテンツを管理画面から容易に更新できること」、「テーマ機能によって着せ替え感覚でデザインを変更できること」、「プラグインを利用して機能を拡張できること」などがあげられる。しかし、WordPressを利用しているユーザーが日本にも多い理由には、日本語で読めるドキュメントが豊富なこともある。

「WordPress Codex 日本語【11】」(http://wpdocs.sourceforge.jp/)では、WordPressでのサイト構築に必要な知識が公式マニュアルとして日本語でまとめられている。また、日本語でのWordPressフォーラム(http://ja.forums.wordpress.org/)もあり、わからないことはここで相談することも可能だ。過去の質問を読むだけでも参考になることが多く、何より日本語で読めるのが日本のユーザーにとってはありがたい。

また、インターネット上だけでなく、WordCamp というカンファレンスが世界各地で定期的に開催されている。日本では 2011年の11月27日に、東京で「WordCamp Tokyo 2011(http://2011.tokyo.wordcamp.org/)」が開催され、当日の来場者は 700名を超えるイベントになっている。

【11】WordPress の公式マニュアルサイト WordPress Codexも日本語版が公開されている。
【11】WordPress の公式マニュアルサイト WordPress Codexも日本語版が公開されている。


WordPressが動作する仕組み

WordPress はサーバーにインストールして利用するソフトウェアだが、動作させるには、PHP + MySQL の環境が必要となる。現在配布されているバージョン 3.3では、PHP 5.2.4 以上、MySQL 5.0 以上が必要だ。PHP や MySQL になじみのない方のため、WordPress サイトがどんな仕組みで動作しているのかを見てみることにしよう。

PHPとMySQL

PHP とは、Hypertext Preprocessor というサーバーサイドで動作するプログラム言語で、一番の特徴は動的に HTML を作成することを目的に作成されたプラグラム言語だということだ。

そして PHP と組み合わせてよく使われるのが、MySQLというデータベースだ。データベースはデータを格納しておくサーバーのことで、WordPressでは投稿画面で書いたコンテンツはもちろん、さまざまなデータをこのデータベース(MySQL)に記録していく【12】。

【12】PHP + MySQL を使った Webサイトの概要だ。WordPressは、基本的にこのような流れでWebサイトを表示している。
【12】PHP + MySQL を使った Webサイトの概要だ。WordPressは、基本的にこのような流れでWebサイトを表示している。

WordPress の開発環境

WordPress で Webサイトを作成するためには、 PHP がインストールされたWebサーバーと、MySQLが必要になる。(最近では、はじめからWordPressが利用できるレンタルサーバーもあるが、レンタルする場合はPHP 5.2.4 以上、MySQL5.0 以上が利用できるサーバーを借りるようにしよう。)

しかし、Webサイトの作成段階では、ローカル環境で構築していくのが一般的だ。この場合、XAMPP【13】やMAMP【14】といったツールを使えば、インストーラーの手順に従って進むだけで、容易にWordPress の動作に必要な環境を構築することがでるようになっている。

【13】XAMPPはWindows 環境におすすめ。Webサイトも日本語で読める。Apache Friends XAMPP(http://www.apachefriends.org/jp/xampp.htmlWindows)では、PHP、Perl を含む Webサーバーと MySQL が利用できる(Windows、Mac OS)。
【13】XAMPPはWindows 環境におすすめ。Webサイトも日本語で読める。Apache Friends XAMPP(http://www.apachefriends.org/jp/xampp.html)では、PHP、Perl を含む Webサーバーと MySQL が利用できる(Windows、Mac OS)。

【14】MAMP(http://www.mamp.info/)はMac OS 専用だが、手軽に PHP + MySQL をインストールできる。ただし、Perlは利用できない。
【14】MAMP(http://www.mamp.info/)はMac OS 専用だが、手軽に PHP + MySQL をインストールできる。ただし、Perlは利用できない。

(中編に続く)


[目次に戻る]

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

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

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

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在