このブログで使っているWordPressプラグインリスト12833 views
ポートフォリオサイトをリニューアルしました。8070 views
ようやくこのブログ用の スマートフォン用テーマ作りました29286 views
jquery.rotate.js を使って、画像がクルクル回るWelcome作ってみました♪41953 views
WordCampFukuoka2010で登壇させていただくことになりました6558 views
この記事は 約 10 分 で読めます。
仕事でも、プライベートでも本当にかかすことのできない存在になっているWordPress。
今回は、そんなWordPressを設置したとき毎回やっているカスタマイズに入る前の下準備についてまとめてみました。
毎回やっているのにうっかり忘れたりしてしまうので自分のメモもかねて…!
1.初期設定
1.1 パーマリンクの設定をする
デフォルト設定のままだと
http://blog.v-colors.com/?p=123
とかでちょっとかっこわるいので
パーマリンクの設定を変更します。
管理画面メニュー 設定->パーマリンクの設定からお好みの設定に。

いろんな設定ができます。どんな設定ができるかは公式サイトのパーマリンク設定についてにまとめられています。
1.2 メディアの設定をする
管理画面メニューの 設定->メディア で投稿画像のサイズを設定します。
ここでは、サムネイル(thumbnail)、中サイズ(medium)、大サイズ(large)のサイズが指定できます。

WordPressのデフォルトでは、サムネイル(thumbnail)、中サイズ(medium)、大サイズ(large)、フルサイズの4サイズが自動的に生成できますが、もっといろんな種類が欲しい時もありますよね。


↑たとえばこういう感じで小さいのともっと小さいの2つのサムネイルを生成したい…とか。
テーマディレクトリ内のfunctions.phpに【add_image_size】を記述してあげると、生成する画像を増やせます。
詳しいやり方については
4.functions.phpの設定をする
に記載していますのでそちらをどうぞ。
1.3一般設定をする

キャッチフレーズや(これが<?php get_bloginfo ( ‘description‘ ); ?>で表示される分になります)
日付フォーマット、時刻フォーマットなどを好みの形に設定します。
2.プラグインを入れる
2.1 標準で入っているプラグインから必要なものを有効化
WordPress日本語版をインストールした時点で標準で入っているプラグインがいくつかあります。
その中から2つはかかせないプラグインとして有効化しています。
Akismet
コメントスパム対策のAkismet。
私の弱小サイトなんてなくてもそうそうスパムコメントありませんが、たまーにあるときはしっかりはじいてくれてます。
WP Multibyte Patch
WordPress日本語版のマルチバイト文字に関する修正を行うプラグインです。メール送信、トラックバック受信、ピンバック受信、検索等で発生する障 害に対して対策を行ってくれているとのこと。その辺りを特別に自分で対策をしている人以外は迷わず有効化を。
2.2 必要なプラグインを追加していく
必要なプラグインを追加していきます。
大体は新規プラグイン追加画面から検索して見つかるプラグインです。
手動アップロードの手間いらずでラクチンです。
管理画面メニューのプラグイン->新規追加
■お問い合わせフォーム
Contact Form 7
@takayukister作の国産お問い合わせフォーム。いつもお世話になっています。
お問い合わせフォームとしてだけではなく、PHOTO STOCKERのサイドバーのアンケートフォームにもContact Form7を使っています。いろいろ使えますね。
■SEO系
HeadSpace2
ページ毎に最適なタイトルやメタタグを埋めたりするためのSEO対策系のWordpressプラグイン。以前はAll in One SEO Packを使用していたのですが、今はHeadSpace2を使っています。このあたりはお好みで。
Google XML Sitemaps
Google、Yahoo、MSN用のサイトマップを自動で作成してくれるWordPressプラグインです。
■カテゴリー並べ替え
My Category Order
カテゴリリストの並びを自由に変更するプラグインです。
WordPressでは、登録したカテゴリーの並べ替えができません…!
きちんと設計してからカテゴリ登録とかすればいらないのかもですが、構築、運用しているうちにカテゴリー増やしたくなったり変更したくなったり、ってどうしてもでてきてしまいますよね。これも欠かせないプラグイン。
■ページングしやすくする
Pagebar2
WordPress に見やすいページャーをつけるプラグインです。1 2 3 4 5…とかなってるアレです。<前へ 次へ> だけより断然便利。

CSSでスタイリングできるので、こんな感じでデザインにあわせて変更できます。
■関連記事や人気記事を表示できるようにする
人気のエントリーを表示させるプラグイン。
こんな感じで人気のエントリーを表示させることができます。

