DogooBaco Loading

2016.12.18

美容室No.11様webサイト制作
〜第5回WordPress編+α〜

web

こんにちは^^

こたつがほしいと思い続けて早9年が経ちました。

 

先月個人でサイト制作・リリースをさせていただきました、埼玉県川越の美容室「No.11 (ナンバージュウイチ)」様のサイトの制作の記録を簡単にでも残しておきたいなと思い、5回にわたって制作ブログを書いております^^

今回は最終回!の「第5回 WordPress編」です!!

 

 

 

目次

 

やっとここまでたどり着きましたWordPress構築…!そして最終にして最大の山場(個人的に)です!

 

 

 

WordPressでやりたいこと

WordPressの機能を使って作りたい機能としては、大きく以下の4つありました。

  • ブログ記事の投稿・管理
  • ヘアカタログの投稿・管理
  • スタッフページの投稿・管理
  • 今月のお休みの投稿・管理

 

上記が動的に作りたいページで、その他静的(固定ページ)なページをサイト上に設置します。

 

 

 

 

使用プラグイン

作りたい機能を実現するにあたり、以下のプラグインを使用しました!

 

 

  • Custom Post Type UI:カスタム投稿タイプを作成。前述した4種類動的機能を、このプラグインでカスタム投稿タイプとしてそれぞれ作成。
  • Advanced Custom Fields:作成したカスタム投稿タイプごとにカスタムフィールドグループを作成。
  • Custom Post Type Permalinks:作成したカスタム投稿タイプのパーマリンクの設定。
  • WP-PageNavi:カスタム投稿アーカイブページにページャーを設置。
  • iOS images fixer : iOSから画像入り記事を投稿した際に、横向き画像が縦置きで表示されてしまうバグの対応(こちらはリリース後に発覚しインストールしました^^;)

 

WordPress構築の際には、「KOTORI Blog」様の記事に大変お世話になりました…!!

以下特に参考にさせていただいた記事です。

本当にお世話になりましたm(_ _)mm(_ _)m

 

 

 

WordPressの構成

サイト内各ページは以下のような構成で設計しました!

 

 

投稿系テンプレート

 

  • ヘアカタログ:archive-styles.php、single-styles.php

 

 

 

ヘアカタログの下に、「ヘアスタイルカテゴリ」というタクソノミーを作成し、その中に6種類のヘアスタイルカテゴリのタームを作成しました。

 

写真3枚投稿(1枚目は必須)、ヘアスタイル説明テキスト、利用メニューの選択、カラーリングの色名自由指定

をカスタムフィールドで独自に作成しました。

 

 

 

 

  • ブログ:archive-blog.php、single-blog.php

 

 

 

ブログの下に、「ブログカテゴリー」というタクソノミーを作成し、その中に4種類(日常/技術・道具/お客さまとの写真/お知らせ)のブログカテゴリーのタームを作成しました。

 

このテンプレートはほぼほぼもとの投稿機能のみを使っています^^

唯一「記事を書いた人」でスタッフさんの名前を選んで表示できるようカスタムフィールドを作成。

 

 

  • スタッフ紹介:archive-staff.php、single-staff.php

 

 

こちらは特にタクソノミーの作成はしていませんが、一番「Advanced Custom Fields」をゴリゴリ使用した投稿タイプです^^

  • スタッフさんのお名前(日本語)入力
  • スタッフさんのお名前(英語)入力
  • 肩書(日本語)選択
  • 肩書(英語)選択
  • スタッフさんのお写真 メイン 画像投稿
  • メッセージテキスト入力
  • お誕生日入力
  • 血液型  選択
  • 得意な技術
  • スタッフさんのオフショット写真  2枚分画像投稿

上記の11項目をカスタムフィールドで作成しました。

 

 

 

  • 今月のお休み

 

 

archive、singleページの作成はしていませんが、「今月のお休み」についてもWP管理画面上で管理できるよう構築してあります。お休みの日にちをチェックボックスで入れていくようなものです。

月については、今現在の月を表示するよう通常のphpで吐き出すようにされていますが、月も自由に選択できるようにするのと、2ヶ月分のお休みを表示するようにしたほうが親切だということで、今後改修予定です^^^

 

 

 

 

固定ページ

下記4ページは固定ページとして作成をしました。

それぞれ「page-●●.php」とした各ページの固定ページテンプレートを作成。

サイト共通のヘッダー・フッター・回遊リンクなどはphpファイルの中にincludeの記述を残したまま、

完全に静的コード部分は管理画面上で操作できるよう、下記のように管理画面上のエディタ内に入力したhtmlソースがが吐き出されるようにしました^^(以下は「お店についてページ」の例)

<?php $page_info = get_page_by_path('shopinfo'); $page = get_post($page_info); echo $page->post_content;
?>

これでphpコードを都度開き、ファイルアップロードをせずともWP管理画面上でテキスト変更などができて便利です!

 

 

 

固定ページ管理画面はこんな感じに。

 

これで各ページ、投稿できる機能・表示するサイト側の表示ができました!

(プラグインの使い方やカスタム投稿、カスタムフィールドなどの作り方や実際のphpコードについては割愛^^^)

 

 

ハマったところ

トントン拍子に行っているかのごとく見えますが、ハマったところは多々ありました…w

多々あったのですが、特に時間がかかってしまった件が下記><

  • ①アーカイブページでページャーがうまく動かない
  • ②突如カスタム投稿で作成した記事一覧から詳細へのリンクをクリックすると、ページがなくなっている…?

 

 

