WordPressの記事一覧 4ページ目

iPhone:ふるふるブックマーク対応!

キッズパーカッション  キッズミニマラカス 赤

iPhoneを振ると「はてぶ」できちゃう新機能「ふるふるブックマーク」に対応したよ!

使い方は簡単!iPhoneでウチのブログにアクセスして、iPhoneを上下左右に思いっきり降るだけ!マラカスを振るように激しくiPhoneを振ってみてください。秒間30ふるふるを超えると自動的にブックマークされるよ!

これだけでブックマークできちゃうんだから、インド人もビックリだね!みんなもガンガンiPhoneを振り回して、ブックマークしまくってね!


正しい使い方は「”ふるふる”でブックマークしよう!はてなブックマーク for iPhoneリリース! – はてな広報ブログ」をご覧下さい。

ブログ側の対応方法は「ふるふるブックマーク」に書いてあります。

Google検索、ブログタグが「類似ページ」として表示された

タグが「類似ページ」として表示されている

Googleで「フチコマ タチコマ」を検索したら、うちのブログが上位に表示されてビックリしたんだけど、それ以上に驚いたのが「攻殻」タグのページが「類似ページ」として表示されたこと。

なんか言葉の説明だとシックリ来てない気がするけど、実際に検索してもらうか、上の画像を見ると何のことか分かるんじゃないかな?

個別の記事ページから「パンくずリスト」や「タグ一覧」でタグページへのナビゲーションを構築しているとは言え、Googleさんが自動で関連ページとして認識してくれるとは思ってなかったよ。Googleさんもスゴイし、うまいこと認識されるWordPressさんもスゴイなーと思いました。

まっとうなHTML、まっとうなデザインを心がけてた甲斐があったのかも知れないね。

WordPress: Topsy Widgets導入

ブログ記事の「つぶやかれ数」を表示してくれるプラグイン「Topsy Widgets」を導入したよ。記事の右上辺りに「1 tweets」とか表示されてるのが「つぶやかれ数」ね。

そもそもの「Topsy」ってのは、Twitter上でつぶやかれたURLを観測して「今ホットなURLはなんじゃろかい?」ってのを見つけるTwitter専用の検索エンジンさんです。それ以外にも、例えばTopsyで “www.hide10.com”を検索すると、Twitter上に出てきたウチの記事を見つけられたりもします。

で、さらに一工夫して、記事の詳細アドレスで検索を掛けて、引っかかった数を自動で表示してくれるのが、「Topsy Widgets」プラグインってわけさ。

「つぶやかれ数」を表示する以外にも、Retweetボタンを付けてくれたり、TwitterでのURL引用記事をComment/Trackbackとして表示してくれたりと、中々に多機能なプラグインで良い感じ。

注意点として、URLの & を実体参照に変換してない箇所があるので、XHTML validにこだわる御仁はソースを書き換える必要があるみたい。プラグインの設定ページは実体参照で書かれてるので、中の人が知らないワケじゃなさそうなんだけど…気が向いたら、中の人にご注進してみようかな。

WordPress: Simple Tweet 導入

WordPressの記事更新を検知して、自動でTwitterにつぶやいてくれるプラグイン「Simple Tweet」を導入したよ。

これまではtwitterfeedを使ってたんだけど、何だか「つぶやき漏れ」が見受けられるのよね。

これが何だか気になっちゃう感じなので、つぶやきプラグインとして評判の良い「Simple Tweet」を導入してみた次第。

と言うわけでこのエントリは、つぶやき更新が行われるかどうかのテストエントリでもあったりします。テステス。

WordPress: iPhone用テーマ「WPtouch」導入

WordPress 2.7対応「導入&カスタマイズ」実践ガイド―個人ブログも企業サイトも簡単&無料で構築できる!

WordPressの表示をiPhone/iPod touch向けに最適化してくれるプラグイン「WPtouch」を導入したよ。

実はこれまでも「iWPhone」というプラグインでiPhone用テーマが表示されてたんだけど、iPhoneでアクセスすると強制的にiPhoneテーマに固定されて、標準デザインが見られないのが気に入らなかったのよね。

その点「WPtouch」なら、標準テーマへの切り替え機能が付いてるんだよね。全体的なデザインもこなれてるし、タグページやカテゴリページも表示できるし、ちょっと試用しただけでスグに気に入りました :D

導入はいつもの手順でOK。プラグインをダウンロードして、プラグインフォルダに展開して、プラグインを有効化するだけ。これだけで、あなたのブログがiPhone対応に!この番組をご覧の皆さまも今すぐお試し下さい!

WPtouchでの表示イメージ

参考までにこのページをiPhoneで見たときのイメージ画像を貼っておきます。

ね、カッコイイでしょ?

WP Super Cacheとの併用

ただまぁ毎度のことながらキャッシュ表示とバッティングしちゃったので『WPtouchとWP Super Cacheを併用する || 新・ガジェット! gadget!! あーんど Mac!!!』を参考に対策を実施。

要はWP Super Cacheのモバイルサポートを有効にして、且つRejectUAとしてiPhoneを指定せよってことだね。

これでバッチリiPhone向けページが表示されるようになったので、iPhone使いの皆さまは試しに見てやってくれると嬉しく思います。ついでにAdMobを張ったのでiPhone用の広告も表示されるけどね :twisted:

iPhoneから更新

iPhoneから更新するテストだよ

追記。うまく行ったみたい。iPhoneアプリにWordPressの管理ツールがあったので使ってみたよ。

この追記も含めて、iPhoneから作業しています。

参考リンク:WordPassWordPass

WordPress:タグのリンク/RSSフィードアドレスを取得する

WordPressの個別記事画面(single.php)に、タグアーカイブのページアドレスと個別タグフィードのアドレスを表示させたよ。wp_tag_hogeとかで簡単に呼び出せるだろうとタカを括っていたのに、実は思った以上に大変な作業でした。

カギはget_tag_link関数とget_tag_feed_link関数

