2012年5月4日金曜日

一挙大公開、WordPressによるブログ兼ポートフォリオサイトの制作概要まとめ | GanoWeb


WordPressテーマをカスタマイズ

WordPressによるWebデザインの情報発信を目的としたブログ兼ポートフォリオサイトを制作しました。つまりはこのサイトのことですが、今回制作したサイトは元々はてなダイアリーで運営していたブログの後継版となります。

GanoWeb | トップページ

「読みやすく・高機能・クセのないきれいなデザイン・SEO対策も万全」を目標に仕上げていきました。（あくまで目標ですよ）

ちなみにこのサイトはGridlocked WordPress Portfolio Themeという海外の有料テーマを基にカスタマイズしています。

Gridlocked WordPress Portfolio Theme

見比べればわかる通り、ソースから何から99%別物になっています。ただ元々のテーマが有料なだけあって機能が高く、サイト構築の際はこれ以上ないお手本になりました。

これからWordPressを勉強されるという場合、参考書などである程度の基本知識を詰め込んだ後はお気に入りのWordPressテーマのソースコードを解析していくのが一番勉強になると思います。

というわけで今回はこのサイトに関する制作側視点でのプレゼンテーションです。サイトの制作過程や仕様に加えて、導入しているWordPressプラグインも残らずすべて紹介していきます。

1. 外観のデザイン

今回ブログとポートフォリオはあえて一体化させました。

書いている文章を読めば私がどういう人間でWebに関して実際何を知っているのかというのが少しぐらいは見えてくるのではないでしょうか。ブログを日記としてではなく、Webに関する一種のレポートとして扱いポートフォリオの一種にしようと思いサイトの制作を始めました。

1-a. ラフスケッチ&ワイヤーフレーム

最初の作業はサイト完成図のラフスケッチとサイト構成を示すワイヤーフレームです。ラフスケッチは手描きでコピー用紙などにざっくりとイメージを描いていきます。

掲載用に少し書き直したものを公開します。（字が下手ですみません…）

サイトのラフスケッチ

自分のサイトだけに限らず、さまざまなサイトや広告をスケッチしてみることの重要性はStocker.jpさんが詳しく解説されています。

ワイヤーフレームはCacooがおすすめ

ワイヤーフレームは手描きでラフスケッチ同様に描いたりIllustratorを使ったりと人によってやり方は違いますが、Web上で図面の作成が簡単にできるCacooもおすすめです。

Cacoo

Cacooの使い方は以下のページなどで詳しく紹介されています。

Cacooはオンラインで他人とデータを共有することができ、リアルタイムな編集作業も可能です。操作方法も簡単でワイヤーフレーム以外にもプレゼン資料の作成などさまざまな用途があるので、まだ試したことのない方はぜひ一度使ってみてください。

1-b. Photoshopでのカンプ作業

デザインのカンプはPhotoshopで作成しています。

デザインカンプの作成

コンテンツ幅は960px、ボックスの影のための余白を含めると幅980pxと若干広めに設定しました。あらかじめ基準となるグリッド線を作っておいてから各コンテンツをレイアウトしていきます。

カンプは実際のサイトとほぼ同じ状態になるまで仕上げていきます。カンプをどの段階まで作り込むかは意見の分かれるところだと思いますが、私の場合はコーディングの際に外観のデザインで迷いたくないので時間の許す限り作り込みます。

マンガ的に言うと、ネーム＝ワイヤーフレーム、下書き＝カンプ、ペン入れ＝コーディングな感覚でしょうか。土台となるワイヤーフレームやカンプの完成度は後々の作業まで響いてくるので手を抜きたくないところでもあります。

カンプ作業中は定期的にレイヤーをフォルダに分けながら整理し、「ここはdivでここはulで…」とHTMLでどうマークアップするか考えながら進めていきました。レイヤーはかなり細部まで分けています。

レイヤーを細かく分けて整理する

レイヤーを分けてエリアごとにフォルダで整理しておけば、後からレイアウトの位置を変更したいといったときなどの編集作業が容易になり管理しやすくなります。時間がないときはこの辺りの作業も雑になりますが…

