【WordPress】静的化プラグインSimply Staticについて

備忘録として残します

* PHP : 8.1
* WordPres: 4.6.3
* Simply Static ： 3.1.6.2


## プラグインの選定理由
![スクリーンショット 2024-03-19 2.44.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287730/925a4b19-98b0-ec61-e8ca-fa5d4449f490.png)

WordPressの静的化プラグインを調べてみると、様々なプラグインが存在します。
その中で今回、Simply Staticを選んだ理由としては以下のような理由があります。

* 有効インストール数の多さ
* 更新頻度 (確認したときだと最終更新が5日前)
* 豊富な機能
* UIの見やすさ
* 自分でデバックしてくれる


詳細について詳しく説明していきますが、有効インストールと更新頻度についていわずもがななので、省略！

### 豊富な機能
機能面については、生成した静的ファイルをサーバーに格納や、Zip、CDNなどの方法で出力することが可能です。
また、静的ファイルの出力内容も、絶対パス、相対パス、ローカル環境など複数から選べるので、大体これを入れておけばどうにかなると思います。

### UIの見やすさ
続いて、UIの見やすさについてですが、これは視覚的ななのでわかりやすいと思います。
例えば、同じような静的化プラグインである「WP2Static」の画面がこんな感じ
![スクリーンショット 2024-03-19 3.07.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287730/66f9f0bd-1077-9965-613d-40094f330533.png)

まぁ、悪くはないのですが、簡素、、、というか。。。本当に使用できれば良いという感じですよね。。。

対してSimply Staticはこんな感じ
![スクリーンショット 2024-03-19 3.11.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287730/15b4bfd8-3adc-d6f0-7f4b-6207abb9e228.png)

ページごとも見やすいですし、なによりある程度説明もしっかり書いてあるので、このままお客様にご使用いただく際などにも便利！

### 自分でデバックしてくれる
これが個人的にSimpy Staticを選んだ一番の理由になります！
静的化を実際に行う場合、アプリケーション層の設定だけで終わることはなく、ほぼ確実にインフラ周りの対応が必要になってきます。
そんなとき、エラーと格闘しながら対応することもできますが、できればやりたくないですよね？　ね？？　ね！！！？(迫真)

そんなあなたに嬉しい機能として、Simpy Staticは入れると勝手にその辺りの互換性を確認してみやすく一覧画面で出してくれます
![スクリーンショット 2024-03-19 3.25.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287730/447f31b0-17f4-defa-1c46-29172d31fb04.png)

## 実際の構築作業
### 1\. WordPress環境の構築
やり方は問いませんが、WordPressを簡単に構築できるアプリケーションとして[Local](https://localwp.com/)などがあるので、よしなに構築してください
※今回はLocalを使用しています。

### 2\. プラグインのインストール
管理画面から「プラグイン」を選択し、右上の検索欄に「Static」という検索キーワードを打つと出てくると思います。![スクリーンショット 2024-03-19 2.44.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287730/59a5031f-c2d9-68ae-b938-4adf25985328.png)

出てきたら、インストールボタンを押してインストールし、有効化ボタンを押下して、プラグインを有効化します。
![スクリーンショット 2024-03-19 2.56.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287730/35b56923-0e1f-b091-98d0-de1c6223fe63.png)

有効化が完了すれば、管理画面のサイドバーに追加されていると思います。
![スクリーンショット 2024-03-19 3.45.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287730/b27ac73b-8599-f7f4-c1e6-3ec86924e52f.png)


### 3\. パーマリンクの設定
静的化を行う際、先にパーマリンクを設定しておく必要があります。
左のサイドバーから「設定」を押下し、「パーマリンク」を選択します。
「パーマリンク構造」の設定がデフォルトでは「基本」になっていますが、静的ページではGETパラメータが使用できないため、他の設定に変更しておきます。
![スクリーンショット 2024-03-19 3.48.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287730/d05dcd87-562e-028b-547e-59244b76ee32.png)

### 4\. 出力内容
再度、Simply Staticの管理画面に戻り、出力内容を設定していきます。
サイドメニューから「General」を選択し、「Replacing URLs」かで出力形式を選択します。
![スクリーンショット 2024-03-19 3.58.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287730/45ccf82e-5b4d-3788-eae7-0902cc903181.png)

出力形式は大きく3つ

#### 絶対パス(Absolute URLs)
`http://example.com/`のような形式
生成した静的ファイルをそのまま静的サイトとして使用するのであれば、一番これが便利

#### 相対パス(Absolute URLs)
`/food`など、特定のディレクトリの下におく想定の場合
絶対パスとは違い、どんなドメインの下にも格納できる

#### ローカル環境(Offline Usage)
文字通り、ローカル環境で確認する用の形式

### 5\. 出力形式
Simply Staticの管理画面に戻り、出力形式を選択していきます。
サイドメニューから「Deploy」を選択し、「Deployment Settings」から出力形式を選択します。
![スクリーンショット 2024-03-19 4.22.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287730/e4e84828-01e8-f56f-21b7-1e4270bf9504.png)

選択肢としては以下の3種類です。

* Zip作成
* ディレクトリ内に格納
* CDN

### 6\. 環境診断
Simply Staticの管理画面に戻り、「Diagnotics」から、動作できる環境かどうかを確認していきます。
基本SSL以外の全てにチェックがついていれば問題ありません。
![スクリーンショット 2024-03-19 4.32.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287730/caf88e0b-e355-c364-0d5a-7247f502da49.png)

人にってはモジュールが入っておらず、チェックがつかない部分などがあるかもしれませんが、そちらは別途対応をお願いします！
確認項目の中でわかりにくいのが、「自分自身へのリクエスト」だと思います。

これは自分自身のホスト名の正引きができているかを確認しています。
静的ファイルを生成する際、ネットワーク上から名前解決先のサイト情報を読み出して静的化を行なっています。
そのため、Ec2などのサーバーを借りている場合やDockerなどの仮想環境では名前解決が正常にできるかどうかを確認してください
IP制限などをかけている場合は、自分のサーバーのパブリックIPからの通信を許可する必要があります。


### 7\. 静的ファイル化
Simply Staticの管理画面に戻り、「Generate Static Files」というボタンを押下して数分待ちます。
サイドメニューの「Activity Log」を表示し、以下のようにログに完了を表すログが出てくれば完了となります。
![スクリーンショット 2024-03-19 4.41.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287730/e836c3ee-f33c-5462-ad2d-276461965308.png)

後は生成した静的ファイルをご活用ください