「test」タグアーカイブ

wordpressのキャッシュを制御できるプラグイン「WP Super Cache」の設定項目解説

wordpressのキャッシュ系プラグインは数多ありますが、今回は「WP Super Cache」を導入してみました。設定について調べたい所ですが、探せど探せど詳しい説明が無いので軽くメモっておきます。

キャッシュ系プラグインは便利な反面設定を間違えると思わぬ事故に繋がりますので、「推奨」とついているからと全てをオンにするのは得策ではありません。ましてやそれで「何か不具合が出る」や「購入情報が表示される虚弱性がある」というのはちょっとどうなんでしょう。

簡易、詳細、プリロードだけを書いていくので、それら以外の設定を知りたい人は今回はごめんなさいという事で。

簡易

設定に必要な最初のページです。 キャッシングを使用するかどうか、そして生成されたキャッシュが正しく動作しているかを確認する事ができます。

詳細

動作に関しての細かな設定をここで行います。

キャッシング

ヒットしたページをキャッシュし、素早くアクセスさせる。 (推奨)

ページにアクセスした時点で有効期限が切れている、もしくはキャッシュが無い場合はキャッシュを作成し、利用者に見せます。

このチェックをオフにしていると、一番新しいキャッシュを見せます。有効期限が切れている場合、キャッシュは利用せず通常の出力結果を見せるようになります。

キャッシュファイルの提供に mod_rewrite を利用する。 (推奨)

mod_rewriteはリダイレクト機能ですが、おそらくキャッシュした静的ファイルへとクライアント誘導するのだと思われます。サーバーによっては利用できない場合があります。

キャッシュファイルの提供に PHP を利用する。

キャッシュファイルをphp関数によって出力するようになるようです。

レガシーなページキャッシング。

レガシーというのは一般的なファイルキャッシュという意味でしょうか? この中では一番遅いようです。

その他

ページを圧縮し、訪問者により速くページを供給する。 (推奨)

ファイルを圧縮(gzip)?して送信しているようですね。特に理由も無い限りはONにしたほうが良いでしょう。ソースに「<!– Compression = gzip –>」と出るので間違いないかと思われます。

304 Not Modified ブラウザーキャッシング。最後にリクエストされてから変更がないことを示す。 (推奨)

そのページが更新されていない事を伝えます。キャッシュファイルで、元ファイルは更新されていない事を証明するんですかね?

既知のユーザー向けにはページをキャッシュしない。 (推奨)

wordpressにユーザー登録されている(ログインしている)ユーザーにはキャッシュページを表示しないようにします。

Don’t cache pages with GET parameters. (?x=y at the end of a url)

URLにパラメータを含めてきた人へのキャッシュもするかどうか。普通はオフで良いと思います。パラメータを使ってwordpressサイトを作る人は導入を考えても良いかもしれません。検索などのページもキャッシュするのかな?(未検証)

Make known users anonymous so they’re served supercached static files.

ログインしたユーザーがページを表示するとキャッシュを作成します。

オフの場合「<!– Page not cached by WP Super Cache. Check your settings page. Not caching requests by known users. (See Advanced Settings page) –>」
オンの場合「<!– Cached page generated by WP-Super-Cache on 2014-03-08 00:00:06 –>」

お好みでどうぞ。

キャッシュリビルド。新しいファイルの生成中にこのサイトの登録ユーザー以外のユーザーに supercache のファイルを供給する。 (推奨)

ちょっと意味がよくわからない所ですが、キャッシュを再構築してる間は、supercacheという別途静的ファイルを供給するようにする、という所でしょうか。もしくは通常ページを見せる、かな?推奨とあるのでチェックをつけてた方が良いのかな。謎翻訳すぎて、わざわざ原文を覗いてみましたがわからなかったですぅ。誰か教えて。

追記1:おそらく後述するプリロードしたファイルをユーザに見せ、キャッシュ生成→記事表示ではなく、事前キャッシュ→記事表示&キャッシュ生成とするものだと思われます。

Proudly tell the world your server is Stephen Fry proof! (places a message in your blog’s footer)

フッターに誇らしげなメッセージを表示しちゃうぜ! という事らしいです。感謝の気持ちにどうぞ?

詳細

Enable dynamic caching. Requires PHP or legacy caching. (See FAQ or wp-super-cache/plugins/dynamic-cache-test.php for example code.)

phpもしくはレガシーキャッシュのための動的キャッシュを行うらしいです。FAQもしくはサンプルコードを見ろ、との事のようですね。キャッシュする関数や記述などを細かく設定する事ができるようです。細かなカスタマイズしたい人にはこれは嬉しいですね。