一通りカンプが終わったら次はそのカンプを設計図とし、HTMLとCSSを使って静止ページを作っていきます。

メモ : カンプのための教科書

カンプをどうやって作ったらいいか分からない！という場合、デジタルハリウッドの「Webデザイン Illustrator&Photoshop」という本がおすすめです。ワイヤーフレームとカンプの作り方が初心者向けに丁寧に書かれています。

デザインの教科書ではなく、あくまで「ワイヤーフレームとカンプをIllustratorとPhotoshopでどう作るか」を解説した書籍です。

1-c. デザイン面で実際に気をつけたこと

外観をデザインする際はとにかくブログとして読みやすいデザインにしようと心がけました。具体的には以下のような点について考慮しています。

  • 誰もが使い慣れたオーソドックスな2カラムレイアウト
  • 本文の文字は大きく（16px）行間も余裕を持たせる
  • 1行には多くても40文字、4行以上の場合は必ず改行する
  • 見出しを目立たせてタイトルで内容を把握させる
  • 全体の色数を抑えて背景を暗くしすぎない
  • 本文周辺ではjQueryなどでの余計な動きを極力控える
  • 何かはみだした部分を作り、ぱっと見の印象度を上げる
  • 記事内では文章と共にアイキャッチなどの画像を多用する
  • 罫線などの立体感を表す1pxの処理にこだわる
  • 相手に伝わる日本語を丁寧に書く

今回は内容を簡略化させていただきますが、要は読んでくれる相手のことを考えてデザインするよう気をつけました。独りよがり、伝わらないと言われるデザインだけはなんとか避けたいところですが、難しいわけで…

とりあえず自分で水準を決めて、それ以上には仕上げようと作業を進めました。

▲ WordPressサイトの制作概要 もくじへ戻る

2. HTML5とCSS3を導入

カンプでデザインを決めた後はコーディングです。サイトの構築にはHTML5とCSS3を使用しました。

HTML5では主に従来のdiv要素に代わるarticleやsectionなどのより文書構造を明確にする要素を導入しています。CSS3は今まで画像で処理していた部分、特に背景色の透過や角丸・ボックスの影などに対して利用しました。

2-a. HTML5のアウトライン

HTML5のアウトラインはかなり強く意識しています。Google Chromeのエクステンション・HTML5 Outlinerで確認しながらきれいなアウトラインができるようマークアップしました。

HTML5のアウトラインについては以下のページを参考にしてください。

次の画像はHTML5 Outlinerで見たトップページのアウトラインです。

アウトラインの確認


"トップビジネススクール" m.b.aプログラムのランキング

細かい点は諸説あるので何が一番正しいとは言えませんが、見出しを表すhタグと意図的にアウトラインを作り出すarticle・section・asideなどの各要素で一本筋の通った構造を作っています。

見出しのhタグはこのアウトラインの階層に沿ってそのまま割り当てました。個別記事のページを例にしてみます。

記事本体の見出しがh3から始まるのもどうかなともと思いましたが、はてなダイアリーなども似た構成で（しかもはてなは直前のh2要素にカテゴリー名ではなく日付が割り当てられている）あまり神経質になる必要はなさそうです。

個別記事のh1をサイト名ではなく記事タイトルにすることで、もっとも重要である記事タイトルがメインメニューやサイドメニューより下の階層に下がることを防ぎ、自然なアウトラインを作っています。

メモ : CSSによる隠しテキストについて

見出しの一部はCSSによって通常のブラウザでは見えないようにしています。いわゆる「隠しテキスト」ですが、適切な使い方をすればスパム扱いにはなりません。検索エンジン向けではなく、ユーザー向けにテキストを書いているかどうかがポイントです。

例え検索エンジンが存在しなくても、ユーザーに対する分かりやすさのためにそのテキストを書いているなら問題ないようです。

