WordPressで「〜」が文字化けしてしまう人へ

前から自分のブログで発生しているのは気がついていたけどめんどくさくて放置してたところ、ナイスソリューションいただいたので勢いエントリー。

管理画面から「〜」と入れてるのに公開するとなぜか「?」に化けてしまうのは、Windowsで起こる文字化け現象でして、一言で言うと文字コードが違うのですよね。その問題自体は認識しつつどうしよっかなーとおもってたところ、うちのブログの管理者でもありますwokamotoさんに対応策をいただきました。

MySQL 4 から 5へ | dogmap.jp
http://dogmap.jp/2009/05/11/mysql-4-%E3%81%8B%E3%82%89-5%E3%81%B8/

ここで紹介されております「Force Wave Dash」というプラグインで、「〜」を入力しても無事文字化けしないようになりました。これはすばらしい!

WordPress Plugins/JSeries ? Force Wave Dash (波ダッシュ矯正)
http://wppluginsj.sourceforge.jp/force-wave-dash/

ちなみにこのプラグインはWordPressの管理画面から直接インストールはできず、1度ZIPファイルとしてダウンロードする必要があります。野良プラグインやテーマはセキュリティが気になる今日この頃ですが、啓蒙者自ら「JSeriesは野良ではないないないないないないないないないない(残響音含む)」とのことで、安心して導入できますね!

ということで「〜」の文字化けで困っていた方はお試しあれ。これで好きなだけ「〜」を使いまくれるぜえ〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

【書評】個人ブログから大規模メディアまで役に立つ「WordPress 高速化&スマート運用 必携ガイド」いただきました

エントリーだいぶおそくなってしまいましたが、うちのブログもサーバーごと管理いただいているをかもとさんが執筆された「WordPress 高速化&スマート運用 必携ガイド」献本いただきました。感謝!

DSC00847

をかもとさんといえばWordPress高速化の道では知る人ぞ知る人であり、これまでのWordCampでも惜しみなく披露してきたWordPress高速化のノウハウをぎゅっと1冊に濃縮されたこの一冊。個人ブログの趣味を超えてWordPress運用する人には欠かせない高速化を知るためにとても大事なノウハウがつまった本にしあがっております。

とはいえ私、WordPressをCMSとしては大変便利に活用しているものの、サーバー面では正直ノウハウがあまりなく、せっかくのVPSも運用をすべてをかもとさんにお任せしているというのが実情。そんな自分にこういう本はちょっとハードル高いかな……、と遠慮してたんですが、「そんな状況の人だからこそ読んで欲しい」との要望いただいて受け取ってみたら、なるほど確かにその意味がわかりました。

というのもこの本がとてもよくできていて、単なる高速ノウハウをまとめただけじゃなく、「高速とはなんぞや」という根本から考える仕組みになっているから。実際の目次を見てもわかるとおり、オープニングとなる第1章ではそもそもWordPressがどういう性質のCMSなのかを理解するところから始まります。そしてパフォーマンスとは何なのかを理解する第2章、プラグインを使う前にWordPessそのものだけで実現できる高速化を紹介する第3章と続き、プラグインを使って高速化を実現するのはやっと4章から。サーバー環境そのものを見直そう、というVPSのお話は5章からと、かなり後半のお話になっています。

DSC00849

高速化というとサーバー変えたりとぶっそうなお話になりがちなんですが、まずはWordPressの仕組みを自分の中で咀嚼し、できる身近なところから高速化を積み上げていく、というのは非常に親しみやすいアプローチ。プラグインとか使わなくてもWordPressの実力だけで高速化もいろいろ図れるんですね、というのはレンタルサーバー使っている個人ブログでもとっても役に立つお話です。

ちょっと前にMTは静的HTMLだから安定していて、WordPressは動的だからアクセス負荷に弱い、なんて対決論が一部界隈で話題になってましたが、それってどっちも一部しか見ていないとても寂しい論争だと思う。最初から多量のアクセスが見込まれるサイト運営ならともかく、個人ブログレベルであればどっちでも心配するような負荷はないし、負荷が高まるほどコンテンツが増えてきたなら静的HTMLのMTだって再構築に時間がかかるというデメリットがある。

最初から大規模アクセス作るときも、安定度だけで見ればMTかもしれないけれど、プラグイン使った機能拡張の魅力とかを考えたらWordPressかもしれなくて、そういうCMSの良さはメリット・デメリットを平等に評価した上で決定すべきところを、一部の要素だけ取り出して優劣つけようというのは実に残念だなあと思う次第であります。

ちょっと話がそれましたが、WordPressというとアクセスに弱いというイメージをもたれがちであるのは事実としてあって、そういう印象論を吹き飛ばすためにもとっても役に立つ1冊。個人レベルでも役に立つ情報はたくさんあって、たとえばどのブログでも当たり前のようにつけているソーシャルボタンだって、やり方によっては高速化に貢献できるんだよ、という話はとっても身近でわかりやすい。

DSC00850

ネットワークやサーバー周りはちょっと距離を置いていたところもあるのですが、仕事でWordPressを扱うようにもなったし、そもそも自分のブログがVPSで動いていることもあるし、ということでこの本読んでいろいろ勉強したい所存。やっぱり自分のVPSくらいは自分で多少メンテできるようにはなりたいと思います。