結論から言うと、タグアーカイブページのアドレスは”get_tag_link“関数、個別タグフィードのアドレスは”get_tag_feed_link”関数で取得可能です。

ただし、両関数とも引数にタグIDを渡さねばならず、加えて戻り値が文字列ではないので自前での画面表示が必要になります。

参考までにget_tag_feed_link関数はSimple Tagsのソースを追っかけていて見つけ、関数の使い方は『[覚書] 複数タグのアーカイブで、タグ情報一式を取得 | animal-taste.com』を参考にさせてもらいました。

サンプルコード

そこら辺を踏まえて、現在ウチのブログで使ってるコードはこんな感じですよ。注意:11行目の”</ul>” は先頭の'<‘が日本語の’<’になっています。このコードをそのまま使うなら、適宜'<‘に書き換えてご使用下さい。

< ?php $posttags = get_the_tags();
	if ($posttags) {
		echo '<ul>' ;
		foreach ($posttags as $tag) {
			$tagLink = get_tag_link($tag->term_id) ;
			$tagFeed = get_tag_feed_link($tag->term_id);
			echo '<li>タグ:「<a href="'.$tagLink.'" title="『'.$tag->name.'』関連記事を一覧表示">'.$tag->name.'</a>」に関する記事を一覧表示する' ;
			echo '<a href="'.$tagFeed.'" title="タグ『'.$tag->name.'』のRSS"><img src="https://www.hide10.com/images/rss.png" alt="RSS icon" width="14" height="14" /></a>' ;
			echo '</li>' ;
		}
		echo '</ul>' ;
	}
?>

各行の説明を日本語で書くとこんな感じ。

  1. get_the_tags関数で、現在表示しているページに定義づけられているタグ一覧を取得
  2. タグ一覧は取れた?
  3. ulタグ開始
  4. タグ一覧を全部表示するまで↓の処理を何回でもやるよ、ここから
  5. get_tag_link関数でタグアーカイブアドレスをゲット!
  6. get_tag_feed_link関数でタグRSSのアドレスをゲット!
  7. タグアーカイブアドレスのリンクを画面表示
  8. タグRSSのアドレスを画面表示
  9. liタグを閉じる
  10. タグ一覧を全部表示するまで↑の処理を何回でもやるよ、ここまで
  11. ulタグを閉じる
  12. ここまでif文
  13. ここまでPHP

おいらはsingle.php用に使ってるけど、必要なら他のアーカイブページからでも取得可能だと思います。実際の表示例は、この下の『よろしければ関連が高い他の投稿もお読み下さい』の下の方をご覧下さいませ。

WordPress:iPhone対応プラグイン『iWPhone』導入

iPhone HACKS! 楽しんで成果を上げるハイセンス仕事術

iWPhone』なるWordPressプラグインを導入して、iPhone/iPod touch向けの表示画面を最適化してみたよ。iPhone/iPod touchをお持ちの皆さまは、試しにアクセスしてみていただけると幸い。

追記:その後「WPtouch」に乗り換えました。経緯などは『WordPress: iPhone用テーマ「WPtouch」導入 – Hinemosu』をお読み下さい[2009/11/11]

事の起こり

事の起こりは携帯端末ブラウザをシミュレートするFirefoxプラグイン「FireMobileSimulator」のバージョンアップついでに、ウチのブログがiPhoneでどう表示されるのかを確かめたのが始まり。ある程度は画面が崩れることを覚悟してたけど、予想を上回るグチャグチャなレイアウトで軽くショックを受けました。

携帯対応プラグイン「Ktai Style」を導入していたので、何からの対応をしてくれているのかと勝手な予想をしてたんだけど、iWPhoneなどの既存プラグインで対応可能なことを考慮して、Ktai StyleでのiPhone対応は行っていないんだってさ。

iWPhone導入手順

導入手順は公式のInstallationに書いてあるんだけど、英語なので簡単に翻訳しておきます。

  1. zipファイルをダウンロードする
  2. zipを展開して”iwphone-wordpress-plugin-and-theme”フォルダを取り出す
  3. その中にある”iwphone.php”を、wp-content/plugins/ディレクトリにアップ
  4. もうひとつの”iwphone-by-contentrobot”フォルダは、wp-content/themes/ディレクトリにアップ
  5. 管理画面のプラグイン設定を開いて、iWPhoneを有効化する
  6. iPhone/iPod touchでアクセスすると専用にカスタマイズされたテーマで表示される

iWPhoneとWP-Cacheのバッティングを解決

これで無事にiPhone向け表示が出来るようになったんだけど、キャッシュプラグインのWP-Cacheがバッティングするみたい。iWPhoneは動的にテーマを切り替えるんだけど、これにキャッシュが加わって予期していない動作になる。

具体的にはPC用画面キャッシュがあればPCにもiPhoneにもPC向けを表示しちゃうし、iPhone向け画面キャッシュであればPCにもiPhoneにもiPhone向け画面を表示しちゃう。

解決方法を模索したところ、そのものズバリの解法を発見。まんまパクらせてもらいました。

iPhone View不調について | iPhone 3G Wiki blog

一応メモ。wp-content\wp-cache-config.phpに以下の記述を追加します。

$me_mobile_agents = array( 'iPhone', 'iPod' );

$ua = $_SERVER['HTTP_USER_AGENT'];
foreach ($me_mobile_agents as $a) {
	if (strpos($ua, $a) !== false) {
		$cache_enabled = false;
		$super_cache_enabled = false;
		break;
	}
}
$cache_rejected_user_agent = array_merge($cache_rejected_user_agent, $me_mobile_agents);

テーマファイルを改良

最後にテーマファイルを改良します。wp-content/themes/iwphone-by-contentrobotがiPhone用表示テーマなので、FireMobileSimulatorを活用しつつ良い感じに修正してください。

特にこだわらなければ初期表示でも問題ないと思うけど、header.phpの36行目だけは直した方が良いかも。以下、修正後のソース。

<meta name="Viewport" content="maximum-scale=1.6,width=320" />

