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