Y's note

Web技術・プロダクトマネジメント・そして経営について

本ブログの更新を停止しており、今後は下記Noteに記載していきます。
https://note.com/yutakikuchi/

カッコイイWordPressを構築するためのたった3つの手順


はじめに

新しく始める自社サイトをWordPressで簡単に作って、lolipopの月額105円プランでの運用を企んでいる@yutakikucはてなブックマーク - Yuta Kikuchi (yutakikuc)さんはTwitterを使っていますです。lolipopのサーバはredhat系 + Apacheの設定でWordPressの導入も簡単に出来るということで、自分のLocalPC(CentOS)で環境を作って開発し、ちゃんと挙動を確認してからlolipop上で動作させるための準備をこのエントリーでは目的としています。
利用料金 / サービス - ロリポップ! はてなブックマーク - 利用料金 / サービス - ロリポップ! サーバー環境について / サービス - ロリポップ! はてなブックマーク - サーバー環境について / サービス - ロリポップ!

Step1. WordPress Install

LocalPC

以下の作業は全て自分のPC(CentOS)で行なっています。lolipopでの作業ではないので注意して下さい。CentOSのVersionは6.3です。

$ cat /etc/redhat-release 
CentOS release 6.3 (Final)
yum install

WordPressを動かすためにはPHP Mysql Apacheを必要とするので、以下のpackageをyum installします。

$ sudo yum install php php-mysql php-mbstring mysql httpd -y
Apache/Mysql Start

ApacheMysqlを起動します。serviceコマンドでstartをするだけです。

$ sudo service mysqld start   
Starting mysqld:                                           [  OK  ]

$ sudo service httpd start
Starting httpd: httpd: Could not reliably determine the server's fully qualified domain name, using localhost.localdomain for ServerName [  OK  ]
Create Database

WordPress用のDBを作成します。またUserもWordPress用のものを作成しPasswordを設定します。今回は分り易くするために全てwordpressとしています。

$ mysql -u root -p
mysql> CREATE DATABASE wordpress;
Query OK, 1 row affected (0.01 sec)

mysql> GRANT ALL PRIVILEGES ON wordpress.* to wordpress@localhost IDENTIFIED BY 'wordpress';
Query OK, 0 rows affected (0.00 sec)

mysql> FLUSH PRIVILEGES;
Query OK, 0 rows affected (0.00 sec)
WordPress Install

WordPress はてなブックマーク - WordPress最新のWordPressをDownloadします。このエントリー作成時の最新Versionは3.5.1です。ちゃんと日本語のzipファイルをdownloadしましょう。

$ wget "http://ja.wordpress.org/wordpress-3.5.1-ja.zip"

$ unzip wordpress-3.5.1-ja.zip

$ sudo cp -R wordpress /var/www/html
WordPress Config

Sample Configファイルのコピーと上で設定したDB周りの記述を行います。

$ sudo cp /var/www/html/wordpress/wp-config-sample.php /var/www/html/wordpress/wp-config.php

$ sudo vim /var/www/html/wordpress/wp-config.php

<?php
// ** MySQL 設定 - こちらの情報はホスティング先から入手してください。 ** //
/** WordPress のためのデータベース名 */
define('DB_NAME', 'wordpress');

/** MySQL データベースのユーザー名 */
define('DB_USER', 'wordpress');

/** MySQL データベースのパスワード */
define('DB_PASSWORD', 'wordpress');

/** MySQL のホスト名 */
define('DB_HOST', 'localhost');
WordPress Access

http://localhost/wordpressAccessします。WordPressの管理画面が表示されるのでPassWordやMailAddressを入力して"WordPressをインストール"というボタンを押下します。問題なければインストールの成功画面が出力されます。成功画面から管理者画面http://localhost/wordpress/wp-adminに遷移します。管理画面では様々なカスタマイズができます。再度http://localhost/wordpressAccessするとHello World!ページが出力されます。以上でWordPressが使えるようになりました。ゼロから自分でサイトを構築するよりWordPressを使ったほうが明らかに簡単ですね。

Step2. Free Theme Install

Eureka Download


Beatiful Wordpress Theme for Business - Eureka | Fearlessflyer はてなブックマーク - Beatiful Wordpress Theme for Business - Eureka | Fearlessflyer
Eureka Wordpress Theme Demo はてなブックマーク - Eureka Wordpress Theme Demo
洒落乙でResponsiveなWordPressのDesignをまとめた人気サイトのまとめ - Yuta.Kikuchiの日記 はてなブックマーク - 洒落乙でResponsiveなWordPressのDesignをまとめた人気サイトのまとめ - Yuta.Kikuchiの日記
WordPressのDefaultThemeはカッコイイとは言えないものです。WordPressは様々なFreeThemeが公開されているのでここではそれを利用します。EurekaというFreeThemeが気になったのでDownloadしました。mailadressを入力するとDownload用のリンクが通知されて来るので、そこからdownloadします。Eureka以外にも素敵なDesignは沢山あるので上のまとめから探してみて下さい。

$ wget http://fearlessflyer.com/downloads/eureka.zip

$ unzip eureka.zip

$ sudo cp -R eureka /var/www/html/wordpress/wp-content/themes
Enabling Eureka Theme