ブラウザの画像表示やCSS、JavaScriptを一度すべてOFFにしてみて、テキストに不自然な記述がなければ大丈夫です。詳しくは下記のブログを参照してください。

それでは続いてトップページの構造を視覚的に表してみます。

ヘッダー・フッターをまずそれぞれheader要素・footer要素でまとめます。header要素の中に含まれるグローバルナビゲーションはnav要素を使用しました。

次に私の場合ですが、ビルボードとサイドバーをメインコンテンツの補足として扱い、それぞれaside要素でグループ化しています。そしてメインコンテンツの全体をsection要素でグループ化し、各記事をそれぞれ独立した箇所としてarticle要素でグループ化しています。

この辺りの構成は、検索エンジンのことは過剰に意識せず、とにかく自分の中で理にかなった自然な形になるようマークアップしました。

HTMLマークアップのエラーはW3C Markup Validation ServiceやValidator.nu (X)HTML5 Validatorでチェックしています。

2-b. IE8以下にHTML5を有効化させるHTML5.js

IE8以下にはHTML5で新しく登場したタグが反映されません。そこでIEでもHTML5が有効になるScriptを準備します。それがHTML5.jsです。GoogleライブラリからJavaScriptを読み込むことでsectionやarticleといったHTML5のタグをIEでも使うことができるようになります。

具体的には次のソースコードをヘッダーにそのまま記述します。

条件コメントでIEにだけHTML5.jsを適用させる

条件コメントでIE9未満のブラウザにHTML5.jsを適用させています。注意点は必ずhead部分に記述することです。HTMLのタグを読み込む前にHTML5.jsを適応させないと効果がありません。

IEユーザーの多い現状ではHTML5を使う場合、このHTML5.jsはほぼ必須になると思います。しかし本来は無いはずの要素を無理矢理作っているので、jQueryなどと連携する場合にバグが発生する可能性もあります。

もしどうしてもIEでの新要素に関わるバグを回避できない場合は、例えばsection要素ならdiv要素に切り替えるなど柔軟に対応した方が良さそうです。

2-c. CSS3の利点と現状での弱点

画像を使わなくても表現できる部分はなるべくCSS3で処理するようにしています。具体的には前述したようにヘッダーとフッターの背景（真っ白の背景を透過させて後ろの背景に重ねている）やコンテンツの角丸や立体感を出す影、その他Webフォントなどに利用しました。

また簡易的なアニメーションもjQueryではなくCSS3で表現しています。

CSS3はjQueryよりもさらにお手軽にアニメーションなどが実現できる優れものですが、HTML5と同じくIE8以下には適用されません。

PIEや-IE-CSS3などのJavaScriptを使えばIEでも一部のCSS3が使えるようになるものの、これらのScriptは動作がかなり重いです。

IE自体の性能の悪さもありますが、旧バージョンのIEを備えているPCのスペックを考えるとHTML5.jsほど気軽に導入できるものではありません。

このサイトの場合はIEへの処置として、一部分のみ限定的にCSS3を適応させ、残りは表示速度を考慮してCSS3を適応させない、もしくは該当エリアごと非表示にしてメインのコンテンツだけは素早く正常に見れる状態にしています。

CSSの文法チェック

CSSの文法はCSS Validation Serviceでチェックしています。

オプションのProfileでCSSのレベルを3に上げてからチェックしますが、実際にチェックしてみるとエラーだらけになってしまいます。

IEへのCSSハックやCSS3を旧バージョンのFirefoxなどに対応させるためのベンダープレフィックスがエラー対象になってしまうためですが、これは他のサイトをチェックする限り大きな問題とはなっていないようです。

CSS Validation Service

CSSの文法チェックは単純な記述ミスなどがないよう、なるべく無駄を削りながら編集しやすさを損なわないよう記述していきます。

▲ WordPressサイトの制作概要 もくじへ戻る

3. PHP・jQueryの実装と連携

HTMLとCSSで静止ページができたら次はjQueryとPHPで機能的な部分を作っていきます。今回のWordPressテーマのカスタマイズには、あらかじめ準備されているテンプレートタグだけでなくPHPの関数も各所で使用しました。

