iPX社員によるブログ

iPX社員が"社の動向"から"自身の知見や趣味"、"セミナーなどのおすすめ情報"に至るまで幅広い話題を投下していくブログ。社の雰囲気を感じ取っていただけたら幸いです。

WordPressで自社のHPを作ってくれと言われた場合に

初めに

ご無沙汰しております。SDU(System Development Unit)の小川です。
唐突ですが皆さんはこんな経験は御座いますか?

WordPressで 自 社 の H P を 作 っ て く れ」

では始まります。

対象読者

  • WordPressの参考HPを色々見たが良く分からなかった

WordPressが良く分からなくなる原因

How Toが乱立

これは素晴らしいことですが、時には理解への障壁となりえます。
特に投稿タイプ、テンプレート階層などは定義から辿った方が理解が早いです。

投稿の意味を何となく捉えている

WordPressで言われる「投稿タイプ」は明確に次のものと規定されています。

  • 投稿
  • 固定ページ
  • 添付ファイル
  • リビジョン
  • ナビゲーションメニュー
  • (カスタム投稿タイプ)

WordPressの公式オンラインマニュアルである WordPress Codex でも頻出する単語ですので頭に入れておくと想像の助けになります。

テンプレート階層の定義を言葉で覚えようとしている

WordPressは似た様な記事をそれぞれHTMLで作成することはしません。
テンプレートと呼ばれるphpファイルで表現されます。

各投稿タイプにどのテンプレートが適用されるかを示した図をいつでも見れる状態にしておきましょう。

下記リンク先の「概観図」の項です。

参考:テンプレート階層 - WordPress Codex 日本語版

iPXではトップページに各ページがぶら下がる形で下記のテンプレート構成になっています。

front-page.php(トップページ)
 ┗ page-works.php(事業内容ページ)
 ┗ page-tips.php(TIPSページ)
  :
 ┗ page-topics.php(TOPICSページ)
  ┗ single-topics(TOPIC詳細ページ)

WordPressをより理解する為に

実際に企業向けページを作る為には細かい機能を知る必要があります。
下記を理解しておけば迷子にはならないでしょう。

スラッグ

ページを表す識別子みたいなものです。
iPXでは固定ページに多用しました。

page-works.php
"works"というスラッグを持つ固定ページに対するテンプレートです。

パーマリンク

基本的なWebページはフォルダ構造からURL階層が決せられることが多いと思います。
WordPressでは記事とテンプレート等をがっちゃんこする為、見せ方(URL階層)のルールが必要です。
トップページに各固定ページをぶら下げる際などは下記のように設定します。

/%category%/

カスタムタクソノミー

term(項目)をグループ化した分類を作成できます。
設定できる項目が多いので様々なケースで活用できると思います。
iPXでは下記のtermを持ったタクソノミーを使ったりしました。

  • タイトル
  • タイトル(英語)
  • 画像
  • 他のタクソノミー(タクソノミーは入れ子に出来る)

利点はWordPress管理ページから追加・編集・削除が出来るような存在を定義することが出来る点です。
カスタム投稿タイプとの使い分けは詳細ページがある場合はカスタム投稿タイプ、ない場合はカスタムタクソノミーと大雑把に切り分けます。

e.g. タクソノミーで実装した項目
f:id:ipx-writer:20160424105700p:plain

開発にあたってのあれこれ

複数人開発

WordPressソースコードとDBが更新されるので複数人で開発する際はWordPressフォルダを丸ごとgit等で管理するのが手っ取り早いので楽です。

テスト環境

Microsoft Azure は便利なので使いたいと思いますよね。
iPXではAzureにCent-OSを立ててWordPressテスト環境を構築しました。

e.g. Cent-OSへ環境を構築

sudo yum install httpd mysql-server php php-mysql php-mbstring
sudo chkconfig httpd on
sudo chkconfig mysqld on
service httpd start
service mysqld start

sudo mysql -u root
update mysql.user set password=password('<root用のパスワード>') where user = 'root';
flush privileges;
exit;

mysql -u root -p
<root用のパスワード>
create database wp;
grant all privileges on <ユーザー名>.* to <ユーザー名>@localhost identified by '<ユーザーwpのパスワード>'
exit;

cd /tmp
wget https://ja.wordpress.org/wordpress-4.4.2-ja.tar.gz
tar zxvf wordpress-4.4.2-ja.tar.gz
mv wordpress/ /var/www/html

sudo vi /etc/selinux/config
SELINUX=disable

e.g. mod_rewriteを有効にする

sudo vim /etc/httpd/conf/httpd.conf

LoadModule rewrite_module modules/mod_rewrite.so
AllowOverride All

WordPressプラグイン

カスタム投稿タイプやカスタムタクソノミーを作成し、管理ページから編集できるようにするのは骨が折れます。
便利なプラグインも存在します。

  • CPT UI

カスタムタクソノミーやカスタム投稿タイプを定義できる

  • カスタムフィールド

WordPress管理ページから編集できるように項目を追加できます

終わりに

WordPressはひたすらサンプルコードを試すより、トップダウンなアプローチの方が簡単だという記事でした。
iPXの開発でも3日ほどかけてWordPressで出来る事・出来ない事、どこにどんな機能を使うかを入念に話し合いました。
それから始めてみるとコーディングの方は些細な問題でした。

またiPXではこれらの開発をALMiniumを用いて支援しており、これが助けになりました。
f:id:ipx-writer:20160424112336p:plain

iPXのリニューアルしたHPは近日公開予定です。
是非チェックしていただけたらと思います。

www.ipx.co.jp