WordPress 静的htmlをSimply Staticプラグインにて一括作成 & 静的htmlが存在すればキャッシュファイルとして使用する( .htaccessリダイレクト )

概要説明

WordPressページをhtmlに変換。Movable Type(ムーバブルタイプ)の再構築と同じように事前に作成したhtmlファイルを使用してWordPressページを表示を高速化させるカスタマイズ。html作成の除外設定も行えるためプログラム実行が必要なページは現在のWordPressにてページを表示させることも可能。

WordPressでコンテンツを作成して静的HTMLにてサイトを公開は効果的な手法です

ローカル環境やhtml作成用の別環境でhtmlを作成してFTPにてコンテンツを設置という使い方が一般的。セキュリティー面はこれが最強です

WordPressのページをhtmlに変換する

Simply Static html変換プラグイン

今回はサーバー上にhtmlファイルを作成して、表示させているページに該当するhtmlファイルが存在する場合はhtmlファイルを表示させるという内容の説明です

ドキュメントルートにhtmlファイル用のディレクトリを作成

WordPress 静的htmlをSimply Staticプラグインにて一括作成 & 静的htmlが存在すればキャッシュファイルとして使用する( .htaccessリダイレクト )

絶対パスにて出力するように設定

WordPress 静的htmlをSimply Staticプラグインにて一括作成 & 静的htmlが存在すればキャッシュファイルとして使用する( .htaccessリダイレクト )

htmlファイル作成ディレクトリを設定

WordPress 静的htmlをSimply Staticプラグインにて一括作成 & 静的htmlが存在すればキャッシュファイルとして使用する( .htaccessリダイレクト )

変換させないページを指定

WordPress 静的htmlをSimply Staticプラグインにて一括作成 & 静的htmlが存在すればキャッシュファイルとして使用する( .htaccessリダイレクト )

wp-json
wp-login.php
sitemap
contact
wp-content
wp-includes
archives

プログラムを実行したいページの除外したり、まずはお試しで一部のページだけ変換したいと行った場合に上記の設定を行います

設定が完了したらhtmlファイルの作成

WordPress 静的htmlをSimply Staticプラグインにて一括作成 & 静的htmlが存在すればキャッシュファイルとして使用する( .htaccessリダイレクト )

htmlファイルが完成したら https://サイトドメイン/public_static/ にアクセスすることで静的htmlを確認できます

htmlファイルを作成しファイルが存在すればキャッシュファイルとして利用

静的なhtmlだけでも使用できますがURLを変更したり、apache,nginxにてドキュメントルートの設定変更が必要となります。今回は新しく作成したディレクトリにhtmlを作成しそのディレクトリ内に対応するhtmlがあればURLはそのままで表示させるファイルだけリダイレクトさせるようにします

.htaccessにて静的htmlが存在すればhtmlファイルを表示 存在しない場合はWordPressページを表示

通常の一般的なWordPress用のリダイレクト設定

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

静的なファイルが存在するかどうかの判定処理を追記

%{DOCUMENT_ROOT}/public_static に静的htmlを出力する場合

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{DOCUMENT_ROOT}/public_static%{REQUEST_URI}/index.html -f
RewriteRule . /public_static%{REQUEST_URI}/index.html [NC,L]
</IfModule>

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

トップページはWordPress

検索処理やランダム表示などトップページでは複数の機能が動いている場合が多いのでトップページのhtml表示は今回は対象外にしています

htmlファイルの表示に切り替わっているかを確認

管理バーを表示させている環境の場合はhtmlページ表示になっていると管理バーが表示されないので判断できます。

public_static/内の対象のファイルを直接編集してFTPでアップロードすることで変更内容が表示されればhtmlを使用していることが確認できます。

htmlファイル参照を解除したい場合

.htaccessの記述をもとに戻すか public_static ディレクトリをリネームまたは削除することでhtml表示を解除することが出来ます

htmlに変換したうえでランダム表示などを行う場合

該当箇所をphpではなくjavascriptの制御に変更することで対応することが出来ます

html変換処理が途中で動かなくなった場合

実行時間が長くなってしまう場合は途中で止まることがあります

リロードして大丈夫なのでリロードで処理を再開できます。

長時間html作成に時間がかかる場合はローカル環境で変換がオススメ

サーバーに長時間負荷を与えることになるので、コンテンツボリュームの多いサイトはローカル環境でhtml作成を行い作成したhtmlをサーバーにアップするようにしましょう。

実行してもログエリアに何も表示されない場合

他のプラグインやセキュリティー関連の対応にて必要な制御が無効になっている可能性があります

.htaccess
<Files ~ "^admin-ajax.php$">
allow from all
</Files>
<Files ~ "^admin-post.php$">
allow from all
</Files>

wp_admin/.htaccess に上記内容を反映してみて動きが変わるかを確認

上記の対応で変化がない場合は設定を元に戻しておきましょう

robots.txtに静的htmlのディレクトリを追加

robots.txt
User-agent: *
Disallow: /wp-admin/
Allow: /wp-admin/admin-ajax.php
Disallow: /public_static/

Sitemap: https://functions.fs-create.net/sitemap.xml

スマートフォン実機でアクセスした時の表示速度がぜんぜん違う

プログラム処理やDB接続がない状態の静的htmlページをスマートフォンで確認した時の表示スピードはびっくりするくらい早くなりました

関連機能

  1. WordPress 記事公開前にページ確認してもらいたいときに便利なプラグイン Public Post Preview

  2. WordPress カテゴリーの並び順を変更できるプラグイン Custom Taxonomy Order

  3. Chrome開発ツールのカバレッジを使用して使われていない不要なCSS/Javascriptの要素を確認する ( Chrome Coverage )

サイドバー

よく使うカスタマイズ

最近の記事

アニメの名言集

人とは哀れなものだね
己にないもの程欲しくなる
届かぬものに程手をのばす

銀魂
by 神威

Profile

PAGE TOP
Amazon プライム対象