違いが分かりにくいともうけど、最後にスラッシュを付けてmetaタグの閉じ忘れを修正しています。

WordPress:おすすめプラグインの一覧

いま現在愛用しているWordPressプラグインを紹介するよ。

特にオススメのプラグイン

特にオススメのプラグイン6選です。メジャーなプラグインばかりなので、プラグイン名で検索すれば、設置方法などが書かれた詳細記事が引っかかると思います。

Akismet
コメントSPAMの対策プラグインです。絶大な効果を発揮するので、SPAMが来る前に設定しておきましょう。
WordPress.com Stats
公式のアクセス解析プラグインです。アクセス数、ページビュー、リファラーなどを表示します。
WP Multibyte Patch
WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行うプラグインです。日本語トラックバックの文字化けなどが解決されます。日本語版WordPress本体に同梱されていますので、忘れずに有効化しておきましょう。
Google XML Sitemaps
検索エンジン向けの地図である「Sitemaps」を作成してくれます。検索エンジン対策として、とても有効です。
Ktai Style
WordPressをケータイ対応にするプラグインです。ケータイ表示画面の完成度が高く、とてもオススメできます。
Simple Tags
WordPressのタグ管理機能を補完・強化します。そのうち本体に吸収されるんじゃないかと思うぐらい良く出来てます。オススメ。
関連記事:『Simple Tags導入 – Hinemosu

その他のプラグイン

Add Image to Feed
WordPressのRSSフィードに、ロゴ画像のリンクを追加します。自作のプラグインです。
関連記事:『WordPress:RSSにロゴ画像を追加する – Hinemosu
Commented entry list
最近のコメントやトラックバックを、カスタマイズして表示します。
Custom Smilies
コメント欄にクリックで入力できる顔文字アイコンを表示します。
GalleryCSS Deleted
WordPress付属のギャラリー機能が出力するハードコーディングCSSを削除します。自作のプラグインです。
SyntaxHighlighter Evolved
ソースをハイライト表示してくれるプラグイン。iG:Syntax Hiliterからの乗り換えです。
Smart Update Pinger
WordPressの Ping 機能や更新通知機能を強化します。送信ログで失敗pingが見られるようになるので、Pingを活用するなら入れた方が良いよ。
Top Post
WordPress.com Statsで収集された「最近人気の記事」をサイドバーに表示します。WordPress.com Statsが必要です。
関連記事:『人気エントリを表示する『Top Post』プラグイン導入 – Hinemosu
WordPress Database Backup
簡単な操作でWordPressのデータベースをバックアップします。定期的にバックアップして、メールで送り付けるよう設定することもできます。
とても便利なプラグインですが、何故かウチの環境では動かなくなりました。データが多すぎる(1万2千件)とタイムアップしちゃうのかな?
wp-cache i18n
WordPressにキャッシュシステムを追加するプラグインの日本語版です。
関連記事:『WordPressキャッシュプラグイン『WP-Cache』を導入してみた – Hinemosu
WP-PageNavi
複数ページのナビゲーション表示を改善。Googleみたいな表示になります。
関連記事:『WordPress: WP-PageNavi導入 – Hinemosu
WP-phpMyAdmin
WordPressの管理画面からphpMyAdminを操作できるようになります。バックアップにphpMyAdminを使っているならオススメです。
WP-PostViews
各記事の閲覧数(ページビュー)を表示してくれます。

WordPress: WP-PageNavi導入

WordPressのページ表示画面で、前後のページ番号を含んだリンクナビゲーションを実現してくれるプラグイン「WP-PageNavi」を導入したよ。導入にあたり「[ WordPress ] WP-PageNavi – ページ番号付きのページネートリンクを生成するプラグイン – WordPress 研究室」を参考にさせてもらいました。

実際の動作イメージはこんな感じ。ちょっとGoogleっぽいでしょ?
WP_PageNavi 動作イメージ

設置は簡単だったけど、好みの見た目にするためのCSS設定がタイヘンでした。バックアップとしてメモを置いておくね。

設置方法

PHP « Programming « Portfolio | lesterchan.net」からプラグインをダウンロードして、プラグインフォルダに入れて有効化せよ。いつもと一緒だね。

動作設定

管理画面の「設定」→「PageNavi」を良い感じに設定します。細かな設定を書き写すのが面倒なのでキャプチャ画像を張っておきます。ページ番号総数を消して、「最初のページ」「最後のページ」「次へ」「前へ」の表示を変えて、ページの表示数を9にして、ページ数が多くても大ジャンプしないようにしたのかな。

WP_PageNavi 設定画面

表示設定

プラグインをインストールしたフォルダにある「pagenavi-css.css」を編集すると、見た目を変更することが出来ます。

最終的にはこんな感じ。表示位置を調整して、文字を大きくして、下線を引いて、色を変えて、間隔を詰めて、extend表示を非表示にしてあります。初期値とは大きく異なる箇所が多いので、参考程度にどうぞ。

.wp-pagenavi {
	padding: 0 2em ;
	font-size:118%;
	background-color:#FFE4E1;
	line-height: 2em ;
}

.wp-pagenavi a, .wp-pagenavi a:link {
	padding: 2px 2px 2px 2px;
	margin: 2px;
	text-decoration: none;
	border-bottom: 1px solid #F4A460;
}
.wp-pagenavi a:visited {
	padding: 2px 2px 2px 2px;
	margin: 2px;
	text-decoration: none;
	border-bottom: 1px solid #F4A460;
}
.wp-pagenavi a:hover {
	border-bottom: 1px solid #F4A460;
	background-color:#F4F43D;
}
.wp-pagenavi a:active {
	padding: 2px 2px 2px 2px;
	margin: 2px;
	text-decoration: none;
	border-bottom: 1px solid #F4A460;
}
.wp-pagenavi span.pages {
	padding: 2px 2px 2px 2px;
	margin: 2px 2px 2px 2px;
}
.wp-pagenavi span.current {
	padding: 2px 2px 2px 2px;
	margin: 2px;
	font-weight: bold;
}
.wp-pagenavi span.extend {
	display:none;
}

