読者です 読者をやめる 読者になる 読者になる

TRANS

神戸のNPOやソーシャルビジネスの創業・起業のお手伝い

WordPressで企業サイトを作る際に押さえておくべき10個のこと

WordPress

少し前に、WordPressで企業サイトを作る際によく使うプラグインという記事を書きましたが、プラグインを入れたらそれで完成、という訳にはいきません。そこで、プラグインとは別に、企業サイトを構築する際に押さえておくべき10個のことを書き出しておきますので、参考にして下さい。


そのコンテンツにはページなのか、記事なのか、それともHTMLなのか。


WPには、「ページ」というブログの時系列には影響されない個別のコンテンツを作るための機能があります。まず、はじめに考えておくべきことはWP自体をどの階層にインストールしておくのか、ということです。


同時に、あるコンテンツを作る際にそれを「ページ」で作るのか、それともブログベースの「記事」で作るのか、それともWPとは別に単なるHTMLファイルとして作るのか、そのあたりを考えておく必要があります。僕がよく使う方法は、「お知らせ」や「新着ニュース」などは「記事」、ほかのコンテンツは「ページ」、WPでうまく作動しないHTMLタグ(例えば、tableなど)を使う際にはHTMLファイルなどとしています。


(tableがうまく起動しないと書きましたが、なぜかtd要素が一切出力されないのです。なぜなんだろう?)


ページを作る際には階層構造を意識して作る。


WPの「ページ」は階層を作ることができます。例えば、hogehoge.com/about/が会社概要のコンテンツならば、そのaboutの直下にboardなどの役員紹介のコンテンツ(hogehoge.com/about/board/)などとすることができます。こういうふうにしておけば、役員紹介のページから閲覧し始めた人がURLのboardを消すことで、上位のページに移動することができるようになります。


これは、WPの階層を作るためには、「親ページ」を指定することで可能です。つまり、HTMLファイルでサイトの階層構造を作るようにWPでもピラミッドのような階層を意識して作ることができます。


記事のパーマリンクを設定する。


記事のパーマリンクはデフォルトでは「hogehoge.com/?p=123」になっています。「?」が入るのはSEO上好ましくないとも言われていますので、僕はパーマリンクの設定を変更します。


多くのブロガーは「hogehoge.com/2007/07/21/sample-post/」などのように記事名をURLとして使うことが多いように思いますが、ただ日本語の場合はわざわざ「投稿スラッグ」に英単語を打ち込まねばならず、更新担当者によっては使いにくいかもしれません。そこで、僕は「hogehoge.com/%category%/%post_id%」という形をよく使います。


これは「カテゴリ名/記事ナンバー」という位置付けになります。これの便利なところは、個々の記事のデザインをsingle.phpに読み込ませておき、上位URLのカテゴリに移動した際にはcategory.phpを読み込ませて、その記事の新着の一覧などを用意することができるというものです。


ただ、Using Permalinks - WPJ_Codexには、

%category% は、Apache バージョン2以前のバージョンにおける mod_rewrite のいくつかの実行環境においては、正しく動作しません。サーバーがApache 1で、%categoryタグを使って問題が発生する場合には, パーマリンクに%category%を含むのをやめるか、Schlueterica's plugin (http://isaacschlueter.com/plugins/i-made/lucky-13-rewrite/)を使用してください.

と書いており、うまく動作しないことがあるかもしれません。僕が使っているさくらインターネットレンタルサーバの環境では今のところ大丈夫そうです。


まずはHTMLファイルを作る、次にテンプレートファイル化する。


WPのオリジナルのデザイン(テーマ)はテンプレートという形で、HTMLファイル内にテンプレートタグというPHPを含ませることによって、色んなデータを引っ張り出せます。例えば、

<dl>
<?php $posts=get_posts('numberposts=3 & category=2'); ?>
<?php if ( $posts ) : foreach($posts as $post) : setup_postdata($post); ?>
  <dt><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></dt>
  <dd><?php the_time('Y年n月j日'); ?></dd>
<?php endforeach; endif; ?>		
</dl>

これはカテゴリIDの2に入っている、新着記事3件を引っ張ってきて、dtにはパーマリンクとタイトルを、ddにはその記事に日付を挿入するという意味です。また、

<?php get_header(); ?>

としておけば、header.phpと保存しているパーツ・テンプレートファイルを挿入してくれたりします。(includeみたいな働きをしてくれます)


でも、いきなりこの形でコーディングするわけではありません。まずは、普通のHTMLで書いておきます。そうしないと、バリデートできなかったり、表示が崩れた際にデバッグしにくくなるからです。ちゃんとしたHTMLファイルを完成させたあと、それをヘッダーやサイドバー、フッターなどのパーツ・テンプレートファイルに分割したり、テンプレートタグを挿入したりして、WPに見合ったテンプレートに仕上げていきます。


