phpの開発にはphp stormを使っています。素人なりに色々やっていますが、いかんせん英語なのと高性能すぎてまだ上手く扱えません。よぼよぼ。
プラグインの追加の仕方をメモしておきます。
メニューより「file>setting>plugin」でプラグイン検索メニューを出します。
次に、下部にある「install plugin from disc」からウインドウを出し、プラグインを設置してある場所を探します。
見つけたらOKを押し、プラグイン一覧に該当プラグインが表示されてればこれもＯＫを押します。
リスタートすれば導入完了です！
wordpressのプラグインといえばキャッシュプラグイン。何よりもまずキャッシュ。それほど重要な要素です。こんかいは「Quick Cache」「WP File Cache」「DB Cache Reloaded Fix」「WP Super Cache」の四つのプラグインを利用してどの組み合わせがこのサイトに最適なのかを考えていきます。
「Head Cleaner」「WP Hyper Response」は導入済みとします。
「Head Cleaner」はヘッダーを整理、js/cssを動的出力・キャッシュ・圧縮・結合する事が出来るプラグインです。超お勧めです。→WordPress › Head Cleaner « WordPress Plugins
「WP Hyper Response」はphpの処理が全て終わってから結果を出力するのではなく、処理をしつつ出力もするようになります。こちらもお勧め→WordPress › WP Hyper Response « WordPress Plugins
各種プラグインがどういったものなのか、軽くおさらいしましょう。どのキャッシュプラグインがどういう機能があるのか抑えていないと事故になります。
ページそのものを静的ファイルに出力し、利用者がページを見る場合そのファイルを閲覧する事になります。デフォルトのwordpressでは毎回mysqlに問い合わせてphpが出力・整形を繰り返すので、この部分をスキップしよう。という物ですね。最近有料化しました。→WordPress › Quick Cache (Speed Without Compromise) « WordPress Plugins
quick cache同様の効果、というよりWP Super Cacheから派生したのがQuick Cacheです。設定の内容に違いがあります。→WordPress › WP Super Cache « WordPress Plugins
オブジェクトキャッシュというもので、php関数の結果をキャッシュします。→WordPress › WP File Cache « WordPress Plugins
はmysqlからの出力結果をキャッシュし、mysqlへの問い合わせを減らしてくれます。→WordPress › DB Cache Reloaded Fix « WordPress Plugins
つまりイメージとしては、ページを表示すると記事データを問い合わせの際に「DB Cache Reloaded Fix」を参照し、記事出力の際に「WP File Cache」を参照し、ページ全体の表示に「WP Super Cache・Quick Cache」が参照されるわけですね。それぞれ受け持つ部分が違うわけです。
早速やっていきましょう。利用するクライアントはpale moonです。
生成にかかった時間は「<!– This Quick Cache file was built for ( ao-works.net/you-can-control-cache-wordpress-plugin-wp ) in 0.42555 seconds, on Mar 8th, 2014 at 1:28 am UTC. –>」とのことで、0.4秒ですね。
Quick Cacheによるページキャッシュが動作しているので利用者に影響はありませんね。
こちらも同じです。
mysqlキャッシュは検索などの部分で必要になるので必要だとして、WP File Cacheが無い状態での時間を見てみましょう。
おお、かなり違いがありますね。quick cacheがキャッシュファイルを読み込むとき、php関数のキャッシュが無いので出力を待っているのでしょうか。
「<!– This Quick Cache file was built for ( ao-works.net/you-can-control-cache-wordpress-plugin-wp ) in 4.99642 seconds, on Mar 8th, 2014 at 1:22 am UTC. –>」とソースに表示されています。キャッシュ作成に4秒の時間がかかったようですね。
WP Super Cacheは設定がかなり多いです。設定の詳細については→wordpressのキャッシュを制御できるプラグイン「WP Super Cache」の設定項目解説 » aoringo works
quick cacheとあまり変わりませんね。
こちらも時間的には同じくらい。
変わりませんね。
ちょっと遅いですね・・・。
どちらも性能的には同じくらいのパフォーマンスとなっているようです。WP Super Cacheは設定によっては裏でキャッシュを生成できたりもするので、今回の比較では遅めですがカスタマイズ次第でかなりのパフォーマンスを引き出せるかと思います。
有料でも簡単に設定できるquick cacheか、多岐に渡る詳細な設定が可能なWP Super Cacheか。検討の参考にしてみてくださいね。
wordpressのキャッシュ系プラグインは数多ありますが、今回は「WP Super Cache」を導入してみました。設定について調べたい所ですが、探せど探せど詳しい説明が無いので軽くメモっておきます。
キャッシュ系プラグインは便利な反面設定を間違えると思わぬ事故に繋がりますので、「推奨」とついているからと全てをオンにするのは得策ではありません。ましてやそれで「何か不具合が出る」や「購入情報が表示される虚弱性がある」というのはちょっとどうなんでしょう。
簡易、詳細、プリロードだけを書いていくので、それら以外の設定を知りたい人は今回はごめんなさいという事で。
設定に必要な最初のページです。 キャッシングを使用するかどうか、そして生成されたキャッシュが正しく動作しているかを確認する事ができます。
動作に関しての細かな設定をここで行います。
ページにアクセスした時点で有効期限が切れている、もしくはキャッシュが無い場合はキャッシュを作成し、利用者に見せます。
このチェックをオフにしていると、一番新しいキャッシュを見せます。有効期限が切れている場合、キャッシュは利用せず通常の出力結果を見せるようになります。
mod_rewriteはリダイレクト機能ですが、おそらくキャッシュした静的ファイルへとクライアント誘導するのだと思われます。サーバーによっては利用できない場合があります。
キャッシュファイルをphp関数によって出力するようになるようです。
レガシーというのは一般的なファイルキャッシュという意味でしょうか？ この中では一番遅いようです。
ファイルを圧縮（gzip）？して送信しているようですね。特に理由も無い限りはＯＮにしたほうが良いでしょう。ソースに「<!– Compression = gzip –>」と出るので間違いないかと思われます。
そのページが更新されていない事を伝えます。キャッシュファイルで、元ファイルは更新されていない事を証明するんですかね？
wordpressにユーザー登録されている（ログインしている）ユーザーにはキャッシュページを表示しないようにします。
URLにパラメータを含めてきた人へのキャッシュもするかどうか。普通はオフで良いと思います。パラメータを使ってwordpressサイトを作る人は導入を考えても良いかもしれません。検索などのページもキャッシュするのかな？（未検証）
ログインしたユーザーがページを表示するとキャッシュを作成します。
オフの場合「<!– 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という別途静的ファイルを供給するようにする、という所でしょうか。もしくは通常ページを見せる、かな？推奨とあるのでチェックをつけてた方が良いのかな。謎翻訳すぎて、わざわざ原文を覗いてみましたがわからなかったですぅ。誰か教えて。
追記1：おそらく後述するプリロードしたファイルをユーザに見せ、キャッシュ生成→記事表示ではなく、事前キャッシュ→記事表示＆キャッシュ生成とするものだと思われます。
フッターに誇らしげなメッセージを表示しちゃうぜ！ という事らしいです。感謝の気持ちにどうぞ？
phpもしくはレガシーキャッシュのための動的キャッシュを行うらしいです。FAQもしくはサンプルコードを見ろ、との事のようですね。キャッシュする関数や記述などを細かく設定する事ができるようです。細かなカスタマイズしたい人にはこれは嬉しいですね。
携帯デバイスのサポートをするそうです。私のサイトは基本的にレスポンシブデザインで、携帯電話（ガラケー）のサポートは鼻から度外視なので切っています。
.htaccessファイルからUTF8 charsetサポート記述を削除します。
ページもしくは記事が、公開もしくは更新された場合に全てのキャッシュを開放（削除）します。
またもや謎翻訳。原文は「Extra homepage checks. (Very occasionally stops homepage caching) (Recommended)」です。余分なホームページチェック・・・という事でしょうか。よくわからないです。推測になるのですが、キャッシュを作成するときに、別ページのキャッシュも作成するのでしょうか。推奨とありますし。
これがオフだと、コメントされてもキャッシュが更新されないようです。何故オン推奨じゃないのでしょうか。
キャッシュファイルを一覧で見る事ができるようです。設定を変更した場合などに動作確認がしやすくていいですね。
・・・しかしもうちょっと情報が欲しいかもｗ
キャッシュファイルをロックするんですかね。非力なサーバーで、同じキャッシュファイルを同時に生成しようとした場合などのエラーを回避できるのだと思います。サーバーを止めてしまうという文章ですが・・・。
wordpress自体の処理が終わってからキャッシュファイルを読み込むという事ですかね。先のキャッシュカスタマイズと絡めて使うのかもしれません。
ファイルキャッシュではなくオブジェクトキャッシュを利用する設定ですね。キャッシュをしないページにはシークレットキーを表示しろとの事です。
キャッシュの有効時間を設定します。この時間の間はそのキャッシュを利用し続けます。ページ更新頻度と相談して設定してください。秒設定ですね。一時間＝3600 一日＝86400 一週間＝604800 参考にどうぞ。
キャッシュを削除するタイマーを設定するスケジューラ。キャッシュファイルが有効期限を過ぎると、すぐに削除されるわけではなくこのタイマーによって捨てられます。例えば大規模なサイトだと60秒でキャッシュを設定しつつ、90秒でこのタイマーを設定する必要があるようです。デフォルトでは一週間周期で削除するようですね。サイト規模に合わせて決めて下さい。また、キャッシュファイルを削除しない場合はタイマーを0秒に合わせて下さい、とのことです。
スケジュールの予定時間も表示してくれるのでとっても親切。
チェックをつけた項目はキャッシュしません。「検索」は大体毎回内容が異なると思いますのでチェックをつけてて良いかと思います。あとは運用しながら「記事を書いても○○ページは更新されないな」といった場合につけていけばいいかなと思います。
フロントページとホームページはちょっと違うので注意が必要です。フロントページとは「hoghog.com/」で表示される場所ですね。ホームページは「hoghog.com/」と「記事一覧」が表示されるページです。大抵の場合は記事一覧とhoghog.com/は同一なので問題ありませんが、固定ページをトップに表示していたりする場合は注意が必要ですよ。
あとはファイルパターンですね。サイトによって細かく設定する場合もあるかもしれません。
地味に重要です。これらをキャッシュしないけれど、この条件に当てはまるこれらはキャッシュを作成する。という場合に設定しますよ。
スマフォ専用のcssなどを用意している場合はこちらでスマフォのユーザーエージェントを設定します。また、googleなどのクローラーがやってきた場合、それらのアクセスでキャッシュを一気に作っては負担が大きいので除外した方が良いでしょう。デフォルトではbot類のユーザーエージェントが入っています。
いきなり大量がアクセスが来た時のための設定のようですね。有無を言わさず静的ファイルを見せるようです。基本的には無効にしていた方が良いかと思われます。
特定のアドレスだけを指定キャッシュしてしまう設定・・・かな？ 巨大なトラフィックが来た時に～とあるので、おそらくページを丸々静的ファイルに書き出しちゃうのだと思われます。
予めキャッシュファイルを用意しておき、botなどにはこのキャッシュを見せるようです。「Super Cache の静的ファイル」とあるので、先の「詳細」で設定したユーザー閲覧で生成されたキャッシュとは別のファイルを作っておき、botなどがやってきてキャッシュが作成されてなかった場合はwordpressによる素の表示ではなくこのファイルを見せるようですね。なるほど。
こちらの時間を「一週間」として、通常キャッシュの有効期限を「一日」とかにするのは良い感じに動作するのではないでしょうか。
当然のことながら、単純計算キャッシュファイルを二倍くらい使うのでは無いかと予想します。
プリロードする場合はこちらを30分以上に設定しましょう。
古いキャッシュファイルを削除する設定、ですかね。ガーページコレクションで設定したスケジュールで削除してくれると思います。
タグやカテゴリーなどのタクソノミーページもプリロードします。
メールで状況を報告してくれます。
やっほー！ 楽しいwordpress生活、楽しんでますか？
私はそろそろこのハイテンションキャラ疲れて来ました。四月くらいからはダウナー系でやっていこうと思います。
さて、wordpressの高速化の話題は尽きませんね。オブジェクトキャッシュとかファイルキャッシュとか。キャッシュキャッシュ。もうこれでもかというくらいキャッシュ。どんだけ重いんだwordpress！！ まあいんです。それでも私はwordpressを愛してますから。
さて、前置きは置いておいて、MOファイルですよ。
wordpressは日本の物じゃないですよね。それが日本語で利用できるのはMOファイルのおかげです。英語の文言を表示する前にこいつに問い合わせて、日本語化できれば日本語にして返すわけです。
が、まあ一つ一つの文言毎にこいつを読み出すわけです。もちろん処理もします。ただ文字を読み出すためだけに！！！
これ一つ一つの項目にmoファイルから該当文言と付き合わせて表示しているわけですよ。そりゃあ重くなりますよね。そこで今回の「001 Prime Strategy Translate Accelerator」ですよ！
入手はここから。
MOファイル系のプラグインで有名所は「WordPress › MO Cache « WordPress Plugins」があったりしますが、これは他にもキャッシュ系のプラグインを導入しなければなりません。加えて、私は過去に痛い目をあっております。→「MO cache」はもしかするとすさまじい容量を食うかもしれない。 – aoringo works
ですがこのプラグインは違います。そもそもMOファイルを使わないという選択が出来るのです！ ΩΩΩ＜な、なんだってー！
これがその画面です。私はダッシュボードやログインは普通に翻訳し、サイト部分は翻訳させないようにしています。テーマファイルは私が直接弄り倒しているので翻訳する部分もほぼゼロですからね。
ちゃんとサイト表示の時は上の帯部分が翻訳されずに英語になっているのが確認出来ます（管理人だけが見えるのですがね、これは）
ダッシュボードなどの部分の速度を早くしたければ、設定でキャッシュするようにすると良いと思いますよ！！ 好みでどうぞ。
MO casheは、他のキャッシュ系のプラグインに組み合わせて利用するwordpress高速化プラグインです。プラグイン等の言語ファイルである「.mo」をキャッシュする事により、動作速度を向上させる・・・・そうなのですが、これがなんと4GBにもなってました。
なんですか4Gって。意味分かりません。びっくりですよ。
実際の閲覧では他のキャッシュ系プラグインでまかなえますし、moファイルが動作するのは大抵ダッシュボードくらいです。なので当ブログではMO cacheは停止しました。
むーん。他の人のMO cache利用ではどのような容量になっているのでしょう。少し気になりますね。
[browser-shot width=”450″ url=”http://wordpress.org/plugins/mo-cache/”]
あくまで私の環境では4GBになった、というお話なので参考程度にどうぞ～。
チャオ！ この挨拶に特に意味は無いよ。
wordpressでのブログ執筆はとても楽しいですよね。楽しいんですが、色々な種類の記事をごちゃまぜで書いてる私には困った事も多いんですよ。
wordpressでの記事作成では、完成記事に近いブレビューをみながら編集する「ビジュアル」と、htmlタグを直接いじいじしながらやる「テキスト」の二つの編集モードがありますよね。私はへっぽこ日曜プログラマーなので、両方使ってます。
で、本題のコードハイライトプラグインなのですが。これがもう大変なわけですよ。両方を行ったり来たりしてるとこのコードが変な変換をされてしっちゃかめっちゃか。最終的には文字化けみたいになっちゃったり崩れまくりだったわけです。
それで今回見つけたのが「WP Code Prettify」ですよ。ショートコードではなくpreタグによる記述なので、ビジュアルエディタとテキストエディタを行き来しても影響をありませんよ！わーい。
[browser-shot width=”450″ url=”http://wordpress.org/plugins/wp-code-prettify/”]
<?php if(function_exists('wp_pagenavi')): ?>
<?php wp_pagenavi(); ?>
<?php else : ?>
<div class="navigation">
<div class="alignleft"><?php previous_posts_link(__('Previous page')) ?></div>
<div class="alignright"><?php next_posts_link(__('Next page')) ?></div>
</div>
<?php endif; ?>
ちなみにこんな感じです。うん、良い感じですね！
もしも今後、このプラグインを削除したとしてもpreタグでは残るので最低限の見た目も保証されます！ 安心！！
 |
WordPress › W3 Total Cache « WordPress Plugins Easy Web Performance Optimization (WPO) using caching: browser, page, object, database, minify and c … |
タイトルなが。
W3 Total Cacheはとても便利です。php処理の結果をキャッシュしそれを表示します。アクセスするたびに毎回処理をしていても無駄ですものね。ありがたい存在です。
しかし！! そのキャッシュの内容に、管理者である貴方用の表示が収納されている可能性があります！ 具体的には、
こういうのです。
名称がよくわかりませんが「管理者メニュー」って感じですかね。この画面を表示してすぐに別デバイスで確認すると、管理者メニューが丸見えじゃないですか！！！
そこから中に入ろうとするとパスワード画面ではじかれるわけですが、あまり気持ちのいいものではありません。閲覧する人にとっても使い道のないリンクは邪魔なだけです。
管理者が閲覧したときはキャッシュを保存しないように設定しましょう。
ダッシュボード＞Performance＞Page Cache＞Don’t cache pages for logged in users
これでログインしているユーザはキャッシュされなくなりました。安心！
| CSS3による多層グラデーションを使った背景を作れるjQueryプラグイン・SHARDS – かちびと.net ちょっと面白かったので備忘録。CSS3で多層グラデーションの背景を手軽に作れる、というスクリプト。jQueryに依存します。レイヤーはランダムに組まれるみたいですね。 … |
katibito.netさんで取り上げられていて面白そうだったんで早速飛びつきました。
スクリプトが走ると自動で色づけしてくれるようです。
 |
SHARDS – A jQuery plugin |
公式のdemoはこちら。むっちゃオシャレんてぃです。
$('element').shards(col1,col2,highlight,levels,complexity,lightness,alpha,fullscreen);
これだけで要素をグラデーションかける事ができます。色つきクリスタルを割ったような鮮やかでシャープなグラデ。かっこいい！
要素はそれぞれ
colour 1/カラー１ : rgba array-> [255,255,55,.5] colour 2/カラー2 : rgba array-> [255,255,55,.5] shade colour/グラデカラー : rgba array-> [255,255,55,.5] number of shards/重なる色の数 : integer-> 12 max:100 comlexity/複雑さ（色の変化の多さ的な） : decimal-> .8 max:1 lightness/明るさ : integer-> 2 max:3 alpha/透明度 : decimal-> .8 max:1 fullscreen/フルスクリーン : boolean-> true
こんな感じですか。
色々いじってみたついでにdemoも用意してみました！
グラデーション！ボタンで色々遊べます。動作チェックにでもどうぞ。うん、楽しかった。
記事の横に関連記事一覧を設置してみました。
YARPPというプラグインによる設置で、精度も高く、カスタマイズも簡単なのはとてもありがたいです。
WordPress › Yet Another Related Posts Plugin « WordPress Plugins
プラグインを設置して設定を見ると、
こんな感じで日本語なのも手伝ってとても分かりやすい。カスタマイズをしなくてもリスト表示、サムネイル表示ができてとても助かります。
ただ、やっぱりカスタマイズしたくなるのが人の性分でして、そういう人のためにテンプレートphpを出力してくれる機能まであります。痒いところに手が届きます。
テンプレートは複数種類あり、それを元に自分の好みに変更を加えることが出来ますよ。
<div id="YARPP-posts" class="side-widget">
<p class="widget-title">関連記事</p>
<?php if(have_posts()):
$options = array('thumbnails_heading', 'thumbnails_default', 'no_results');
extract($this->parse_args($args, $options));
if(empty($thumbnails_default))
$thumbnails_default = get_header_image();
//echo esc_url($thumbnails_default); デフォルトサムネイルさん
//
?>
<ul>
<?php while(have_posts()) : the_post(); ?>
<li>
<p><a href="<?php the_permalink() ?>" rel="bookmark">
<?php
if(has_post_thumbnail()) { //サムネイルがあるかどうか探す
the_post_thumbnail('yarppthumb');
} else {
echo '<img width="100" height="100" src="' . esc_url($thumbnails_default) . '" class="attachment-yarppthumb wp-post-image" alt="secondarytile" />';
}
?>
<?php the_title(); ?></a>
<br><?php echo get_the_excerpt(); ?></p>
<!-- (<?php the_score(); ?>)-->
</li>
<?php endwhile; ?>
</ul>
<?php else: ?>
<p>No related posts.</p>
<?php endif; ?>
</div>
これが今回記述したコードです。特に工夫したことは無い素直な感じの物。
サムネイルが設定されてればサムネイルを出力し、されてなかったらデフォルトサムネイルを出力します。
YARPPに設定されているデフォルト画像は
$options = array('thumbnails_heading', 'thumbnails_default', 'no_results');
extract($this->parse_args($args, $options));
if(empty($thumbnails_default))
$thumbnails_default = get_header_image();
echo esc_url($thumbnails_default); デフォルトサムネイルさん
で吐き出す事ができます。今後デフォルト画像は差し替えるかもしれないので、こうしていた方が取り回し楽ですよね。
cssはこんな感じです。
/*サイドウィジェット、関連記事*/
#YARPP-posts li{
margin :15px 0;
height:90px;
overflow:hidden;
}
#YARPP-posts li:after{
content :".";
color :transparent;
clear :both;
}
#YARPP-posts img{
border-radius :5px;
width :90px;
height :90px;
float :left;
margin-right :5px;
}
#YARPP-posts img:hover{
opacity: 0.5;
}
#YARPP-posts li a{
font-size:12px;
font-weight:bold;
}
#YARPP-posts li p{
font-size :10px;
margin :0;
padding :0;
text-align :left;
}
画像を文字が回り込むような感じですかね。オーバーしそうだったら「overflow:hidden;」で非表示にします。
あとはjqueryを使って、関連記事が追いかけてくるようにします。賛否両論だと思いますが、個人的にはこの仕様は好きです。
jQuery(function ($) {
var nav = $('#YARPP-posts'), offset = nav.offset();
$(window).scroll(function () {
if ($(window).scrollTop() > offset.top - 20) {
nav.addClass('fixed');
} else {
nav.removeClass('fixed');
}
});
});
画面上部に関連記事の要素が来ると、cssクラス「fixed」を追加します。
cssファイルに以下を追加
.fixed{
position :fixed;
top :20px;
}
ウインドウの絶対位置に要素を配置するのが「position :fixed;」ですね。「top :20px;」は表示位置となっています。
あとこの一連のjqueryコードとcssコードはwordpressテーマ「wsc7」に元々収録されています。元々はサイドバー全てがスクロールでついてくるのですけれど、関連記事だけ動くように変更してみました。
本当に痒いところに手が届く良いテーマだと思います。
<!–
–>
記事を書くたびにSEOを意識してパーマリンクに英文を入力してる方々。お疲れ様です。いえ、本当に凄いと思います。私にはそこまでマメな事なんてできません。なので自動化しました。ええ、タイトル翻訳してパーマリンクに突っ込みました。石を投げないでください。
この記事のアドレスもそうですよ、「plugin-to-translate-article-titles」と入ってると思います。
SEOを本当に意識するなら、単純な訳文ではなく重要な要素を抜き出してから英単語を入力するなりしたほうがいいとは思います。思いますよ？ けれど大変じゃないですか。少なくとも私は大変なんです。めんどうくさいんです。ごろごろコタツに入りながら「あー記事かこー☆」とかしてるとそんな所まで意識していくなんて無理なんですよ。