WordPressの記事一覧 3ページ目

W3 Total Cache日本語版作成中

WordPressの動作を軽くする、キャッシュ生成プラグイン「W3 Total Cache」(W3TC)の日本語化作業を始めました。

w3tcjp_image

まだ一部ページの翻訳が終わっただけな状況ですが、同様な作業を行う方が現れて不要なバッティングなど起きぬよう、この場を借りまして「翻訳中」宣言を致します。

W3TC日本語化に到る背景や、現在の作業状況などは以下の通りです。

【この記事の続きを読む →】

WordPress: facebookの「いいね」に使われる画像を指定するコード書いた

facebookの「いいね!」ボタンを押したとき、サムネイル画像として使われる画像を指定するWordPress用コードを書いたよ。

「いいね!」ボタン実装の詳細は他を当たってもらうとして、ここではサムネイル画像を指定するプロパティ「og:image」に限って説明します。

コードは個別記事(post)で記述することを前提としているので、インデックスやアーカイブで使用する際は、自分で一工夫して下さい。

【この記事の続きを読む →】

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ユーザーに積極的にオススメします。

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

ぜひ一度お試し下さい。

さくらのVPS、Apacheチューニング

Apacheクックブック 第2版 ―Webサーバ管理者のためのレシピ集

興味のないヒトにはくどいでしょうが、本日も「さくらのVPS|VPS(仮想専用サーバ)はさくらインターネット」にUbuntuでLAMP環境を構築し、その上でWordPressを動かすオハナシです。

なかなか安定運用に持って行けてませんが、http無応答時にコンソールを覗くと、Apacheさんが「Out of memory」を吐きまくっていることに気がつきました。

Out of memoryについて

まず「Out of memory」に付いて調べました。

linuxの初期設定では総メモリ容量(実メモリ+Swap)以上の実効メモリ容量を要求された場合、実際には足りないのに大らかな気持ちで要求を受入れてしまうそうです。

結果として必要なメモリが足りない事態が発生した場合、適当なプロセスをkillしてしまうそうで、これを行うのが「Out Of Memory Killer」ことOOM Killerさんのお仕事で、OOM Killerさんが吐くエラーが「Out of memory」として表示されていたようです。

OOM Killer概要:
Out Of Memory Killerのこと。Linuxのデフォルトの動作では、プロセスがメモリを要求した場合、総メモリ使用量が実メモリ+swap以上であっても、ある程度許可するようになっている。これは、各プロセスが要求したメモリをすべて使うわけではないという経験的な法則により、できるだけ多くのプロセスを起動するためにそのように動作になっているようである。そのため、あるプロセスが確保できたはずのメモリを使おうとし、実際にメモリが足りない場合カーネルが適当なプロセスを選択し、そのプロセスをkillしてしまうことをOut Of Memory Killerという。

引用元:http://yochecks.blogspot.com/2007/04/oom-killer.html

Apacheのチューニング

OOMエラーを理解することにより、Apacheの「なにか」がメモリを浪費しているのでは無いか?というアタリを付けました。

なぜApacheさんがメモリを食いまくっているか?と言う根本的な理由は分からないですが、取りあえずの対策としてApacheの設定をチューニング。

/etc/apache2/apache2.confを開き、mpm_prefork_moduleの設定を以下のように変更しました。

<ifmodule mpm_prefork_module>
    StartServers          5
    MinSpareServers       5
    MaxSpareServers      10
    MaxClients           34
    MaxRequestsPerChild  4000
</ifmodule>

一番大きく変更したのは「MaxClients」の値です。初期値では150になっていましたが、省メモリ環境での運用であることを踏まえ、34に制限してみました。これで良い変化があると良いんだけどな~。

Apacheのチューニングに付いては、『さくらのVPSのその後@2010-10-25 | それでも地球はまわっている』や、『[Slicehost] OOM Killer(Out Of Memory Killer)の対策 – delab』を参考にしています。貴重な情報ありがとうございます。

WordPress: mixiチェックに対応した

mixiでこんなことまでできた!

mixiの新サービス「mixiチェック」に対応しました。

個別記事ページの本文上、日付などが書かれている行の右端に「チェック」と書かれたボタンがあると思います。

このボタンを押すと、mixiでのアナタの「チェックリスト」に、ウチのブログが「チェック」されますので、遠慮せず2万回ぐらい押してみてください。

でもこれ、ぶっちゃけ誰も押してくれない気がするよ…ボタン名の「チェック」も気に入らない。「イイネ」のが意味の通りが良いと思うんだけどなぁ。

WordPress: 『読むための所要時間』を表示するコード書いた

たった一行追加するだけでサイトの滞在時間を13.8%伸ばす方法・・・ – IDEA*IDEA ~ 百式管理人のライフハックブログ」で紹介されていた、『読むための所要時間』を表示するコードをマルチバイト対応してみたよ。

使ってみたいヒトは、下記のコードをテンプレートの適当なところに貼り付けてください。

<?php
$mycontent = $post->post_content; // wordpress users only
$word = mb_strlen(strip_tags($mycontent));
$m = floor($word / 400);
$s = floor($word % 400 / (400 / 60));
$est = ($m == 0 ? '' : $m . '分') . ($s == 0 ? '' : $s . '秒') . 'ぐらい' ;
?>
この記事を読むのに必要な時間の目安: <?php echo $est; ?>

上記コードでは1分間に読める文字数を400と仮定しています。気に入らなかったら、適当に増やしたり減らしたりしてみてください。

分単位で切り上げ表示を行うバージョンも作成しました。こちらの方がそれっぽいかな?