Mobile device support. (External plugin or theme required. See the FAQ for further details.)

携帯デバイスのサポートをするそうです。私のサイトは基本的にレスポンシブデザインで、携帯電話(ガラケー)のサポートは鼻から度外視なので切っています。

Remove UTF8/blog charset support from .htaccess file. Only necessary if you see odd characters or punctuation looks incorrect. Requires rewrite rules update.

.htaccessファイルからUTF8 charsetサポート記述を削除します。

Clear all cache files when a post or page is published or updated.

ページもしくは記事が、公開もしくは更新された場合に全てのキャッシュを開放(削除)します。

追加のホームページチェック。(非常にまれにホームページのキャッシングを止めることがあります) (推奨)

またもや謎翻訳。原文は「Extra homepage checks. (Very occasionally stops homepage caching) (Recommended)」です。余分なホームページチェック・・・という事でしょうか。よくわからないです。推測になるのですが、キャッシュを作成するときに、別ページのキャッシュも作成するのでしょうか。推奨とありますし。

コメントが投稿されたときに該当のページだけリフレッシュする。

これがオフだと、コメントされてもキャッシュが更新されないようです。何故オン推奨じゃないのでしょうか。

 

キャッシュされた最新のページを一覧表示する。

キャッシュファイルを一覧で見る事ができるようです。設定を変更した場合などに動作確認がしやすくていいですね。

・・・しかしもうちょっと情報が欲しいかもw

荒削りなファイルロック。おそらく必要ないですが、使用しているサーバーが非力な場合には役に立つかもしれません。警告 ! まれにですがサーバーを止めてしまうことがあります !

キャッシュファイルをロックするんですかね。非力なサーバーで、同じキャッシュファイルを同時に生成しようとした場合などのエラーを回避できるのだと思います。サーバーを止めてしまうという文章ですが・・・。

遅延 init。WordPress が読み込んだ後にキャッシュされたファイルを表示します。レガシーモードで有益です。

wordpress自体の処理が終わってからキャッシュファイルを読み込むという事ですかね。先のキャッシュカスタマイズと絡めて使うのかもしれません。

キャッシュファイルの保存にオブジェクトキャッシュを使用する。 (実験的) DO NOT CACHE PAGE secret key: hogehoge

ファイルキャッシュではなくオブジェクトキャッシュを利用する設定ですね。キャッシュをしないページにはシークレットキーを表示しろとの事です。

有効時間とガーベージコレクション

Cache Timeout

キャッシュの有効時間を設定します。この時間の間はそのキャッシュを利用し続けます。ページ更新頻度と相談して設定してください。秒設定ですね。一時間=3600 一日=86400 一週間=604800 参考にどうぞ。

Scheduler

キャッシュを削除するタイマーを設定するスケジューラ。キャッシュファイルが有効期限を過ぎると、すぐに削除されるわけではなくこのタイマーによって捨てられます。例えば大規模なサイトだと60秒でキャッシュを設定しつつ、90秒でこのタイマーを設定する必要があるようです。デフォルトでは一週間周期で削除するようですね。サイト規模に合わせて決めて下さい。また、キャッシュファイルを削除しない場合はタイマーを0秒に合わせて下さい、とのことです。

スケジュールの予定時間も表示してくれるのでとっても親切。

受け付けるファイル名と除外する URI

チェックをつけた項目はキャッシュしません。「検索」は大体毎回内容が異なると思いますのでチェックをつけてて良いかと思います。あとは運用しながら「記事を書いても○○ページは更新されないな」といった場合につけていけばいいかなと思います。

フロントページとホームページはちょっと違うので注意が必要です。フロントページとは「hoghog.com/」で表示される場所ですね。ホームページは「hoghog.com/」と「記事一覧」が表示されるページです。大抵の場合は記事一覧とhoghog.com/は同一なので問題ありませんが、固定ページをトップに表示していたりする場合は注意が必要ですよ。

あとはファイルパターンですね。サイトによって細かく設定する場合もあるかもしれません。

上で指定した除外文字列にマッチしてもキャッシュするファイル名をここに追加してください。

地味に重要です。これらをキャッシュしないけれど、この条件に当てはまるこれらはキャッシュを作成する。という場合に設定しますよ。

除外するユーザーエージェント

