サイト構成

Ads

【2009・5・31最終更新日】

※情報は非常に古いです。参考になさいませんようご注意ください。

かちびと.netはWordPressというオープンソースのCMS(コンテンツ・マネジメント・システム)
で作成しています。WordPressにはテーマスキンを簡単に変更出来る事も特徴のひとつで、
私もあるテーマをベースに、かちびと.netのような独自のテーマスキンを作成しました。
そのカスタマイズ法を一つも隠さず書いて置きます。

もくじ

  1. カテゴリごとに違うsingle.phpを呼び出すカスタマイズ法
  2. WordPressのテーマSEOハック
  3. 使用しているプラグインの解説
  4. WordPressに関する雑感
  5. 便利な便利なブログパーツ
  6. Twitterが好きなんです
  7. かちびと.netは完成しない

カテゴリごとに違うsingle.phpを呼び出す

通常、WordPressは記事にsingle.phpが割り当てられますが、このsingle.phpを
複数作成して、カテゴリごとに違うsingle.phpを読み込んでいます。
例えばSEOのカテゴリとWordPressのカテゴリでは違う画像が出てくると思います。

SEO:リンク集の最適化・リンク集を有益コンテンツに変えるLCO
WordPress:全てのWordPress使いが導入を検討すべき15のプラグイン

かちびと.netでは8種類のsingle.phpを使っています。以下が作成チュートリアルです。

チュートリアル

single.phpを欲しい数(私なら8種類、という意味です)だけコピーしてリネーム。
私の場合はカテゴリIDに合わせています(WebデザインのカテゴリはiDが1なのでsingle1.php)
wordpress-hack00
single.phpのコピーを欲しいカテゴリ数だけ作成し、そのカテゴリ以外のID用に
single-others.phpというファイルを作成します。これでsingle.phpは原本も合わせて
10個ある事になります。(single.php、single1.php等8個,single-others.php)
10個作成したらsingle.phpをphpファイルを編集できるテキストエディタで開けて
以下のように変更しました。

<?php
$post = $wp_query->post;
if ( in_category('1') ) {
include(TEMPLATEPATH . '/single1.php');
} elseif ( in_category('31') ) {
include(TEMPLATEPATH . '/single1.php');
} elseif ( in_category('27') ) {
include(TEMPLATEPATH . '/single1.php');
} elseif ( in_category('26') ) {
include(TEMPLATEPATH . '/single1.php');
} elseif ( in_category('14') ) {
include(TEMPLATEPATH . '/single14.php');
} elseif ( in_category('19') ) {
include(TEMPLATEPATH . '/single14.php');
} elseif ( in_category('46') ) {

       ~中略~

} elseif ( in_category('33') ) {
include(TEMPLATEPATH . '/single21.php');
} elseif ( in_category('45') ) {
include(TEMPLATEPATH . '/single45.php');
} else {
include(TEMPLATEPATH . '/single-other.php');
}
?>

in_category(‘そのカテゴリのID‘)、include(TEMPLATEPATH . ‘/呼び出したいsigle.php‘);
親カテゴリとその子カテゴリも親カテゴリで呼び出されるsingle.phpに割り当てて、
子カテゴリに振り当てられたIDでも親カテゴリで呼び出すsingle.phpに合わせています。
最後にsingle-other.phpを含めて「指定したID以外のカテゴリ」の場合に対応してます。
single.phpの中身は上記のID別に振り分けるためのコードのみにします。
※3.0からget_template_partを使うようになりました。この方法は非推奨となっています。

カテゴリごとに最新記事を表示

wordpress-hack01
single1.phpやsingle21.phpなどのID別のsingleファイルはカテゴリに合わせて
そのカテゴリのみの最新記事や画像を表示するようにしました。カテゴリ別に
最新記事を表示するにはCustomizable Post Listingsというプラグイン(後述)を
用いて表示すると楽です。Customizable Post Listingsは以下のようなタグを使用します。

<?php c2c_get_recent_posts(3,"<li>%post_date% %post_URL%</li>",'1','date','DESC',0,'Y.m.d'); ?>

表示件数は「3」にしています。
5件表示したければ3を5にすればOKです。