テーマファイルの編集

最後にページナビゲーションを表示したい場所に、以下のコードを追加してください。

wp_pagenavi();

修正したファイルはindex.php、archive.php、category.php、search.php、tag.phpで、主コンテンツの上下にページナビゲーションを表示するようにしました。

あとは実動作を確認しつつ、見た目の表示を修正してみてください。

WordPress:Twitterに投稿(TwitThis)ボタンを作成した

キュージョン『ローズオニールキューピー×少年サンデー《Gu-Guガンモ》』携帯ストラップ

WordPressの個別記事表示画面(single.php)に、「Twitterに投稿(TwitThis)」ボタンを付けてみたよ。

上にある各種アイコン群から、「T」と書かれたTwitterっぽいアイコンをクリックすると動作を確認できると思います。このページの宣伝を兼ねて、みんな遠慮なくクリックしまくると良いと思うよ!

作成したコードはこんな感じ。自分で書いておきながらなんだけど、PHPを良く理解していまま書いてるので、変なことをしていたらゴメンなさいね。

<a href="http://twitter.com/home?status=<?php echo "ReadIt:", urlencode(the_title(""," ",false)), the_permalink(); ?>"><img src="twitter.png" alt="Twitter icon" title="この記事をTwitterにポストする" width="16" height="16" /></a>

Twitterアイコンは「Social Media Mini Iconpack · Komodo Media」に公開されているアイコンセットを使わせていただきました。感謝!

WordPressの古い記事にのみ広告表示

WordPressの古い記事にのみ広告を表示するようにしてみたよ。

single.phpに下記のコードを追加すると、半年以上前の古い記事のみ「広告表示」が行われます。カッコの中の数字は(6ヶ月x30日x24時間x60分x60秒)の意味なので、ここを良い感じに変更すると表示範囲を調整できます。

< ?php if ( time() - strtotime( $post->post_date_gmt ) > ( 6 * 30 * 24 * 60 * 60 ) ) { ?>
/*広告表示*/
< ?php } ;?>

参考にしたのは『WordPressをちょちょいと使いやすくする15のスニペット | コリス』にある「古いエントリーのコメント入力をクローズ」というテクニックです。リンク先では他にも便利なテクニックが紹介されているので、WordPressをお使いならご一読をお勧めします。

WordPressページで「前へ・次へ」(Prev/Next)リンクを実現する

WordPressページで「前へ・次へ」(Prev/Next)のナビゲーションリンクを表示するプラグインを見つけたので、使い方も含めてメモっておきます。

そもそもWordPressの「投稿(post)」では、get_next_post関数やget_previous_post関数が用意されていて、簡単に「前へ・次へ」を表示できるのよ。だけど「ページ」に関しては、ナゼか前後を取得する方法が用意されていません。

でも「前へ・次へ」のナビゲーションリンクを用意してあげないと、複数ページを続け読みするのはとっても不便。そんなわけで頑張って前後へのリンクを自動生成する方法を模索したワケです。

「前へ・次へ」の取得

「前へ・次へ」のリンク取得は、earthman100氏作「Next-Previous Page」(Version:0.6)で実現できました。このプラグインは『オノケンノート ≫ 同じ親ページを持つ子ページ間でnext-page等のナビゲーションを表示するプラグイン[WORDPRESS]』経由の『WordPress : Support ≫ Prev/Next Page plugin? (wordpress Pages, not Posts)』で見つけました。

せっかくのGPLライセンスだし、ウチのサイトにも置いときます。

ダウンロード:NextPreviousPage.zip [1.47KB]

zipを展開して出てきたNextPreviousPage.phpをプラグインフォルダに入れ、プラグインを有効化することにより「next_page関数」と「previous_page関数」が使えるようになります。

ただし、おいらはプラグインとして使っておらず、該当関数をfunctions.phpに書き写して使ってます。深い理由はないんだけど、デザインに係わる機能なのでテンプレート側に記述した方が良いかな~とかそんな感じ。普通はプラグインで良いと思うよ。

Next-Previous Pageプラグインの使い方

/*使い方*/
< ?php next_page('orderby', 'link', 'before', 'after', 'title_attr', 'parent_id'); ?>
< ?php previous_page('orderby', 'link', 'before', 'after', 'title_attr', 'parent_id'); ?>

/*初期値*/
$orderby = 'post_date', $link='Previous/Next Page: %',
$before='', $after='', $title_attr='Previous/Next Page: %',
$parent_id = 0

/*実際の使用例*/
<div id="prev_next_links">
< ?php
$parentid = $post->post_parent;
previous_page('menu_order', '&lsaquo;&lsaquo; %', '<span class="prev_link">', '</span>', '%', $parentid);
next_page('menu_order', '% &rsaquo;&rsaquo;', '<span class="next_link">', '</span>', '%', $parentid);
?>
</div>

簡単なオプション解説。

  • orderby:ソート方法。‘post_date’ か ‘menu_order’ で日付順かメニュー順(ページ順)を選択。
  • link:リンク用文字列。%はページタイトルを表す。
  • before:リンクの前に付ける文字列。
  • after:リンクの後に付ける文字列。
  • title_attr:リンクタイトル。マウスオーバー時のツールチップ表示文字列だと思いねぇ。
  • parent_id:探索する親ページのID。「隣の隣」とか「親の親」を取得するときに活用するんだと思う。

「前へ・次へ」表示で一工夫

前述のプラグインを使用することにより、「前へ・次へ」が表示できようになりました。しかしウチのブログではulリストのli要素に「前へ・次へ」を割当てており、前後共にリンクのないページでli要素が消滅、HTML validにならない問題が発生しました。

これを解決するため、以下のようなコードを記述しました。

< ?php
    $parentid = $post->post_parent;
    $children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0');
    if ($parentid | $children) {  ?>
        <ul>
        < ?php
            previous_page(~hoge~);
            next_page(~fuge~);
        ?>
        </ul>
< ?php } ; ?>