<?php
$mycontent = $post->post_content; // wordpress users only
$word = mb_strlen(strip_tags($mycontent));
$m = floor($word / 400) + 1 ;
$est = $m . '分ぐらい' ;
?>
この記事を読むのに必要な時間の目安: <?php echo $est; ?>

注意点としては、本文中に誤ったHTMLコードがあると、「strip_tags関数」がガッツリタグを削除して「読む時間」がゼロ秒になったりします。「The W3C Markup Validation Service」あたりを利用して、正しいコードを書くように心がけてください。

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;

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

WordPress: コメントあるの?ないの?

WordPressのハナシ。

発端は分からないんだけど、ふと気がつくとコメントの承認待ちが有るのか無いのか分からない変な状態になっていた。

WordPress:承認待ち(1)?

「承認待ち(1)」と表示されるのに、「承認待ちのコメントはありません」ってどういうコト?なにかのキャッシュが腐ってるのかと思ったけど、ブラウザ変えたり環境変えたり1日待っても同じまま。

特段実害があるワケじゃないけど、なんだか気持ち悪くてイヤだなぁ…


と、ここまで書いてからピンと来た!「ゴミ箱」に入ってる記事が原因だ!

先日うっかり書きかけの記事を上げちゃって、その記事が自動でTwitterにポストされちゃって、さらに自動でTwitterコメントが記事に書き込まれたんだけど、そのコメントを処理せずに記事自体をゴミ箱に入れたんだよね。

で、承認待ちのコメントがあるんだけど、ゴミ箱にある記事だから記事一覧には表示されず、と言う状態になってたらしい。

解決策としては、ゴミ箱を空にして該当記事を削除すればオッケーだった。あースッキリした。

WordPress: トラックバック元のタイトルを短く表示する

これは「効く!」Web文章作成&編集術逆引きハンドブック

最近、徐々にトラックバックされることが増えてきたんだけど、その時にトラックバック元の表示が長くなりすぎるコトがあるのが気に入らなかったのよね。

例えば、直近の外部からのトラックバックタイトルは『それでも地球はまわっている ブログ「それでも地球はまわっている」は、こんな内容を扱っています』なんだけど、これをそのままタイトルとして表示すると、長すぎて画面からハミ出てしまうわけです。

そこでちょっと細工して、タイトルが長すぎる場合は 後半を[…]に差し替えて短く表示するようにしてみました。
【この記事の続きを読む →】

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「エラー: データベースに接続できません」をカスタマイズ!

WordPressでデータベースに接続できない場合のエラー表示「エラー: データベースに接続できません」をカスタマイズしてみたよ。

最近、ブログへのアクセスが多く、ちょっと油断すると「エラー: データベースに接続できません」が表示されてしまう次第。キャッシュの設定を変えたり、表示自体を軽くしたりと試行錯誤はしてるけど、ちょっと油断すると落ちてしまいます。ごめんねごめんね~。

さてさて。落ちるのはサーバ側でなんとかするとして、見ている人に「エラー: データベースに接続できません」と表示するだけでは、何が起きているのか意味が通じないだろうし、味気ないことこの上ない。

そんなわけでWordPressのデータベース接続エラー画面をカスタマイズしてみました!

【この記事の続きを読む →】

WordPress: XreaからCoreserverへの移動移行変更引っ越し手順

WordPressレッスンブック 2.8対応―ステップバイステップ形式でマスターできる

WordPressを利用していて、XreaからCoreserverへ移動/移行/引っ越しする際の手順をメモっておくよ。

XreaもCoreserverもサーバアカウント、データベースは作成済みで、且つ移行前後のドメイン名やDB設定は同一であることを仮定しています。要はホントの「サーバ引っ越し」ね。

「XreaからCoreserver」を想定してるけど、「XreaからXrea」や「CoreserverからCoreserver」でも同じ手順で出来ると思うよ。

【この記事の続きを読む →】

WordPress: oEmbedテスト第2弾、flickr編

DSCF2323

WordPressのoEmbedテスト第2弾、今度はflickr編です。上の画像は「http://www.flickr.com/photos/hide10/4208542002/」と一行書いただけ。そうすると画像が勝手にロードされるって寸法さ。

簡単に表示されるのは良いんだけど、画像サイズとかリンクとか表示位置が指定できないので、まだちょっと使いにくいかなー。「設定」の「メディア」で最大サイズは指定できるみたいだけど、これだけじゃオイラには機能不足だ。

閑話休題。ちょっと勘違いしてたんけど、WordPressがスゲエってよりもoEmbedってプロトコルがすごいんだね。oEmbedでサービス側にURLを投げると、埋め込み用のコードを返してくれるみたい。これはニコニコ動画にも対応して欲しいトコロ。

あと、まだ良く分かってないけど、JSONとかXMLで返って来るみたいだから、自分好みに整形することも出来そうな気がするな。WordPressが貼り付けようとするembedタグをフックするプラグインとかできるかな?暇を見て研究してみよう。

WordPress:2.9の新機能、簡単動画埋め込み(oEmbed)を試す

WordPress2.9の新機能、簡単動画埋め込み(oEmbed)を試してみるよ。

上の動画は、ブログエディタ上では「http://www.youtube.com/watch?v=nTDNLUzjkpg」と「http://www.youtube.com/watch?v=dAtVzzxL0lU」の2行が書いてあるだけ。あとはWordPress側で勝手にembedタグを生成してくれます。カッコイー!

とは言え。残念ながらembedタグってXHTML validにならないのよね。自分で生成コードをカスタム出来れば良いんだけどなー。