カテゴリごとのRSS講読が可能

wordpress-hack02
更にカテゴリごとにRSSへのリンクをしてカテゴリ別でも購読できるようにしました。
WordPressではカテゴリごとにRSSが割り当てられてます。例えば
Webデザインのカテゴリは

http://kachibito.net/category/web-design/

となりますが、このカテゴリのRSSは

http://kachibito.net/category/web-design/feed

となります。カテゴリ別のデザインカスタマイズはこのように施しています。

WordPressのテーマSEOハック

wordpress-hack03
もともと私はSEOがWeb製作の入り口だったのでSEOは出来る限り意識しています。
意識している事は以下の点。

  • HTMLは出来る限りW3C基準に近づける
  • パーマリンクの設定でURLをカテゴリに合わせる
  • メインコンテンツから呼び込み、サイドバーとフッターは最後に
  • 広告は少数に絞る
  • titleは「記事名-サイト名」とし、h1をページごとにtitleに合わせる
  • 表示スピードを意識し、TOPページの容量を抑える為にmore形式にした
  • moreは「~.html#more」となってブックマークやPRが分散しない様に変更
  • TOPページでは画像も極力使わないようにテキストベースに
  • SEOに有効的なプラグインを複数使用(※後述します)

HTMLは出来る限りW3C基準

試しにTOPページをHTMLチェックしてみて下さい。以下をコピーしてチェックをクリックします。

http://kachibito.net/

100点では無いのはプラグインや広告のリンク等によるものです。今後の課題です。。。
W3C基準に近ければランキングアップに繋がるか、と言えばそれはNOですが、
ソースは綺麗な方がクロールしやすいでしょう。

パーマリンクの設定でURLをカテゴリに合わせる

WordPressでSEOを意識するならブログの記事を書く前にパーマリンクの設定を。
これは人によって好みがあるので、私が最善と思ったURLの設定を記述します。

  • 設定はカスタム構造で/%category%/%postname%.html
  • カテゴリには見合ったスラッグを設定(ソフトウェアはsoftwareに)
  • postnameは長くならないように、簡潔に。単語間に「-」を入れる

例えば超手軽に導入できる4つのユーザーへの気配りWordPressプラグイン
の記事のURLは

http://kachibito.net/wordpress/4-hospitality-plugins.html

のように、「wordpress」と「plugin」のキーワードを含んだURLになります。
[note]このパーマリンク構造は気をつけないと、色々と障害が
出る場合もありますので注意が必要です。
%category%/%postname%で検索して、
どんな事が起こり得るかを調べて下さい[/note]

メインコンテンツから呼び込み、サイドバーとフッターは最後に

検索エンジンは上から順にサイトを見て行きますので、キーワードを多く含んだメインコンテンツを
サイドバーよりも先に読み込ませるようにします。もし、貴方のWordPressの構造が

  1. <?php get_header(); ?>
  2. <?php get_sidebar(); ?>
  3. メインコンテンツ
  4. <?php get_footer(); ?>

になっているようでしたら

  1. <?php get_header(); ?>
  2. メインコンテンツ
  3. <?php get_sidebar(); ?>
  4. <?php get_footer(); ?>

に設定した方が良さそうです。この際、レイアウトが崩れる事がありますので
必要に応じて、cssの調整をして下さい。

広告は少数に絞る

広告が多数存在すると、収益はあげやすく思われがちですが、例えば表示スピードが
遅くなって直帰率が上がったり、リピーター化を妨げる事も少なくありません。また、
アフィリエイトのリンクの中には綺麗とは言えないソースコードもあります。
ユーザーの事を考え、広告は控えめにした方が、かえって収益を
あげ易くなる事もあります
ので、ぜひ検討してみて下さい。
[note]表示スピードを計測するWebサービス・Site24x7[/note]

titleは「記事名-サイト名」とし、h1をページごとにtitleに合わせる

WordPressのようなブログシステムでSEOを意識するならスモール、ミドルキーワード
でロングテールを意識し、コンテンツ数で勝負するのが一番手っ取り早いと思っています。
そこで、SEOの基本、titleとh1もそれなりに施します。もちろん、ユーザーの方に
分かりやすいように施すのが最大の目的
です。お使いのテーマの構造にも
よりますが、ご参考までにかちびと.netの構造を記述します。