簡単に説明すると親IDか、子のページリスト、いずれかが取得できた場合にのみUL,LIのリスト表示を行います。これにより階層構造を持つページ群のみ、「前へ・次へ」が表示されるはずです。

実際の表示例

実際の表示例は『NTSCについて – Hinemosu』や『カタンの戦略 – Hinemosu』をご覧ください。

ページ右上、もしくは本文下にページナビゲーションを示すリンクが生成されていることが確認できると思います。

WordPressページで目次を自動生成する

WordPressページで、目次を自動生成するするようにしてみたよ。

全てのページで目次が表示されるとウザイので、いま表示しているページに子ページ(サブページ)がある場合のみ、目次を生成・表示するようにしました。実際のコードはこんな感じです。

< ?php
    $children = wp_list_pages('title_li=&sort_column=menu_order&child_of='.$post->ID.'&echo=0') ;
    if( $children ) {
?>
    <ul>
        < ?php echo $children; ?>
    </ul>
< ?php
    } ;
?>

簡単に説明すると、wp_list_pages関数で、現在のページの子ページを取得し、子ページがあればULリスト形式で表示を行います。

上記コードの実際の表示例は『NTSCについて – Hinemosu』を参照してください。

応用例

「目次表示」でやってることは単純だけど、前提条件を工夫して親ページでのみ目次を表示すれば「グローバルナビゲーション→各項目表示時に関連タイトルを一覧表示」とかも出来そう。たぶんこんな感じ。

if (is_page() && !$post->post_parent) {(実行文)} ;

現在位置が「WordPressページ」で、且つ親ページを持っていない(サブページではない)場合にのみ「実行文」が処理されます。「実行文」で、サイドバーなどに目次表示を行えば、良くある企業っぽいサイトナビゲーションを構築できそうだ。

いやーWordPressは良く出来てるな。

WordPress、コメント欄のアバター表示に対応

WordPressのコメント欄はアバターと呼ばれるイメージ画像を表示させることが出来るので、コメントのスレッド表示対応のついでにアバター表示にも対応しました。

下でも説明するGravatarに登録すれば、誰でもうちのブログのコメント欄に自分専用の画像が表示されるようになります。他サイトでも対応している場合がありますので、気が向いたら一般ユーザーさんも登録してみてください。

アバター表示対応

アバター対応作業は大きく分けて3つの項目に分かれます。

  • WordPressの設定でアバターを表示するように変更
  • コメント欄に表示領域を追加
  • Gravatarにイメージ画像を登録

WordPressの設定でアバターを表示するように変更

WordPressの管理画面から「設定」→「ディスカッション設定」を開きます。

下の方に「アバター」の項目があるので、「アバターを表示する」をチェックし「変更を保存」ボタンを押します。

コメント欄に表示領域を追加

comments.php、もしくはcomments.phpから呼び出されるコールバック関数に、アバター表示領域の呼び出し関数、get_avatarを追加します。記述例はこんな感じです。

< ?php echo get_avatar( $comment, 40 ); ?>

WordPress、vicuna CMSテーマのコメント欄をスレッド表示に対応させた – Hinemosu』で紹介したコールバックにもアバター表示領域が追加されています。参考までにどうぞ。

Gravatarにイメージ画像を登録

Gravatarにサインアップして、メールアドレスとアバター画像を登録します。Gravatar (globally recognized avatar) は、WordPress以外でも利用される汎用的な「アバター画像登録サイト」です。Gravatarの登録作業は日本語で説明が表示されますので、設定作業で詰まることはないと思います。気軽に登録してみてください。

Gravatarに登録したメールアドレスを使ってコメントを書くと、ウチを含めた多数のサイトでアバター画像が表示されるようになります。宜しければ、当記事のコメント欄を使ってアバター表示を確認してみてください。

WordPress、vicuna CMSテーマのコメント欄をスレッド表示に対応させた

WordPress逆引きデザイン事典[2.X対応]

WordPressバージョン2.7から提供された「コメント欄のスレッド表示」に対応したよ。自分用のまとめとして作業内容をメモっておきます。とても長いので気合いを入れて読んでください。

実際のコメント表示や返信機能を確かめたかったら、この記事のコメント欄を使っていただいて構いませんよ。

コメント欄のスレッド表示対応について

WordPress本体の設定としては、管理画面の「設定」→「ディスカッション」にある「コメントを×階層までのスレッド (入れ子) 形式にする」にチェックを入れるだけ。

ただしテーマ側でも階層表示への対応が必要で、うちで使ってるvicuna CMSを対応させるのは大変な作業でした。

修正作業では『WordPress コメントをスレッド対応にする : 独断と偏見の何でもレビュー』を参考にさせてもらいました。併せてご一読いただけると理解が深まると思います。

実際の作業内容はこんな感じです。

順に説明していきます。

表示対応1、comments.phpの編集

comments.phpで、実際の表示処理を行っている箇所を書き換えます。これまでのコメント表示処理部には長々と記述があったかも知れませんが、その記述はコールバック関数 ‘custom_comments’ に移動します。

書き換えるべき内容としては、olリスト内でwp_list_comments関数を呼び出し、wp_list_comments関数では引数としてコールバック関数名 ‘custom_comments’ を渡します。

具体的な記述例は下記を参考にしてください。

<ol class="commentlist">
< ?php wp_list_comments('type=comment&callback=custom_comments');?>
</ol>

表示対応2、functions.phpの編集

上述したcomments.phpから呼び出ししている ‘custom_comments’関数を、functions.php内に新規追加します。このコールバック関数内で、実際の表示処理を定義します。

表示処理部の記述は、default テーマや、先述した『WordPress コメントをスレッド対応にする : 独断と偏見の何でもレビュー』を参考にし、自分流のコメント表示を作成しました。

