plug-inの記事一覧 3ページ目

WordPress: コード整形プラグイン SyntaxHighlighter Evolved 導入

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

WordPressの記事中に表示するソースコードを、整形して見やすく表示するプラグイン「SyntaxHighlighter Evolved」を導入しました。

これまでは「iG:Syntax Hiliter 日本語版」を使っていたんだけど、まれにコードの整形に失敗する場合があり、これに嫌気が差して乗り換えることにしました。

「SyntaxHighlighter Evolved」を選択した理由は、ベースに使っているjsが「Google syntaxhighlighter」とメジャーな仕組みなコト、また整形後の見た目の綺麗さ、あとは他ブログでの使用数などを鑑み、「本流」と思われる「SyntaxHighlighter Evolved」を選択しました。

プラグインの導入に難しいことはなく、いつものようにダウンロードして、プラグインフォルダに展開して、有効化するだけ。

使い方も簡単で、コードの前後を[html]~[/html]なんて感じに囲うだけ。

で、実際の表示はこんな感じになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>PHP Code Example</title>
</head>
<body>
	<h1>PHP Code Example</h1>

	<p><?php echo 'Hello World!'; ?></p>

	<p>This line is highlighted.</p>

	<div class="foobar">
		This	is	an
		example	of	smart
		tabs.
	</div>

	<p><a href="http://wordpress.org/">WordPress</a></p>
</body>
</html>

PRE表示にJSでCSSを被せるので、一瞬だけ素のコードが見えるけど、その後は非常に見やすいコードになっていると思います。

当たり前のようにHTML関連文字列は正規化してくれてるし、URLもクリッカブルだし、各種予約後は色つき表示だし、コード上にマウスをポイントするとソースコピペなんかのコマンドアイコンが出てきます。

各種言語にも広く対応しているし、行番号の有り無し、任意行数からのカウント、特定行のハイライト、行折り返しの有無なども簡単に指定可能な優れものです。

もしWordPressを使っていて、コードを綺麗に表示したいなら「SyntaxHighlighter Evolved」をオススメしておきますよ :-P

WordPress: W3 Total Cache(W3TC)の高速化効果がスゴイ

WordPress 3 サイト構築スタイルブック

WordPressを最適化するプラグイン「W3 Total Cache」(W3TC)の高速化効果がスゴイ。

これまでは「WP Super Cache」と言うキャッシュプラグインを使ってたけど、「W3 Total Cache」の先進さに惚れて一発で乗り換えを決めました。

W3Tのスゴさを三行で説明

W3Tのスゴさを三行で説明します。

  • 色々とキャッシュできる
  • コードの最適化も出来る
  • CDNの設定や、ブラウザキャッシュ制御まで出来る

以下ザックリと説明していきます。

色々とキャッシュできる

W3TCでは、一般的な「ページキャッシュ」以外にも、「データベースキャッシュ」や「オブジェクトキャッシュ」にも対応しています。

「データベースキャッシュ」を有効化すると、記事(post)やページ(page)、フィード(feed)の作成時間が短縮されます。

「オブジェクトキャッシュ」を有効化すると、その他の一般的な操作実行時間が短縮されます。

これらを全て有効化することにより、見ているヒトが快適になるだけではなく、サーバのCPU資源やメモリ資源の節約にもなります。

コードの最適化も出来る

コードの最適化(Minify)と言う機能が付いており、WordPressが生成するHTMLコードの最適化や、使用しているJavaScriptファイルの最適化、またブログテーマで使用しているCSSファイルの最適化まで可能になっています。

これにより転送ファイルのサイズや、転送すべきファイル数が削減できるので、WordPressの高速化に繋がります。

実際に当ページではJavaScriptファイルとCSSファイルが最適化された状態で提供されています。興味がある人は、HTMLソースを開いて先頭の3行目、4行目あたりを確認してみて下さい。

CDN設定、ブラウザキャッシュ制御

上記以外にもコンテンツデリバリネットワーク(CDN)の設定や、ブラウザキャッシュ制御のサポート機能まで備えています。

CDNは、大容量のアプリ・音楽・動画などを配信する際に利用する特別なネットワークのコトです。まだ余り一般的ではないと思いますが、Amazon.comが提供するCloudFrontを利用することが可能ですし、自前でCDNサーバを立てることにより、画像などを別サーバに振り分けるなんてコトが可能になります。

ブラウザキャッシュ制御では、Expires headerやSet pragma、Etag付与やgzip圧縮などの設定が可能です。