WordPress 高速化&スマート運用必携ガイド
4844362526
WordPress 高速化&スマート運用必携ガイド

そして改めまして献本ありがとうございました! がんばります!

さくらインターネットがWordPressとMovable Typeのクイックインストール対応

これはGJすぎる!

いつ頃からかは気がつかないのですが、いつの間にかさくらインターネットがWordPressのクイックインストールに対応していました。

クイックインストール|レンタルサーバはさくらインターネット
http://www.sakura.ne.jp/function/cms.html

実際にはWordPressだけではなくてMovable TypeやXOOPSなどもサポート。他のレンタルサーバーではロリポップなどすでに実装されているところもありましたが、月額500円で10GBというコストパフォーマンスの高さが光るさくらインターネットが対応したのは大変ありがたい。

WordCampでも少しお話しましたが、WordPressの魅力であるテーマやプラグインは、管理画面から簡単にインストールできるので、FTPをわざわざ使う必要はない。ただ、今まではどうしてもインストールという最初の段階でFTPの知識が必要になってしまっていたのですが、こうやってかんたんにインストールできる機能があれば、ASPのブログサービスとほぼ同じ感覚でWordPressを始められる。実際にはデータベースのURLを確認したりという作業が発生しますが、すべてブラウザベースで操作を完結できるという点ではグンと楽になりました。

FTPなんてわかる人にはかんたんかもしれないけれど、使ったこともない人には新しい知識を身につけなければ先に進めないのはとても大変。こうやってサーバー側でのクイックインストール対応がどんどん進んでいくと、「自分でブログ始めてみたいけれどどうしていいかわからない」人にとっては大変ありがたい存在になるので、他のレンタルサーバーでもどんどん広まっていくといいなと思います。

WordPressの携帯電話プラグインをがっつりカスタマイズしてKtai Styleに移行

WordPressの携帯電話プラグインについては以前にも書きましたが。

WordPressのモバイルプラグイン再考 – カイ士伝
http://bloggingfrom.tv/wp/2008/06/04/192

WordPressの携帯電話プラグインにはMobile Eye+とKtai Styleがあり、前者はもう開発が止まっているものの外部リンクのGoogle変換や外部画像読み込みが便利。対する後者は絶え間ない更新が続いており、絵文字も豊富で対応機種も幅広いのですが、Mobile Eye+で挙げた特徴は備えていない。なので今はMobile Eye+にパッチを当てて運用していたわけです。

Mobile Eye+ パッチ導入 – カイ士伝
http://bloggingfrom.tv/wp/2008/08/15/344

しかしやんごとなき事情からKtai Styleのある機能が必要になりまして、ちょちょいとヤホーじゃなかったゴーゴルで調べていたらこんなページを発見。

Ktai Style よくある質問と答え
http://wppluginsj.sourceforge.jp/ktai_style/qa/

おお、これ見たら自分がMobile Eye+に求めていたことが全部Ktai Styleでできるじゃないか!

ということで夜中にいきり立ってしまい一通りカスタマイズしてしまいました。

外部画像表示

まずは外部サイトの画像表示。サンプルはAmazonです。以下は該当部分の引用。

Amazon の画像をそのまま表示したい

デフォルトでは、外部サイトの画像はリンクに変換されるため、Amazon アフィリエイトの画像もリンクになります。これを画像そのまま表示させるには、image_to-link フックを使います。以下のようなコードを、使用している携帯テーマの functions.php に追加してください (functions.php がなければ作る)。「http://ecx.images-amazon.com/images/」の部分は、実際に挿入される画像 URL にあわせて適宜修正してください。

function ks_keep_amazon_image($replace, $orig, $src) {
	if (preg_match('#^http://ecx.images-amazon.com/images/#', $src)) {
		$replace = $orig;
	}
	return $replace;
}
add_filter('image_to_link/ktai_style.php', 'ks_keep_amazon_image', 10,3);

PHPど素人にはfunctions.phpを作ることの意味もわからなかったのですが、要はテキストファイルに上記コードをそのままコピー、そしてPHPファイルの宣言である <?php?> でこのコードを挟み込み、あとは「functions.php」という名前で保存すればOKです。ファイル保存場所は自分が使っているテンプレートのフォルダの中で、初期設定なら/wp-content/plugins/ktai_style/themes/default/ の中ね。

さらにURLを変更すればほかのサイトも読みこめるとのことなので、こんなかんじでいじってみました。コピペしやすいように <?php つきですよ。