header.phpは</head>までにします。この方が私のような素人にはカスタムしやすかったです。
この場合、index.phpとsingle.php、page.php、archive.php、場合によってはsearch.php
などがそれぞれ<body>から始まる形になるので、それぞれのh1を変更しなくてはなりません。
かちびと.netはh1は

<h1><?php wp_title(); ?></h1>

としています。WordPressでSEOを意識するならしておきたい事の記事の場合は

  1. title:WordPressでSEOを意識するならしておきたい事 – かちびと.net
  2. h1:WordPressでSEOを意識するならしておきたい事
  3. h2:WordPressでSEOを意識するならしておきたい事(アンカーリンク付き)

となります。ちょっとしつこい感じもしますが、構成上問題ありません。
例えば複数のh2に同じテキストを羅列すれば問題も出るかもしれませんが。

表示スピードを意識し、TOPページの容量を抑える為にmore形式にした

TOPページ表示よりも記事ごとにニッチなキーワードでの上位表示を目指しているので、
TOPの表示スピードは出来るだけ早くするために、「続きを読む」形式にしました。
TOPから入ってきたユーザーは記事を探しやすい、という点でもオススメですが、
いちいち記事から出たり入ったり、という煩わしさも生じますので対策が必要です。

moreは「~.html#more」となってブックマークやPRが分散しない様に変更

デフォルトだと、moreリンクの場合、URLの末尾に「#more-123」などが
付いてしまい、コンテンツの重複やブックマークしてもらえた時に分散してしまいます。
これは非常に勿体ないので、#more-~が付かないようにします。

ご利用のテーマのfunctions.phpに以下を追記

<?php
// #more-$id を削除する。
function custom_content_more_link( $output ) {
    $output = preg_replace('/#more-[\d]+/i', '', $output );
    return $output;
}
add_filter( 'the_content_more_link', 'custom_content_more_link' );
?>

[note]【おまけ】
read more..のテキストリンクを「『記事タイトル』の続きを読む」
に変更するTips。デフォルトでは

<?php the_content(__('Read the rest of this entry &raquo;', 'kubrick')); ?>

のようになっていると思いますが、これを

<?php the_content(『 . the_title(”,”,false) . 』の続きを読む ); ?>

等としてあげれば「『記事タイトル』の続きを読む」となりますので多少はSEO効果出るかも。[/note]

TOPページでは画像も極力使わないようにテキストベースに

画像は極力控えました。もちろんデザインは自分なりにかなり意識して
作成しています。ただ、Webデザイン=画像ではないと思いましたので、
どうにかテキストベースでデザイン性を持てないか、と考えたのが現在の形です。
画像はロゴ部分と、サイドバーに3種。TOPにFlashを1つ付けていて、
見出し等はcssのみでデザインしています。これもサイト容量を極力抑える為です。
私の場合は特に、記事ごとに画像を多用しますので、基本的なデザイン部分では
使わないようにしています。

SEOに有効的なプラグインを複数使用

次のコンテンツ、「使用しているプラグインの解説」をご覧下さい。その中で
SEOに有効的なプラグインのご説明も致します。

使用しているプラグインの解説

wordpress-plugins
かちびと.netで使用しているプラグインを一覧にして簡単に解説します。
※プラグインの変更や追加があった際は追記します。

コメントやトラックバック関係

コメント、トラックバックに関連してる使用中のプラグインのまとめです

Akismet

ご存知、スパム削除の決定版でWordPressに既に入っています。
WordPress.comにユーザー登録してAPIキーを入手してから稼動します。

Comment Form Quicktags

コメント欄にタグを使えるようにするプラグインです。

参照:コメントするのが楽しくなる4つのWordPressプラグイン

Comment Image

コメント欄に画像を表示する事が可能になります。

参照:コメントするのが楽しくなる4つのWordPressプラグイン

Custom Smilies

コメント欄にスマイリーアイコンを使用できるようになります。
コメントの敷居が低くなるかと。

