WordPressからの静的HTMLファイルの作成方法

１　WordPressとは・・・

　WordPressはブログシステムとして開発されましたが，その機能の高さからCMS(Contents Management System)として広く利用されるようになりました。PHPで開発され，データベースとしてMySQLを利用しているため，環境構築の難易度は高くなります。
　しかし，多くのレンタルウェブサーバでは，標準でWordPressが利用できる環境を提供しています。
　一方で，セキュリティの問題やサーバに負荷をかけるプログラムを実行させないことを理由に，動的なウェブページとなるWordPressの実行を許可していないサーバも存在します。愛知エースネットサーバも，WordPressを利用したコンテンツの提供を許可していません。
　そこで，ユーザ側にWordPress環境を構築し，動的なウェブページから静的HTMLファイルを作成してウェブページを作成する方法を紹介します。

２　Instant WordPressのインストール

　Instant WordPressを利用することで，手間がかかる環境の構築をほぼ自動化し，専用のサーバを準備しなくてもWordPressを利用することができるようになります。
　まずInstant WordPressのウェブページ(http://www.instantwp.com/)を開き，「Download Now」からダウンロードを実行します（図１）。インストール先フォルダは管理しやすい領域に適宜変更してください。レジストリなどは変更しないため，インストールフォルダをUSBメモリなどにすれば，ポータブルな環境を構築できます。
図２−１　InstantWPトップページ
　図１　ダウンロードサイト画面（今回はInstant WordPress4.5をダウンロード）

　インストールしたフォルダにある「InstantWP.exe」を実行します（図２）。
図２−２　InstantWP起動プログラム
　図２　インストールフォルダ中の実行ファイル

３　プロキシの設定

　学校内のネットワークではプロキシを設置していることがあると思います。プロキシを設置せず，インターネットへ直接接続されている場合は，「４　Instant WordPressの起動」に進んでください。
　インストールフォルダにある「iwpserver」フォルダ「htdocs」フォルダ「wordpress」フォルダをたどってください。ここにある「wp-config.php」ファイルを変更します。
　プロキシURLとポート番号は各自の環境に変更をして，最終行へ追加します。

define('WP_PROXY_HOST', 'http://プロキシURL');
define('WP_PROXY_HOST', 'ポート番号');
define('WP_USEPROXY', 'TRUE');
　
　続いて，　インストールフォルダにある「iwpserver」フォルダ「htdocs」フォルダ「wordpress」フォルダ「wp-includes」フォルダにある「class-snoopy.php」ファイルを変更します。
　46行目にある，
var $proxy_host = ""; // proxy host to use
var $proxy_port = ""; // proxy host to use
var $_isproxy = false; // set if using a proxy server
　　を次のようにします。
var $proxy_host = WP_PROXY_HOST; // proxy host to use
var $proxy_port = WP_PROXY_PORT; // proxy port to use
var $_isproxy = WP_USEPROXY; // set if using a proxy server

４　Instant WordPressの起動

　「InstantWP.exe」を実行すると，プログレスバーが表示されます（図３）。
図４−１　InstantWP起動画面１
　図３　プログレスバー

　その後，選択画面が表示されます（図４）。
　まず，管理画面を表示させたいので，右上の「WordPress Admin」を選びます。
図４−２　InstantWP起動画面２
　図４　選択画面

　ログイン画面が表示されますので，Usernameに「admin」，Passwordに「password」を入力します（図５）。Languageは必要に応じて変更します。ここでは日本語に変更します。
図４−３　WordPressログイン画面
　図５　ログイン画面
　

５　Instant WordPressのアップデート

　Instant WordPressが起動したら，まずアップデートします。左端にある「更新」を選択します）。
　青色の「いますぐ更新」を選択します（図６）。
図５−１　アップデート画面
　図６　Instant WordPressの起動画面

　WordPress本体と言語ファイルの更新が自動的に実行され，最新版のバージョンになります（図７）。
図５−２　アップデート完了
　図７　更新後の画面

　さらに，プラグインとテーマも更新します。更新画面のプラグイン一覧のチェックボックスにチェックを入れた後，「プラグインを更新」ボタンをクリックします（図８）。
図５−３　プラグインアップデート画面
　図８　プラグインの更新画面

　すべての更新が完了したら，引き続き，テーマの更新をします。先ほどと同様に，テーマ一覧のチェックボックスにチェックを入れた後，「テーマを更新」ボタンをクリックします（図９）。
図５−４　テーマアップデート画面
　図９　テーマの更新画面

６　静的HTMLファイルの作成について

　(1)　Simply Staticの追加
　WordPressのデータをHTMLファイルへ書き出すプラグインをインストールします。
　左端の「プラグイン」から「新規追加」を選択します（図10）。
図６−１　SimplyStatic検索
　図10　プラグインの追加画面１

　右上の検索部分に「Simply Static」と入力します。
　自動的に検索が始まり，検索されたプラグインの一覧が表示されます。
　検索結果にある「Simply Static」の「今すぐインストール」をクリックします（図11）。
図６−２　SimplyStaticインストール
　図11　プラグインのインストール画面２

　プラグインのインストールが完了すると，「今すぐインストール」と表示されていたボタンが「有効化」に変化します。
　プラグインはインストールしただけでは利用できません。「有効化」をクリックし，有効化することで利用できるようになります（図12）。
図６−３　SimplyStatic有効化
　図12　プラグインのインストール画面３

　(2)　Simply Staticの設定
　Simply Staticのプラグインが有効になると，左端のメニューに「Simply Static」が追加されます。
　この中の，「Settings」を選びます（図13）。
図７−１　SimplyStaticの設定１
　図13　Simply Staticの設定画面１

　Simply Staticの設定画面はすべて英語表記になっています（図14）。
　一番上のタブは，「General」(全般設定)と「Advanced」(拡張設定)についてです。通常は「General」(全般設定)を変更します。
　「General」(全般設定)では，「Destination URLs」(出力時のURL)と「Delivery Method」(出力ファイル形式)について設定します。
　「Destination URLs」(出力時のURL)の設定は以下の三つがあります。
ア　「Use absolute URLs」(絶対参照)指定
　ウェブページとして公開するアドレスが変更されないときは，ここを設定します。
イ　「Use relative URLs」(相対参照)指定
　ドメイン名が変化しても，ウェブページは正しく表示されます。ドメイン名よりも先のディレクトリ名を入力することで，ドメイン名を変更してもそのまま利用できます。
ウ　「Save for offline use」(オフライン参照)指定
　ウェブサーバに転送せず，ハードディスクなどに保存してページを閲覧するときに利用します。簡易的な方法ですが，自由に使えるサーバがない場合は有効な手段です。
図７−２　SimplyStaticの設定２
　図14　Simply Staticの設定画面２

　ウェブサーバに転送するときには，「Use relative URLs」を，ブラウザで確認するときは「Save for offline use」を選択します（図15）。
図７−３　SimplyStaticの設定３
　図15　Simply Staticの設定画面３


　「Delivery Method」(出力形式)は，次の二つから選択します。
ア　「ZIP Archive」(圧縮形式)（図16）
　出力されたファイル・ディレクトリをひとまとめにしたZIP形式のファイルが出力されます。
　全てが一つのファイルにまとまるため，時系列で管理しやすくなります。
図７−４　SimplyStaticの設定４
　図16　「ZIP Archive」(圧縮形式)の選択画面

イ　「Local Directory」(ディレクトリ形式)
　圧縮する前のファイルになります。WordPressをサーバ上で利用している場合は，この形式になります。
図７−５　SimplyStaticの設定５
　図17　「Local Directory」(ディレクトリ形式)の選択画面

　(3)　パーマリンクの設定
　パーマリンクとは，各ページに付けられるURLのことです。

ア　日本語を扱うときの注意点！


　文字コードの違いにより，日本語の表記やリンクが崩れることがあります。
　このため，全体のパーマリンクの設定と，固定ページのパーマリンクの設定に注意が必要になります。
イ　全体のパーマリンクの設定
　こちらは，左端のメニューにある「設定」から「パーマリンクの設定」を選択します。
　「共通設定」を「数字ベース」に変更します（図18）。
図７−６　日本語対応１
　図18　パーマリンク設定の画面

　固定ページを作成するときにタイトルを入力すると，自動的にパーマリンクが設定されます。
　タイトルに日本語を含む場合は，タイトルのすぐ下にある「パーマリンク」を確認し，「編集」ボタンをクリックして，パーマリンクを変更します（図19）。
　固定ページを作成するたびに，変更する必要があるので変更忘れに注意します。
図７−６　日本語対応２
　図19　固定ページでのパーマリンクの変更画面
　

　(4)　Simply Staticの実行
　静的HTMLファイルを書き出すには，左端の「Generate」を選択後，画面上部にある「Generate Static Files」をクリックします（図20）。
図８−１　SimplyStaticの実行１
　図20　HTMLファイルの書き出し画面１

　自動的にWordPressからHTMLファイルの書き出しが始まります。
　保存されているページ数により必要な時間は異なりますが，「Activity Log」にログが出力されますので，「ZIP archive created」(ZIP形式の場合)が表示されるまで待ちます。
　書き出し完了後，表示された「Click here to download」をクリックすると，ZIPファイルのダウンロードが始まります。
　ダウンロード後，ZIPファイルを解凍し，ブラウザで表示確認やウェブサーバへファイルを転送して使用します。
図８−２　SimplyStaticの実行２
　図21　HTMLファイルの書き出し画面２

７　おわりに

　「WordPressを利用してみたいが，セキュリティ上サーバでWordPressを利用できない」という環境の学校で，コンテンツ管理をWordPressで実現する方法を検討してみました。現在，構築されている全てのウェブページを完全に再現することは難しいかもしれませんが，かなり元に近いページを作成することができます。環境構築も難しくなく，コンピュータの管理者権限がなくても実行できます。WordPressを利用して静的HTMLファイルを作成すれば，サーバ側で実行されるプログラムが少なくなることで，セキュリティホールも少なくなります。セキュリティを考慮した環境では，このような選択も考えられます。

８　参考資料

　Instant WordPress　　http://www.instantwp.com/　
　WordPress日本語版　　https://ja.wordpress.org/　
　StaticPress　　http://ja.staticpress.net/