Simply Static による静的 HTML 化ではパーマリンク設定が重要である

2017年1月20日カテゴリー : WordPress コメント : 0

　静的 HTML でホームページを作りたい、けれども Dreamweaver などを買うお金がない場合どうしますか？サイドバーなどのリンクをすべて手作業で行う？ページ数が少なければ問題ありませんが、100や200ものページをコピー＆ペーストするのはかなり無理がありますよね。

　そんな場合、WordPress でブログを運営した経験がある人なら固定ページをたくさん作成して、ホームページを作成してしまうかもしれません。ただ、サイトへのアクセス速度や PHP に対するセキュリティから考えれば、これを静的 HTML 化してしまいたいものです。

　ネットで検索すると、WordPress の静的 HTML 化といえば「StaticPress」と「WP Static HTML Output」が有名ですが、ファイルのアクセス権の関係で Windows 7 との相性が悪いです。Windows 7 のローカル環境で静的 HTML 化→レンタルサーバーにアップロードといった使い方をすることができません。

　そこで最近注目されているのが「Simply Static」プラグインなのですが、こちらはパーマリンク設定に少しばかりクセがあるので注意が必要です。

Simply Staticの設定

今回の動作確認として、Simply Static には次の設定を行っています。

Destination URLs では「Save for offline use」にチェック、Delivery Method は「Local Directory」を選択、Local Directory には「C:/xampp/htdocs/wordpress_static/」を入力しています。

設定を変更した場合、最後に「Save Changes」ボタンを押すことを忘れないでください。

どんなパーマリンク設定がよいのか？

WordPress インストール直後のパーマリンクの設定は次のようになっているかと思います。

http://example.com/?p=123

1	http://example.com/?p=123

ところが、Google はこのような URL を推奨していません。Google が推奨する URL とは次の要件を満たしている必要があります。

ID ではなく意味のある単語が使用されている
シンプル（極端に階層の深いものは NG）
人間が論理的に理解できるもの

ユーザビリティや SEO について考えた場合、次のように設定するのが望ましいといえます。設定方法は「設定」→「パーマリンク設定」画面から。

「カスタム構造」を選択し、「/%postname%」と入力、「変更を保存」ボタンを押します。

このように設定すると、固定ページの投稿画面で記事ごとにパーマリンクを自由にカスタマイズすることができるようになります。投稿記事にふさわしい、わかりやすいパーマリンクを設定するとよいでしょう。

パーマリンクでは日本語を使うこともできるのですが、一部のブラウザではアドレスバーの表示がエンコードされて URL が長くなったり、ツイッターなどの外部サービスで日本語 URL を貼り付けるとリンク先に飛べなかったりするので、英語 URL にしておいたほうが無難だと思います。

Simply Staticを使うときのパーマリンク設定

一般的なブログを WordPress で運営するのであればここまでの設定で充分だと思うのですが、Simply Static を使うにはもう少し設定に手を加える必要があります。

先ほど「設定」→「パーマリンク設定」画面からカスタム構造を選択して「/%postname%」と入力しましたが、これを「/%postname%.html」に変更します

ただし、この設定はブログエントリーにだけ適用されるものなので、固定ページでも記事名＋.html というパーマリンクを適用するには function.php に次のソースコードを追加する必要があります。

// 固定ページのURLの拡張子をhtmlに変更する
add_action( 'init', 'mytheme_init' );
if ( ! function_exists( 'mytheme_init' ) ) {
    function mytheme_init() {
        global $wp_rewrite;
        $wp_rewrite->use_trailing_slashes = false;
        $wp_rewrite->page_structure = $wp_rewrite->root . '%pagename%.html';
    }
}

// 固定ページのURLの拡張子をhtmlに変更する

add_action( 'init', 'mytheme_init' );