スマフォ専用のcssなどを用意している場合はこちらでスマフォのユーザーエージェントを設定します。また、googleなどのクローラーがやってきた場合、それらのアクセスでキャッシュを一気に作っては負担が大きいので除外した方が良いでしょう。デフォルトではbot類のユーザーエージェントが入っています。

ロックダウン

いきなり大量がアクセスが来た時のための設定のようですね。有無を言わさず静的ファイルを見せるようです。基本的には無効にしていた方が良いかと思われます。

Lockdown | IT用語辞典 | 大塚商会

ダイレクトキャッシュファイル

特定のアドレスだけを指定キャッシュしてしまう設定・・・かな? 巨大なトラフィックが来た時に~とあるので、おそらくページを丸々静的ファイルに書き出しちゃうのだと思われます。

プリロード

予めキャッシュファイルを用意しておき、botなどにはこのキャッシュを見せるようです。「Super Cache の静的ファイル」とあるので、先の「詳細」で設定したユーザー閲覧で生成されたキャッシュとは別のファイルを作っておき、botなどがやってきてキャッシュが作成されてなかった場合はwordpressによる素の表示ではなくこのファイルを見せるようですね。なるほど。

こちらの時間を「一週間」として、通常キャッシュの有効期限を「一日」とかにするのは良い感じに動作するのではないでしょうか。

当然のことながら、単純計算キャッシュファイルを二倍くらい使うのでは無いかと予想します。

プリロードされたキャッシュファイルは 分毎にリフレッシュされます。(0 にすると無効、最小 30 分)

プリロードする場合はこちらを30分以上に設定しましょう。

プリロードモード (レガシーなキャッシュファイルに対してのみガーベージコレクションを実行。推奨)

古いキャッシュファイルを削除する設定、ですかね。ガーページコレクションで設定したスケジュールで削除してくれると思います。

Preload tags, categories and other taxonomies.

タグやカテゴリーなどのタクソノミーページもプリロードします。

ファイルリフレッシュ時にステータスメールを送信する。

メールで状況を報告してくれます。

1秒台を目指せ!ソーシャルボタンを高速に読み込む方法を比較する

どもっち。最近TRPGじゃなくてツールばっかり作ってるaoringoです。サイト調整に奮闘しております。

サイトの速度、気になりますかね? 私は超絶気になりますよ。特にソーシャルボタンです。こいつらが原因で遅くなっているのでは・・・・と常々思っております。

今回はこのソーシャルボタンに手を入れてみましょう。

とはいえ、どれくらい表示速度に違いがあるのか・・・ちょっと確認してみましょうか。

計測に使うのはこちら→【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット | Web担当者Forum

お手軽に、正確に表示できるので好きです。

素のコードを記述する

空のhtmlファイルにソーシャルボタンを読み込んだだけのページを作成し、これを計測します。

読み込むソーシャルボタンはtwitter、はてな、facebook、グーグルプラスです。ついでにアナリティクスコードも読み込んでみます。

ソーシャルボタンテスト

時間はこんな感じです。何度かリロードを繰り返してみたところ、2秒~2.3秒かかるようなイメージです。

次、このページをiframeで読み込みます。

iframeテスト

時間的には変わらず。が、一応副次的な効果はありますよ。

iframe内でJSファイルを読み込むため、描写が途中で止まってしまうという事がありません。

また、iframe内で読み込むため検索エンジンとかにはjsファイルを隠せるという利点もあります。どれくらいの効果があるかはちょっとわかりませんが。

あと少し古いブラウザだと正常に動作しません。

 非同期読み込みにしてみる

Facebookやtwitterなどのソーシャルボタンを高速に読み込む方法まとめ | Cappee Design

こういう記事を見つけました。非同期読み込みをする事によって、ストレスフリーに記事を閲覧するというものです。試してみましょう。

twitterボタンを例にしてみます。

 

<a href="https://twitter.com/share" class="twitter-share-button" data-via="moeringo" data-lang="ja">ツイート</a>
<script>!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');</script>

<a href="https://twitter.com/share" class="twitter-share-button" data-via="moeringo" data-lang="ja">ツイート</a>
<script>!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.async = true;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');</script>

「js.async = true;」を追加で記述するだけです。簡単ですね。

asyncテスト

全体の時間はそこまで変わっていません。あまり効果は無さそうですね。

最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた | ゆっくりと…

一歩進み、この記事の通り非同期スクリプトをまとめられた人が入るようなので使ってみます。

まとめたテスト

時間的には変わりませんが、スクリプトが圧縮されてるので取り回しが楽です。

script.jsを使う

はい、本題です。script.jsを使いましょう。