3-a. PHPで出力し、jQueryで動かす

jQueryとPHPはバラバラに使用するよりもうまく連携させた方が効果を発揮する場合が多いです。つまり、PHPを使ってデータベースから呼びだした画像やテキストをjQueryでアニメーションさせるということです。

トップページのビルボードなどがその典型となります。WordPressによるPHPの関数で呼びだす画像とテキストの条件を設定し、呼びだしたコンテンツをjQueryプラグイン「Diapo」でアニメーションさせています。

Diapo

jQueryとPHPを組み合わせることができるようになれば、WordPressをカスタマイズしていく際にさまざまな場面で応用が効くようになり非常に便利です。このようなWordPressの初心者向けチュートリアルは別の機会に一つずつ書いていこうと思います。

3-b. jQueryプラグイン一覧

続いてこのサイトで実装しているjQueryプラグインを紹介します。


国のサービスは愛国心を植え付けることができ
ColorBox
lightBox系プラグイン。画像のグループ化にも対応しており動きも軽快です。本文中の解説などでどうしても画像を拡大して見せたいときのみ使用します。
Diapo
先ほど紹介したギャラリー系プラグイン。エフェクト処理が重いのが難点ですが、初見のインパクトはあります。
UI Tabs
タブメニュー用プラグイン。動きはいろいろ変えることができます。導入する場合はjQueryを使ったタブメニューの実装サンプルまとめが非常に参考になります。
UItoTop
画面右下にあるページスクロールです。画像は自作したものに差し替えています。
jCaption
画像のキャプションをアニメーションで表示します。サイドバーのコマーシャルで使用しています。jCaptionについては画像のキャプションをアニメーションで表示するjQueryプラグイン「jCaption」で詳しく解説しています。
Mosaic
jCaptionとほとんど同じ役割を果たすプラグインです。ビルボードやポートフォリオのタイトル表示に使用しています。何故jCaptionと併用しているかは制作中に何か理由があったはずなんですが忘れてしまいました。思い出したら書きます。
Ex Flex Fixed
画面をスクロールしたとき、あるコンテンツを指定範囲内でのみ固定表示できるプラグイン。記事本文が長くなったとき、サイドバーの部分がからっぽになるのを防ぎます。
jQuery slideViewer
横スライドのギャラリー系プラグイン。ポートフォリオの各制作物の紹介で使用しています。IE6でも問題なく動作してくれます。
FLAutoKerning
HTMLのテキストを文字詰めできるタイポグラフィー用JS。これをさらにプラグインとして動かしたいならHTMLで文字詰めするアレをjQueryプラグイン化してみたが参考になります。カーニングにこだわるなら。

その他の画像入れ替えなどのちょっとした機能は自作しています。

画面右上にある十字のボタンを押すことによって動作するオープンパネルは、元々のテーマからあったものを少しだけ改造しつつ流用しています。

ちなみにWordPressには今ざっと紹介したjQueryとまったく同じ機能を実現できるプラグインがいくつかあります。jQueryをカスタマイズするのが面倒な場合はWordPressに頼ってもいいかもしれません。

▲ WordPressサイトの制作概要 もくじへ戻る

4. 各コンテンツの仕様

それではここまでの過程を踏まえて、サイト内における各コンテンツがどういう仕様になっているかを順に紹介していきます。

4-a. ヘッダーのナビゲーション

まずトップページはヘッダー、ビルボード、メインコンテンツ、サイドバー、フッターとごく一般的な構成です。ヘッダーのナビゲーションは画像ではなくCSS3のWebフォントを使用しています。

英語フォントはdot colonさんが配布されているフリーフォントVegurです。Webフォントでは同じくdot colonさんが配布されているTendernessも使用しています。

Vegur

Tenderness

メモ : CSS3のWebフォント

CSS3のWebフォントは見出しやメニューなどを画像ではなくテキストとして使用することでページの軽量化やSEO的効果が狙え、ひと手間かければIEでも適用されるので非常におすすめです。

