WordPress Archive

このblogのコメントをDisqusを使用したものに変更しました。
既存のものはimportしました。

手順としては

1. WordPressのPluginであるDISQUS Comment Systemをダウンロードし、wp-contents/pluginsにインストール。
2. WordPressの管理画面の”Settings” – “DISQUS”にゆく。
3. “Import comments into Disqus”ボタンを押して既存のコメントをDisqusにインポートする（しばらくかかるのでしばし待つ）。

多分これぐらいで、超簡単に導入することができました。
てっきりコメントのインポートがかったるいものだと考えていたのですが、そんなことはなく、もっと早くやっておけばよかったと思いました。

1. それは目標を達成したくないからではないのか？といわれてしまいそうですが [↩]

Webを閲覧するのに個人的に必須なソフトである、AutoPagerizeにトップページを対応させました。

AutoPagerizeは以前ご紹介したことがありますが、自動的に「次のページ」をクリックすることなく、継ぎ足してくれるものです。
cocoa*life – 日々雑感 2008/03/10

AutoPagerizeが導入されているとこのように表示されます。

ごらんいただければわかるように、いちいちクリックして過去のエントリへ行かずにすむので大変楽ちんです。
こんなサイトでは余り対応しても仕方ないところですが、これがGoogleで使えると検索結果をどんどん見ていけます。

AutoPagerizeのインストール

AutoPagerizeを使うためには、まずSafariではGreaseKit、FirefoxではGreaseMonkeyなるアドインを導入します。
GreaseKit – User Scripting for all WebKit applications
Greasemonkey :: Firefox Add-ons

続いてAutoPagerizeをインストールします。
oAutoPagerize – 0x集積蔵（Safari用）
AutoPagerize for Greasemonkey（Firefox用）

Safari用のAutoPagerize（oAutoPagerize）は本体ファイルのoAutoPagerize.jsと設定ファイルの0AutoPagerize.Settings.jsとSITEINFOファイルの0AutoPagerize.SITEINFO.jsのそれぞれをクリックして開けば、自動的にインストールするか聞いてきます。

wp.VicunaのAutoPagerizeの対応

AutoPagerize対応サイトを作るには3つの手続きをおこなう必要があります。

• 各エントリのclassにautopagerize_page_elementを指定。
• 次へのページへのリンクにrel=”next”を加える（本当は前のページへのリンクにrel=”prev”も加えた方がいいとのこと）。
• 継ぎ足される部分に<div class=”autopagerize_insert_before”></div>を追加。

そこでwp.Vicunaでは

• index.php
  　各エントリエントリが始まる<div class=”section entry autopagerize_page_element” id=”entry<?php the_ID(); ?>”> を <div class=”section entry autopagerize_page_element” id=”entry<?php the_ID(); ?>”>に修正。
• functions.php: vicuna_paging_link関数

  if (empty($paged) || $nextpage <= $max_page) {
  echo "$indentText\t<li class=\"older\"><a href=\"";
  next_posts($max_page);
  echo '" rel="next">'. preg_replace('/&amp;([^#])(?![a-z]{1,8};)/', '&amp;#038;$1', $prev_label) ."</a></li>\n";
  }
  

  と修正（この4行目にrel=”next”を加えている）。¹ 

• index.php
  　<?php vicuna_paging_link(’indent=2′) ?> の前に <div class=”autopagerize_insert_before”></div>を挿入。

と修正しました。

1. ソースは合っているのですが、Syntax Highligterでおかしくなっているような気がするので、rel=”next”を追加する場所だけを確認してください。 [↩]

先日サーバを移転してから、少しずつWordPressのテーマであるwp.Vicunaをカスタマイズしています。
ただ一つ問題があって、カスタマイズした内容はいずれ忘れてしまいます。
カスタマイズしているまさにそのときは良いものの、今後wp.Vicunaがアップデートしたとき、もしくは他のテーマに変えるときに、自分が何をカスタマイズしたのかよくわからず、修正が面倒になるという状況に陥ります。

そこで、Mercurialを使ってwp.Vicunaを管理することにしました。

Mercurialがインストールされていれば、そんなにやることはありません。

1. 新しいフォルダを用意し、Mercurialをhg initで初期化。
2. まっさらなwp.Vicunaをそのフォルダにアップロードして、hg commitでコミット。
3. 今まで使っていたwp.Vicunaのフォルダとdiffを取る。diff -r 古いフォルダ 新しいフォルダ > diffファイル名
4. diffファイルを色づけの出来るTextMateなどで眺めながら、修正箇所をちまちまと修正、コミット。
5. WordPressのテーマを新しいフォルダにあるものに切り替え。