管理ページhttp://localhost/wordpress/wp-adminに遷移してEureka Themeの有効化を行います。外観のテーマからEurekaの有効化というリンクを押下します。出来上がったPageを見てみるとキャプチャされContentsとは程遠い内容で表示されてしまいました。Themeを設定すると完全にイメージキャプチャ通りに出来ると思い込んでいたのですが、ContentsやらMenuらは管理画面から自分で設定する必要があります。

Setting Template

管理ページhttp://localhost/wordpress/wp-adminに遷移してTemplateの設定を行います。Eurekaの場合、template-home.phpという名前のphpファイルがあるので、固定ページのTemplateとして設定します。固定ページの新規追加で画面右のページ属性にテンプレートを選択するSelectBoxが表示されるのでtemplate-homeを選択します。

設定した固定ページをheader,footerのMenuとして表示させます。仮にhome,blog,about,photosという固定ページを作成し、外観のメニューから設定します。メニュー名を入力し、作成したメニューに対して固定ページを追加していきます。また保存場所のheader,footerにも作成したメニューを選択して保存します。

更に固定ページhomeをMain画面に設定します。管理画面の外観のテーマのカスタマイズより固定フロントページをhomeに設定します。そうすると以下の様なページが出来上がります。だいぶ見栄えが良い画面になりました。

Writing PHP/CSS

Wordpress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス はてなブックマーク - Wordpress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス
WordPressをカスタマイズするなら絶対覚えておきたいテンプレートファイルの使い方 はてなブックマーク - WordPressをカスタマイズするなら絶対覚えておきたいテンプレートファイルの使い方
更にデザインなどに拘る場合は上のリンクを参考にindex.php,header.php,footer.php,sidebar.php等を修正する必要があります。僕はまだそこまで手を付けるつもりは無いのでここは省略します。

Step3. Visualization

Infographics


Infographics & Data Visualization | Visual.ly はてなブックマーク - Infographics & Data Visualization | Visual.ly
インフォグラフィック - Wikipedia はてなブックマーク - インフォグラフィック - Wikipedia
ツタグラ [伝わるINFOGRAPHICS] | データとビジョンを持つ専門家と、伝える力を持つデザイナーがコラボレーションをする。 はてなブックマーク - ツタグラ [伝わるINFOGRAPHICS] | データとビジョンを持つ専門家と、伝える力を持つデザイナーがコラボレーションをする。
infogra.me(インフォグラミー) | インフォグラフィックスコミュニケーションサービス はてなブックマーク - infogra.me(インフォグラミー) | インフォグラフィックスコミュニケーションサービス
WebPageを視覚的に分り易く表現するための重要な指標としてInfographicsがあります。文字で細かく情報を記載するよりはイケてるInfographicsを作成して、WordPressのページに貼り付けるとより表現が豊かになると思います。最近はDataを与えるとInfographicsを生成してくれるinfogr.amというToolがあるのでそれを利用します。Create infographics & online charts | infogr.am はてなブックマーク - Create infographics & online charts | infogr.am

infogr.am

infogr.amを使って自分のSkillSetを視覚化してみました。infogr.amは作成したInfographicsをiframeで呼び出すことができるので、WordPressの固定ページのテキスト編集でIframeタグを埋め込んでやります。

<iframe src="//infogr.am/include/php/embedded.php?graphicID=100001107726744_1365529065" width="550" height="566" scrolling="no" frameborder="0" style="border:none;"></iframe><div style="width:550px;border-top:1px solid #acacac;padding-top:3px;font-family:Arial;font-size:10px;text-align:center;"><a target="_blank" href="http://infogr.am/1365529065" style="color:#acacac;text-decoration:none;">My SkillSet</a> | <a style="color:#acacac;text-decoration:none;" href="http://infogr.am" target="_blank">Create infographics</a></div>
Making Mockup

iPhone/Androidアプリのモックアップ作りに便利なPSD・AI・ICON配布サイト|スマートフォン|モバイル/スマートフォン|PHP & JavaScript Room はてなブックマーク - iPhone/Androidアプリのモックアップ作りに便利なPSD・AI・ICON配布サイト|スマートフォン|モバイル/スマートフォン|PHP & JavaScript Room
GIMP - The GNU Image Manipulation Program はてなブックマーク - GIMP - The GNU Image Manipulation Program
WordPressiPhone/iPad/Androidのmockupを貼り付けたい時があります。そんな時はLicenseFreeのPSDファイル形式をDownloadして使うと良いと思います。PSDファイルはAdobe Photoshop,Illustratorデータ形式ですが、FreeのGimpでも読み込むことができます。Gimpで修正したPSDファイルをWordPressに画像としてUploadするとより見栄えが良くなります。

まとめ

このエントリーではカッコイイWordPressを構築するための3つの手順を書きました。Step1の手順で書いたように自分でゼロからサイトを開発するよりWordPressを導入した方が開発コストを削減できます。Step2ではFreeThemeを利用することで見栄えの良いWordPressの作成について書きました。Step3ではLicenseFreeのPSDファイルをDownloadしてGimpで修正を加え、iPhone/iPadなどの具体的な画面構成を作成することについて記述しました。今後は時間があるときにWordPressPHPコーディングについて紹介したいと思います。