if ( ! function_exists( 'mytheme_init' ) ) {

function mytheme_init() {

global $wp_rewrite;

$wp_rewrite->use_trailing_slashes = false;

$wp_rewrite->page_structure = $wp_rewrite->root . '%pagename%.html';

}

こちらを参考にしています。

WordPressの固定ページの拡張子にhtmlをつけるfunction.phpのコードサンプル

これで固定ページでもパーマリンクが記事名＋.html になりました。

パーマリンクの設定後、アドレスも正しいし設定も間違っていないはずなのにうまくページが表示されない場合があります。

そんなときには、「設定」→「パーマリンク設定」に移動し、なにも設定変更をしなくて構わないので「変更を保存」ボタンを押してみてください。設定に間違いがなければ、たぶんこれで解決するはずです。

ここで、なぜこのような設定にするのかについて説明します。Simply Static は末尾に .html のついていないページをトップページと認識し、index.html ファイルを作成するという機能があります。

WordPress の一般的な設定では、トップページは「https://naokixtechnology.net/」や「https://naokixtechnology.net/wordpress/」のようになるはずです。これを自動でトップページにしてくれるのは便利なのですが、パーマリンクの末尾に .html を付けないと固定ページである「https://naokixtechnology.net/kebab」などまでトップページとみなされてしまいます。

勝手に「kebab」というフォルダを作ったうえ、そのなかに index.html まで出力されてしまうので、ひとつのウェブサイトに複数の index.html が存在したり、意図しないフォルダが作成されて管理しづらくなったりしてしまうわけです。これを防ぐため、パーマリンクの末尾に .html を付け足す必要があります。

ここまでの設定が終わったら、「Simply Static」→「Generate」に移動して「Generate Static Files」ボタンを押して静的 HTML 化してみてください。

うまくいけば目的のフォルダに HTML ファイルなどが出力されます。

今回、ローカル環境の C:\xampp\htdocs\wordpress_static を出力先に設定しましたので、ブラウザのアドレスバーに C:\xampp\htdocs\wordpress_static\index.html と入力してエンターキーを押せば、静的 HTML 化されたファイルにアクセスすることができます。

Simply Staticを使う際に注意すること

今回、動作確認としてサイドバーに各固定ページへのリンクを表示しています。ブログではない普通のホームページでよく目にする構成です。これはグローバルナビゲーション以外にメニューを作成し、ウィジェットの「カスタムメニュー」を使うことで実現することができます。

固定ページへのリンクをサイドバーに表示する方法 | Naokix.net

今、「ケバブ」というページを表示していて、サイドバーの「ケバブ」というリンクをクリックしたとします。

すると、こんなとんでもないページが表示されてしまいます。

ご丁寧に親ディレクトリを延々とさかのぼれるようになっており、ブラウザから親ディレクトリにアクセスすることができてしまいます。実際のレンタルサーバーではそのような操作ができないように設定しているはずですが、このままではセキュリティ的によろしくありません。

原因は出力された HTML ファイルを開いてみるとわかります。該当する部分を抜き出すと、

<a href="./">ケバブ</a>

1	<a href="./">ケバブ</a>

となっており、 A タグの href 属性の指定の仕方に問題があることがわかります。ほかの固定ページにおいても同じようになっており、これをなんとか修正しなければなりません。

一般的なホームページにおいて、開いているページのリンクはクリックできないようになっている場合が多いことから、A タグを消去してリンクでなくしてしまえばいいのではないでしょうか。

私がおすすめする方法は、サクラエディタによる HTML ファイルに対する一括置換です。一括置換してしまうと元に戻せなくなるので、置換前のファイルを別の場所にコピーしておいたほうがよいでしょう。

まずはメニューから「検索」→「Grep置換」をクリック。

「Grep置換」ダイアログが表示されるので、ここで設定を行います。

置換前に「<a href=”\.\/”>(.*?)<\/a>」、置換後に「$1」を入力します。このように指定すると、内部のテキストを残したまま A タグを消去してくれます。サクラエディタの置換は正規表現を使うことができるので、複数のファイルに対して一度に編集ができて便利です。

フォルダには今回 HTML ファイルを出力したフォルダを指定し、「サブフォルダからも検索する」と「正規表現」にチェックが入っていることを確認してください。最後に「置換」ボタンを押せば、複数のファイルを修正してくれます。

ブラウザで表示している固定ページのリンクがただのテキストに変化していることを確認してください。

ちなみに、表示されているページのリンクがグローバルメニューに存在していた場合、サイドメニュー同様にリンクがただのテキストに修正されて無効化されています。開いているページのグローバルメニューは無効化で構わないのであればそのままで、クリックできるようにしたいのであれば A タグを手作業で復活させてあげる必要があります。

項目の多いサイドバーと違ってグローバルメニューのリンクを修正する程度であれば、ひとつひとつコピー＆ペーストしてあげればよいでしょう。

最後に念入りに動作確認を行ってセキュリティに問題が無ければ完成です。