3. や4. で必ずしもファイルに出力する必要はありませんが、このように色づけした方が見やすいかと思います。

これで、Mercurialを使って修正過程が見られるため、何をどのような理由で修正したかなど（コメントをきっちり書けば）わかるようになります。

ネタが古い感がありますが、Internet Explorer 6だと右上に「アナログ」という画像が表示されるようにしてあります。

当サイトではこのように表示されます。¹
この画像はIE NetRenderer – Browser Compatibility Check -を使って取得しました。

ネタ元はIE6で閲覧すると。｜CSS HappyLifeです。

CSS Happy Lifeで発表後Javascriptを使用して、埋め込むようにするものも登場しました。
IE6でアクセスしたらページ右上に「アナログ」と表示するJavaScript – The blog of H.Fujimoto

今までWordPressのプラグインを作ったことがなく、 せっかくなので上記のJavascriptを利用して、学習がてらWordPressのプラグインにしてしまうことにしました。

WordPressのプラグイン作り

WordPressのプラグインを作るに当たり、元々付属しているhello.phpを参考にしました。
WordPressのプラグインはおろか、PHPのコーディングをするのが初めてだったので、たった数行だったのに色々とはまりました:-P²

1. プラグイン作りの準備

まず最初にanalogDisp.jsをフォルダに入れます。
今回は、/wp-content/plugins/wp-analogというフォルダに入れました。 

2. PHPのコードの記述

WordPressのプラグイン作りのポイントは、アクションとフィルタです。
SPaiS – Wordpress プラグインの作り方(1)というサイトに詳しく記されています。

この場合、必要なのはブログのヘッダにJavascriptを指し示す、scriptタグを埋め込むことです。
つまり、WordPressがヘッダを作成する際に、scriptタグを埋め込む関数を実行すればよいということになります。
ということで、add_actionを以下のように使用する訳です。 

<?php
/*
Plugin Name: WP-Analog
Plugin URI: http://www.cocoalife.net/wp-analog/
Description: This is the WordPress plugin which shows "アナログ" when a browser is IE 6.
Author: milkcocoa
Version: 1.0
Author URI: http://www.cocoalife.net/
*/

function add_analog_js() {
    echo("\t<script type=\"text/javascript\" src=\"" . get_bloginfo('wpurl') . "/wp-content/plugins/wp-analog/analogDisp.js" . "\"></script>\n");
}

add_action('wp_head', 'add_analog_js');

?>

これで、ヘッダが作成される際に、add_analog_js()という関数が呼び出されるようになります。

add_analog_js()関数ではechoを使って、scriptタグを埋め込みをしています。
get_bloginfo(’wpurl’)でWordPressのSettings – General - WordPress address (URL)という項目で指定されるWordPressのURLを取得しています。
さらに、”.”を用いて文字列を連結しています。

一つはまった？（というほどでもないけれど）のはPHPの言語仕様で、Rubyと同様に一重引用符ではタブ文字を表す\tなどのバックスラッシュ記法が展開されないということです。
ですので、二重引用符を使用します。

さて、これをwp-analog.phpとでもして保存し、先ほどのフォルダにアップロードしましょう。
そしてアクティベートすれば終了です。 

と、かなり丁寧にWordPressのプラグインとPHPについて説明しました（つもりです）。

1. それにしても、タイトルの部分と中身の部分の幅が違って表示されるんですね・・・。 [↩]
2. functionをfuctionと書いていてずっとエラーの原因がわからなかったのは内緒だ。 [↩]

新年明けましておめでとうございます。
昨年は大変お世話になりました。
本年もよろしくお願いいたします。 

さくらインターネットに契約したついでに、移行＋模様替えetc…をしてみました。
まだおかしいところがぼちぼちあると思いますが、少しずつ直していくつもりです。 

こちらはさくらインターネットバージョンとなります。

ロリポップからさくらインターネットへの移行

元々のサーバはロリポップでした。
どのようにして、移行したのかこちらに記していこうと思います。

移行ついでにWordPress 2.7にバージョンアップさせましたが、管理画面の見栄えがとてもよくなっていてびっくりしています。
懸案だった、WordPressのエディタがMac標準のEmacsキーバインドとバッティングする問題（1行上がるのにC-pを使おうとすると、勝手にPostされてしまうとか）が、Visualエディタを使うと大丈夫なのが嬉しいです（もしかして前から？）。

1. さくらインターネットでWordPressのインストール

まず、WordPressをインストールする必要があります。

1. WordPressのファイルの転送 。
2. http://インストールしたWordPressへのURL/wp-admin/install.phpを開き、インストール。
   Database Nameというのがよくわかりませんでしたが、アカウント名でした。
   MySQLはデータベースのアカウントを作って、データベースを作成します。
