jetpackはとても便利ですね。人気記事ウィジェットなんてのもあるのですから。

しかしこのウィジェット、cssがあまりイケてません。画像も小さいんですよね。というわけでカスタマイズしちゃいましょう。

画像の解像度を変更する

人気記事ウィジェットを司ってるのは「top-posts.php」です。「jetpack/modules/widgets/」に入っています。ここで画像の解像度が決定づけられています。

$get_image_options['avatar_size'] = 200;
} else {
$get_image_options['avatar_size'] = 40;

「40」で検索して出た部分を好みの数字に変更します。

CSSを除外する

jetpackに含まれるcssファイル「widget-grid-and-list.css」を直接編集しても見た目を変更する事が出来ますが、jetpackをアップデートしてしまうと、上書きされてしまいます。影響はできるだけ少なくありたいものですね。というわけでこのCSSファイルはそもそもwordpressで読み込まないように除外してしまいましょう。

add_action('wp_print_styles', 'deregister_styles', 100);
function deregister_styles() {
wp_deregister_style('widget-grid-and-list');
}

テーマのfunction.phpに上記コードを追加しましょう。これでcssファイルを読み込まなくなります。あとはテーマファイルの方のstyle.cssの方で見た目をカスタマイズしていきましょう！

googleアナリティクス

googleアナリティクスにIEブラウザの割合円グラフを追加しよう

2014年3月12日 aoringo12

googleアナリティクスではどのブラウザからの訪問が多いのか確認する事ができますが、バージョンまで確認する事はできません。

というわけで見れるようにしちゃいましょう。

左のメニューから、「マイレポート一覧＞新しいマイレポート」を選択します。

空白のキャンパスで、適当な名前をつけて「マイレポートを作成」をクリックします。

自動でウィジェットの追加ウインドウが出てくるので、設定していきます。

標準　　　　　　　　　：円グラフ
次のエングラフの作成　：ユーザー数
グループ分け単位　　　：ブラウザのバージョン
データのフィルタ　　　：表示の絞り込み／ブラウザ／含む／Internet Explorer

あとは名前などを「IEバージョン別グラフ」とかにするといいかなと思います。

自分のブログではIE11の人が多いようで、一安心していますｗ

wordpress

完全保存版この組み合わせで完璧！wordpress高速化プラグインまとめ

2014年3月11日 aoringo12

試行錯誤してきたwordpressの高速化プラグイン。その総括をしようかなと思います。

ああでもない、こうでもないと色々とやってきましたが、ようやく落ち着いたという感じです。

私が関わっているwordpressサイトにはこの組み合わせで運営されておりますよ。

キャッシュ系

その名の通りキャッシュ系プラグイン。これが無いと始まりませんね。

Head Cleaner

WordPress › Head Cleaner « WordPress Plugins

ソース整理といえばこれ。ヘッダー部分のお掃除をしてくれます。jsファイルやcssファイルを圧縮してキャッシュ化しておくことも可能。cssファイルを編集してもその都度新しいcssキャッシュファイルを作成してくれるので他キャッシュ系プラグインの影響でレイアウトが崩れる心配も無し。

本当助かってます。ありがとうございます。ふがふが。

WP Super Cache

WordPress › WP Super Cache « WordPress Plugins

wordpressの出力画面をhtmlに出力してそれを見せちゃうというページキャッシュプラグイン。動的な処理を常時やるようなサイトに向きませんが、このサイトのような普通のブログにはモアベターなプラグインとなります。

キャッシュの有効期限が切れても、切れたキャッシュをユーザーに提供しつつ新しいキャッシュを裏で生成したりと痒いところに手が届きます。設定が豊富で取っつきにくいかも知れませんが、その分細やかな設定が可能です。

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

モバイルモードをオンにすれば、別にスマフォ用のキャッシュを作りそれを見せるようになります→wp super cacheのモバイルモードはスマフォ用のキャッシュファイルも生成してくれる！ » aoringo works

DB Cache Reloaded Fix

WordPress › DB Cache Reloaded Fix « WordPress Plugins

mysqlリクエストをキャッシュするプラグインです。私は検索ページをキャッシュしないようにしているので、そういう時はこいつが働くようになっています。wordpressはmysqlで全ての設定やデータを管理するので、このプラグインはもはや必須と言っていいでしょうね。

WP File Cache

WordPress › WP File Cache « WordPress Plugins

php関数の出力をキャッシュします。これが有ると無いとではかなり動きに差があります。

キャッシュプラグインの組み合わせの最適回答を求めて – aoringo works

DB Cache Reloaded Fix同様、静的キャッシュが動かない所で強力にサポートしてくれます。

001 Prime Strategy Translate Accelerator

WordPress › 001 Prime Strategy Translate Accelerator « WordPress Plugins

wordpressは多言語に対応しており、ページを表示する度にどの言語で表示するべきかをphpにより判定しております。

このプラグインはその部分をキャッシュ化する事で高速化を図りますよ。同様のプラグインはいくつかありますが、このプラグインは閲覧ページ、ログインページ、管理者ページでキャッシュを使うかどうか設定する事が出来ます！！　管理者ページでキャッシュをオンにすると恐ろしい事になるので、私は閲覧ページのみオンにしております。

「MO cache」はもしかするとすさまじい容量を食うかもしれない。 » aoringo works

処理系

wordpressの各種処理を手助けするプラグインです。縁の下の力持ちといった所。

WP Hyper Response

WordPress › WP Hyper Response « WordPress Plugins

phpというのは、普通処理が全て終わってからクライアント側に送信しますが、このプラグインを利用すればphpの処理をリアルタイムでクライアントへと送信するようになります。

結果的に閲覧者はすぐに画面に反応があるのでストレスが減るというわけですね。

サーバーによっては利用できない場合があるので気をつけてくださいね。

画像系

ブログの画像はいつだって頭を悩ませる所ですね。ここでもプラグインは活躍します。

Imsanity

WordPress › Imsanity « WordPress Plugins

アップロードする画像を自動リサイズ！過去の画像もリサイズできるwordpressプラグイン「Imsanity」が素敵 » aoringo works

アップロードする画像を指定の解像度へリサイズしてくれるプラグインです。どんなに巨大な画像をあげようが、これで「1024px」等と設定しておけば、そのサイズになるのです！！ブログの解像度に合わせて設定しておけばなにより強力な速度対策になるでしょう。

過去にアップロードした画像を一括変換する機能もついてます。

EWWW Image Optimizer

アップロードされた画像を圧縮してくれるプラグイン。場合によっては50%以上も容量を抑える事が出来ます。また、アップロードされたpngをjpgに変換したりする機能もあります。至れり尽くせりですね。このプラグインも過去にアップロードした画像を圧縮する事が出来ます。

また、テーマファイルに含まれている画像も圧縮する事が出来るんですよ！！　ワザマエ！

Unveil Lazy Load

WordPress › Unveil Lazy Load « WordPress Plugins

画面に表示されるであろう画像だけを読み込むようにして、下へとスクロールを始めたら画像の読み込みを開始する「遅延ロード」をさせる事ができるプラグインです。

どれだけ写真を大量に載せようが、これでかなり負荷を減らすことが出来ますよ！

Jetpack by WordPress.com

WordPress › Jetpack by WordPress.com « WordPress Plugins

CDN設定って面倒くさいですよね・・・このプラグインを導入することによってボタン一個でCDNを導入する事が出来ます。他にも沢山の便利機能が一個に集約されているので、プラグインの節約にもなります。

まとめ

どうですかね。結構な数のプラグインを導入しています。

高速化といっても色々なプラグインの組み合わせ、設定があるのでとても大変だとは思いますが、是非参考にしてみてくださいね！

雑ネタ

こかげ工房を後継団体発足　「クリエイターズネットワーク」へ統一

2014年3月11日 aoringo12

こかげ工房のサービスをご利用の皆様へ（後継団体発足のご案内） | こかげ工房オフィシャルサイト

こかげ工房引き継ぎの動きは着々と動いているようですね。後継団体ということで名前を「クリエイターズネットワーク」で統一するようです。trpg.netを始めとする様々なサービスを集約する、というようなイメージで良いのでしょうか。

今までの「cre」とはカバーする範囲が違うので、認識をまず改める必要がありますね。

これからが正念場だとは思いますが、とりあえず動いているのが可視化される事がまず重要だと思います。

ツイッターアカウントも開設されたようで、これからの動きも即座にキャッチする事が出来そうです。

クリエイターズネットワーク (cre_ne_jp)さんはTwitterを使っています

沖縄

沖縄でビアガーデン始めます

2014年3月11日 aoringo12

冷やしビアガーデン（挨拶）

沖縄に戻ってきてビアガーデンを始める事になりました。これで無職じゃなくなるぜ。いえい。

中の町ビアガーデン｜沖縄市中の町にあるビアガーデン冷えたオリオンビールで乾杯しましょう！！

その名もズバリ「中の町ビアガーデン」です。沖縄の真ん中くらいにあります。海も見えますよ。サイトでは開店準備の記事を着々とアップしていってます。よろしくよろしくぅ！

wordpress

wp super cacheのモバイルモードはスマフォ用のキャッシュファイルも生成してくれる！

2014年3月10日 aoringo12

なんて便利なんだwp super cache！！

どうもちゃん。まだまだキャッシュプラグインを弄りまくっている私です。

今回気まぐれでwp super cacheのモバイルモードをオンにしてみたのですが、これがなんとモバイル用のキャッシュファイルを作成してくれていたのです！！

モバイル用に少し見た目を変えていたのですが、ちゃんと出来てますね。いやあ凄いっす。

php

google adsenseの広告をPC用とスマフォで振り分ける

2014年3月10日 aoringo12

サイトを運営していると、各閲覧環境である程度の見た目を保証しないといけなくなります。

google adsenseもその一つ。広告収入なんて雀の涙ですが、ある方がやはりやりがいが出ます。そのついでにこうやって記事のネタにもなります。

今回はphpで閲覧者のブラウザを判定してPC用とスマフォ用に振り分けて広告を表示しましょう。

参考にしたのはこちら。
[WP] wp_is_mobile と iPad と WP Super Cache の怖い関係 – @mekemoke

function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android *** Only mobile
'Windows.*Phone', // *** Windows Phone
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser
'webmate' // Other iPhone browser
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

自分でユーザーエージェントをそれぞれ調べるのは大変だったので、大変助かりました。そのままお借りして、こうします。

function googlead() {
if(is_mobile()) { //携帯デバイス
$ad = <<<"EOD"
<div class="googlead">
<!-- aowork mobile -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-6633816946643511"
data-ad-slot="9684763319"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
EOD;
} else {
$ad = <<<"EOD"
<div class="googlead">
<!-- aoringo worksS -->
<ins class="adsbygoogle"
style="display:inline-block;width:468px;height:60px"
data-ad-client="ca-pub-6633816946643511"
data-ad-slot="6565776112"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
EOD;
}

return $ad;
}

これでスマフォとPCで広告表示を変える事が出来ますね。広告以外にも、色々な場所で利用する事がでできるかと思います。

エディタ