参照:コメントするのが楽しくなる4つのWordPressプラグイン

ltc_get_recent_comments

投稿されたコメントとトラックバックを分かりやすく表示します。
サイドバーに表示されたコメント等がこのプラグインによるものです。

Quote Comments

コメントを引用する事で返信内容を分かりやすくする事が出来ます。

参照:コメントするのが楽しくなる4つのWordPressプラグイン

ユーザビリティ

ユーザービリティを意識して導入したプラグインのまとめです

Contact Form 7(日本語)

お問い合わせなどのメールフォームを作成出来る高機能なプラグインです。
複数のメールフォームを作成出来るので、応用すればアンケートフォームも作成出来そうです。
特に企業サイトなどは導入を推奨します。

Dagon Design Sitemap Generator

人用のサイトマップを自動で作成するプラグインです。
日本語に対応しています。管理画面で言語をJapaneseにして
保存すれば日本語化されます。

参照:SEOに役立つ(かも知れない)WordPress-プラグイン集

Breadcrumb NavXT(日本語版)

パンくずを容易に実装できるプラグインです。ユーザーが何処にいるかが
一目で分かるようになります。パンくずはGoogleも薦めています

WP-AutoPagerize

ページングを実装するプラグインです。WP-pagenaviの方が有名ですが、
好みでWP-AutoPagerizeを使用しています。jQueryでAutoPagerize(自動ページング)
が成される。ハズなんですが、TOPとアーカイブでは稼動しません。
検索の際は上手く読み込むんですが。

WP To Top

少しでも下に行くだけで左右のどちらかに「上へ戻る」ボタンを表示できます。
サイト離脱率も減らせるかも。個人的にかなりオススメしてるプラグインです。

参照:超手軽に導入できる4つのユーザーへの気配りWordPressプラグイン

WP Social Bookmark Menu – (aka:J. SexyBookmarks)

SBMボタンをセクシーに表示するプラグインを私が日本用に変更しました。
バージョンアップもしていく所存です。宜しければご利用下さい。

参照:WordPressにSBMボタンを加えるプラグイン、SexyBookmarksの日本Ver.をリリース

WP-Note

記事内やページ内に容易に「メモ」を入れることが出来ます。
[note]こんな感じ[/note]

参照:記事内に用意に「メモ」を実装するWordPressプラグイン・WP-Note

Broken Link Checker

リンク切れ、デッドリンクがあると打ち消し線を入れて、ダッシュボードで
管理人に伝えてくれるプラグインです。が、リンク先がリダイレクト等を
使用してる際も「リンク切れ」と扱ってしまう事もあるようです。
リダイレクトが直接原因では無さそうですが、よく分かりません。。。

参照:あなたのWordPressのトラフィックを上げる7つのプラグイン

Yet Another Related Posts Plugin

関連する記事を抽出するプラグインです。他にも関連記事を
抽出するプラグインはありますが、YARPPは細かい設定が
可能で記事数が多いWordPressほど、より関連深い記事を
出す事が可能になります。YARPPはGoogleのMatt Cutts氏も推奨しています。

Customizable Post Listings

カテゴリ別の最新記事を表示するのに使用しています。先程、複数のsingle.phpを
作成した際にこのプラグインで現在見ている記事のカテゴリの最新記事を表示しています。

SEO

サーチエンジン最適化(SEO)に特化したプラグインです。

All in One SEO Pack(日本語版)

一応入れています。基本ですね。これ一本でも十分と言えば十分。
ただ、ソースが汚くなります。

参照:SEOに役立つ(かも知れない)WordPress-プラグイン集

HeadSpace2(日本語版)

激しくオススメするSEO系のプラグインです。詳しくは以下。

参照:WordPressのSEOに千手観音プラグイン、HeadSpace2・使用方法まとめ

Google XML Sitemaps

Googleウェブマスターツールに送信するsitemap.xmlを自動で生成するプラグイン。
詳細は以下でそうぞ。日本言語ファイルも配布されてます※バージョンに注意

参照:SEOに役立つ(かも知れない)WordPress-プラグイン集