現在では以下の内容をfunctions.phpの最後に記述しています。
WordPress のコメントスレッド表示に対応。 – kappadow.jp』でご指摘を受け、一部内容を修正しました。修正版を適用することにより、「返信」をクリックするとコメント直下にコメント欄が移動します。[2009/7/9修正]

< ?php function custom_comments($comment, $args, $depth) {
	$GLOBALS['comment'] = $comment;
    ?>
		<li <?php comment_class(); ?> id="li-comment-< ?php comment_ID() ?>">
		<div id="comment-<?php comment_ID() ?>">
			<span class="commentImg">< ?php echo get_avatar( $comment, 40 ); ?><br />< ?php comment_author_link() ?></span>
			<span class="commentdata">< ?php comment_date(__('Y/m/d(D) G:i', 'vicuna')) ?></span>
			< ?php comment_text() ?>
			<div class="commentmetadata">
				< ?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'reply_text' => '<img src="edit-comment-orange.gif" title="Reply Comment" alt="Reply" width="14" height="14" />このコメントに返信する(Reply Comment)', 'before' => '', 'after' => '') ) ); ?>
				< ?php edit_comment_link(__('Edit', 'vicuna'), '<span class="admin"> | ', ''); ?>
			</div>
	</div>
    < ?php
    }
?>

表示対応3、CSSデザインの変更

CSSを使ってデザインとしての表示内容を定義します。これは『WordPress コメントをスレッド対応にする | Casey’s Critical Thinking』で見かけた形式がカッコ良かったので、こちらをパクって自分用に書き換えました。

まだちょっと煮詰まってないんだけど、現在はこんな感じのを使ってます。

ol.commentlist { list-style:none; margin:1em 2em; padding:0; text-indent:0; }
ol.commentlist li { border:1px solid #d5d5d5; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; height:1%; margin:0 0 5px; padding:5px 7px 10px 20px; position:relative; display: block; clear: both; }
ol.commentlist li p { font:normal 12px/1.4 helvetica,arial,sans-serif; margin:0 0 1em; text-indent:0; }
ol.commentlist li ul { font:normal 12px/1.4 helvetica,arial,sans-serif; list-style:square; margin:0 0 1em; padding:0; text-indent:0; }
ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
ol.commentlist li .commentImg { float: left; text-indent: 0em ; margin-right: 1em; }

入力対応1、comments.phpの編集

コメント入力部でcancel_comment_reply_link関数と、comment_id_fields関数を呼び出します。

cancel_comment_reply_link関数はその名の通り、コメント返信をキャンセルするリンクを表示してくれます。comment_id_fields関数は、コメント入力時の隠しフィールドとして返信元のIDを埋め込んでくれるそうです。

実際の定義はこんな感じで、コメント入力部の最初でcancel_comment_reply_link関数呼び出し、form終了タグの直前でcomment_id_fields関数を呼び出しています。

<h2 id="postcomment">< ?php comment_form_title( 'コメントをどうぞ', '%s のコメントに返信する' ); ?></h2>
<?php cancel_comment_reply_link(); ?>
(中略)
<?php comment_id_fields(); ?>
</form>

入力対応2、header.phpの編集

header.php内のwp_head関数呼び出し前に、wp_enqueue_script関数経由で「wp-includes/js/comment-reply.js」の呼び出し行を追加します。

とそれっぽく書きましたが、comment-reply.jsで何が行われるのか、まだ良く分かっていません…default テーマにも記述があるから何か意味があるんだろうけど、イマイチ効果が分からない。今のところオマジナイとして書いていますが、もしかすると必要ないのかも知れません。
このJavaScriptにより、「返信」時に該当コメントの下にコメント記入欄が移動するようになります。[2009/7/9修正]

< ?php	if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
< ?php wp_head(); ?>

人気エントリを表示する『Top Post』プラグイン導入

いま一番わかりやすい WordPress日本語版でブログサイト構築入門

さいきん人気のエントリをサイドバーに表示する『Top Post』プラグインを導入したよ。

今までは『WP-Post view』で人気記事を表示させてたんだけど、これは「全期間で集計した人気記事」しか表示されないのね。だから「一瞬だけ爆発的な人気」な記事はリストに表示されません。でもおいらはホントは「最近アツイ記事はどれだ?」みたいなのを表示させたかったんだ。

で、うちのブログはWordPress.com Statsという、WordPress公式(?)のアクセス解析サービスを使っていて、解析結果画面に「最近アクセス数が高い記事」が表示されるのよ。これだこれ、この結果をサイドバーに表示したい!と思って探しあてたのが『Top Post』です。

このプラグインを使うと、WordPress.com Statsで取得したデータを使って「これまでで最も人気の高い記事」と「最近人気の記事」をサイドバーに表示してくれます。まさに要求していた機能なんだけど、このプラグインはウィジェット形式なのが問題。なぜならウチで使ってるwp.Vicunaテーマはウィジェット非対応。このプラグインは使えないのです…

でも頑張ってwp.Vicunaをウィジェットに対応させて、なんとか『Top Post』プラグインを使えるようになりました。今後もウィジェット形式のプラグイン使うかも知れないから、一手間掛けてみたってワケさ。

ウィジェットが使えるならテーマなら、プラグイン自体の設定は簡単です。プラグインを有効にして、表示ウィジェットに追加して、ウィジェットの表示タイトルを決めて、人気記事をいくつ表示するか決めて完了。これで無事サイドバーに人気記事が表示されるようになりました。やっふー。

実際の表示はトップページに飛んでサイドバーを確認して下さい。「最近の人気記事」と言う項目を見れば、うちのブログでいま人気の記事が分かるはずですよ :-)


参考リンク:WordPress › Top Post « WordPress Plugins
公式サイト:WP Widget: Top Post | V.J.Catkick@
作者さんのブログ:V.J.Catkick@

WordPressのテーマ、wp.Vicunaをウィジェット (widget)追加に対応させた

基本からしっかりわかる WordPress 2.7 カスタマイズブック (Web Designing BOOKS)

