カッコイイWordPressを構築するためのたった3つの手順
はじめに
新しく始める自社サイトをWordPressで簡単に作って、lolipopの月額105円プランでの運用を企んでいる@yutakikucです。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 -yApache/Mysql Start
ApacheとMysqlを起動します。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を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/htmlWordPress 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/wordpressにAccessします。WordPressの管理画面が表示されるのでPassWordやMailAddressを入力して"WordPressをインストール"というボタンを押下します。問題なければインストールの成功画面が出力されます。成功画面から管理者画面http://localhost/wordpress/wp-adminに遷移します。管理画面では様々なカスタマイズができます。再度http://localhost/wordpressにAccessするとHello World!ページが出力されます。以上でWordPressが使えるようになりました。ゼロから自分でサイトを構築するよりWordPressを使ったほうが明らかに簡単ですね。
Step2. Free Theme Install
Eureka Download
Beatiful Wordpress Theme for Business - Eureka | Fearlessflyer
Eureka Wordpress Theme Demo
洒落乙で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/themesEnabling 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をカスタマイズするなら絶対覚えておきたいテンプレートファイルの使い方
更にデザインなどに拘る場合は上のリンクを参考にindex.php,header.php,footer.php,sidebar.php等を修正する必要があります。僕はまだそこまで手を付けるつもりは無いのでここは省略します。
Step3. Visualization
Infographics
Infographics & Data Visualization | Visual.ly
インフォグラフィック - Wikipedia
ツタグラ [伝わるINFOGRAPHICS] | データとビジョンを持つ専門家と、伝える力を持つデザイナーがコラボレーションをする。
infogra.me(インフォグラミー) | インフォグラフィックスコミュニケーションサービス
WebPageを視覚的に分り易く表現するための重要な指標としてInfographicsがあります。文字で細かく情報を記載するよりはイケてるInfographicsを作成して、WordPressのページに貼り付けるとより表現が豊かになると思います。最近はDataを与えるとInfographicsを生成してくれるinfogr.amというToolがあるのでそれを利用します。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
GIMP - The GNU Image Manipulation Program
WordPressにiPhone/iPad/Androidのmockupを貼り付けたい時があります。そんな時はLicenseFreeのPSDファイル形式をDownloadして使うと良いと思います。PSDファイルはAdobe Photoshop,Illustratorのデータ形式ですが、FreeのGimpでも読み込むことができます。Gimpで修正したPSDファイルをWordPressに画像としてUploadするとより見栄えが良くなります。