3. install.phpの削除。 

2. ロリポップでデータベースのエクスポート

まず、ロリポップのデータベースをphpMyAdminにログインしエクスポートします。
いくつかものテーブルがありますが、必要なものだけを選んでエクスポートします。

スパムフィルタのwp_sk2〜というのが大きく容量を食っていたものの、移行には必要はないだろうと判断し、外しました。
あまりにデータが大きすぎる場合（16 MBぐらい？）、インポートができなくなるので注意が必要です。 
wp_optionsテーブルは外さないと、インストールしたあとでログインするとロリポップの方に入ろうとしてしまうのでまずいです。

さらに、この画面で標準以外でチェックをつけるのは

• 構造 – 「DROP TABLE」を追加する
• データ – 完全なINSERT文を作成する
• ファイルで保存する（画面は付け忘れました:-P）

3. さくらインターネットでデータベースのインポート

今度はさくらインターネットのphpMyAdminにログインし、インポートしましょう。
このとき、ファイルが大きすぎるといわれたときはロリポップで一度のエクスポートするテーブルの種類を減らします。

4. 画像ファイルなどの転送

FTP、SFTP、SCPクライアントなどで転送しませう。

5. プラグインのインストール

先ほどデータベースではwp_optionsテーブルはエクスポートしませんでしたので、プラグインの再設定が必要です。

6. テーマの設定

今までのテーマはそれなりにシンプルでよかったのですが、かなり問題点があったので（preタグで囲むと詰まったように表示される）この際変更することにしました。

今回テーマに選んだのは、wp.Vicunaというものです。
標準のテーマでも十分シンプルですてきデザインなのですが、スタイルファイルを変えることで、様々に表示をカスタマイズすることが可能です。
さらに、preタグなどもとても美しく表示されるので最高です。

あとはちまちまと自分が気に入るようにカスタマイズをおこないます。

7. DNSの設定

準備ができたと思ったら、いよいよDNSの設定を変更し、新しいサーバに向くようにしましょう。

P.S.
ついでなので、少し前まで自分の書いたエントリを眺めてみましたが、ついつい忘れてしまう自分にとって大事なことが書いてありました。
最近気持ちが後ろ向きだったので、前向きになりたいものです。

いい加減、blogにソースコードをアップロードしたいなと思って、そのときによく使われているらしいSyntaxHighlighterというプラグインを入れてみました。
WordPress › SyntaxHighlighter « WordPress Plugins

使い方は

<pre name=”code” class=”c++”>
hoge
</pre>

とか書く模様。

template
struct hoge
{
void operator()()
{
piyo();
}
};

ectoと相性が悪いのが玉に瑕。

以前から不思議に思っていたのですが、記事を投稿していた訳ではないのに勝手にpost_idが増殖してしまっていました。

最初は誰かログインしているのか(笑)、はたまたectoのせいなのかなんてことも考えたりしましたが、どうやらWordPressの機能のせいだということがわかりました。

しばた工務店 Weblog» ブログアーカイブ » WordPressでpost_idが増え続ける怪現象

というサイトにも書いてありますが、

1. 下書きを自動保存する機能(2.5から)
2. リビジョン管理機能(2.6から)
3. メディアライブラリー機能(2.5から)

しばた工務店 Weblog» ブログアーカイブ » WordPressでpost_idが増え続ける怪現象

というのが原因のようです。

さっそくそこで紹介されていた、Disable Revision and Autosave pluginsを使うことにしましたが、果たして！？
Exper Chaotic Flow » Blog Archive » Disable Revisions and Autosave plugins

WordPress 2.6にしたところ、どうも至る所でPHPのエラーが出ます。

と思って2.6が原因かと主ったらどうやらコメントとトラックバックをわけるプラグインをついでにアップデートしたのが問題でした。

使っていたのはTrackping Separatorというものです。
trackping_separator [mk's incubator]

どうも最新版の2.0.1にしてから使っていたcomments_only_popup_linkという関数がなくなって（代替案がわからない）エラーが出たり（仕方がないのでcomments_popup_linkという関数に直して使っている）、

Warning: Cannot modify header information – headers already sent by (output started at /wp-content/plugins/trackpings.php:74) in /wp-includes/pluggable.php on line 770

というエラーが出たりします。

後者のエラーはtrackpings.phpの最後に空白行が含まれているからで、それを全部なくすとエラーがなくなります。

おかげでしばらくRSSフィードの方もエラーが出ていたようで、Google Readerなどは更新されていませんでした。

　付箋といえば、最近こんなすてきデザインな付箋を知りました。

Continue reading