現象:①アーカイブページでページャーが動かない

使用していたページャー用プラグインは「WP-PageNavi」です。

  • ページャーリンク自体は表示され(表示数もあっている)リンクは押せるが、2個目以降のリンクをクリックしても1番目のページが表示されてしまう
  • (これは別問題だと思っていたのですが、上記を解決したら一緒に解決されたもの)タクソノミーの各タームリンクをクリックしてタームの絞込ができない

 

 

結論だけ言ってしまうと、アーカイブページ内のループを「query_posts」で記述していたことに原因があったようです。。。

ループの書き方を「pre_get_posts」に変更をしたところ、ページャーがちゃんと遷移!

ついでにタームでの絞込リンクも機能しました^^^^!

 

夜中うんうん言っていたところに下記のサイト様の記事を発見…!助かりました;;

 

 

現象:②カスタム投稿詳細ページへのリンク切れ

こちらは、とっっっても単純なことでした…!

原因としては、サイト全体にアクセス制限をいじった際(今回はロリポップのアクセス制限機能を使用しました)にWP theme内の.htacessが上書きされます。

その影響で「Custom Post Type Permalinks」で設定していたカスタム投稿用のパーマリンクの設定が上書きされてしまい、各投稿自体のパーマリンクが書き換わってしまっていたようでした。

 

解決方法としては、WP管理画面上の[設定]⇛[パーマリンク設定]⇛何もせずに[変更を保存]ボタンを押すと、

カスタム投稿記事のパーマリンクがもともと設定していたものに戻りました!

 

これはリリース時にもアクセス制限を解除したりしたので、地味にヒヤッとするものでした…;;

 

 

こちらでなんとかWordPressの実装も完了!

無事webサイトが機能ごと出来上がりました〜〜!!!

 

 

 

テスト&リリース!

一通り完成したwebサイトを各ブラウザで表示崩れをしていないか、意図通りに投稿ができるか、などを確認して回ります!

 

このテストの際に、過去のお店のブログ記事(店長さんがアメブロで書かれていた記事)を一部移植するのと、

ヘアカタログページの全てのページを作成、スタッフさんページの作成、というオペレーター的な作業を行いました^^完成前の最後の一作業です!ワクワク

 

PCはChrome、FireFox(最新版)、IE(一応9以上を確認)で確認をしました。個人PCがMacのため、Winでの確認は会社のPCを使用してお昼休みなどに確認…w

スマートフォンは、Android4.4以上、iOS8以上で表示確認を行いました。こちらもひっそり会社の端末をお昼休み中にお借りましたw

表示については特に大きな崩れなどはなく!

1つ一瞬あれっ?と思ったことは、IEで最初に確認をした際、大きく表示が崩れていたこと^^;

あまりに大胆に崩れていたので何かと思って見てみると、<main>タグってIE10以上(?)でも未だに明示的にdisplay: block;をつけてあげないと認識できない(inline要素になる?)のですね…

普段ナチュラルに使いすぎていてすっかり忘れていました…mainにdisplay: blockをつけて、無事解決です^^^

 

他投稿についても一通り確認をし、問題なく機能していることが確認できました。

 

これであとはリリースをするのみ!

 

リリース当日は午前中にお店でヘアカットをしていただき、施術していただきつつ軽くWordPressの使い方のご説明をスタッフさんにさせていただき、施術後お店の端でそっとリリースをしましたwリリース作業は、ロリポップのアクセス制限を解除する+パーマリンクの設定を更新する、という方法です。

こうして、無事2016/11/26の14:00頃、No.11様のサイトが世に羽ばたきました^^

リリース記事の方でも書きましたが、店長さんをはじめ、スタッフの皆様には本当に感謝しかありません。

 

 

 

以上!

全5回に渡って一つのwebサイト制作の流れを簡単にですがまとめてみました。次回の自分の制作のためのメモみたいなものになってしまいました^^;

各記事簡単なまとめになってしまったものの、実際にはweb制作の流れはこんなに簡単ではなく、まだまだ書き足りていない部分がたくさんです!

 

デザイナーでないweb関係のお仕事をされている方には、デザイナーはただきれいなビジュアルを作る仕事ではないのですよ〜ということとか、

web関連のお仕事でない方には、web制作ってたくさんの工程や考えが詰まって作り上げられているものなんですよ〜ということが、少しでも伝わっていたら幸いです…!

 

 

今回No.11様のwebサイト制作をさせていただいて、普段仕事ではやらないようなことをやってみたことで、いつもより少し他の分野の知見を得られたことが大変ではありましたが、それ以上に嬉しくて、楽しかったです。

そしてこれくらいの規模のwebサイトを、自分ひとりで(手を動かすという部分において)作りきれたということが、何よりの自信になりました!

 

しかし実際にやってみて、まだまだ勉強不足、知りたいことはたくさんです。

特にWordPressのことはまだまだ浅い知識でしかなくて、これからも引き続きWordPressについて、phpについて勉強して行かねばとますます感じました^^;

 

 

とっても長くなりましたが、以上です!

制作についてご助言くださった方々、記事を読んでくださった方々、本当にありがとうございました!!たくさんの方々に感謝の気持ちでいっぱいです^^

普段あまり外へ発信していくことが少なかった私ですが、こうして制作をし、ブログを書いたことで新しい出会いがあったことも本当に嬉しかったです。

 

今後とも何卒よろしくお願いいたします(*´▽`*)

 

 

 

次は2016年の締めカレーのことでも考えよう^^^