「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

参考リンク：SyntaxHighlighter Evolved ≪ Viper007Bond.com

2010年11月01日

WordPress: カスタムフィールドによるテンプレート切り替え

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

投稿日: 2010年10月28日 / 更新日: 2012年05月09日

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圧縮などの設定が可能です。