私が制作した各種ツール・サイト・サービス群です。思いつくままに色々作りました。TRPGやwordpressが主ですが、私好みの極端な物が多いです。
wordpressのエディタはとても便利ですが、エディタでの編集時と実際に投稿後ではデザインが変わる事が多々あります。
エディタとブログ上で適応されるcssが違うわけですね。というわけで、エディタ画面で利用できるcssを作りましょう。
「editor-style.css」というファイルがテーマフォルダに入ってますか？ 入っているなら既にエディター用のcssが設定済みです。直接このファイルの内容を変更していけばＯＫです。簡単ですね。
さて、入っていない場合です。この場合、cssファイルを追加してもwordpressは認識しません。function.phpにコードを一行追加しましょう。
add_editor_style('editor-style.css');
これでエディターでcssファイルを利用する事が出来ますよ！
wordpressのテーマは多種多様にありますが、ミニマルなものを目指してサムネイルをサポートしていない物があったりします。
そういう場合に、ちゃちゃっとテーマにサムネイル機能を追加しましょう。
テーマのファンクションファイルに下記コードを追加
add_theme_support('post-thumbnails', array('post'));
これでテーマにサムネイル機能を追加する事ができます。
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を利用しているといつの間にか居るこのスマイル。微妙にデザインを辺高するのでテーマを作ってるとちょっといらっときたりします。
実はこれ、プラグインでアクセス解析を行っていると表示される印みたいなものなのです。割と定番なものみたい。
私の場合はjetpackのアクセス解析がこいつをひょうじしていました。
消すには「ダッシュボード→jetpack→wordpress.com統計情報」を選択します。
「統計のスマイル画像を非表示」にチェックをつけて設定保存すればＯＫです。
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 › Imsanity « WordPress Plugins
アップロードする場所によって設定を詳細に変更する事ができます。
「Images uploaded within a Page/Post」記事、固定ページ画面でのアップロードで機能
「Images uploaded directly to the Media Library」メディア画面でのアップロードで機能
「Images uploaded elsewhere (Theme headers, backgrounds, logos, etc)」テーマ編集画面んでのアップロードで機能
「JPG image quality」リサイズする画像のクオリティ
「Convert BMP To JPG」BMPをjpgに変更する
という設定がそれぞれできます。横幅、縦幅をそれぞれ設定すれば、アップロードする画像を自動で判別してリサイズしてくれます。実際便利。
「0」に設定するとリサイズが働かないようです。横幅を指定しなければ縦で引っかからない限りどんなに長い画像でもリサイズしないとか出来るかも知れませんね。
説明には「最近はカメラ等からも記事をアップロードできるけれど、それらは解像度が高いのでこのプラグインは最適です。高解像度の画像を使わないサイトに利用するもので、オリジナルの解像度の画像が必要なサイトには導入しないでください」とあります。
なんと既にアップロード済みの画像も変換をかける事ができます！素晴らしいですね。
赤い警告には「バックアップ等取らないので気をつけて実行して」と書かれています。
画像を検索して一覧を出した後、さらに下に出てくるリサイズイメージボタンでリサイズを開始できます。
リアルタイムでどんどん作ってる・・・。
これでブログの画像に神経を尖らせる必要もなくなりますね。
地味にはまったので備忘録として記しておきます。
通常、wordpressでサイトを作っているとこういう感じになります。通常記事が一覧表示されるわけですね。
しかし、店舗サイトなどの場合、トップページは固定ページ一枚の方が良い場合があります。
トップページ→固定ページ一枚
BLOGページ→記事一覧
というようなイメージですね。
割とはまって、普通にテーマファイルに手を加えそうになりましたｗ
「ダッシュボード＞設定＞表示設定」に入ると、このような画面になります。
ラジオボタンを「固定ページ」の方にします。
トップに表示させたい固定ページを「フロントページ」に投稿記事一覧を表示させたい固定ページに「投稿ページ」を割り当てます。
ちゃんと設定が出来ています。
記事一覧もしっかりと表示されています。やあ、wordpressの通常機能で出来たんですね。よかったよかった。
ブログ、いやサイトにとって画像の量というのはとても気になる物ですよね。記事を作成するたびに、どれだけの画像を詰め込むのかで数時間悩んだこともあります。ええ。
そういうわけで、画像の遅延ロードに着手いたしました。なんでもっと早くやらなかったんでしょ。
色々とみてみたのですが、今回チョイスしたのは「Unveil Lazy Load」です。
[試] 速いは正義！WordPressプラグイン Unveil Lazy Load | 表示速度改善のためのこだわり施策を適用 | 試行錯誤ライフハック
詳しい仕様などは製作者様のページをご覧下さい。
使い方は簡単で、プラグインを導入して有効かするだけです。
2012年に読んだ衝撃的だった本たち » aoringo works
動作のほどはこちらのページをご覧下さい。良い感じです。
どちらもwordpressのプラグインです。「head creaner」はページの<head>部分を整理するプラグイン、「Yoast WordPress SEO」がSEOに関するプラグインです。どちらもとても素敵なプラグインなのです。この二つのプラグインについては、あまりに有名で丁寧に解説しているブログが沢山あるのでそちらにお任せしますよ。
設定によっては競合するというお話です。
「Yoast WordPress SEO」の「Force rewrite titles」のチェックは外すようにしてください。head creanerが動作しなくなってしまいます。
チェックをオンにした場合
コメントタグで「Yoast WordPress SEO」が動作している事がわかりますね。
次にオフにしてみます。
head cleanerのキャッシュファイルであるcssへとリンクしているのが分かります。
解決してみればなあんだという感じですが、かなり焦りましたよ・・。
ちなみに、head cleanerを使った場合とそうでない場合のスコアをみてみます。
使うのは→PageSpeed Insights
head cleanerオフ
head cleanerオン
恐ろしい違いですね・・・。
それでは、皆さんも気をつけてくださいねー
wordpressで記事を書いていて、ついつい書いちゃうあんな言葉、こんな言葉。
そんな愛しくも下品なあの言葉たちを、気兼ねなく書き殴りましょう。
そういうわけで作成しました。指定文字列の一部分を伏せ字にするプラグインです。
こんな感じになります。指定文字列を検知し、記事保存自に一部を「○」で置き換えます。それも一単語ずつ、ランダムに。
えっと、それだけのプラグインです。狙い過ぎですか？ ごめんなさい。どうしても作りたかったんです。
プラグインを有効にしたら指定文字列を設定してあげるだけでＯＫ。あとは普通に記事投稿してください。それで動作するはずです。
・
・
・
・
・
・
・
・
楽しい!!! ✌(‘ω’✌ )三✌(‘ω’)✌三( ✌’ω’)✌