4-b. ビルボード

ビルボードはjQueryのDiapoをカスタマイズしてPHP関数と組み合わせています。

新着のブログ記事・コメント数の多いおすすめ記事・ポートフォリオの制作物からランダムに抜粋・各カテゴリーの記事からランダムに抜粋という４パターンの抽出条件を基にアニメーションを繰り返します。

Diapoを導入してみたいという場合は、思わず"いいね！"したくなる高機能画像ギャラリーJavaScript「Diapo」がわかりやすく参考になります。

4-c. メインコンテンツ

メインコンテンツの各記事はWordPressのアイキャッチ画像の機能を使用しました。見出しは見栄えを整えるためにFLAutoKerningを使ってカーニングの微調整をしています。

ヒラギノフォントで美しく見えるよう調整しているため、この見出しカーニングが適用されるのはMac OSで閲覧した場合に限ります。

閲覧者のOSやブラウザはJavaScriptかPHPでユーザーエージェントと呼ばれるデータを取得して条件分岐させています。

「Macの場合」、「iPhoneの場合」という風に適用するスタイルをOSやブラウザによって切り替えたい場合はCSSハック以外にもユーザーエージェントを利用するという方法があります。

「はみだし」と日付の扱い

サイドには「はみだし部分」を作ることでページの印象度を上げています。日付は公開日時と更新日時を両方出力させました。Webは技術の移り変わりが早いので「いつ書かれた記事なのか」は自分で情報を探すときにかなり重視している要素です。

PHPで記事の読了時間を表示する

抜粋文の側には「この記事は約○分で読めます」というおおよその読了時間をPHPで計算して出力させました。

時間計算は専用もプラグインもありますが、PHPとWordPressの基礎さえ分かれば簡単に自作できます。具体的にはWordPressの記事ループ中で出力したい場所に以下の記述を加えます。

記事の読了時間を計算するPHP
  post_content)) / 800)+1;    echo "
この記事は約 " .$count. " 分で読めます。
";  ?>

まず$countという変数を用意します。その後$post->post_contentで現在の記事本文を取得。strip_tags()関数で記事本文のHTMLタグをすべて除去します。

そしてmb_strlen()関数で除去済みの記事本文の文字数をカウントさせ、その数字を800で割ります。この800という数字は「1分間に大体800文字は読めるだろう」という意味です。

人によって1分で何文字読めるかは変わるのでお好みでこの数字は変更します。最後に+1がついているのは、本文が800文字以下だった場合に少数を切り捨てると結果が「0分」となってしまうので、+1で最低1分と表示させていることになります。

800で割った後は小数点をfloor()関数で切り捨てて整数にします。この結果を$countに代入し、あとはecho文でHTMLタグごとページに表示してやるだけです。

例として本文が約2400文字だった場合は「約3分で読めます」という形になります。

4-d. サイドバー

サイドバーの先頭にはコマーシャルとして外部広告ではなく、サイト内のブログ記事とポートフォリオの制作物のアイキャッチ画像をランダムに出力させています。

状況次第でGoogleの画像広告などにすぐ切り替えられるよう、意図的に似たような仕様にしています。

記事一覧

サイドバー下部に設置してある記事一覧はjQueryのタブで種類ごとにまとめました。記事一覧のエリアは個別記事のページで記事が縦に長くなった場合、サイドバーがからっぽにならないよう固定表示されるようになります。（Ex Flex Fixed）


規律に基づく美術教育のいくつかの利点は何ですか

4-e. 個別記事

個別記事の本文はシンプルな作りです。記事の内容に集中してもらいたいため余計な機能は控えました。

本文の最後にあるソーシャルボタンはかちびと.netさんが配布されているSexyBookmarks日本語版を導入しています。若干ソースコードを変更して他のボタンも一緒にフック（出力）させました。

コメント欄

コメント欄ではプラグインLive Comment Previewによってリアルタイムでコメントプレビューが表示されます。個人的にお気に入りの機能の一つです。

