WordPressを利用したコーポレートサイト制作の流れ(前編) - 新世代Web制作テクニック総特集 | デザインってオモシロイ -MdN Design Interactive-

WordPressを利用したコーポレートサイト制作の流れ(前編) - 新世代Web制作テクニック総特集

2024.4.27 SAT

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

 

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

WordPress 04-1
WordPressを利用した
コーポレートサイト制作の流れ(前編)

WordPressを企業のコーポレートサイトに導入する場合は、デザインや機能をカスタマイズしていく必要がある。ここではどのような流れでサイトを構築していくかについて紹介しよう。

解説/星野邦敏(株式会社コミュニティコム)



WordPressの考え方

WordPressをインストールした初期状態では、ブログ形式のデザインになる。2012年6月現在のWordPress最新バージョンでは、デフォルトテーマである「Twenty Eleven」が表示される【01】。

WordPressでは、サイトのデザインは「テーマ」、機能追加は「プラグイン」という概念で作られている。WordPressをカスタマイズしてコーポレートサイトを構築するには、この「テーマ」を企業サイトに見えるように作り、「プラグイン」で企業サイトに必要な機能を追加していくという作り方をする【02】。

【01】デフォルトWordPressテーマ「Twenty Eleven」
【01】デフォルトWordPressテーマ「Twenty Eleven」

【02】「WordPressの概念のイメージ図。
【02】WordPressの概念のイメージ図。


WordPressテーマのインストール

まずは、WordPressテーマのインストール方法と、WordPressテーマをカスタマイズする上で必要となる知識を身につけよう。WordPressでコーポレートサイトを作るには、WordPressテーマのカスタマイズやプラグインによる機能追加が必要となる。

WordPressでは、管理画面から現在インストール済みのテーマを一覧することができる【03】。その中から利用するテーマを選択するという流れだ。WordPressテーマは、インストール直後は、「Twenty Eleven」テーマと「Twenty Ten」テーマの2つが入っている。「Twenty Eleven」はWordPressのバージョン3.4、3.3、3.2のデフォルトテーマ、「Twenty Ten」テーマはバージョン3.1、3.0のデフォルトテーマだ。

インストール直後に入っているテーマは、この2つのみだが、管理画面からデザインを選んで自由にテーマを追加することもできる【04】。

管理画面からインストールできるテーマは、WordPressの公式テーマディレクトリ【05】に登録されているテーマのみである。

オリジナルで作成したWordPressテーマは、公式テーマディレクトリには上がっていないので、FTP上からアップロードをするか、または管理画面からZIPファイルに圧縮した形式でアップロードをする必要がある。

FTP でアップロードをする場合、WordPressのテーマファイルは、wpcontentフォルダの中にあるthemesフォルダ内にアップロードをする【06】。

ZIPファイルでアップロードする場合、管理画面から行う【07】。なおアップロードの形式はZIPのみとなっている。この機能は、運用上、FTPへのアクセスが何かしら制限が掛かっている場合には便利だ。ただし、functions.php内に何かしらのエラーコードがある状態でZIP形式でアップロードをすると、テーマを有効化した瞬間に管理画面にすら入れなくなることもある(その時はFTPからテーマフォルダごと削除すれば解決できる)。ここからのアップロードはすでに動くことが確認されているテーマのみにしよう。

【03】インストールされているテーマは、「利用可能なテーマ」という名称で表示される。
【03】インストールされているテーマは、「利用可能なテーマ」という名称で表示される。

【04】管理画面から、自由にテーマを追加することができる。
【04】管理画面から、自由にテーマを追加することができる。

【05】WordPressの公式テーマディレクトリ(http://wordpress.org/extend/themes/)2012年6月現在、公式ディレクトリに挙がっているWordPressテーマは1500個を超えている。すなわち、管理画面から1500個のWebデザインのテンプレートがインストールできることになる。
【05】WordPressの公式テーマディレクトリ(http://wordpress.org/extend/themes/
2012年6月現在、公式ディレクトリに挙がっているWordPressテーマは1500個を超えている。すなわち、管理画面から1500個のWebデザインのテンプレートがインストールできることになる。


【06】テーマをFTPからアップロードする際には、themesフォルダ内に入れる。
【06】テーマをFTPからアップロードする際には、themesフォルダ内に入れる。

【07】テーマをZIPファイルでアップロードする際には管理画面から行う。
【07】テーマをZIPファイルでアップロードする際には管理画面から行う。


WordPressテーマのカスタマイズ

WordPressのテーマカスタマイズについては、次の知識が必須となる。

・HTML
・CSS
・PHP
・WordPressのテンプレートタグ
・WordPressの条件分岐タグ
また、JavaScriptやjQuery、MySQLのデータベースの知識もできればあった方がよい。

学ぶことが多いように感じるだろうが、テンプレートタグと条件分岐タグ以外は汎用的なモノなので、WordPressに限らず、Web制作には必要な技術である。

PHPプログラムについては、深いところまで理解しなくとも、while文に代表されるループ処理(繰り返し処理)、if文に代表される条件分岐処理の2点について理解をしておくと、WordPressテーマをカスタマイズしやすくなる。WordPressテーマのしくみやファイル構造については、「人気ブログツールWordPressサイト構築入門(中編)」から後編を参考にしてほしい。

(後編に続く)


[目次に戻る]

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

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

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

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在