当ブログで使用しているWordPressテーマ『wp.Vicuna』は、デザイン性が高く且つXHTML1.0 Strict DT準拠やSEOにも考慮した素晴らしいテーマなんだけど、残念ながらサイドバーウィジェット(widget)に対応していないんだよね。

ウィジェット対応などカスタマイズ性を向上させた別テーマ『wp.Vicuna Ext.』なんてのもあるんだけど、これからExtに乗り換えるのはちょっと大変。そんなワケでwp.Vicunaのサイドバーをウィジェット (widget)追加に対応させてみたので、手順をメモっておきます。

やること

サイドバーのウィジェット対応については「Widgetizing Themes – WordPress Codex 日本語版」に書いてあるんだけど、英語を日本語訳したまどろっこしい文章で理解するのに時間が掛かりました。

で、ガッとまとめるとやることは2つだけです。

  1. sidebar.phpでdynamic_sidebar関数を呼び出し、ウィジェットを表示させる。
  2. functions.phpでregister_sidebar関数を呼び出し、ウィジェットの表示形式を定義する。

以降、詳しい手順について説明していきます。

sidebar.phpの編集作業

ウィジェットを表示させたい場所に以下の行を挿入します。ウチのサイトでは「<dl class="navi">」の直後に追加しています。

< ?php if ( function_exists('dynamic_sidebar') ) dynamic_sidebar(); ?>

この内容を日本語で言うと「もしdynamic_sidebar関数が用意されていたら、dynamic_sidebar関数を実行してね」になります。

WordPress Codexでは「既存のサイドバー」と「サイドバーウィジェット群」のどちらかしか表示しないようにしていますが、ウィジェットって突っ込んだカスタマイズが出来なくて使いにくいんだよね。用意されたモノを使うだけならお手軽で良いんだけど、おいらは基本的に自分でコードを書いて細部までカスタマイズしたい。

だからウィジットを表示させつつ、自前のサイドバーも表示するようにしました。この方法だと自前サイドバーとウィジェットで表示内容が被ることがあるけど、その場合はsidebar.phpの該当箇所を増減させて対応してください。

functions.phpの編集作業

functions.phpの良い感じの場所に以下の内容を記述して、ウィジェットの表示形式を定義します。うちでは「load_textdomain云々」書いてある下あたりに書きました。

if ( function_exists('register_sidebar') )
    register_sidebar(array(
		'before_widget' => "",
		'after_widget' => "\n\t\t</dd>\n",
		'before_title' => "\t\t<dt>",
		'after_title' => "</dt>\n\t\t<dd>\n\t\t\t",
    ));

このあたりがウィジェット対応のキモかな。register_sidebar関数の詳細は『WordPress Widgets Api/register sidebar « WordPress Codex』に英語で書いてある。これを超訳すると各ウィジェットの前後に入れるHTMLコード類を定義しろってこと。

で、Vicunaのサイドバーは「dl,dt,dd」を使った定義リスト表示を行っているので、ウィジェットの表示もそれに併せています。register_sidebar関数に渡してる値は、変数名を見ればなんとなく想像付くでしょ?要は「タイトルの前後に何て書く?」とか「ウィジェットの前後に何て書く?」ってのを渡して上げれば良いだけね。

ちなみにfunctions.phpってのはプラグイン用の関数群みたいなモンで、WordPressのロード時に呼び出されるらしいよ。

実際にウィジェットを表示させてみる

管理画面→外観→ウィジェットを開いて、使いたいウィジェットを追加してください。必要なウィジェットを追加しおわったら「変更を保存」ボタンを押すことを忘れずに。

最後に実際にサイドバーを表示させて、思ったように表示されているか確認してください。なんかダブったり表示が崩れたりするかも知れないけど、sidebar.phpやCSSを調整すればきっとうまく行くと思うよ!

WordPressキャッシュプラグイン『WP-Cache』を導入してみた

最近、当ブログでデータベースに接続できない系のエラーが頻発するようになったので、対策として『WP-Cache』プラグインを導入してみたよ。

『WP-Cache』はアクセスのあったページのHTMLを一定時間保持して、再び同じページを表示するときは「さっき表示したページ」を表示してくれるプラグインです。「さっき表示したページ」が使われるときはデータベースにアクセスしないので、全体的に高速になるって寸法さ。

導入

記憶を頼りに作業内容をまとめるとこんな感じか。なんか漏れてたらゴメン。

  1. /wp-content/plugins/にWP-Cacheプラグインをコピー
  2. /wp-content/のアクセス権限(パーミッション)を707に変更
  3. /wp-content/cache/を作成。アクセス権限を707に変更。
  4. /wp-config.phpのMySQL settingsの先頭に define(‘WP_CACHE’, true); の1行を追加
  5. WordPressの管理画面→プラグインから、wp-cacheを有効化する
  6. WordPressの管理画面→設定→WP-CacheでEnable(動作を開始する)ボタンを押す

パーミッションの変更が必要なコトに気をつけろ。それとXreaみたいにPHPがsafe modeで動くサーバでは、wp-content/cache/を手動作成する必要があるので注意が必要です。

うまく動けばページソースの最後に「Dynamic Page Served (once) in 0.257 seconds」云々のコメントが入っているはずです。

そんな感じでサクッと導入して、ブログの表示が高速になりました。でも、いくつか問題があったのでメモっておきますね。

Ktai Styleでの携帯表示で文字化けする(解決済み)

キャッシュされたUTF-8なページを携帯にも送りつけるので、携帯で見るとグチャグチャに文字化けして表示されました。

この問題は『Yuriko.Net » Ktai Style と WP-Cache を併用する』を読んで解決しました。一箇所「wp-cache-config.phpをwp-content/ 直下に入れる」を読み逃していてハマったけど、書かれているとおりにキチンとやったら正しく表示されるようになったよ。

カウンタが動作しない(解決)

ウチで使ってるWP-Post viewのカウンタが上がらない!と思ってたんだけど、キャッシュされた表示が変わらないだけで、カウント自体はされているようです。これならまぁいいかな。