4-f. ポートフォリオ

ポートフォリオの一覧ページはギャラリー部分が横に可変するリキッドレイアウトとしました。WordPressのカスタム投稿タイプを使用し、ブログ記事とは完全に別の独立したコンテンツとして扱っています。

各制作物の紹介ページはjQueryプラグインjQuery slideViewerを使用して横スライドでイメージ画像を見せています。

ポートフォリオの紹介自体はあくまで簡易なものとし、詳細に内容を説明する場合は今回のようにブログ記事として別途書いていくことにしました。

4-g. サイト内検索・アーカイブ

WordPressはデフォルトの状態でもサイト内検索ができますが、機能的には貧弱で思った通りの検索結果を返してくれません。そこでプラグインSearch Everythingを使って検索機能を強化しています。

検索結果の画面では検索数のカウントと、PHPのGETパラメータを利用して自作した検索結果を並べ替えるソート機能を用意しています。記事の一覧もトップページよりコンパクトにまとめました。

4-h. 404ページ

404エラー、つまり目的のページが見つからなかったときに表示する404ページはオリジナルのものを用意しています。404ページに辿り着いても代わりのページを見つけやすいようにサイト内検索とランダムに出力されたブログ記事が表示されます。

4-i. スマートフォン対応

WordPressにはWPtouchという一発でスマートフォンに対応できる便利なプラグインがあります。今回はWPtouchをカスタマイズしてオリジナルの画面を作り、サイトをスマートフォンに対応させました。

実機とiOSシミュレータで表示を確認しながら制作しています。ポートフォリオの部分のみ未対応ですが、これは正直労力の割に需要があるとは思えなかったので…今後気が向いたら全ページ対応させようと思います。

4-j. サイトの表示速度に関して

制作の中で最後まで頭を悩ませたのがサイトの表示速度に関する問題です。これまで紹介してきたように、あれもこれもと機能を追加していった結果、サイト自体が重くなってしまいこれを改善する必要がありました。

というわけで表示速度をアップさせるために次のような対策を施してみました。

テンプレートタグに頼らずHTMLを直書きする
WordPressには管理画面で記述したサイト名やURLを出力できるPHPのテンプレートタグというものがありますが、今後変更する必要のない箇所はデータベースへのアクセスを減らすためファイルに直書きしています。
極端に重い処理はブラウザによって非表示にする
ビルボードの処理は非常に重く、特にIEには負担の大きいコンテンツです。特定のブラウザに対してはビルボードをはじめとするいくつかの機能を非表示にし、表示速度を向上させています。
HTML・CSSなど各ソースコードの整理
各ソースコードの余分な記述を減らし、少しでもファイルサイズを軽くするようにしました。またCSSなどはHead CleanerというWordPressプラグインで自動圧縮しています。
JavaScriptはbody要素の最後に読み込む
JavaScriptをhead要素ではなくbody要素の最後で読み込ませることでレンダリングの体感速度が向上します。
適切なプラグインの導入
WP Super Cacheなどのキャッシュ系プラグインを導入することでWordPressで静的ページを作り出します。データベースへアクセスする必要がなくなることから劇的な表示速度の改善が見込めます。

これらの対策によって、Webwaitで表示速度を計測した結果（あくまで自分の環境の場合です）トップページの表示に平均0.7秒前後とそこそこ速度を改善することができました。

WebWait

とはいえ、他の軽いサイトに比べれば全体的に若干重い感触は否めず、この表示速度に関しては次回以降の大きな課題です。（Diapoやめればもっと速くなるんですけどね…）

ちなみにWP Super Cacheを代表としたページキャッシュ系のプラグインは他のプラグインが動かなくなる可能性があり、若干扱いが難しい部分もあります。

が、ページをキャッシュして静止化することで動的なWordPressページよりもSEO効果を見込め、速度改善にも大きな効果を発揮するのでぜひ導入を検討してみてください。

メモ : WordPressの表示速度を上げる方法