CSSはビジュアルリッチエディタを意識して書く。


CSSを書く際に注意しておくことがあります。これはWPのビジュアルリッチエディタ(WYSIWYGみたいなもの)が影響してきます。WPのビジュアルリッチエディタとはこんな感じです。

この太字の「B」は「strong」で、斜体の「I」は「em」で、打ち消し線は「strike」でマークアップされます。


これらの要素をdefault.cssなどのCSSファイルで装飾を完全になくしている場合は、その装飾が反映されなくなる可能性があります。更新担当者がHTMLに詳しくない場合、「あれ?なんで反映されないんだ?」と思ってしまうかもしれません。そのため、このへんの装飾は個別性を高くするなどしたほうが無難かもしれません。


もしくは、ホワイトリストを別途用意しておき、更新担当者にその機能を使わせないという方法もありだと思います。


テンプレートファイルは最小限の数にする。


テンプレートファイルは最小限の数にしておくようにします。メンテナンスが用意になるからです。WPにはパーツ・テンプレートファイルという機能があって、ヘッダーやサイドバー、フッターなどを用意にincludeできるようになっています。しかし、

<?php include(TEMPLATEPATH .'/hogehoge.php'); ?>

と書いておけば、事実上様々なテンプレートを読み込ませることができます。


デザインやサイト構造によってはサイドバーがどのページでも変わることもあるかもしれません。その結果、数多くのテンプレートファイルができてしまうかもしれませんが、その数を多くしすぎると、管理や編集の手間が非常にかかるので、気をつけた方がよいかと思います。


コンディショナル・タグを使いこなす。


コンディショナル・タグとは、if構文のような条件分岐をする際に便利なテンプレートタグです。例えば、

<?php if (in_category('1')): ?>
  A
<?php elseif (in_category('2')): ?>
  B
<?php endif; ?>

これは、カテゴリID1に属する記事の場合はAを適用、2の場合はBを適用する、などのように使い分けることができます。これはカテゴリだけではなく、トップページの場合だけ、シングルページの場合だけなどのように色んな使い分けができるので、サイドバーをページごとに変えたい時などには重宝します。


コンディショナル・タグを使いこなせば、テンプレートの枚数を少なくすることができます。


ループの出力条件をコントロールする。


僕はMovable Typeをインストールまでしかやったことがないので、MTとWPのテンプレートタグの違いは分かりませんが、ループの出力条件をコントロールすることによって、WPでも色んなことができるようになります。


このあたりは、Wptags.comquery_postsget_postsを参考にして下さい。コンディショナル・タグとループの使い方は複雑なテンプレートファイルを作る際に、必要不可欠です。


ファイルアップロードディレクトリは年月日を使用しない。


WPのデフォルトでファイルをアップロードした際、そのファイルは「hogehoge.com/wp-content/uploads/年別日/」に入ります。ブログを運営するには、あまりファイル名を考えずにアップロードしたりすることができて便利なのですが、企業サイトを作る際に不便なことがあります。


例えば、あるページの画像だけを変える際に、img要素が指定しているアドレスを設定しなおさなければなりません。そこで、僕は年月日によって管理しないように設定を変更して、同じファイル名でアップロードするようにしています。


しかし、元の画像ファイルが残っている場合は自動的にhogehoge1.gifなどとリネームされてしまいますので、一旦サーバ上の画像をファイルを消したあと、新しいファイルをアップロードし直すという方法を取っています。


ちなみに、WPの記事やページ、テーマファイル(HTMLやPHP)で画像を使う場合はWPのファイルアップロードディレクトリを、CSSファイルで使う画像はWPの構造以外にフォルダを作っておき、直接そこにFTPでアップロードしています。


プラグインは最低限にする。


理由はいたって簡単なのですが、管理が煩雑になるし、プラグイン同士が衝突して動かなくなる可能性があるからです。衝突してしまった、もしくは動いていないプラグインを検証するためには、全てのプラグインの動作を一旦止めて、それから検証しなけばならず、時間がかかります。そのため、余計なプラグインは入れないようにして、できる限り最低限のプラグインで動作できるようにします。


あとは、うまく書籍を活用する。


僕のおすすめは、WordPressサイト構築スタイルブック―デザイナーのためのテンプレートタグリファレンス+サイトデザインテクニックです。各テンプレートタグの詳しい説明文、使い方の例、企業サイトのサンプルなど、リファレンスとしては非常に便利です。また、ところどころにMTのタグとWPのタグが併記されているので、MTからの移行組の人にもよいかもしれません。