<?php
function ks_keep_amazon_image($replace, $orig, $src) {
if (preg_match(‘#^http://ecx.images-amazon.com/images/#’, $src)) {
$replace = $orig;
}
return $replace;
}
add_filter(‘image_to_link/ktai_style.php’, ‘ks_keep_amazon_image’, 10,3);

function ks_keep_flickr_image($replace, $orig, $src) {
if (preg_match(‘#^http://static.flickr.com/#’, $src)) {
$replace = $orig;
}
return $replace;
}
add_filter(‘image_to_link/ktai_style.php’, ‘ks_keep_flickr_image’, 10,3);

?>

赤字が上のAmazonから変更したところ。プログラミングの知識ないまま見よう見まねでやってみましたが、これでFlickrの画像も無事読み出せました。モバイルで表示したい画像なんてAmazonとよく使う画像共有くらいだろうから、いくつか自分で設定すれば十分まかなえそう。あとはフォト蔵を設定しとこうかな。

外部リンクのGoogle変換

つづいては外部リンクをGoogleに変換する方法です。素材はこちら。

外部サイトへのリンクを通勤ブラウザ等の変換サービス経由にしたい
external_link フックに独自の変換関数を割り当ててリンク先 URL を変更すれば、いきなり変換サービス経由リンクにできます (バージョン 1.00 から利用可能)。もしくは、redir フックで中継ページの文言を変更することも可能です (バージョン 1.20 から利用可能)。以下のようなコードを、利用中テーマの functions.php に書けば、MT4i と似た中継ページにできます。
function ks_sjk_redir($html, $url) {
	$html = '<p>別のサイトへジャンプしようとしています。</p><p>↓クリック<br /><a href="'
	. attribute_escape($url) . '">' . attribute_escape($url) . '</a></p>';
	$sjk_link = 'http://www.sjk.co.jp/c/w.exe?y=' . rawurlencode(preg_replace('|^http://|', '', $url));
	$html .= '<p>上記URLのサイトは携帯電話で正しく表示できないかもしれませんが、下記URLであれば表示できるかもしれません。</p>'
	. '<p>↓クリック<br /><a href="' . $sjk_link . '">' . $sjk_link . '</a>'
	. '</p><hr /><p>前のページへは携帯電話の戻るボタンで戻ってください。</p>';
	return $html;
}
add_filter('redir/ktai_style.php', 'ks_sjk_redir', 10, 2);

すでに functions.php は作成済みなので、その中に上記ソースをペタっと張るだけなのですが、注意点が2つほど。1つは文字コードの問題で、UTF-8で保存してあげないと文字化けします。最初おもいっきりこれにひっかかった……。

もう1つは、上記は通勤ブラウザがサンプルで使われているので、URLをGoogleに変更する必要があること。具体的にはこんなかんじ。

function ks_sjk_redir($html, $url) {
$html = ‘<p>別のサイトへジャンプしようとしています。</p><p>↓クリック<br /><a href=”‘
. attribute_escape($url) . ‘”>’ . attribute_escape($url) . ‘</a></p>’;
$sjk_link = ‘http://www.google.com/gwt/n?_gwt_noimg=1&u=‘ . rawurlencode(preg_replace(‘|^http://|’, ”, $url));
$html .= ‘<p>上記URLのサイトは携帯電話で正しく表示できないかもしれませんが、下記URLであれば表示できるかもしれません。</p>’
. ‘<p>↓クリック<br /><a href=”‘ . $sjk_link . ‘”>’ . $sjk_link . ‘</a>’
. ‘</p><hr /><p>前のページへは携帯電話の戻るボタンで戻ってください。</p>’;
return $html;
}
add_filter(‘redir/ktai_style.php’, ‘ks_sjk_redir’, 10, 2);

これでリンク先がGoogleのモバイル変換になりました。あとはこれを funtcions.php の中にいれればいいだけ。並び順はあまり関係ないっぽいので、一番最後の ?> の前においておけばいいのかな。

ただ1つ課題は、変換の際にURLがうまく認識されないみたいで、/%2F になっちゃうんですよね。これなんとか回避できないかなあ。せっかくMobile Link Discovery設定しているブログでもそれがうまく認識されなくなっちゃうのでここはなんとかしておきたいところ。

しかしまあMobile Link DiscoveryしていたらURLに直接アクセスすれば変換してくれるし、とりあえずやりたいことはやれたのでKtai Styleへの移行を確定。ついでにAdSenseやうごくひともまとめて設定しました。こちらは footer.php のファイルに、モバイルGoogle Adsenseは <!–end paging–> 直下に <hr> を入れてからコピペ、うごく人は最後の </body> の前にコピペすれば設定完了です。おつかれさま!

管理画面一新の「WordPress 2.7」アップデート

小数点第1位が上がったらアップデートしようと放置していたWordPressですが、2.7日本語版が出たことに加え、「もうおれ2.7にしちゃったもんね」というありがたい挑発お言葉をいただいたので、こちらも負けずにがんばってWordPressをバージョンアップしてみました。

WordPress | 日本語
http://ja.wordpress.org/

WordPressのアップデートは今までにも何回か書いていますが、基本は「MySQLバックアップ」「ブログデータのバックアップ」「プラグインを無効化」「新しいファイルを上書き」でOK。バックアップも毎回ちゃんとしていますが、今のところ幸運にも不具合起きていないので割と気軽にアップしちゃってます。

アップデート前に大事なのはやはりバックアップ。特に今回は初めてで勝手もわからないので慎重にならないといけませんしね。

WordPressのアップデートに初挑戦 – カイ士伝
http://bloggingfrom.tv/wp/2008/05/11/179

WordPressのアップデートは基本的に

  • ブログのデータをバックアップ
  • MySQLのデータベースをバックアップ
  • 最新ファイルをアップロード

という3段階

WordPressを2.6にバージョンアップ – カイ士伝
http://bloggingfrom.tv/wp/2008/08/15/338

実際にアップデートした画面がこちら。両側にサイドバーがある3ペイン構成となり、印象がガラっと変わりました。

30AB30A458EB4F1D 203A 30C030C330B730E530DC30FC30C9 2014 WordPress
Uploaded with plasq‘s Skitch!

基本的な機能はあまり変化ないのですが、大きな特徴の1つはブログ投稿画面のカスタマイズ。両サイドの機能はドラッグ&ドロップでぐりぐり動かせちゃうのです。

wp27_01
Uploaded with plasq‘s Skitch!

さらに右側のメニューも開閉できるようになり、視認性が高まりました。

wp27_02
Uploaded with plasq‘s Skitch!

参考までに2.6xの管理画面はこちら。新着が横に大きく表示されてこれはこれで見やすいものの、ほかの情報が一目では確認しにくかった。これはもう好きずきですが、個人的には2.7の画面のほうが見やすいです。

wp27_03
Uploaded with plasq‘s Skitch!

さらに投稿画面も自由自在にカスタマイズ!

wp27_04
Uploaded with plasq‘s Skitch!

試しにAmazonプラグインを一番上に持ってきてみました。こうやって自分の利用頻度の高い機能でカスタマイズできるのは、ブログを書く時の工数を少しでも減らしたい人としてはうれしい限りです。

wp27_05
Uploaded with plasq‘s Skitch!

ただ、Amazonプラグインは検索結果が横に表示されるんで、右サイドバーにはふさわしくないんだけどね……。このあたりは新バージョンでの対応待ち。個人的にはAmazonプラグインは右サイドバーに置きたいなあ。

2.6xで使っていたプラグインも今のところ問題なく動いています。最初Amazonプラグインが動かなくて焦りましたが、いったん無効にしたせいもあるのか、設定したアソシエイトIDがリセットされて米国設定になっていただけで、ちゃんと日本設定にしたら動作しました。愛用しているプラグインが多いだけに、それがきちんと動いているのがうれしい。もちろん携帯電話対応のMobile Eye+、iPhone用のWPtouchもばっちりです。

Mobile Eye+ パッチ導入 – カイ士伝
http://bloggingfrom.tv/wp/2008/08/15/344

iPhoneとiPod touch対応しました – カイ士伝
http://bloggingfrom.tv/wp/2008/08/13/334

前述の通り機能面で大きな変更はいまのところ感じていないですが、管理画面がカスタマイズできるだけで非常に使いやすくなった印象。WordPressはブログを書く人向けの進化が進んでいて楽しいですね。なんかちまたの噂によるととある業界の大物もWordPress導入を検討しているらしく、いろいろ期待が高まるところです。

ちなみに2.7ではカテゴリとタグのCSS周りで不具合が残ってるそうです。詳細は以下エントリを読んでいただくとして、その不具合が気になる人は対策しておいたほうがいいかも。私はよくわからんのでとりあえず導入させていただきました。エントリに書いてある通りPHPで保存してプラグインフォルダにアップロードし、管理画面からプラグインを有効にしてあげるだけでOKですよ。

Yuriko.Net ? WordPress 2.7 のカテゴリー/タグごと CSS 割り当て機能を修正する
http://www.yuriko.net/arc/2008/12/11/fix-post_class/

WordPressのブログ投稿機能の便利さを再認識

今さらだけど勢いで書いちゃうよシリーズ第2弾!

管理画面のエディタ機能が充実しており、最近はエディタソフト「ecto」も使わず管理画面から直接ゴリゴリ書いてた私ですが、難点はテキスト入力エリアがちょいと狭いこと。まあ画面右下をドラッグすればエリアの大きさは変えられるんですが、それを毎回やるのもちょっと面倒でした。

wordpress01

しかし、普段見慣れないボタンをクリックしたら、これ全画面表示できるじゃないのさ!

wordpress02

wp03

これはかなり便利! 圧倒的にテキスト書きやすくなったよ!

んで調子に乗ってまたしてもいろんなアイコンポチポチしてたんだけど、もう1つ便利なアイコン見つけた。WordPressのエディタは改行をPタグに変換してくれるんだけど、URLを貼る時の改行もPタグにしてしまうんでそれを毎回削除してBRに直してたんですよ。

それがこのテキスト貼り付け使ったらそのまま貼れる!

wp04

wp05

いやー、最近WordPressで困ってたのがこの2つだったので、もうかなり満足しまくり。自動保存機能もあるから突然のブラウザクラッシュにもほぼ対応できてるし、ネット環境が安定してたらectoで書くよりWordPressで書いた方が遙かに便利。プラグインでAmazonやFlickrも対応できるしね。いやー、WordPress楽しいわー。

ちなみに今回の画面は先ほどのエントリーにありますSkitchで作りました。キャプチャから編集、アップロードまで一括してできるのでかなり便利ですよー。

Mac用キャプチャソフト「Skitch」がFlickrに対応してる – カイ士伝
http://bloggingfrom.tv/wp/2008/11/23/638

WordPessのAmazonプラグインとFlickrプラグイン導入

 モバイル対応ごときではまだまだなのだよ!

 というわけで今回はさらりとプラグインご紹介。まずはAmazonプラグインですが、WordPressの投稿画面からAmazonリンクが追加できるようになります。

WordPress ? Amazon Reloaded for WordPress ? WordPress Plugins
http://wordpress.org/extend/plugins/amazon-reloaded-for-wordpress/

 今までAmazonリンクはAmazlet使ってたんですが、Amazletで作ったリンクだとWordPressのエディタ画面を「ビジュアル」「HTML」で切り替えたときにリンクが消えてしまう悲しい仕様だったので困ってました。せっかく書いたエントリを間違って「ビジュアル」で開いてしまうと画像もリンクも無くなってしまうため、過去エントリを開いたときがかなり残念なことに・・・・・・。

 その点こっちのプラグインは投稿画面切り替えても問題ないし、投稿画面から遷移せずに使えるのも便利。自分のアソシエイトIDも設定できるし、日本語にも対応してます。自分の場合、ネタフル式の表示方法を採用していて「画像のみ」+「テキストリンク」の2つを設定してるんですが、このどちらも対応してるのがありがたい。

 もう1つのFlickrも投稿画面からFlickrの画像を検索して引用できます。

WordPress ? WordPress Media Flickr ? WordPress Plugins
http://wordpress.org/extend/plugins/wordpress-media-flickr/

 こちらもエディタ画面がビジュアルとHTMLどっちになっていても引用できるので便利。自分の使い方としても、アップロードしたばかりの画像をそのままブログで使うことが多いので、最新のアップロード画像を一覧してくれるこのやり方は便利ですはい。

 ちなみに両プラグインとも同じブログから情報いただきました。

Amazonプラグイン:Amazon Reloaded for WordPress | blog.yuco.net
http://blog.yuco.net/2008/10/amazon_reloaded/

Flickrの写真を自由に配置・投稿する「Wordpress Media Flickr」 | blog.yuco.net
http://blog.yuco.net/2008/10/wordpress_media_flickr/

同じWordPressユーザーが増えると助かりますなあ。WordPressはプラグインが魅力なだけにまだまだこれからもプラグインでブログ強化していきたいと思います。

日本語だいじに

 みんな大好きWordPressカスタマイズのお時間ですよ!

 おしゃれなテンプレートが無料で配布されているWordPress。私が利用しているのもそんなテンプレートの1枚なのですが、海外製であるが故にところどころ表示が英語になっているのが困ってました。やっぱり日本語ブログである以上、表示は日本人に見やすく日本語にしたいですしね。

 で、ずっと困ってたのがブログの日付表記。デフォルトだと「9 月 9th, 2008」みたいな表記になっちゃってとても日本語に見えない。これずっとなおしたいなと思ったまま放置してたんだけど、答えは意外に身近にありました。

 それは管理画面の「一般設定」にあったこのリンク。

WordPress の関数の中には、the_date() や the_time() などのように投稿日時を表示させるものがあります。こういった関数の中にはフォーマット文字列という、日時の表示方法を決める引数を使うことが出来ます。

Formatting Date and Time – WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/Formatting_Date_and_Time

 なんだこれ使えばいいだけじゃないの???

 というわけで上記エントリにありますサンプル

<?php the_date("Y年 n月 j日 l");??>

 を、管理画面の「デザイン」「テーマエディタ」「メインインデックスのテンプレート (index.php)」の中にある

<?php the_time(‘F jS, Y’) ?>?

 と置き換えてみると、無事に日本語で表示されました。やったね! とりあえず php the_timeの表記を探して好きな表記に置き換えてあげるといいと思います。

 と思ったけど追記。 php the_date だと同じ日に複数エントリ書いた場合、古い日付が消えちゃいますね。すべてのエントリに日付残したかったら php the_time のままがいいみたい。

 ちなみにコメント欄の英語表記なんかも以前に直していて、こちらも同様に「デザイン」「テーマエディタ」「メインインデックスのテンプレート (index.php)」の中からコメントに相当する場所を探し出し、1つずつ「comment」「comments」を「コメント」に、「Read more」はURLを記事URLに変えて「記事URL」という見出しにするなどのカスタマイズしてます。Read moreだとURLがパーマリンクでなくなってしまってわかりにくいので。

 ついでに少々脱線カスタマイズですが、画面上部の「HOME」「PROFILE」「ABOUT」あたりもいじってます。ここ、本来はブログのエントリとは別に作成できるWebページが自動で表示されてしまうんですが、あまりTOPにリンクしたくないWebページもあるので、ここの表示を手動に変更。実際には「デザイン」「テーマエディタ」「ヘッダー (header.php)」の中から、

<?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’); ?>?

 という表記を削り、代わりに自分でURLリンクを作って手動で入れてます。こうすれば追加したいページだけ手動でできて、TOPに出したくないWebページは出さなくてすむので便利。ヘッダーに入れてるから全部のページが共通で反映されるのもうれしいところ。

 いやー、WordPressって本当に楽しいですね☆? ちなみにPHPの記述はブログごと異なると思いますので、ご利用される場合はあくまでご参考情報ということで。これはあくまで自分のためメモですからね!

WordPressを2.6にバージョンアップ

お盆休みだというのにブログいじって1日は過ぎていくのです。

というわけで今回はWordPressを最新版の2.6にアップデート。といっても以前に2.5へのアップデートしてるのでそれほど難しいことはないのですが。

WordPressのアップデートに初挑戦 – カイ士伝
http://bloggingfrom.tv/wp/2008/05/11/179

WordPressのアップデートは基本的に

  • ブログのデータをバックアップ
  • MySQLのデータベースをバックアップ
  • 最新ファイルをアップロード

という3段階ですが、今回は先人の助けを借りて、MySQLをもっと簡単にバックアップしてみました。

WordPress2.6 日本語版にアップグレードしてみた。 – くまめがね
http://kuma-kigurumi.breakarea.com/2008/07/17/wordpress-2-6-ja-upgrade/

ここで紹介されているプラグイン「WordPress Database BackUp」を使うと、WordPressのデータベースを簡単にバックアップできます。しかもメールで定期的にバックアップを取るなんてこともできるので、Gmailに毎日データベース送っておく、なんてのもOK。大容量すぎてとても普通には使い切れないGmailの容量が役に立ちそうな気がします。

プラグインがうまく使えない人は、たいていの場合レンタルサーバーにphpMyAdminが用意されていると思いますので、そこからバックアップを取ればいいかと。phpMyAdminでのバックアップの取り方は下記をご覧ください。

小粋空間: MySQL + phpMyAdmin によるバックアップ
http://www.koikikukan.com/archives/2006/06/12-005023.php

ちなみにシステムファイルをアップデートした関係で、私の場合はAutoPagerizeが無効になってしまったのでそれも再設定。とはいえインデックスファイルとかは上書きされないので、直すのはlink-templete.phpの部分だけでOKですが。

WordPressでAutopagerize導入 – カイ士伝
http://bloggingfrom.tv/wp/2008/05/06/177

2.5からなんであまり新しさは感じないんだけど、セキュリティも考えてできるだけ最新版がいいよね、と思っていたら、もう2.6.1が出てるよ・・・・・・orz。まあそれは小数点第1位が上がるまで待とうかな。

iPhoneとiPod touch対応しました

 Mobile Eye+で携帯電話からの閲覧に対応していた本ブログですが、プラグイン使ってiPhoneおよびiPod touchからの閲覧にも対応してみました。

このWPtouchはアイコンでグラフィカルに表示できるので、カスタマイズの手間要らずでゴージャスにしたい方にはオススメです。

WordPress,MovableTypeをiPhone用に変換するまとめ – iPod LOVE
http://ipod.item-get.com/2008/08/wordpressmovabletypeiphone.php

 Mobile Eye+の時も思ったんだけど、WordPressの場合ページを動的に生成してくれるので、全く同じURLでもPCや携帯電話からのアクセスで表示を切り替えられるのがすばらしい。携帯電話で読んでいてうちのブログがリンクされていて、そのリンクがPC用だったときでもちゃんと携帯電話用に表示できるわけで(正確にはちょいと課題あるのですがそこは近日中に直す予定)。

 Movable TypeでもiPhone対応サービスやテンプレート出てたり、携帯電話対応プラグインもあったんだけど、静的がゆえにURLが別になってしまう。PHP化すればいいじゃんというマニアックな話もあるけれど、それほど大量のアクセス気にしなくていい個人ユーザーはとりあえずWordPressがいいんじゃないかなあと改めて思いました。プラグインも導入簡単だしアップデートも楽だしね。

 ちなみにiPhoneとiPod touchではホーム画面にブックマークする機能を自作アイコンに変更する仕組みもあります。

ブログで、テンプレートが反映されてしまい、うまく表示されない場合は、それぞれのテンプレートのindexに対して、 <head>エレメントの中に<link rel=”apple-touch-icon” href=”/XXX.png”/>の様に<link>エレメントを入れて下さい。(/XXX.png はアイコンを置いたパス情報を記述)

Webクリップブックマークアイコンを作成する ? MACお宝鑑定団 blog
http://www.macotakara.jp/blog/index.php?ID=680

 で、今回導入したWPtouchから「themes」「default」のheader.phpを見てみると

<link rel=”apple-touch-icon” href=”<?php bloginfo(‘wpurl’); ?>/wp-content/plugins/wptouch/images/icon-pool/<?php echo bnc_get_title_image(); ?>”/>

 という記述がちゃんと用意されてます。これで表示されるアイコンは「images」「icon-pool」にある「Default.png」のようなので、このファイルを自分のアイコンでそのまま上書きしてみちゃいました。

 ご意見ご要望など含め、iPhoneやiPod touchをお持ちの方は動作の感想いただけると幸いです。

WordPressのスパム対策プラグイン「Akismet」導入

 ケータイ会議2の参加でPVが上がったからか、最近スパムがどんどんひどくなってきました。寝ている間に数十とかトラックバックスパムがつくので、スパム対策プラグイン「Akismet」を導入することに。

Akismet
http://akismet.com/

 導入といっても実はWordPressには最初からAkismetが入っているので、設定を有効にすればいいだけ。ただし、実際に使うにはWordpressのAPI Keyが必要になります。このAPI KeyはWordPress.comでユーザー登録するともらえるんですが、自分のサーバーで運用しているのにわざわざASP版のWordPressに登録しないといけないというのがちょっと納得いかない……。このあたりはOpenIDとかでなんとかしてほしいところですね。細かい登録の手順などは下記ブログをドゾー。

コメントスパム対策Akismet導入方法 ? BirDesign
http://bd.dotted.jp/archives/92/

 しかし導入してみると、スパム削除はいいんだけどちゃんとしたコメントまでスパム行きにされてしまい、復旧作業がかなり大変なことに……。スパムはたいてい英語なので、日本語のトラックバックやコメントはスルーでもいいんだけどなあと思っていたところ、上記ブログからまさにそれを実現するためのエントリを発見。

そんな中、WPの魔術師 ひろまささんより、救済の手が差し伸べられた。

?

wp-content/plugins/akismet/akismet.php 267行目でオッケー。

$comments = $wpdb->get_results("SELECT * FROM $wpdb->comments WHERE comment_approved = 'spam' AND LENGTH(comment_content) <> CHAR_LENGTH(comment_content) ORDER BY comment_date DESC LIMIT 150");

power source* ? WP: (続)Akismet de-spam view Hack
http://bono.s201.xrea.com/2006/11/275-de-spam_view_hack2/

 というわけで、wp-content/plugins/akismet/akismet.php から?comment_approved = ‘spam’の部分を探して AND LENGTH(comment_content) <> CHAR_LENGTH(comment_content)を追記。しかしまだ日本語コメントやスパムが来てないので動作確認できていないのですが、これでうまくいくといいな……。

WordPressのTitle文字化け修正

?ずっと気になりつつ放置していたWordPressのタイトルタグ文字化けを修正しました。

 WordPressのデフォルト設定では、シングルポストのTitleが「ブログ名 >> Blog Archive >>エントリー名 」と表記されるんですが、この「>>」がはてなブックマークなどで文字化けするんですね。

 で、同じ悩みを持ったブログを発見して、そこからソースそのままいただきました。あざーす!

エントリページのタイトル – cameraLady
http://june29.jp/2006/09/13/entry-page-title/

 これでエントリー名・ブログ名の順にできて前よりわかりやすくなったかしら?

WordPressのアップデートに初挑戦

 バージョン古いままほうっておくとセキュリティに問題があるという話を聞き、今のバージョンも「ME2.2.3」と最新バージョンの「2.5.1」に比べて大分数字が開いているので、初のWordPressアップデートに挑戦しました。

 アップデート前に大事なのはやはりバックアップ。特に今回は初めてで勝手もわからないので慎重にならないといけませんしね。

 まずはデータベースをバックアップ。私の使っておりますさくらインターネットはphpMyAdminというツールが用意されているのでバックアップは簡単です。詳細はこちらをドゾー。

小粋空間: MySQL + phpMyAdmin によるバックアップ
http://www.koikikukan.com/archives/2006/06/12-005023.php

 次にWordPressがインストールされているフォルダのバックアップ。FTPソフトで該当のフォルダをまるごとPCにコピーしておきます。

 これでバックアップの準備は完了。念のため管理画面で使用しているプラグインの動作を止めておいた上で、いよいよWordPressの最新版をダウンロードします。

WordPress | 日本語
http://ja.wordpress.org/

 最新版をダウンロードして解凍したら、中身をそのまま今までWordPressをインストールしていたフォルダにアップロード。Googleで探したWordPressのアップロード情報だと、「wp-config.phpを上書きしないように」という注意書きがあったんですが、2.5.1ではwp-config.phpwp-config-sample.phpという名前になっているので、自動で上書きしてしまう心配はないようです。

 アップロードが終わったら管理画面にアクセスすると、データベースをアップデートするとかと聞かれるので、はいと答えれば作業が完了してアップデート完了。これはお手軽だわー。

 ちなみにインデックスファイルなどはアップデートでは上書きされませんが、システムファイルは上書きされるので自分でいじっている人は注意が必要。私の場合はAutopagerizeのためにlink-templete.phpをいじっていたので、以前のエントリの要領で再度rel=”next”を追記しました。以前とは構造が違っているようなので、前のlink-templete.phpをアップロードするだけではエラーがでるのでお気をつけて。

カイ士伝 ? Blog Archive ? WordPressでAutopagerize導入
http://bloggingfrom.tv/wp/2008/05/06/177

 管理画面はかなり一新されましたが、機能面では大きな変更はないみたい。ただ、以前のバージョンでは標準サポートされていなかったタグ機能が搭載されたので、これは結構嬉しいかも。まだエントリ数も少ないので、ちびちびタグも割り当てていきたいと思います。

WordPressでAutopagerize導入

 ゴールデンウィークの宿題第2弾はAutopagerizeに対応してみました。

 Autopagerizeというのは、検索サイトのようにいくつもの項目が複数ページにまたがって表示される場合に、次のページを読み込んでしまい、まるで1枚のページのように見られる仕組み。Twitterの発言がページを途切れず延々と下に続くとか、Google検索結果が果てしなく画面下に続くとか、そんな感じの使い方です。

 使うにはブラウザやPCへの設定が必要なのでちょっと大変なのですが、ハマる人には大絶賛される人気ぶり。自分でも最近自宅のMacに設定して便利に使っています。で、せっかくなので自分のブログもAutopagerize対応にいじってみました。

 自分でも今使っているテンプレートが過去ログ見ても5エントリごとにまとめられてしまうので読みにくかったんですな。MTだと1つのカテゴリ全部読めて便利だったんですが……。テンプレートいじって全エントリ表示にしてもいいんですが、それはそれで1回の読み込みに負担かかるしフルブラウザ環境などには重すぎるので、ここはAutopagerizeで読みたい人だけまとめ読みできればいいかなと。

 前置きはこのあたりににしておいて、Autopagerizeにブログを対応させるにはこの3つの要素が必要です。

埋め込みの形式は以下の通りです
link要素またはa要素でrel=”next” (複数あった場合は、先に現れるものが選ばれます)
classでautopagerize_insert_before (複数あった場合は、先に現れるものが選ばれます)
classでautopagerize_page_element (複数指定可、指定したもの全てが挿入されます)

AutoPagerize0.0.11 – SWDYH
http://d.hatena.ne.jp/swdyh/20070701/1183239979

 1つ1つ説明すると、一番最初のrel=”next”は、次の画面に移動するリンクにつけておき、Autopagerizeの目印にします。2つ目のautopagerize_insert_beforeは、次の画面を読み込む位置を指定(これを挿入した後に次ページ以降が読み込まれて表示される)、3つ目のautopagerize_page_elementはAutopagerizeで読み込む部分がどこからどこまでかを指定しています。

 と、文字で書いても相当わかりにくいのでまずは実践。最初のrel=”next”ですが、WordPress向けの便利な解説がありました。ここは各種ブラウザでのAutopagerize導入方法も紹介されているのでオススメですよ。

WordPress をインストールしたディレクトリの /wp-includes/link-template.php というファイルがナビゲーションリンクのテンプレートになっていますので、この中で定義されている、
425行目付近のprevious_post_link 関数と、
538行目付近のnext_posts_link 関数の部分に
PLAIN TEXT
PHP:
echo ‘<a rel=”next” href=”‘;
の様に追加するだけです。

WordPress サイトの AutoPagerize 対応 – JACO-BASS
http://www.jaco-bass.com/blog/2008/02/for-autopagerize-of-wordpress-site/

 行数を探すのは大変なので、該当のファイルをダウンロードしたらprevious_post_linkとnext_posts_linkを検索。該当する記述付近のaタグに追記しませう。うちはこんなかんじです。

function previous_post_link($format=’? %link’, $link=’%title’, $in_same_cat = false, $excluded_categories = ”) {

if ( is_attachment() )
$post = & get_post($GLOBALS[‘post’]->post_parent);
else
$post = get_previous_post($in_same_cat, $excluded_categories);

if ( !$post )
return;

$title = apply_filters(‘the_title’, $post->post_title, $post);
$string = ‘<a rel=”next” href=”‘.get_permalink($post->ID).'”>’;
$link = str_replace(‘%title’, $title, $link);
$link = $pre . $string . $link . ‘</a>’;

$format = str_replace(‘%link’, $link, $format);

echo $format;
}

 これでrel=”next”は対応できたので残り2つを対応。話の流れ上、3つ目のautopagerize_page_elementを先に設定します。これは前述の通りAutopagerizeの対象となる繰り返し部分を設定しますので、うちではここにいれました。

<div id=”post”>
<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>
<div class=”content autopagerize_page_element“>
<div class=”post” id=”post-<?php the_ID(); ?>”>

 これによって、div class=”content”で括られている部分がAutopagerizeによって繰り返し表示されますよ、ということですね。ちなみに最初はdiv id=”post”に並べていたんですが、これはDOM的によろしくないというご指摘いただきましたので今の形にしました。DOMについては下記をドゾー。

Document Object Model – Wikipedia
http://ja.wikipedia.org/wiki/Document_Object_Model

 そして最期にautopagerize_insert_beforeですが、こんな感じに入れました。

<?php get_sidebar(); ?>

<div class=”autopagerize_insert_before”> </div>

<?php get_footer(); ?>

 要はサイドバーを表示した後に入れる、ということ。これ最初はサイドバーの前に入れていたんですが、画面スクロールした瞬間にサイドバーが消えちゃうんですよ……。サイドバーを表示した後に読み込むようにすると、最初の一画面のみサイドバーを表示し、以降はエントリーだけが続くというきれいな流れに。

 導入はインデックスとアーカイブのみにして、シングルポストはそのままに。シングルはそのエントリーのみを読みたいのだから、ページがだらだら続くのもなんか違うのかなあという判断です。おそらく便利に使えるのはカテゴリや月アーカイブだと思いますが、Autopagerizeをお使いの方はご要望や問題点などありましたらぜひおよせくださいませ。

WordPressでモバイル対応

 ゴールデンウィークの宿題がてらに対応してみました。このブログと同じURLに携帯電話からアクセスすると自動で表示されますよ。

6A14197699Ab2Eaffb368Be1E4E4A452

 導入はここのブログ参考にしました。WordPress仲間はとってもありがたいですね、感謝感謝!

おえかきサイトをWordpressに移行完了 – PINKMAC
http://pinkmac.com/2008/05/01/kinaco-wp/

 インストールはかなり簡単で、上記ブログの説明にもある通り、ダウンロードしたファイルのうち mobile-comments-post.php をWordPressをインストールしたフォルダに、残りのフォルダはそのまま wp-content 内の plugins フォルダに保存。そしてWordPressの管理画面から「プラグイン」で Mobile Eye+ を有効にすればOKです。
wordpress_mobile
Uploaded with plasq‘s Skitch!

 ダウンロードしたら次は設定変更。今度は「各種設定」の中に MobileEye+ が増えているのでそこから画像のオンオフなどをいじれます。リンクしているURLを携帯用に変換する機能なんかもあっていたれりつくせり。

wordpress_mobile_2
Uploaded with plasq‘s Skitch!

 ついでに実験がてらと携帯電話用のAdSenseも入れてみました。これは mobile_eye themes の中に入っているファイルをいじればOK。ただ、インデックスはうまく表示できたんですがが、エントリーページでどうしてもエラーがでてしまう。仕方がないのでエラーの原因である google_set_screen_res(); をオフにしたらうまく表示できました。この文章ってどういう意味があるんだろうか……。