他にもWordPressの表示速度を上げる方法はたくさんあります。下記のページではWordPresの表示速度を上げるためのまとめが書かれており非常に参考になります。

▲ WordPressサイトの制作概要 もくじへ戻る

5. 導入済みのWordPressプラグイン紹介

無駄なプラグインはなるべく入れず、これだけは絶対に外したくないというプラグインのみを導入しました。それでも30以上の数になるんですが、今回は導入したプラグインをすべて紹介します。

5-a. WordPress基本系プラグイン

WordPressで作ったサイトならどういうタイプであろうと導入を検討したい基本のプラグインです。


Akismet
WordPressに最初から含まれているプラグイン。コメントのスパムを削減してくれます。Akismetの使い方とAPIキーの取得方法
All in One SEO Pack
WordPressでのSEO定番プラグイン。管理画面から各ページごとのタイトルやmeta要素を簡単に変更することができるようになります。WordPressのSEO対策プラグイン「All in One SEO Pack」
Broken Link Checker
サイト内の有効リンクをチェックしてくれるプラグイン。無効なリンクがあればすぐに管理者に知らせてくれます。健全な運営を心がけるならサイトの規模が大きくなるほど必須になってきます。
Google XML Sitemaps
検索エンジンに対して自動でサイトマップを作成してくれるプラグイン。有効化していれば常に最新のサイトマップを作ってくれるので、SEOの面から考えて導入しない手はありません。
Ultimate Google Analytics
Google AnalyticsのUAから始まるアカウントIDを入力することによりアクセス解析ができるようになるプラグインです。Analyticsのコードをファイルに直書きしてもいいですが、Ultimate Google Analyticsは管理者と一般ユーザーを識別して管理者の場合はアクセスをカウントしない機能を持っています。
WP-DBManager
WordPressを使うなら必須のプラグイン。データベースの最適化・バックアップなどをすべて引き受けてくれます。あらゆる面で絶対に導入したいプラグインです。『WP-DBManager』でデータベースをバックアップ
WP Multibyte Patch
WordPressの日本語バグを解消してくれるプラグイン。Akismetと共に最初からWordPressに含まれています。
5-b. 管理画面系プラグイン

WordPressの管理画面の使い勝手を良くしてくれるプラグイン集。無いと途方に暮れてしまうようなプラグインばかりです。

AddQuicktag
HTMLエディタを使うなら必須のプラグイン。自分がよく使うタグなどを登録しておくことでショートカットとして使うことができるようになります。
Category Order and Taxonomy Terms Order
通常の投稿記事のカテゴリーとカスタム投稿タイプのカスタムタクソノミー両方の順序を並べ替えることができるプラグイン。有名なCategory Orderよりも優秀です。
Custom Field Template
WordPressのカスタムフィールド機能を拡張してくれるプラグイン。デフォルトのカスタムフィールド機能は貧弱なので、カスタムフィールドを使うならぜひ導入したいプラグインです。
Google Analytics Dashboard
WordPressの管理画面上でGoogle Analyticsの解析結果を見ることができるプラグイン。私のようにいちいちGoogle Analyticsにアクセスするのは面倒だという方におすすめです。
My Link Order
リンクの順序を並べ替えてくれます。WordPressではデフォルトのままだとリンクの順序を並べ替えることができないので、地味に重宝します。
Save Editor Scroll Position
記事を書いている途中で保存したときに、デフォルトの状態だと記事のスクロールバーが最初に戻ってしまうのですが、このプラグインは名前の通り画面更新後もスクロールバーの位置を維持してくれます。長文の記事を書くなら必須。
Simple Tags
タグを10倍管理しやすくしてくれます。WordPressのタグ機能を使うなら迷わず入れたいプラグインです。
TRUEedit
管理画面のエディタの細かい部分を調整できるプラグインです。エディタの窓を広げたりフォントサイズを簡単に変えたりということもできます。記事本文に自動挿入されるpタグの除去なども可能です。
5-c. ユーザビリティ系プラグイン

サイト自体の使い勝手を改善するプラグイン集。