Similar Posts
関連するエントリーを表示させるプラグイン。
タグやカテゴリー、かいた人の情報などの関連性を判断して(どの関連性を優先するか、しないかなどは管理画面で設定できます)関連するエントリーを表示してくれます。

PHOTO STOCKERでは関連写真を表示させていますが、このプラグインを使って表示させています。

Post-Plugin Library
上の二つのプラグインを利用るときに必要になるプラグインです。使うときはこれも一緒に有効化を。
■モバイル対応させる
Ktai Style
WordPress ウェブログを日本の携帯電話対応にするプラグインです。
スマートフォン対応のプラグインは今いろいろお試し中です。一番いいと思うものが決定したら追記しますね。
3.テーマを準備する
使用するテーマを用意します。
管理画面メニューの 外観->テーマ->テーマのインストールタブ でキーワードでテーマを検索してインストールすることができます。

私は自作テーマ用のベースとなるテーマを作っているので、そのテーマのstyle.cssをサイトにあわせて書き換えてアップロードして有効化しています。
style.cssのコメント部分をこんなかんじに書き換えています。
/* Theme Name: vcolors-v2 Theme URI: http://blog.v-colors.com Description: vcolors-v2 Author: YUKI Author URI: http://blog.v-colors.com Template: Version: 1.0 */
このへんのことはWordPress自作テーマの作り方にも貼付けているPDFの資料に詳しく書いているので、テーマを一から自作したい!というかたはこちらもあわせてどうぞ♪
4.functions.phpの設定をする
使うテーマが決まったら、テーマフォルダ内のfunctions.phpにいろんな設定をしていきます。
アイキャッチ画像を使えるようにする
WordPressでは記事ごとのサムネイル画像【アイキャッチ画像】が設定できます。

こういうふうに簡単に一覧を出したりできます。便利ですね。

ただこの機能は、使用しているテーマフォルダ内のfunctions.phpにアイキャッチ画像を使う旨の記述があってはじめて使えるようになります。
add_theme_support( 'post-thumbnails' );
アイキャッチ画像を表示させるには、テーマに
<?php the_post_thumbnail(); ?>
と書くだけです。
オプションなども設定できます。
こちらのサイトにとっても詳しくまとまっているのでもっと詳しく知りたい方はぜひ!
画像のサイズバリエーションを増やす
メディア設定の箇所でも触れましたが、
これくらいのサムネイル画像も欲しいし

↓こういう小さいのも一緒に生成したい…とかいうときがあったりします。

そんなときは、functions.php内に以下のように記述します。
add_image_size( $name, $width, $height, $crop );
↓ミニサイズを増やすとするとこんな感じで。
add_image_size( 'mini', 45, 45, true );
引数は以下の通り。
add_image_size( $name, $width, $height, $crop )
$name … サイズ名:アルファベットが安心 例)’my-original-size’
$width … 画像の幅:整数,ピクセル単位
$height … 画像の高さ:整数,ピクセル単位
$crop … 縮小しないで中央を切り抜く(true)か否か(false):true または false
テーマ側での表示のさせ方も含め、以下のページに詳しくまとまっています
functions.phpに書き込めばほかにもいろんなことができますよ☆
こちらに詳しくまとまっています!
以上、いつも最初にやっていることまとめでした。
あとはどんどん自分好みにカスタマイズを進めていきます。
自作テーマの作り方については(上でも紹介しましたが)こちらの記事もどうぞ。
WordPress自作テーマの作り方
(デザイン・コーディングはできるけど、WordPressのテーマ化する手順がわからない…という方向けです)
皆さんはインストールした後、どんな感じでセッティングしていますかー??
これもやったほうがいいよ!もっとこうしたほうがいいよ!などありましたらぜひ教えてください♪
環境や使い方によって、あなたにとって最適な環境設定は異なってくると思うので、いろいろ試して自分なりの最強初期設定を見つけてみてくださいね♪
ではでは☆
以下はお仕事以外で、個人的にWordPressで作ったサイト一覧です。
サンプルとして載せておきます☆
- VIVID COLORS + BLOG (このブログです)
- Fireworksマニア -FireworksでのWebデザインの作り方を集めたTipsサイト-
- PHOTO STOCKER -高解像度フリー写真素材-
- シンプルパターン研究所 -パターン素材の配布-
- ビビッドカラーズ -0円のホームページ素材屋さん-
- 壁紙コレクション -サイズ豊富なデスクトップ用壁紙-
- *YUKI YAMAGUCHI Design Portfolio* -私のポートフォリオサイト-
最近買った本でよかった2冊
PROJECT311-震災寄付作品集-のサイト作成のお手伝いをさせていただきました »
« CSS Nite LP, Disk 14「Photoshopper meets Fireworks」にて登壇させていただきました。






