前後のエントリ更新されていても、キャッシュが更新されない

新しい記事を書いたとき、1つ前の記事に「次の記事」が表示されないってコトね。

表示すべきエントリに更新があったときはキャッシュをpurgeしてくれるけど、previous_postに変化があっても当該記事が更新されないのかな?大きな問題ではないけれど、ちょっと気になる動作だな~。キャッシュ自体の制限時間が切れれば更新されるわけだし、見ないふりをすること我慢しようかな。

もし他にも問題があるようなら、ご指摘いただけるとありがたく思います。

国士舘大学の学長、戻りすぎ とか(2009/03/10の雑記)

国士舘大学 学長挨拶 戻りすぎ

国士舘大学学長挨拶。戻りすぎだろ、常識的に考えて。

Xbox.com | Xbox LIVE アーケード – クリスタル・ディフェンダーズ。スクエニ版のタワーディフェンスが800MSPで配信開始。バイオが終わったら見てみようかな。

Ping一括配信サービス Pingoo!。ブログの更新を通知する「Ping」を一斉配信してくれるサービスPingoo!に登録したよ。これで多少なりともアクセスアップに繋がると良いんだけどな。

WordPress用:ソーシャルブックマークボタンの設置とブックマーク数を表示する方法 – 海外のSEO対策・SEOツールをわかりやすく解説するブログ。こちらを参考にして、ライブドアクリップとDeliciousの登録ボタンを付けたよ。ついでにライブドアクリップの登録人数も表示するようにしたよ。

BUFFALO 外付けハードディスク USB2.0対応 1.0TB HD-CN1.0TU2

バッファローの1TB外付けハードディスクが1万円で買えるのか…恐ろしい時代だ。

Toxel.com » Clever and Creative Bus Advertising。おもしろラッピングバスの写真色々に、ヨドバシの一眼レフも載ってたよ。

USB-101(インフラN) | インフラノイズ | USB/DD/DAコンバーター | ジョーシン景品表示法違反についての報告の受付。『CDソース再生をはるかに上回る高音質』はウソだろと思ったので報告してみた。実名、メアド、電話番号付きで申請したので、動きがあれば公正取引委員会から連絡が貰えるのかな?何かあればまたレポートします。

パイオニア、新視聴室でBlu-ray「AKIRA」などの体験会 -AV Watch。抽選で25名がBlu-ray「AKIRA」の視聴に参加できるらしいよ。

当サイトで使用しているHTML色の一覧を公開

7日間でマスターする配色基礎講座 (Design beginner series)

当サイトで使用しているHTML色の一覧を『Hinemosu Color Pattern』で公開したよ。現在も更新中なので見る度に少しずつ変わってるかも。

CSSで定義している色属性をgrepしてsortしてuniqして、それをHTMLのテーブルで一覧形式にしてからDropboxのshare フォルダーに配置しただけなんだけどさ。こんな感じでまとめておくと、全体の印象から外れている色が分かってちょっと便利だった。

それとDropboxの新しい使いを覚えたのが収穫。エディタで開いているローカルファイルをセーブすると、数秒でDropboxの公開ファイルが最新に置き換わる。その公開ファイルをブラウザで開きオートリロードをセットしておくと、色変更が直ぐに反映されて便利だったよ、という体験談を書きたかっただけのエントリです。

WordPressで長年日記(10年日記)を実現する方法

WordPressで、tDiaryにあるような「長年日記」を実現する方法を書いておきます。ずいぶん前に実装した機能なんだけど、検索に引っかからないマイナーブログなせいか、あまり広まっていないのでもう一回書きます。大事なことなので、みんなして「はてブ」すると良いよ。ってか、セルクマして上げてかないとダメ?

WordPressでtDiaryにあるような「長年日記」を実現するには、テーマファイルの任意の場所に以下の記述を追加すればよい。

<a href="<?php bloginfo('home'); ?>/?monthnum=< ?php the_time('m') ?>&amp;day=< ?php the_time('d') ?>" title="長年日記">長年日記</a>

実際の表示例は当ブログの「10年日記を読む」をクリックしてください。対象となるファイルは index.php、 single.php、 archive.phpなどかな。日付を表示している横あたりに追加すれば違和感がないと思う。

WordPressではてなブックマーク数を表示

Amazon オリジナル ブックマーク(しおり) イエロー

個別記事の表示画面に「はてなブックマーク」への登録用ボタンと、被ブックマーク数を示す画像を表示させてみたよ。

被ブックマーク数はブックマークされている時だけ表示されるので、ほとんどのページでは表示されていないと思います。もし試しに見てみたいなら『水都大阪のポスターがヤバイ とか(2009/02/09の雑記) – Hinemosu』を表示させてください。

そもそもウチみたいな弱小ブログだと滅多にブックマークされないので、登録ボタンやユーザー数を表示する必要性は感じてなかったのよね。だけどブックマークのコメント欄に通信文を書かれるコトがあったので、これはチェックした方が良いのかなと思い直しました。

コードは『自分のブログに「↑B」アイコンを表示する』と『自分のブログに「○○users」を表示』のMovable Type版をWordPress用にアレンジしました。実際にはこんな感じです。

<a href="http://b.hatena.ne.jp/append?<?php the_permalink() ?>"><img src="http://d.hatena.ne.jp/images/b_entry.gif" title="このエントリをはてなブックマークに登録" alt="このエントリをはてなブックマークに登録" width="16" height="12" /></a>
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>"><img src="http://b.hatena.ne.jp/entry/image/<?php the_permalink() ?/>" alt="このエントリのはてなブックマーク数" title="このエントリのはてなブックマーク数" /></a>

これを日付表示の横あたりに書き加えました。

deliciousやライブドアクリップのアイコンも付けようかと思ったんだけど、deliciousの被ブックマーク数を画像で取る方法がうまく行かないのと、なんかゴチャゴチャするのがイヤだったので軽やかに諦めたよ。そのうち気が向いたら対応を考えてみます。