Contact Form 7
一発でお問い合わせフォームを設置できる有名プラグイン。お問い合わせフォームを設置するならまずContact Form 7で問題ないと思います。
Dagon Design Sitemap Generator
ユーザー向けのサイトマップを自動で作成してくれるプラグイン。投稿記事と固定ページをそれぞれきれいに並べてくれます。
Live Comment Preview
記事へのコメント投稿時にリアルタイムでプレビューを表示してくれるプラグイン。CSSで見栄えを調整することで威力を発揮します。
Search Everything
キーワード検索の機能を強化してくれるプラグイン。設定も簡単でWordPressの検索機能を使うならおすすめのプラグインです。
Syntax Highlighter for WordPress
ソースコードを整形してハイライト表示してくれるプラグイン。行番号のコントロールも可能で、対応している言語の数も多いです。Syntax Highlighter for WordPress (ソース整形表示)
WP-PageNavi
ページナビゲーションを簡単に設置できるプラグイン。CSSをカスタマイズすればオリジナルのデザインを作ることもできます。ページナビゲーションを拡張してくれるWPプラグイン「WP-PageNavi」
WP Social Bookmark Menu
複数のソーシャルサービスのブックマークボタンを一度に表示できるプラグイン。かちびと.netさん作の日本語版が使い勝手も良く見た目もおしゃれです。
Yet Another Related Posts Plugin
関連する記事を抽出してくれるプラグイン。サイトの直帰率を減らす効果が期待できるので導入をおすすめします。
5-d. 表示速度系プラグイン

WordPressはその特性上、デフォルトのままでは表示速度が遅いです。そんなWordPressの表示速度を改善してくれるプラグイン集です。

DB Cache Reloaded Fix
データベースのクエリをキャッシュして全体の速度をアップさせるプラグイン。管理画面の表示速度も上がります。
Disable Revisions and Autosave
投稿記事の自動保存とリビジョン管理を無効化します。これを導入することデータベースに余計な負担を与えずに済みます。記事の下書き保存は自分でしっかりしましょう。
Head Cleaner
HTMLのhead部分を整理してくれるプラグイン。CSS・JavaScriptの圧縮や最適化も可能です。Head Cleaner (最適化＆高速化)
WP File Cache
オブジェクト・キャッシュを実現するプラグイン。PHPの変数をキャッシュすることでデータベースへのクエリを減らし表示速度をアップしてくれます。
WP Hyper Response
PHPの flush()関数を使うことでブラウザへのデータ送信を分割してスピーディな表示を可能にするプラグイン。地味に効果を発揮してくれます。WordPressを高速化するプラグインを作りました
WP Super Cache
WordPressが生成した動的ページを静的ページとして丸ごとキャッシュしてくれるプラグイン。ページキャッシュ系プラグインは他のプラグインとぶつかることが多く、若干扱いづらい代物ではありますが適切に導入できれば目に見えて表示速度が向上します。
5-e. その他のプラグイン
Maintenance Mode
指定したユーザー以外にはサイトにアクセスしたとき開発中の画面を表示させるプラグイン。サイトのメンテナンス時などに重宝します。
Search Meter
キーワード検索で利用者がどういうキーワードで検索したかを管理画面で知ることができるようになります。ブログ運営に役立つプラグインです。
WP to Twitter
記事の投稿や更新を同時にツイッターでつぶやいてくれるプラグイン。
WPtouch
WordPressをスマートフォン用に最適化するプラグイン。デフォルトのままでも充分使えますがカスタマイズもできます。

▲ WordPressサイトの制作概要 もくじへ戻る

まとめ

以上、サイトに関する制作概要をまとめて紹介させていただきました。それぞれの分野の細かい部分については後日また別の記事に書いてこの記事とリンクさせていきます。

とりあえずはサイトの制作を終えて、課題と反省点が山積みな現状です。今後は一つずつ自分の中で消化しつつ、記事としてのアウトプットを続けていこうと思います。

ありがとうございました。

この記事に関連するタグ
登録: コメントの投稿 (Atom)