WordPress Head Cleaner

head内の不要なタグを表示しないようにしてくれます。地味に便利。
クローラビリティのプラグインです。

wp-cache(日本語版)

ググると「キャッシュを使ってサーバーへの負担を軽減し、表示を早くする」
という説明が殆どですが、実際は表示を早める、というより、
WordPressの静的URLを作成する事を目的としています。
パーマリンクの設定は.htmlとなっているものの、あくまでそう見せかけている
擬似静的URLですが、wp-cacheはRewriteで静的ページを作成します。
これでWordPressのMT(ムーバブルタイプ)化が可能(大袈裟?)。
日本では情報量も少ないですが、ダウンロード人気で常に上位にあるのは
このためです。ただ、不具合やエラー、他のプラグインとの衝突も良くあります。

セキュリティ

忘れがちだけど、絶対に忘れちゃいけない。貴方のWordPressは貴方が守るしかありません。

AntiVirus

ウィルスに掛かっていないかスキャンします。
掛かった事が無いので、効果が分からないのが難点です。

WP-DBManager(日本語版)

データベースの管理を容易にします。自動で定期的にバックアップを
取ってくれるので必須のプラグインです。レンタルサーバーなら
絶対にバックアップを取るべきです。

WP Security Scan

WordPressでセキュリティ的な問題点が無いかをチェックします。
接頭語がwp_になっていないか、ユーザー名「admin」が存在しないか、等。
[note]adminで使用していると狙われやすいので、変更される事を推奨します。方法は以下。

  • adminでログイン
  • 別のユーザーを作成。権限を「管理者」に必ずする。
  • adminでログアウトし、新しいユーザーでログイン
  • adminを削除
  • Done

[/note]

その他、管理画面を使いやすくするモノなど

管理画面を使いやすくしたり、色々便利なプラグインのまとめ

Simple Tags

これが無いと生きていけません。タグ管理を容易に行えるプラグイン。
タグへのスラッグ割り当てもお忘れなく。日本語言語ファイルも公開されてます。

WP Dash Note

