👺
WordPressでJamstackっぽい対応する方法
はじめに
この記事ではWordPressで構築されたサイトをJamstackっぽい対応をする方法について記述します。
Jamstack
JavaScript/API/Markup
JavaScriptを使いAPIを通じて動的なコンテンツを扱うWebアプリ・Webサイトのアーキテクチャ。最終的に動的なコンテンツをビルドして静的なhtmlにして運用する。
でも今回は、、、
Jamstackっぽい
WordPressを使い動的なコンテンツを扱うWebアプリ・Webサイトのアーキテクチャ。最終的に動的なコンテンツをビルドして静的なhtmlにして運用する。
JavaScriptじゃなくWordPress(PHP)でやっちゃおうというわけです。
Jamstackについては
他のサイトに説明を任せます。
(WordPressの競合っぽいけど・・・ま、いいか)
つまりどうやるの？
そういうプラグインを使います。
StaticPress2019
- WordPressでサイトを作ります
- StaticPress2019をインストールして有効化します
- 左サイドメニューにあるStaticPress2019の設定を開き、URLとサーバーのディレクトリを指定します
- 同じくメニューから再構築(ビルド)ボタンを押します
- ビルドが終わると終了します
結果
通常のWordPressのサイト
静的htmlのJamstackっぽいWordPressのサイト
書き出されていますね。
ちなみにLighthouseスコアは・・・
通常のWordPressのサイト
| TOPページ | 個別ページ |
|---|---|
JamstackっぽいWordPressのサイト
| TOPページ | 個別ページ |
|---|---|
あんまり変わらない！
ただし、これは画像であるとか、外部からのライブラリ読み込み(jQuery)などの影響で、静的htmlではあるけど、これらは正式なJamstack同様ちゃんと対応しなければ、爆速にはならないようです。
ただ、Jamstackで得られる恩恵としては、サイトのセキュリティが保たれるという部分もあります。Wordpressを自分のPCで作って、ビルドしたファイルだけどサーバーで公開すればよいので、WordPressはただの記事管理のアプリでアップデートの必要がなくなります。
軽く宣伝ですが
なお、正式なJamstack対応をしたい場合は、先日書いた私の記事を参考にしてください。
Discussion