こんにちわ、そろそろ夏だと思ってサンダルを履いてみたら土砂振りの @nihimoto です。
この度、とあるPC・携帯のウェブサイトを完全にWordpressの管理下に置いた状態で構築するお仕事をさせていただいたので、そのノウハウをまとめて記載させていただきたいと思います。
WordPressをCMSとして使う方法はうまくプラグインを使いまくればかなり便利に使えます。
Wordpress以外のCMSを使う理由なんてほとんど無くなってしまいます。
ということで、さっそくまとめてみます。
–
「投稿」と「固定ページ」を使い分ける
「投稿」はまさにブログの記事のように日付やカテゴリでまとめて分類される、蓄積されていく記事を投稿するためにあります。「固定ページ」は常時存在して増減のそんなにない、まさに「固定されたページ（そのまんま）」の為にあります。
一般的な企業ページで言えば「お知らせ」や「ニュース」や「製品情報」などは投稿で作り、その他の「◯◯について」や「アクセス」などは固定ページで作るのが定石です。
アーカイブなどの機能もそれを前提に機能が設計されています。
–
テンプレートはばっさり編集
WordPressのテンプレートはwp-content/themes/フォルダの下に置いてあります。楽をするためにデフォルトテーマのtwentytenあたりを丸ごとコピーして、それをベースにつくるのがオススメです。
しかし、twentytenはデフォルトのテーマだけに、様々な状況に対処できるように大量のソースコードが埋まっています。ブログとして機能させたり、古いデータを引き継いだり、コメントを受け付けたりするには必要なコードだったりするのですが、単純にCMSとして使いたいだけの場合にはほとんど不要です。
ということで、いらなそうなコードはバッサリ削除してしまいましょう。だいぶ管理しやすくなります。
私も実際に要らないコードを削ってみたら半分以上無くなってしまいました。
※追記5/30
ばっさり削除するくらいなら元々余計なものの無いテーマをベースにすればいいじゃん、そう思った方、下記のサイトではそういった方用の、余計なものがばっさり取り除かれたNakedなテーマが紹介されています。
10 Blank/Naked WordPress Themes Perfect for Development
–
投稿内容の自動整形はうっとおしい
CMSとして使う場合、固定ページの本文にHTMLを記載することが多いと思います。しかし、WPの標準の自動整形機能が働いていると、本文を表示するときに勝手に<p>や<br>を埋め込んでしまい、レイアウトが崩れてしまう可能性があります。それに対処するため、自動整形機能をOFFにする PS Disable Auto Formatting というプラグインを導入します。
しかし、これでも少し問題があります。
これによって自動整形をOFFにすると、当たり前ですが自分で<br>を入れなければ改行されません。サイトの製作者が管理しているうちはそれでいいのですが、当然HTMLの知識の無い担当者に受け渡すこともあるでしょう。その時<br>がないと改行が反映されない、というのは更新のハードルを上げてしまいます。
その問題に対処するために、「投稿」機能の時だけテンプレートに php に nl2br 関数を埋め込んで改行を反映させてあげるのがオススメです。「投稿」にだけ導入するのは、先述のとおり「投稿」は「お知らせ」などに使うケースが多く、管理者以外が投稿をする可能性が高いためです。逆に「固定ページ」は固定されているページなので、大抵の場合更新はあまり発生せず、改行が反映されなくてもあまり問題ありません。
さて、改行を反映させるには、具体的には loop.php の下記の部分を
the_content();
次のように書き換えます
if (is_single()) {
print nl2br(get_the_content());
} else {
the_content();
}
これで、投稿の時だけ改行が反映されるようになりました。
–
携帯へ対応させる
携帯への対応はKtai Styleというプラグインを使うのが定石です。これを使えば携帯でサイトにアクセスされた場合に、携帯用のテーマで表示ができます。
しかし、これによってテンプレートのPC／携帯の出し分けは出来るのですが、肝心の投稿や固定ページの本文を出し分けることはできません。PC用にHTML＋CSSでバリバリ書いた本文を作ってしまうと、それが携帯で表示されるととんでもないことになってしまいます。
この問題に対処するために、今度は PC Ktai content selecter というプラグインを使います。これを導入すると[pccontent]PC用の記述[/pccontent]や[ktaicontent]携帯用の記述[/ktaicontent]などと、PCと携帯用にかき分けができます。これにより、PC用に書いたHTMLをそのまま携帯に表示されては困るようなところだけ、携帯用の記述を書き分けることで対処ができるようになります。
–
お問い合わせフォームは・・
企業のサイトを作る、といえば必ず付いて回るのがお問い合わせフォーム。Wordpressには ContactForm7 という優秀なメールフォーム用のプラグインがあり、しかもモバイルにも対応出来ます。
・・が、どうもこのフォームは制約がありすぎて、クライアントの要望に応えにくいのです。
なのでお問い合わせフォームは独自にPHPでフォームを作ります。しかし、せっかくWordpressで作っているので独自に作ったPHPもWordpressの中に収めたい。そこで Exec-PHP というプラグインを使用します。
これを使えば記事本文中にPHPのコードを書けばそれが実行されます。お問い合わせフォーム用のコードを投稿内容に書いてしまえばOKです。
（もちろん相応のPHPの技術は必要ですが。それが無い方は素直にContactForm7を使っていいと思います）
–
データはバックアップを取りたい
最後に更新作業が管理者の手を離れて一般の担当者レベルの仕事になると、誤った操作によって投稿やページが壊われてしまうことが心配になります。これはもちろん投稿者のアカウントのできる作業を限定したり、マニュアルを作って間違えないようにする、など予防策を十分に巡らすことで対処するべき問題です。
しかし、それでも不安が残る場合は定期バックアップを取ることがオススメです。それに、バックアップがあればサーバーがクラッシュしたときも安心です。
こういう時に便利なのは WP-DBManager というプラグインです。これを導入するとボタン一発でその時のDBの中身をバックアップできます。さらに、バックアップは定期的に自動実行が可能です。さらにさらに、バックアップしたデータをメールで管理者に送信されるようにすることもできまう。
※追記5/30
が、WP-DBManager は英語のプラグインです。機能的に問題ないのですが、クライアントに渡したときに若干の不安がのこります。また、メールでバックアップを送信するとメールの件名が化けてしまい、気持ち悪いことになります。
そこで下記サイトの手順でプラグインを日本語化、さらに別の手段でPHPのソースコードを書き換えて、メールの件名の文字化も直してしまいましょう。
WordPress – WP-DBManager 日本語化ファイル | Technolog.jp – ICTウェブマガジン
WP-DBManager のメール文字化けを解消する | 犬小屋にて
–
さてさて、いかがでしたでしょうか。
ここまでが実際の構築案件で使った技術の組み合わせの説明でした。
この手法であれば工数も大きくならずにPC携帯両対応のサイトが作れます。もちろん、案件は様々なので、場合によってはいろいろ臨機応変な対応は必要になることがとは思いますが、大分融通の効くやり方ではないでしょうか。
ということで、この手法でお安くHPを作りたい方は nishimoto@the-triad.jp までぜひお問い合わせください。（突然営業モードで失礼）
また、他に何か知りたいことなどありましたら @nihimoto までご連絡ください。よろこんで追記等させていただきます。（こちらはマジメに）
