【WordPress】.htaccessはサーバー設定のキモ! ~必要な設定をすべて書きました~

refresh calendar 2019-12-03

はい、今日はWordPressを始めるための手順と気をつけるべきポイントまとめの続きです。

ある程度サイト運営をしていれば、サーバーの設定項目の中に、「.htaccess」という文字を見つけたことがあると思います。 実はこれはWordPress向けのファイルではなくて、Appacheというサーバーソフトが使用する設定ファイルとなっています。

あまり慣れていないと、このファイルには手をださない人が多いのですが、これを上手く設定するとWordPressの基礎的な能力を高められるので、可能な限り設定することをオススメします。

なお、エックスサーバーのwpXSpeedはNginxという別のサーバーソフトを使っていますが、この設定は有効です。 また、この編集操作はFTPソフトからのアップロードだけでなく、レンタルサーバーのホームページ上から直接できる場合も多くなっているので、自分のレンタルサーバーはどうなっているかチェックしてみてください。

WordPressでサイトを作成するにあたっての、大まかな流れをまとめてみました。 このページではあくまで大まかな流れについて触れ、必要ある場合には詳細に関するページのリンクを貼…
home kanau.page

.htaccessでできる4つのこと

念の為.htaccessで設定できる主要な機能を紹介します。

  1. アクセス制限
  2. リダイレクト
  3. キャッシュ制御
  4. Gzip 圧縮

大きく分けるとこの4つに分けられると思います。 高速化に関係するのは3と4ですね。 とはいえ.htaccessではセキュリティも向上できるので、今回はそれも含めて、僕が考える必要な設定箇所だけをピックアップして掲載しています。

ただし実際に編集に入る前に絶対に注意してほしいことがあります。 このページで挙げている設定例については問題ありませんが、このファイルは設定を間違えてしまうとWordPressへのアクセスができなくなってしまうことが十分に有り得るファイルです。 そのため編集の前にはしっかりとコピーをとって、いつでも元に戻せるようにしておくことをオススメします。

アクセス制限でセキュリティを高めよう

wp-config.phpへのアクセスを禁止にしよう

wp-config.phpというファイルはWordPressの最重要ファイルです。 このファイルにはデータベースのパスワード等が書かれているため、外部からアクセスされないようにしておく必要があります。

<files wp-config.php>
order allow,deny
deny from all
</files>

XML-RPCを無効にしよう

WordPressにはXML-RPCという外部からWordPressを操作するための仕組みが標準で備わっているんですが、ハッキリ言って使いません。 使わないのにこれが使える状態になっていると、セキュリティ上マズいので、無効にしておきます。

もしXML-RPCを理解していて、明確に使うと決まっている場合にはここはスルーしてください。

<Files xmlrpc.php>
 Order Deny,Allow
 Deny from all
</Files>

wp-comments-post.phpへのアクセスを禁止にしよう

コメント機能を使ってない方は無効にしておきましょう。 スパム対策です。

<Files wp-comments-post.php>
order allow,deny
deny from all
</Files>

キャッシュとGzipでWordPressを高速化しよう

Keep-Aliveを有効にしよう

ブラウザでWEBページにアクセスすると、HTMLに記述されている全てのファイルのダウンロードが発生します。

このKeep-Aliveが無効である場合、そのファイル毎に新たにコネクションを確立させるため、必要なファイルが多いページではその分だけ遅くなってしまいます。

しかし、これを有効にしておけば一度の接続で全てのファイルを取得できるようになります。 これは必ず有効にしておきましょう。

<IfModule mod_headers.c>
    Header set Connection keep-alive
</IfModule>

Etagは無効化しよう

便利なEtagですが、Etagにはデメリットもあってややこしいため、基本的にはOFFでいいです。

<ifModule mod_headers.c>
    Header unset ETag
</ifModule>
FileETag None

MimeTypeの設定でキャッシュ対象を追加しておく

フォントやアイコンについては、事前に明示しておかなければキャッシュされません。

<IfModule mime_module>
    AddType text/cache-manifest .appcache
    AddType image/x-icon .ico
    AddType image/svg+xml .svg
    AddType application/x-font-ttf .ttf
    AddType application/x-font-woff .woff
    AddType application/x-font-woff2 .woff2
    AddType application/x-font-opentype .otf
    AddType application/vnd.ms-fontobject .eot
</IfModule>

Cache-Controlでサーバーサイドのキャッシュを設定しよう

プロクシサーバなどで適切にキャッシュ管理ができるようにする設定です。

<IfModule mod_headers.c>
	# 画像とフォントを対象
    <FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|woff2|otf|eot)$">
		# publicで期間は7日
        Header set Cache-Control "max-age=604800, public"
    </FilesMatch>
    # プロキシサーバーが間違ったコンテンツを配布しないようにする
    Header append Vary Accept-Encoding env=!dont-vary
</IfModule>

Expiresでクライアントサイドのキャッシュを設定しよう

ここでのキャッシュはユーザー側のブラウザに関する設定です。 2回目以降のアクセスで無駄な通信をしないですむようになるため、その分だけアクセスが速く完了します。

各設定期間については僕の使っている設定値なので、自由に変更してもらって構いません。

<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"

  ExpiresByType text/html "access plus 30 minutes"
  ExpiresByType text/css "access plus 1 weeks"
  ExpiresByType text/js "access plus 1 weeks"
  ExpiresByType text/javascript "access plus 1 weeks"

  ExpiresByType image/gif "access plus 1 weeks"
  ExpiresByType image/jpeg "access plus 1 weeks"
  ExpiresByType image/png "access plus 1 weeks"
  ExpiresByType image/svg+xml "access plus 1 weeksr"
  ExpiresByType image/webp "access plus 1 weeks"
  ExpiresByType image/x-icon "access plus 1 weeks"

  ExpiresByType application/pdf "access plus 1 weeks"
  ExpiresByType application/javascript "access plus 1 weeks"
  ExpiresByType application/x-javascript "access plus 1 weeks"

  ExpiresByType font/woff "access plus 1 year"
  ExpiresByType application/font-woff "access plus 1 year"
  ExpiresByType application/font-woff2 "access plus 1 year"
  ExpiresByType application/x-font-woff "access plus 1 year"
  ExpiresByType application/x-font-ttf "access plus 1 year"
  ExpiresByType application/x-font-opentype "access plus 1 year"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>

Gzip圧縮を設定しよう

最後にgzipの設定です。 これを設定すると転送されるデータそのものが圧縮されて小さくなります。

# Gzip圧縮の設定
<IfModule mod_deflate.c>
  SetOutputFilter DEFLATE

  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
  SetEnvIfNoCase Request_URI _\.utxt$ no-gzip

  Header append Vary Accept-Encoding env=!dont-vary

  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/js
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/atom_xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/x-httpd-php
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-font-woff
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
</IfModule>

まとめ

一般的な個人ブログにおいてはここまでやれば十分です。

さて次回ですが、次回でいよいよ最終となります。 今回はサーバー側の設定でしたが、次はWordPress側の詰めの設定になります。

はい、今日は WordPressを始めるための手順と気をつけるべきポイントまとめ の続きです。 今回は子テーマのfunctions.phpというファイルを編集していきます。 Wo…
home kanau.page

以上、今日はこれにて！

Some images are made by Freepik's icons from www.flaticon.com