Javascriptファイルを非同期に読み込む$script.jsを使ってみた | notnil creation weblog

非同期によるファイル読み込みを行うスクリプトファイルです。イエイイエイ!

使い方はとても簡単です。

$script(['foo.js', 'bar.js'], function() {
  // foo.js & bar.js is ready
})

このようにJSファイルを記述するだけで非同期で読み込んでくれます。今回は全てまとめてこのようにしました。詳しい使い方はドキュメントを見てくださいね。

<script type="text/javascript" src="./script.min.js" charset="utf-8"></script>
<script type="text/javascript">
$script(["//platform.twitter.com/widgets.js", "//connect.facebook.net/ja_JP/all.js#xfbml=1","//b.st-hatena.com/js/bookmark_button.js", "//apis.google.com/js/plusone.js", "//www.google-analytics.com/analytics.js"], function () {
ga('create', 'UA-35371593-2', 'ao-works.net');
ga('send', 'pageview');
})
</script>

アナリティクスコードは正常に動作するかわからないのでしばらく検証、別に記述かするようにしたほうがいいかもしれません。また、script.js自体は非同期で読み込んではいけません。正常に動作しなくなります。

script.jsテスト

いきなり早くなりましたね!なんですかねこれ。全ての読み込みが終わり次第jsファイルの読み込みが始まるのでしょうか。実際全ての表示が終わるのは2秒くらいかかりますが、少なくともロードは全て終わってるっぽいです。恐ろしい・・・。

そんなわけで私はscript.jsを選択しようかなと思います。皆さまも色々試してみてくださいね!!

wordpressのパーマリンクを自由に制御する

wordpressライフ楽しんでますか。おーいえー。

今回はパーマリンクについてです。

よくある形ですね。しかし、単純にタイトルをパーマリンクにするだけだけではなく、色々と自動で追加したい、という事があるかもしれませんね。たとえばタグとか、カテゴリとか。

そういう時には少し工夫しないと行けません。

function parm_rep($title) {
if($_POST['post_name'] == "") {

挟む処理

return $title; 
} return $title; }

add_filter('name_save_pre', 'parm_rep');

で、これがそのフィルターです。通常であれば、タイトルがそのままポストネームになりますが、この処理を挟む事で色々と付け加えたり削除したりする事が出来ます。「if($_POST[‘post_name’] == “”)」は、ポストネームが空なら、というif文です。既に設定されていた場合はスルーする感じですね。

function parm_rep($title) {
if($_POST['post_name'] == "") {
return "test"; 
} return $title; }

add_filter('name_save_pre', 'parm_rep');

例えばこうすると、ポストネームが未決定の場合、自動で「test」という文字列が入る、という処理になります。

私の場合はこれを利用してポストネームを英訳してパーマリンクにしたりしてますよ。

 

こんな感じです。先のフィルターを使って、処理でマイクロソフトの翻訳APIを通してパーマリンク化してます。実際便利。

簡単画像公開! 自前のレンタルサーバーに「gyazo」を設置しよう!

gyazo、知ってますか? むっちゃ便利なんですよ、gyazo。

デスクトップに実行ファイルを置き、起動してスクリーンショットを取りたいところをドラッグすると画像がアップロード出来ちゃうのです。その後はtwitterで使うなり、ブログで利用するなり色々と活用できちゃいます。

今見てる自分の画面を他人に見せるのは、以外と手間がかかるものです。それにしては良くそういった場面に出くわすもの。このサービスはそんな私たちにとってまさに救世主ですよ。

ただ、他人のスペースにそのような画像を置くのって怖いし、自分のスペースに置きたいものですよね。gyazoはオープンソースで色々な人が手を入れております。解説記事も沢山ありますので設置は簡単ですよ! さくっと設置して軽快gyazoライフを堪能しましょう!

今回は「さくらインターネット|サーバーホスティングサービス」さんで設置した私の例で紹介しますよ。プランはスタンダードプラン。月々500円で軽快にwordpressも動作するのに初めてのサイト作成にはとってもお勧めですよ!

さくらのレンタルサーバでもGyazoる | おふろめ

ほとんどここを参考にさせてもらいました!ありがとうございます!

記事の通りupload.cgiをダウンロードしてきたら、内容を少し変更します。

File.open("data/#{hash}.png","w").print(imagedata)
↓
File.open("../#{hash}.png","w").print(imagedata)

と変更します。cgiファイルがある場所から一つ上の階層に保存するようになるわけですね。