ktai styleやWP Touchと共存も可能

W3TCは「ktai style」や「WP Touch」などのプラグインと共存することも可能です。

ページキャッシュや最適化設定の詳細ページに「Rejected User Agents」と言う項目があります。

ここに携帯やiPhone/iPadのUAを設定すると、該当機器にはキャッシュしていない通常のページが表示されることになり、結果的に携帯用ページやiPhone用ページを表示することになります。

まとめ

色々と出来るワリに設定が簡単で、しかも高速化効果も抜群です。

一度、W3TCを使いはじめると、WP Super Cacheが過去の遺物に思えるほどで、全てのWordPressユーザーに積極的にオススメします。

現在は英語メニューしかないのが難点ですが、そんなに難しい英語でもないので、チョコチョコと翻訳しながら読めば意味は分かると思います。

ぜひ一度お試し下さい。

Facebookの「いいね!」ボタンを付けてみた

facebook完全活用本

うちのブログにも、Facebookの「いいね!(Like)」ボタンを付けてみました。

本文直下にこんなの →(like_button_image) があると思いますので、Facebookアカウントをお持ちの方は容赦なくクリックして頂けると幸いです。

多分に実験的な雰囲気を醸しだしておりますので、誰も押してくれないと拗ねて廃止するかも知れません。だからみんな秒速2万回ぐらい押しちゃってね!

「いいね!」ボタンの実装は、WordPress用プラグイン「Like」を利用しています。プラグインを有効化するだけボタンが設置できるので、気になるヒトは軽やかにお試ししてみるのもアリかもよ。

WordPress 3.0: Commented entry listの動作不具合修正

WordPress ポケットリファレンス (POCKET REFERENCE)

ブログソフトウェア「WordPress」のバージョンを3.0に上げたら、愛用していたプラグイン「Commented entry list」が動かなくなってしまったので、ソースを修正して対応したよ。

問題点

うちのブログのサイドバーには「最近のコメント」というのが表示されてるんだけど、ここは前述のプラグイン「Commented entry list」が表示している部分なのね。

ところがWordPress本体を3.0にアップデートしたら、最近のコメントとして「No Response」しか表示されなくなってしまいました。

原因調査

さっそく原因を調査したところ、「WordPress3.0リリース&Commented entry listが動かなくなった場合の対処方法。 | ごみおきば」経由で、「WordPress 3.0 RC1 日本語版 リリース ≪ REIMA’s Blog」に到達。

曰く、Commented entry listで「$tablecommentsと$tablepostsにテーブル名が入っていない」のが原因らしい。

解決方法

Commented entry listのソースを修正して、$tablecommentsと$tablepostsに正しい値が入るようにすれば良いみたい。

具体的にはget_recently_commented関数と、get_recently_trackbacked関数の先頭で変数定義を行っているので、この2ブロックを変更するようです。

元ソースはこんな感じ。

function get_recently_commented($limit = 10) {
global $wpdb, $tablecomments, $tableposts;
	:
	:
function get_recently_trackbacked($limit = 10) {
global $wpdb, $tablecomments, $tableposts;

上記2ブロックの関数先頭にある変数定義を、以下のように書き換えます。

function get_recently_commented($limit = 10) {
	global $wpdb;
	$tablecomments = $wpdb->comments;
	$tableposts = $wpdb->posts;
		:
		:
function get_recently_trackbacked($limit = 10) {
	global $wpdb;
	$tablecomments = $wpdb->comments;
	$tableposts = $wpdb->posts;

これで無事にプラグインが正常に動作するようになりました。良かった、良かった。

WP Super CacheとKtai Styleを併用する方法

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

WP Super CacheとKtai Styleを併用する方法をメモっておくよ。

いつものようにブログのリファラーチェックをしていたら「CORESERVERとWP Super CacheとKtai Style」なるサイトからPingが飛んできていることに気がついた。

曰く、「CoreserverでWP Super CacheとKtai Styleを併用するのに苦労した」と言うことらしい。さいわい当ブログ経由で「WPtouchとWP Super Cacheを併用する || 新・ガジェット! gadget!! あーんど Mac!!!」に辿り着き、解決方法を見いだせた模様。

そんな流れの中、ウチのブログでも改めて「WP Super CacheとKtai Styleを併用する方法」をメモっておくね。
【この記事の続きを読む →】

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:

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タグの閉じ忘れを修正しています。

今日の人気記事