素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

【StaticPress】WordPressのブログやサイトをHTML化して管理しよう【使い方/インストール】

投稿日: 2018年5月5日
最終更新日:

スポンサーリンク

336×280




WordPressをHTML化したい

うわっ…私のサイト(ブログ)、重すぎ…?

WordPressでブログやサイトを作成・公開していると、コンテンツ量の増加に比例してパフォーマンスが悪くなってしまいます。

これは、1リクエスト毎PHPの処理が走り、膨大なデータベースの中から該当する情報を毎回検索を行い、さらにデータ加工等の処理を行ってからブラウザに表示しているからです。

表示に時間がかかると利用者のストレスにもなりますし、表示がされる前にページ離脱されてせっかくの訪問者を逃してしまうことになります。

また、ここで逃してしまった訪問者には、「xxxのサイトは重いから見るのやめよう。」という固定概念が生まれてしまうので、今後訪れてもらうことが期待出来なくなってしまいます。。。
これは深刻ですよね。

よく、アクセスしてから3秒以内に表示されるようなパフォーマンスが好ましい、という記事をよく見ます。

では、どうすれば良いのでしょうか?

静的コンテンツ管理化

サイトを構成するパターンは以下の2種類があります。

名称 概要
静的 要求されたURLに対して、毎回同じデータが返ってくるWebページを静的ページと言い、その中の情報を静的コンテンツと呼びます。
例えば、HTMLCSSJavaScript画像ファイル(jpg/png/gif…)などはファイルの中身をそのままレスポンス情報として返すので、静的コンテンツと言えます。
静的ページはサーバー側で処理が走らないので、描写スピードは早いです。
動的 要求されたURLにパラメータとともに送られたリクエストに対して、Webサーバーがプログラムを呼び出して毎回処理を実行し、パラメータに応じた結果を返すWebページを動的ページと言い、その中の情報を動的コンテンツと呼びます。
例えば、ブログ等でよくある人気記事ベスト5は、アクセスする日によってランキングが動的に変わっているので動的コンテンツと言えます。
動的ページはサーバー側で様々な処理が走るので、描写スピードは遅いです。

WordPressはPHPMySQLが絡んでくるので後者の動的ページに当たります。

記事数が多くなると、重くなるのは理解出来ますね。

StaticPressプラグイン

WordPressには様々なプラグインが公開されています。

もちろんその中に、Wordpressのサイトを丸々静的コンテンツに書き出してくれるものもあるのです!!

それが、StaticPressプラグインです。

こちらを使えば、Wordpressで構築したページ全てHTML化することが可能になります。
HTML化して静的ページにすれば、パフォーマンス改善に繋がりますし、管理も簡単になるのでオススメです。

出来なくなることもある

ただし、HTML化することで実現が出来なくなる事があります。

HTML化=静的化=動的機能が使えなくなる

と、いうことなので、以下の機能使えなくなります。

使えなくなる

  • サイト内検索
  • 購読者管理
  • コメント機能

これらの機能は、PHPによって実現出来ていたのでHTML化した後の静的ページでは機能として使えなくなりますので、サイトからは除去しておく必要があります。

上記の機能が無くなるとまずい!!という方はWordpressのHTML化は向いていませんので、ご注意ください。

では、実際にStaticPressの導入方法について紹介していきます。

手順

前提

Point

  • WordPress構築済み

【準備】WordPress側

パーマリンクの設定

まずは、Wordpressの記事URLをデフォルトの状態から、StaticPressで吐き出した際に正しく表示されるようにしましょう。
今回は以下のようにパーマリンクを変更してみます。

左部メニューから設定>パーマリンク設定を選択し、カスタム構造にチェックを入れ、上記のフォーマットを入力し、変更を保存ボタンをクリックします。

mod_rewriteの有効化

しかし、この状態だとまだアクセスしても以下のようなエラーが表示されます。

これは、URLの書き換えをおこなうApacheの「mod_rewrite」が正しく動いていないのが原因です。
なので、Apacheのhttpd.confファイルの編集と.htaccessファイルの作成をする必要があります。

まずは、httpd.confファイル以下を追記してください。

次に、Wordpressインストールディレクトリに.htaccessファイルがあるか確認します。
パーマリンクの設定をしていれば自動で生成されていると思いますが、万が一無かったら以下の内容で作成してください。

また、このファイルの所有者グループapacheにして、かつモードを644にする必要があるので、以下のコマンドを実行してください。

Apacheの再起動

ここまで終わったら以下のコマンドでApacheを再起動しておきましょう。

【準備】StaticPress側

プラグインの有効化

まずは、StaticPressのプラグインを導入しましょう。
管理画面にログインし、左部メニュープラグイン>新規追加を選択し、キーワード検索に「staticpress」と入力すると、StaticPressプラグインがヒットするので今すぐインストールボタンをクリックします。

ボタンを押すと、インストール中に変わります。

少し待つと、有効化ボタンに変わるのでクリックしましょう。

これでプラグインが有効化されました。

設定

次に、StaticPressの設定を行いましょう。

左部メニューからプラグイン>インストール済みプラグインを選択し、StaticPressの設定リンクをクリックします。

すると、以下のような画面が表示されるので各項目を設定の上、変更を保存ボタンをクリックします。

項目 説明 必須
静的サイトURL サイト内のWordpressのURL(リンクやパス)をここに設定したURLに置換した上でHTMLを生成してくれます。
出力先ディレクトリ
(ドキュメントルート)
HTMLファイルを出力する同一サーバー内のパスを絶対パス指定します。
こちらのディレクトリは存在しなかった場合は実行時に自動で生成してくれます。
BASIC認証
ユーザー名
WordPressサーバーにBASIC認証を入れている場合はユーザー名を指定します。
BASIC認証
パスワード
WordPressサーバーにBASIC認証を入れている場合はパスワードを指定します。
Request Timeout リクエストのタイムアウト時間を指定します。
重いページがある場合は長めに設定してみましょう。

HTMLの出力確認

では、一旦StaticPressでHTMLを生成してみましょう。

左部メニューからStaticPress>StaticPressを選択し、再構築ボタンをクリックします。

すると、どんどんファイルが生成されていくので、終了の表示がされるまで待ちましょう。

出力先ディレクトリ配下のファイル一覧を出力して確認してみると、正常に各ファイルがコピーされていますね。
※ファイル数が多いので、一部の階層までの出力に留めています

HTMLが生成されずに終了する場合

ボタンを押した後に、jsやcssは生成されるが、HTMLは一つも生成されずに正常終了する場合は、Basic認証サーバーのIP制限が原因の可能性が高いです。

前者のファイル(css/js/画像etc…)はWordpressサーバー内のコンテンツをそのままディレクトリにコピーしているようですが、HTMLについてはPHPでクローリングしているようなので、外部のネットワークからのアクセスが発生するのでそこでセキュリティに弾かれてしまって、HTML情報が生成出来ない状態だと思われます。
今一度Basic認証やIP制限の確認をしてみましょう。

確認

では、試しに生成したファイルをApacheのドキュメントルートにコピーしてブラウザで確認してみましょう。
以下のコマンドでディレクトリごとコピーします。

ブラウザでアクセスすると正常に表示されましたね。
一旦これでWordpressのサイトをHTML化することに成功しました♪

終わりに

これでStaticPressの導入が完了しました。

とはいえ、StaticPressの真価が発揮されるのは、StaticPressS3プラグインと組み合わせた際です。

次の記事では、さらにStaticPressS3を導入して、AWSS3バケットを利用してサイトを公開する手順を紹介しようと思います♪

関連

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , ,

blogenist

Author: blogenist