ダッシュボードにPostit(メモ用紙)を加えます。プラグイン用のショートコードを
よく忘れるのでメモを書いて管理してます。あとはちょっと気になった事とか、
今日の買い物リストとか(本当

WP Multibyte Patch

デフォルトで含まれてますがマルチバイト文字の取り扱い不具合の修正を
行うプラグインです。ぶっちゃけよく分かってない。でも導入してる。

NextGEN Gallery

かっこいいFlashギャラリーを容易に作成出来ます。ギャラリー系では
最高のプラグインと思われます。ただ、高機能すぎて使い方に
苦戦するかも知れませんので、非常に参考になったサイトをご紹介します。
[note]参照:NextGen Galleryの使い方を1から説明してみる[/note]

Admin Post Navigation

投稿画面で前のエントリーや次のエントリーの編集ページにワンクリックで
移動できます。過去記事の編集時に最高に役に立ちます。

宜しければ、かちびと.netがオススメするプラグイン情報記事もご参考下さい。

SEOに役立つ(かも知れない)WordPress-プラグイン集
WordPressの管理画面や投稿画面を使いやすくする7つのプラグイン
コメントするのが楽しくなる4つのWordPressプラグイン
超手軽に導入できる4つのユーザーへの気配りWordPressプラグイン
あなたのWordPressのトラフィックを上げる7つのプラグイン
WordPressでSEOを意識するならしておきたい事
全てのWordPress使いが導入を検討すべき15のプラグイン

WordPressに関する雑感

私はWordPressが好きですが、所詮はツール(道具)でしかありません。
結局使い方次第ではマイナス要素になり得るし、当然プラス要素も出ます。
このかちびと.netも上記のように独自でカスタマイズしましたが、選択、或いは
作成したテーマでかなりの差が出てくるかと思います。ご自身でSEOやデザイン
に優れたテーマを作成できればそれに越した事はありませんが、中途半端に
なるとやはりマイナス要素が目立ってくる
ものです。

どうしても中途半端になりがちだ、と思われるのであればSEOとデザインに
特化した有料且つ優良のWordPressの国産テンプレート賢威をオススメします。
作成されたのはSEOコンサルタントの松尾さんです。Twitterでもよくお話させて頂いてます。
賢威ならSEOやデザイン性の完成度は私もかなり高いと思います。
2000円前後のSEO本やPHP本を何冊も買って時間を費やして勉強して作成するよりは
25.000円ほどでSEO業者費用と本代を支払う金額が対価どころか、おつりが来ます。
賢威は以下で購入できますよ。


WordPressの国産テンプレート賢威

どうしても自作でテーマを作りたい!

どうしても自分で作成したいのであれば無料のテーマ作成ジェネレーターがあります。
以前記事にしましたので宜しければご覧下さい。

参照:WordPressのテーマ作成する際に便利なジェレネーターやソフトいろいろ・まとめ

便利な便利なブログパーツ

とても便利なブログパーツを厳選して導入しています。
ソースが微妙なブログパーツ等は入れていません。また、入れすぎも
表示スピードが遅くなる原因となるので本当に入れるべきと思ったパーツのみに
した方が良いと思います。

Popin Rainbow

pop

かちびと.net内でテキストをドラッグすると、そのテキストでその場で横断検索が
可能
です。amazon検索等も可能なので非常に利便性の高いブログパーツです。
試しに以下のテキストをドラッグしてGoogleやamazonで検索してみてください。

ヤフー!・グーグルSEO対策テクニック
検索にガンガンヒットするホームページの作り方
検索にガンガンヒットさせるSEOの教科書
SEO SEM Technique Vol.6

こんなブログパーツが欲しかったです。外部リンクも少なくて済みます。
これこそSEO殺しのような気もする。。。

なかのひと

naka
どんな企業がアクセスしたかを解析できるブログパーツです。
企業以外にも役所や学校なども解析可能です。

あわせて読みたい

awasete
自分のブログを読んでくれている方が他にどんなブログを
読んでいるかを見ることが出来ます。ソースもHTML版があってお勧め。

Twitterが好きなんです

love-twitter
かちびと.netはTwitterが好きです。なのでTwitterのカテゴリには
管理人のTweetが表示されます。という訳でWordPressで外部RSSを
表示するTipsです。TipsというかWordPressは外部RSSを所得出来るように
最初から作られていますので呼び込むためのソースを記載します。

外部RSSを取得するコード

コードは以下。

<?php // Get RSS Feed(s)
include_once(ABSPATH . WPINC . '/rss.php');
$rss = fetch_rss('外部RSSのURL');
$maxitems = 5;
$items = array_slice($rss->items, 0, $maxitems);
?>
<ul>
<?php if (empty($items)) echo '<li>RSSは配信されていないようです</li>';
else
foreach ( $items as $item ) : ?>
<li><a href='<?php echo $item['link']; ?>'
title='<?php echo $item['title']; ?>'>
<?php echo $item['title']; ?>
</a></li>
<?php endforeach; ?>
</ul>

表示数は5になってます。変更したい時はmaxitems =の後の数字を
変更してください。管理人のTwitterのRSSは

http://twitter.com/statuses/user_timeline/17986869.rss

なので、

include_once(ABSPATH . WPINC . '/rss.php');
$rss = fetch_rss('http://twitter.com/statuses/user_timeline/17986869.rss');
$maxitems = 5;
$items = array_slice($rss->items, 0, $maxitems);
?>
<ul>
<?php if (empty($items)) echo '<li>RSSは配信されていないようです</li>';
else
~以下略~

となります。実装はTwitterのカテゴリをご覧下さい。

Twitterを始める前に覚えておきたい10のTips

かちびと.netは完成しない

これが私が今出来る最高のWordPressテーマSEOハックです。
かちびと.netは今後も完成することはありません。今後もカスタマイズは
続けていきますし、構成も変わるかもしれません。いえ、間違いなく変わります。
その時はこのページを随時変更して行きますので、お暇な時にでも覗いてみてください。
かちびと.netが変わる数だけ貴方の未来を応援している私の気持ちの大きさに比例します。

今後ともかちびと.netを宜しくお願い致します。

タイトルとURLをコピーしました