ここにきてようやくWEBクリエイターらしい記事になります。今回は、WordPress（ワードプレス）を使ったWEBサイト制作についての備忘録として書かせて頂きます。
今回の案件について
借りているクライアント用の専用サーバーの維持費が高額のため解約する方向になった。HTMLベースのスタティックなWEBサイトはサーバー・ドメインの移管だけでいいので問題ないが、CMSを使ったサイトが2つある。そのうちの1つが今回の案件。
完全なこちら都合の為、デザイン・コーディング・CMS構築を無料でやる事に。作る側のクリエイターにとってなんとも屈辱的な案件。
しかも、そのサイトにはEC-CUBEも使われている事が分かりそれも合せて構築する事に。もちろん無料だ。
想像以上に大規模案件だと判明（焦りと落胆が同時に押し寄せる）。EC-CUBEの構築にいては後日記事にします。
いや、この調子だとEC-CUBEの構築前に会社を辞めているかもしれないなどと、絶望しかないまま取り掛かることに。
サイトについて
ジャンルはカー用品の販売店サイト。ブログ形式で新商品の案内とイベントの告知をする。あとはTOPページのニュース更新。以上がCMS利用部分になる。
その他に、会社概要、プライバシーポリシーなど静的なページが数十ページ。データの流し込みがとても大変そうな案件だった。
新商品、イベント、ニュースの更新はお客さん自身が行う。もちろんWEB知識は全くないので、WordPress内のUI・UXも同時に考える必要性があった。
全てにおいてサイトの情報が古く、出来ることならコンテンツの再選定をして減らすなり更新するなりして欲しいと懇願したが、ディレクターNGが出た。まるっきり同じものを構築しろとのこと。
サーバー環境とWordPressの構築
契約しているheteml（ヘテムル）にデモアカウントを作成。デモと言ってもドメイン移管先として使うアカウントなのでディレクトリ構造もしっかり考えて制作。
そして、heteml（ヘテムル）のコンパネにある簡単インストールでWordPressをインストールする。
過去に一度本を片手に全て手作業でWordPressを構築したことがありますが、利用しているサーバーに簡単インストールがあればガンガン使うことをおすすめします。クソめんどくさいです。
次にFTPソフトでサーバーに接続し、robots.txtをぶっこむ。デモサイトなのに検索エンジンにクローリングされてインデックスされたら大変です。
WordPress側も調整します。「設定」の「表示設定」から「検索エンジンでの表示」で「検索エンジンがサイトをインデックスできないようにする」にチェックを入れいます。
ついでに、パーマリンクを「カスタム構造」で「/%category%/%post_id%」に変更。ダッシュボードのWordPressブログとかフォーラムとかのどうでもいいものも非表示にします。
デザインラフの作成
当初は無料で配布されている膨大なテーマを使って、サクっと終わらせる予定でしたが、考えが甘すぎましたね。デザインと投稿記事部分がしっくりくるものがありません。
海外の方がブログように作ったテーマですから仕方ありませんよね。断念してテーマを作ることにしました。
これまでテーマのカスタマイズ程度しかしたことがなかったので不安ですが、いい機会なのでじっくりやろうと決めました。
まずラフ作成ですが、出来るだけ既存サイトを意識して今風のすっきりしたデザインとの要望。
ダサいのがNGなのはわかるが、デザインにこだわってもNG。無料案件ゆえそこに時間をかけることが出来ないから。何ともデザイナー殺しの要望である。この時点で相当心が折れている。
TOPページ・投稿記事ページ・固定ページのラフ3点を制作。GOが出たのでPSDデータをスライスをする。ちなみに、この時点ではWordPressのテーマ制作については全く意識していない。
コーディング
HTML5ベースで通常通りTOPページと下層ページのコーディングをローカルでする。
後々調整が効くように、デザインは出来るだけCSS3を使うようにした。この時点でも、そこまでWordPressのことは考えていない。というか、分らないからあえて考えないようにした。
作ったファイル
- images（使用する全ての画像を入れる）
- style.css（reset.cssやbase.cssも全てまとめてこれに記述）
- index.html（メインインデックス用）
- single.html（投稿記事用）
- page.html（固定ページ用）
基本的な構造
<html> <head></head> <body> <header> <div class="header_top">ロゴ・ヘッダーナビ</div> <div class="main_img">メインビジュアル</div> <div class="gnav">グローバルメニュー</div> </header> <div id="content"> <div class="top_column_left">左側コンテンツ（下層はサイドナビ）</div> <div class="top_column_right">右側コンテンツ（下層はメインコンテンツ）</div> </div> <footer>フッターナビ・コピーライト</footer> </body> </html>
WordPress用のPHPファイルに分解していく
まず、1番ややこしそうな投稿記事用の「single.html」を要素ごとに分解してPHPファイル化します。
ヘッダー要素 → header.php サイドナビ要素 → sidebar.php フッター要素 → footer.php
あとは「single.html」を「single.php」にして該当要素に「header.php」「sidebar.php」「footer.php」を読み込むコードを記述すれば完成です。思っていたよりWordPressのテーマ作りってかなり簡単ですよね。
適当な名前のフォルダを作って、そこに全て格納しサーバーの「/wp-content/themes/」にアップロードします。
なお、PHP・CSS・JSファイルを追加・複製・削除する場合は、FTPソフトからでないと出来ません。ついでにバックアップも定期的にとるようにしましょう。とくにクラッシュする前のバックアップは必須です。
各パーツを読み込むコード
ヘッダー要素を読み込む → <?php get_header(); ?> サイドナビ要素を読み込む → <?php get_sidebar(); ?> フッター要素を読み込む → <?php get_footer(); ?>
http://stocker.jp/diary/WordPress-tutorial/
投稿記事のカテゴリーごとに表示を分岐させる「single.php」を作る
ここからが地獄の始まりでした。今回の案件はカテゴリーごとにサイドナビの一覧を変える必要があります。
WordPressのテンプレートテーマが使えなかった最大の理由がこれです。テンプレートテーマを使っても結局はハードなカスタマイズが必要だったからです。
やりたい事としては、
「カテゴリーA」の投稿記事には「カテゴリーA」のアイキャッチ（サブページビジュアル）と記事一覧をサイドナビに表示
「カテゴリーB」の投稿記事には「カテゴリーB」のアイキャッチ（サブページビジュアル）と記事一覧をサイドナビに表示
といった感じで投稿ごとにサイドナビを分岐させて切り替えます。
「single.php」を分岐表示させる
まず、「single.php」を修正します。「single.php」に下記のコードのみを張り付け。余計な記述は必要ありません。
<?php
$post = $wp_query->post;
if ( in_category('2') ) {
include(TEMPLATEPATH.'/single-1.php');
} else {
include(TEMPLATEPATH.'/single-2.php');
}
?>表示する記事のカテゴリーを取得して、それぞれのカテゴリー専用の「single.php」を使用する。
さらに詳しく説明すると、カテゴリーIDが「2」のものは「single-1.php」を、それ以外のカテゴリーは「single-2.php」を使用するといった感じです。
3つ以上のカテゴリーを分岐させて振り分ける場合か下記。
<?php
$post = $wp_query->post;
if ( in_category('2') ) {
include(TEMPLATEPATH.'/single-1.php');
} else if ( in_category('3') ) {
include(TEMPLATEPATH.'/single-2.php');
} else {
include(TEMPLATEPATH.'/single-3.php');
}
?>else if で分岐を追加して、同じ要領で「single-3.php」を追加します。
しかし、これで終わりではありません。次にサイドナビも同様に分岐表示させる必要があります。
sidebar.phpも分岐表示させる
「sidebar.php」をカスタマイズします。「sidebar.php」に下記のコードのみを張り付け。こちらも余計な記述は必要ありません。
<div class="single_column_left clearfix">
<div class="sidebar">
<?php if (is_category() || is_single()) : ?>
<?php
if (is_category()) {
$cat = get_query_var('cat');
$catname = get_the_category_by_ID($cat);
} else {
$cat = get_the_category();
$cat = $cat[0];
$cat = $cat->cat_ID;
$catname = $cat->cat_name;
}
$category_posts = get_posts("order=desc&category=$cat&numberposts=-1");
?>
<ul>
<?php foreach($category_posts as $post): ?>
<li class="myEllipsis"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</div><!--.sidebar-->
</div><!--.single_column_left-->こちらも記事のカテゴリーを取得してカテゴリーの一覧を表示させるという内容ですが、「sidebar.php」は1つのファイルで完結します。
<li>タグには記事のタイトルを取得しています。記事の並び順はorderのdesc（降順）をasc（昇順）にすることで変えることが出来ます。
「sidebar.php」のコードを「single-1.php」や「single-2.php」にまとめると、クラッシュしたので今回は分けました。
もしかしたらうまくまとめることが出来そうですが、その前に私の頭がクラッシュします。
http://ja.forums.WordPress.org/topic/4413
記事一覧（アーカイブ）で特定のカテゴリーだけ並び順(昇順・降順)を変える条件分岐指定方を参考。
カテゴリーTOPのページを作る
投稿記事をカテゴリーごとに分けることが出来ましたが、そのカテゴリーの一覧ページがグローバルナビの項目としてあります。
そういった場合、特に固有のページを作らないで「https://10-plate.com/web」のようなカテゴリー一覧にアクセスした時「index.php」テンプレートを使って表示されて、TOPページなのに一覧で読み込んでいる投稿記事はwebカテゴリーだけといった感じになります。
それを防ぐ為に、カテゴリーTOP用のページテンプレートを作ります。
まず、固定ページの作成でタイトルだけ入れた空の固定ページを作ります。今時点では使用するテンプレートがないので特に指定しなくてもいいです。
この時注意するポイントは固定ページのファイル名です。「https://10-plate.com/web」はwebカテゴリー一覧として存在しているので、ただ単に「web」としてしまうと存在するファイル名と重複し、うまく読み込むことが出来ない場合があります。
ですので「web-top」のようにカテゴリー名とかぶらないようにしましょう。
次に、固定ページテンプレートを作成する手順と同じようにテンプレートファイルを作成してテンプレート名も指定します。
<?php /* Template Name: WEBカテゴリーのTOPページ */ ?>
ここでの問題は、記事一覧を読み込むサイドナビと本文を表示させる部分です。さらに、本文は該当するカテゴリーの中の一番最新のものを表示させます。実際のコードは下記です。
<div class="single_column_left clearfix">
<div class="sidebar">
<ul>
<?php
$category_recent_post = 0; // 記事数
$category_recent_id = 2; // カテゴリID
$posts = get_posts('numberposts=' . $category_recent_post . '&category=' . $category_recent_id);
global $post;
if($posts) {
foreach($posts as $post) {
setup_postdata($post);
echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
}
}
?>
</ul>
</div><!--.sidebar-->
</div><!--.single_column_left-->
<div class="single_column_right clearfix">
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>
<h2 class="single"><?php the_title(); ?></h2>
<div class="main">
<div class="page_main clearfix">
<?php the_content(); ?>
</div>
</div><!--.main-->
<?php
endwhile;
endif;
?>
</div><!--.single_column_right-->最後に、先ほど作った固定ページのテンプレートを「WEBカテゴリーのTOPページ」にすれば無事適用されます。あとは、同じようなテンプレートファイルをカテゴリーTOPが必要なページ分作成します。
「single-1.php」などで使ったサイドナビの読み込みを試したりしましたが、いろいろクラッシュしたりして最終的にこれに落ち着きました。
これもまだまだもっといいやり方があると思いますが、すでに私は限界でした。この時点で毛髪を100本は失ったと思われます。
トップページを作る
WordPressのトップページは静的なページを作るような考えて構築していっても構いません。初めに作った「index.html」を「index.php」に直してそのままアップロードしても動きます。
ですので、あまりいじらず投稿記事の一覧だけ表示されるようにします。
余裕があれば、「header.php」と「footer.php」くらいは読み込むようにしてもいいかもです。
こちら投稿記事、固定ページ、TOPページのすべてに読み込ませるように設定しました。
投稿記事の一覧を表示させるには下記のコードを表示させたい部分に埋め込みます。
<div class="news_area">
<h2>ニュース＆トピックス</h2>
<ul>
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>
<li><?php the_time('Y年n月j日'); ?>：<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php
endwhile;
endif;
?>
</ul>
</div>→ 投稿日時を取得 → 投稿記事のタイトルを取得 → 投稿記事のURLを取得
固定ページ用のテンプレートファイルを作る
会社概要やプライバシーポリシーなど静的かつ固有のページのテンプレートになります。サイドナビを使用しないので余計な記述は必要ありません。
基本的には、TOPページを作る容量と同じ。はじめに作成した「page.html」を「page.php」に変更してヘッダーの上に、下記の固定ページのテンプレートだという宣言をするコードを記述。
<?php /* Template Name: 固定ページ */ ?>
「Template Name」で指定した名前が、固定ページ作成時のテンプレート選択一覧で表示される。
あとはメインの本文を表示させたいところに下記を記述。
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h2 class="page"><?php the_title(); ?></h2> <div class="main"> <?php the_content(); ?> </div><!--.main--> <?php endwhile; endif; ?>
ここまで来たらお分かりかと思いますが、該当する固定ページのタイトルと本文を取得して表示させています。
アイキャッチ画像（サブページビジュアル）の設定が出来るようにする
TOPページのメインビジュアルは「index.php」で、投稿記事表示ページのアイキャッチ画像（サブページビジュアル）は「single-1.php」「single-2.php」でそれぞれ指定していますが、固定ページのテンプレートは1つなのでこのままだとページごとにアイキャッチ画像（サブページビジュアル）を指定できません。
そこで、WordPress既存機能を利用して簡単に設定できるようにします。
まず、「functions.php」というファイルを作成します。「functions.php」は様々な用途に使われる、common（共通・マルチ）ファイルと考えていいでしょう。何か特殊な機能を持たせたいと思ったらこちらにコードを記述します。
今回のアイキャッチ画像（サブページビジュアル）の設定も「functions.php」で設定します。下記のコードがWordPressのアイキャッチ画像の設定機能を利用するためのコードです。
<?php
function mysetup() {
add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'mysetup' );
?>上記のコードだけを記述すれば固定ページの制作画面で「アイキャッチ画像」という項目が表示されるようになります。とても便利なので是非覚えておきましょう。
投稿記事一覧の表示数の設定
次に、投稿記事の一覧を表示する時に何件まで表示するかを指定する作業です。
投稿記事ページ用の記事一覧
このページは記事表示を無制限にしたい。
カテゴリーごとに分岐表示させているサイドナビの記事一覧数は、WordPress既存の機能を利用して制御します。
管理画面の「設定」 → 「表示設定」 → 「1ページに表示する最大投稿数」を100とかにしておきます。
サイトの更新ボリュームに応じてこちらは今後調整します。
TOPページ用の記事一覧
TOPページの記事一覧は、カテゴリーすべての記事一覧が表示されるのでやたらボリュームが増えてしまいます。ですので表示数を制限するため下記のよう修正します。
<div class="news_area">
<h2>ニュース＆トピックス</h2>
<ul>
<?php
query_posts('&posts_per_page=7');
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>
<li><?php the_time('Y年n月j日'); ?>：<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php
endwhile;
endif;
?>
</ul>
</div>カテゴリーTOP用で作成した固定ページの記事一覧
このページも投稿記事ページ同様に記事表示を無制限にしたい。
<div class="sidebar">
<ul>
<ul><!--?php
$category_recent_post = 0; // 記事数
$category_recent_id = 2; // カテゴリID
$posts = get_posts('numberposts=' . $category_recent_post . '&category=' . $category_recent_id);
global $post;
if($posts) {
foreach($posts as $post) {
setup_postdata($post);
echo '
<li--></ul>
</ul>
<a href="' . get_permalink() . '">' . get_the_title() . '</a>'; } } ?>
</div>
<!--.sidebar-->記事数を「0」にすることで、制限しないという意味になります。というか、投稿記事ページ用の記事一覧で、WordPress側で制御しているから設定の必要がないかもしれませんね。
でも、今後使うかもしれないので一応やっておいて覚えておきます。
http://blog.serverkurabe.com/WordPress-category-articles
残りの静的なページを量産していく
最後に会社概要、プライバシーポリシーなどのページを固定ページで作成して、下層の下層ページもガンガン量産していく。そしてリンクを繋げればそれらしいサイトになっていきました。
WordPressとHTMLを使い分けたサイトも結構ありますが、極力使用するファイルは統一した方が運用しやすいかなと個人的に感じました。ただ、今回のようにサーバー移管のような事があれば少し手間がかかりますね。
今回使用したプラグイン
AddQuicktag
これはお客さんが更新する時に、CSSで設定した文字装飾やタグなどを投稿画面のインターフェースで簡単に挿入できるようにする、とても便利なプラグインです。
HTMLが分らない方用だけでなく、いちいち打ち込むのが面倒なタグを登録しておくことも出来ます。
当ブログでも使用しており、Amazonの商品を紹介する時のひな形をボタン一つで挿入できるようにしてあります。とてもおすすめなプラグインです。
All In One SEO Pack
言うまでもありませんがもはや必須のプラグインですね。
今回のWordPressの構築で気がついたのですが、All In One SEO Packを入れておけば、「header.php」でメタのディスクリプション（description）とキーワード（keywords）の記述が必要ありません。
このプラグインから全ページのメタの記述が出来るので、とてもすっきりとした「header.php」になります。SEO内部対策をするなら必ずインストールしましょう。
Contact Form 7
普段なら、お問い合わせフォームは別ファイルのCGIでやる人なんですが、今回は全てWordPressでまとめてみようと思いContact Form 7を使用しました。
このプラグインも高機能で、今回もその便利さ魅了されました。むしろCGIを使うより早くて楽です。
カスタムもメール送信設定も簡単にできてWordPressでフォームならこれ！というほどおすすめです。スパム防止の画像認証を追加するなどの拡張プラグインも豊富なのも特長です。
Exec-PHP
今回は使用しませんでしたが、固定ページや投稿記事にPHPを記述することが出来るようにするプラグインです。
当初は固定ページのテンプレートは作らず、直で記述しようとしていた為このプラグインをインストールしたのでしょう。いかに無知無計画で開始して、制作中に覚醒したかわかりますね。我ながらあっぱれ。(笑)
Google XML Sitemaps
こちらも今や必須のプラグインですね。XMLサイトマップを自動でサーバー上にアップロードしてくれるとても便利なプラグインです。
どちらかと言うと制作後の運用時に役立つプラグインです。
Save Editor Scroll Position
このプイラグインは投稿記事や固定ページの作成中に更新・公開で保存をした時に、エディタが一番上に戻らないようにするプラグインです。
ロングコーディングをして上に戻ったら「イラッ」っとするのでこれは結構お気に入りです。
PS Disable Auto Formatting
投稿記事や固定ページをエディタで作成している時に、改行が<br>や<p>になるのを防ぎます。
そして今回の構築中に発見したことが、投稿記事や固定ページ作成の高速化です。
WordPress側で改行が<br>や<p>を無効にする処理を省いているかどうかはわかりませんが、更新・公開ボタンを押したときのロードが目に見えて早くなりました。
こちらも是非インストールしておきたいプラグインの一つです。
制作を終えて
いろんな工程を順序無視の試行錯誤でやっていたので、説明の順番がバラバラになってしましいました。
今回、始めてゼロからのWordPress構築だった為かなり苦戦しましたが、WordPressをより深く知る事が出来た良い機会でした。
無料案件がゆえにそこまで期限もクオリティも求められずスキルアップには丁度いいとポジティブに考えるようにしていましたが、何度も頭がショートして本当に大変でした。
まさにトライ＆エラーの繰り返しです。
そして気づいたことがもう一つ。今回のような利益を生まないサービス案件は、社内的にも全く評価されない。
また、制作者のモチベーションを極度に下げる最悪の案件だとつくづく感じました。
スキル的にはかなり勉強になったが、プロとして仕事をしている立場からすると実に後味が悪いと。
記事のコメント