「upload.cgi」が「cgi_bin」に入っていた場合は画像がこのように保存されていくようになります。好みで変更してください。

cgi.out(headers){"http://gyazo.com/#{hash}.png"} 
↓
cgi.out(headers){"http://hogehoge.com/#{hash}.png"}

あとは帰ってくるアドレスgyazoの物から自分のレンタルスペースのアドレスに変更してやるだけです。簡単!あとはこのcgiファイルをレンタルスペースにアップロードするだけです。ちなみにcgiファイルのパーミッションは700とかにしておきましょう。

[browser-shot width=”450″ url=”http://exe.tyo.ro/2012/02/gyazowingyazowin.html”]

gyazowin+を最新のgyazowinのソースとマージした – tyoro.exe

サーバー側の準備が終わったので次はクライアントを用意しますよ。さくっとzipファイルをダウンロードして解凍しましょう。

iniファイルの設定を変更していきますよ。

[gyazowin+]
upload_server=gyazo.com
upload_path=/upload.cgi

use_ssl=no
ssl_check_cert=yes

use_auth=no
auth_id=
auth_pw=

up_dialog=yes
copy_url=yes
copy_dialog=yes
open_browser=no

use_clipboard_base=no

内容はこんな感じ。うん、シンプル。

「upload_server」はアップロードするサーバーですね。今回の場合は自分のレンタルサーバの物に変更します。

「pload_path」はcgiファイルまでのパスですね。「gyazo」の中の、さらに「cgi_bin」の中に入っていたりしたら「/gyazo/cgi_bin/upload.cgi」とかになりますよ。

残りはとりあえずそのままで大丈夫です。保存してexeファイルを起動して適当な場所でドラッグしてみましょう!

こんな感じでスクリーンショットが取れちゃえばOKです! レッツgyazoライフ! イエーイ!

 

html – testhtml – demo用などの単発htmlファイルテンプレート

スニペット

<!DOCTYPE html>
<html>
 <head>
 <title>test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta name="viewport" content="width=620px" />
 <style type="text/css">
 <!--
 #wrap{
 background-color: gray;
 -->
 </style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript">
 /* jQuery v1.3.2が読み込まれているか確認 */
 $(function(){
 /* 例1 */
 if(jQuery){
 $("#res1").html("<p>jQueryは読込まれています。"+jQuery+"</p>");
 }

/* 例2 */
 if (typeof jQuery!="undefined"){
 $("#res2").html("<p>jQueryは読込まれています。typeof jQuery="+typeof jQuery+"</p>");
 }
 });
 </script>
 </head>
 <body>
 <div id="wrap">
 <div id="res1"></div>
 <div id="res2"></div>
 </div>
 </body>
 </html>

jqueryが動作してるかのチェックも同時に行う。cssもheadに直接ぶちこむ。

php – vdt($test) – デバック用関数

スニペット

/**
 * デバック用関数
 * @param $test
 * @param string $name
 * @return string
 */
function vbt($test, $name = "") {
  $testprint = print_r($test, true);
  ob_start();
  var_dump($test);
  $testbump = ob_get_contents();
  ob_end_clean();
  $text = <<<"EOD"
BUMP

$testbump

*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-

print

$testprint

end*end*end*end*end*end*end*end*end*end*end*end*end*end*end*
EOD;
  $name .= date("YmdHis");
  file_put_contents(dirname(__FILE__) . "/debug/{$name}.txt", $text, FILE_APPEND | LOCK_EX);
  return $text;
}

テーマファイルと同じ位置にあるdebug用ディレクトリにtxt形式で配列の内容を保存する。
特定変数の移り変わりを観測するのにも便利。

デモ

$dtext = vbt($_POST,"text");

第二因子に文字列を入れるとファイル名が文字列+日付時刻となる。変数に代入も可能。

簡単に素敵なキャプチャーを設置できるphpライブラリSecurimageの設置方法

自作フォームを作る必要があったのですが、wordpressプラグインで利用するにはちょっと痒いところに手が届かないところが多く・・・手ごろなものを探していました。

続きを読む 簡単に素敵なキャプチャーを設置できるphpライブラリSecurimageの設置方法

投稿・更新時の$_POSTの中身

備忘録の意味合いが強いですが。

記事投稿時に飛ぶ$_postを少しのぞいてみました。ローカル環境なので実際どういうのが飛んでるのかは不明だけれど、ヒントにはなる。タグ関係の項目が二つあったりと用途がよくわからなかったりもするんだが、これは何なんだろうなあ。

続きを読む 投稿・更新時の$_POSTの中身