Simply Static を用いて WordPress サイトを静的サイトに変換した

メモ的な記事.WordPress プラグインの Simply Static を使用して WordPress サイトを静的サイトに変換する際,ひと工夫必要だったので,やったことを書き留めておく.


わけあって 工学博覧会2017 という WordPress サイトを静的サイトに変換した.

WordPress サイトを正常に稼働させるためには .htaccess ファイルへの適切な設定が必要で,複数サイトを並列稼働させようとするとその設定記述が増えるし,無駄に処理負荷がかかるし,メンテナンスしないまま長年放置するとセキュリティ上の懸念が生じる.したがって,もう新規更新しなくなった WordPress サイトは静的サイトに変換するほうが望ましいと考えられる.

該当ウェブサイト群は毎年新たに設置しなおすもので,2017のウェブサイトは動的サイトとしての役割を終えたため,静的サイトへの変換を実施した.

WordPress サイトの構成としては, XREA サーバーにおいて WordPress 本体を https://ap-phys.net/wp17/ 以下に設置し,仮想的に https://ap-phys.net/17/ として動作させるものであった.今回,これを静的サイトに変換して https://ap-phys.net/17/ として設置した.

使用したツールは WordPress プラグインの Simply Static である.これは軽くググった中で評判のよいものとして採用した.これは非常に有用なツールであったが,実用にあたっていくつかの調整が必要であったので以下にまとめる.

URL仮想化の解除

該当サイトの構成では https://ap-phys.net/wp17/ 以下に設置した WordPress 本体を仮想的に https://ap-phys.net/17/ として動作させたが,一部のファイルは WordPress の仕様上 wp17 のまま参照される.たとえば管理画面からアップロードされたファイルは /wp17/wp-content/uploads/* としてアクセスされる.

このまま Simply Static を実行すると, /17/ 以下を内部サイトとして認識するため, /wp17/* への参照は外部サイトとして転写の対象外となる.

これを避けるために, 設定>一般 の サイトアドレス (URL) を https://ap-phys.net/17 から https://ap-phys.net/wp17 に変更することで URL 仮想化を解除した.

広告の手動挿入化

XREA の無料版では自動の広告挿入がある. Simply Static は実際に URL にアクセスした際のレスポンスを転写するものであるため,そのまま実行すると自動挿入された広告も含めて転写し,静的サイトを生成する.そのサイトを設置すると再び広告が挿入され,二重広告となる.

これを回避するため, 外観>テーマの編集 で header.php の body 要素の直後に以下の記述を追加した.

<!-- XREA ads -->
<!--nobanner-->
<div id="vdbanner" style="display:block!important;position:relative!important;top:0!important;left:0!important;margin:10px 0 !important;padding:0!important;text-align:center!important;">
<script type="text/javascript" src="https://cache1.value-domain.com/xa.j?site=<?php echo $_SERVER['HTTP_HOST']; ?>"></script>
</div>

ここでは nobanner のコメントにより自動挿入を抑止し,引き続いて手動挿入を行っている.

参考: WordPressの管理画面からXREAの広告を削除 | 50歳から始めるWordPress(ワードプレス)

マルチバイト文字対応のためのプラグイン修正

記事執筆時点(2018年5月,バージョン2.1.0)の Simply Static では,日本語を含む URL を転写すると対応するファイル名・ディレクトリ名が URL エンコードされた文字列となって保存され,正常動作しない.

そこで,保存ファイルパスを URL デコードするように,プラグインを少し修正した. Simply Static をインストールした後, wp17/wp-content/plugins/simply-staticwp17/wp-content/plugins/simply-static-modified とでもしてコピーし, wp17/wp-content/plugins/simply-static-modified/includes/tasks/class-ss-transfer-files-locally-task.php を編集した.スクリプト中の $path と $destination_file_path を適当に urldecode した.

$path = urldecode($path);
$destination_file_path = urldecode($destination_file_path);

設定と実行

Simply Static>設定 から相対 URL /17/ および出力先ローカルディレクトリ,追加するURL https://ap-phys.net/wp17/wp-includes/js/wp-emoji-release.min.js を設定して, Simply Static>生成 から実行すると,静的サイトが得られた.

wp-content/uploads の追加移行

WordPress 管理画面上でアップロードしたファイル群は wp-content/uploadsに入る. Simply Static はトップページから出発してリンクを辿ってページ・ファイルを探索してくれるため,基本的には wp-content/uploads の中身についても 実際にウェブサイト中で使われているファイルについて そのままの挙動でコピーしてくれる.

しかしながら,単純な href や src によるものではない参照,たとえば 外観>カスタマイズ の ヘッダーメディア による画像の参照は正常に辿られず,参照が切れた.

そこで,以下のように,自動で辿られなかったファイルを含め,全てを一括で移行先にコピーした.

cp -r wp17/wp-contents/uploads 17/wp-contents

wp-emoji-release.min.js パスの手動修正

移行後のサイトを Firefox の開発ツールのコンソールで見ると, <script> のソース “https://ap-phys.net/wp-includes/js/wp-emoji-release.min.js?ver=4.8.6” の読み込みに失敗しました。 といって怒られた.

該当しそうな記述を探すと,移行後の各ページに以下のような JavaScript 記述が見られた.

window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/svg\/","svgExt":".svg","source":{"concatemoji":"\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.8.6"}};

この記述がどういう機構による生成なのか詳しく知ろうとは思わないが,仕方がないので, 17/以下の全 html ファイルについて "\/wp-includes\/js\/wp-emoji-release.min.js を "\/17\/wp-includes\/js\/wp-emoji-release.min.js に,テキストエディタで一括で置換した.