gzip圧縮でCSSやJSなどの転送量を減らす方法

「gzip」とは、ファイルを「圧縮」する方法の1つです。圧縮というのは、独自のデータ形式でファイルサイズを一時的に小さくすること。つまり、ウェブページのサーバーとユーザーのパソコン間で通信しているデータサイズを少なくするのが、今回設定する「gzip圧縮」の効果なんです。サイズが小さくなることで、ページの表示がより高速になることはもちろん、転送量が減るので利用しているサーバによっては、料金の節約にも繋がります。

mod_deflateで一括設定する

「mod_deflate」というモジュールを利用して、サーバーからブラウザに転送するデータを圧縮する方法です。.htaccessを編集します。レンタルサーバーを利用している場合は、このモジュールが使用可能かを、確認しておきましょう。

この方法のメリットは、CSSやJavascriptなど、あらゆるファイルを細かい設定なしに自動で圧縮してくれること、要は「これだけ設定しておけば後は勝手にやってくれる」というお手軽さです。対してデメリットは、ブラウザがアクセスする度に、圧縮処理をするため、サーバーのCPU負荷が上がってしまうことです。

.htaccessの記述

.htaccessに下記のコードを追加して下さい。1行目のSetOutputFilter DEFLATEで全てのファイルを有効にし、5行目で画像(.gif、.jpg、.png、.ico)を除外するよう設定しています。2〜4行目は古いブラウザへの対応で、Apache公式サイトのガイド通りとなっています。

SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary

たった数分！ページ高速化のためhtaccessでキャッシュ設定は絶対やっておこう！

キャッシュを有効にする

では早速、キャッシュを設定してみましょう。.htaccessを開いて、下記のコードを追加して下さい。
…驚くかもしれませんが、ごめんなさい。作業はたったこれだけなんです。
次項からは、コードの内容を詳しく解説していきます。

<Files ~ ".(gif|jpe?g|png|ico)$">
	Header set Cache-Control "max-age=2592000, public"
</Files>

IE8,IE9 placeholder対応

//IE8,IE9 placeholder対応
$(function () {
var supportsInputAttribute = function (attr) {
var input = document.createElement('input');
return attr in input;
};
if (!supportsInputAttribute('placeholder')) {
$('[placeholder]').each(function () {
var
input = $(this),
placeholderText = input.attr('placeholder'),
placeholderColor = 'GrayText',
defaultColor = input.css('color');
input.
focus(function () {
if (input.val() === placeholderText) {
input.val('').css('color', defaultColor);
}
}).
blur(function () {
if (input.val() === '') {
input.val(placeholderText).css('color', placeholderColor);
} else if (input.val() === placeholderText) {
input.css('color', placeholderColor);
}
}).
blur().
parents('form').
submit(function () {
if (input.val() === placeholderText) {
input.val('');
}
});
});
}
});

android selectの矢印が消える対策

CSS
.android{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background:url(../img/arrow_down.png) no-repeat;
background-size:20px;
background-position: right center;
padding:0 8px;
}

javascript
androidならclassを追加
$(function () {
var and_ua = navigator.userAgent;
if( and_ua.indexOf("Android") > 0 ) {
$("select").addClass("android");
}
});

FTPでアップロードした画像ファイルをWordPressに認識させるプラグイン、WordPress Flash Uploader。

FTPでアップロードした画像ファイルをWordPressに認識させるプラグイン、WordPress Flash Uploader。

Wordpressの引っ越しなどFTP経由でアップロードしたメディアファイルを認識してwpに登録してくれるプラグイン

Wordpress いつも使うプラグイン

Admin Menu Editor（管理画面左メニュー名変更）
Admin Columns（管理画面一覧の表示内容変更）
All In One SEO Pack（SEO）
Category Order（カテゴリーの並べ替え）
Delete Custom Fields（使わなくなったカスタムフィールドDB上から削除）
Custom Post Type UI（カスタムポスト）
Enable Media Replace（画像置き換え）
Regenerate Thumbnails（メディアサムネイル再生成）
Custom Field Template（カスタムフィールド）
Intuitive Custom Post Order（記事並べ替え）

PDOで“Fatal error: Call to a member function rowCount() on a non-object回避

PDOでselectを実行と同時に数をrowCountでカウントする
もしエントリーが０でないなら・・・
を実行する際、レコードが０だと

Fatal error: Call to a member function rowCount() on a non-object

とエラーが返される問題に関して

$sql =  "SELECT * FROM table";
$resolt = $pdo->query($sql);
$entry=$resolt->rowCount();

if($entry!=0){
}

下記のように修正

$sql =  "SELECT * FROM table";
$resolt = $pdo->query($sql);
if(!empty($resolt)){$entry=$resolt->rowCount();}