ElementorのページをシンプルなHTMLとCSSに変換する方法
Elementorはすでにブラウザーへ普通のHTMLとCSSを送っています。やるべきことは、その出力を保存し、CSSをページが使う分だけに絞り、WordPressが必要な一部を置き換えることです。
Elementorで作ったページは、アクセスのたびにWordPressとPHPが組み立てますが、ブラウザーに届くのはごく普通のHTML、CSS、JavaScriptです。だからこそ静的なコピーが作れます。出力だけを残し、それを生み出した仕組みを外すわけです。完成したランディングページをどこでもホストしたい、もう変更しないサイトのためにWordPressを保守し続けたくない、重いページを速く表示させたい、といった理由でこの作業が行われます。
Elementorにはこのためのボタンがありません。Elementor自体のエクスポートが作るのはJSON形式のテンプレートファイルで、Elementorに再びインポートするためのものであり、ホストできるHTMLではありません。そのため作業は3つのステップになります。表示されたページを保存し、CSSを実際に使う分まで減らし、WordPressに依存していた部分を置き換えます。
移行で残るもの、残らないもの
| ページの要素 | 静的コピーでは |
|---|---|
| レイアウト、テキスト、画像、色、フォント | 動く：HTMLとCSSだから |
| ホバー効果とレスポンシブレイアウト | 動く：純粋なCSS |
| スライダー、カルーセル、タブ、アコーディオン、ポップアップ | ElementorのJavaScriptファイルを残すか、作り直した場合のみ |
| エントランスアニメーション | ElementorのJavaScriptが必要。ないとウィジェットが非表示のまま（後述） |
| Elementorのフォーム、コメント、検索 | 動かなくなる：データをWordPressに送るため |
| 変化する投稿や商品の一覧 | ページを保存した時点のまま固定される |
ページの大半が最初の2行に当てはまるなら、静的コピーは簡単に成果が出ます。フォーム、ショップの商品一覧、ブログのフィードが中心のページなら、WordPressに残したまま、そちらで高速化してください。
ステップ1：表示されたページを保存する
最初にWordPressからログアウトするか、プライベートウィンドウでページを開いてください。ログインした状態で表示すると、管理バーとそのスタイルがHTMLに加わり、どちらもコピーには入れたくないものです。
1ページだけ：ブラウザーから保存する
- ログアウトした状態で、Chromeでページを開きます。
- Ctrl+S（MacではCmd+S）を押し、Webpage, Complete（ウェブページ、完全）を選びます。
- HTMLファイルと、その横にページが読み込んだ画像、スタイルシート、スクリプトを収めたフォルダーができます。
サイト全体：静的エクスポートのプラグインを使う
ページが数枚を超えるなら、Simply Staticのような静的サイト用プラグインがWordPressサイトを巡回し、各ページをアセットと一緒にフォルダーかZIPファイルに書き出します。手作業では面倒な内部リンクの書き換えも行ってくれます。それでも出力は1ページずつ確認してください。JavaScriptだけが要求するファイルを、プラグインが取りこぼすことがあります。
ステップ2：CSSをページが使う分だけに絞る
一般的なElementorのページは、テーマのスタイルシート、Elementorのフロントエンド用CSS、ウィジェットの種類ごとのCSSファイル、ページ自体のために生成されたファイル、そしてたいてい1つか2つのフォントファイルを読み込みます。そのルールの大半は、ページ上にないウィジェットのためのものです。使われているルールを見つけるいちばん確実な方法は、Chromeに記録させることです。
- ログアウトした状態で公開中のページを開き、DevToolsを開きます。
- 3点メニューを開き、More tools（その他のツール）、Coverage（カバレッジ）の順に選んで、パネルの再読み込みボタンを押します。
- ページを操作します。モバイルメニューを開き、タブやアコーディオンをクリックして回り、ウィンドウをスマホとタブレットの幅に変えてください。
- CoverageパネルでExport（エクスポート）を押し、JSONファイルを保存します。
- そのファイルをカバレッジJSONをCSSに変換のページにドロップし、使用中のCSSを抽出を押します。
- 結果を1つのスタイルシートとして保存し、ページの
<link rel="stylesheet">タグをそのファイルへの1つのリンクに置き換え、そこから参照されているフォントファイルは残します。
未使用CSS削除ツールは、各ルールを元の@mediaブロックの中に書き戻します。これがここでは重要です。Elementorはタブレットとモバイル用のルールをメディアクエリの中に置いており、それを失うツールを使うと、モバイル用のレイアウトがデスクトップにも適用されてしまいます。また、@font-faceと@keyframesは丸ごと残します。
保存したファイルから作業したい場合は、同じツールのHTML + CSSタブで、HTMLとスタイルシートを代わりに渡せます。Elementorとそのアドオンは、ページの読み込み後にJavaScriptでいくつかのクラスを追加するので、/^elementor-/や/^e-/のようにその接頭辞を常に残すに入れ、結果を信頼する前に元のページと見比べてください。
ステップ3：WordPressが必要だった部分に対処する
エントランスアニメーションと非表示のウィジェット
エントランスアニメーションを持つウィジェットにはelementor-invisibleクラスが付いており、ウィジェットがスクロールで表示領域に入るとElementorのJavaScriptがこのクラスを外します。そのスクリプトがないコピーではクラスが外れず、ウィジェットは見えないままです。Elementorのフロントエンド用スクリプトを残すか、HTMLからelementor-invisibleを取り除いて、アニメーションなしでウィジェットを表示させてください。
フォーム
ElementorのフォームはデータをWordPressに送りますが、そのWordPressはもうありません。普通のHTMLフォームを受け付けるフォームサービスに置き換えるか、メールを開くシンプルなリンクにしてください。
リンクと残りもの
- 内部リンクをすべて確認してください。
/about/のようなWordPressのアドレスには、index.htmlを含む対応するフォルダーか、新しいホストでのリライト設定が必要です。 - 絵文字用スクリプトのように、ページにもう必要ないWordPressのスクリプトを取り除きます。ファイル名を変えるなら、ファイル名に付いた
?ver=の番号も外します。 - HTMLが参照している
srcsetの画像は残してください。ないとスマホがフルサイズの画像を読み込みます。
切り替える前に確認する
- 静的コピーと元のページを、デスクトップ、タブレット、スマホの幅で並べて開きます。
- すべてのメニュー、タブ、アコーディオンを開き、ページ全体をスクロールして、非表示のウィジェットがないか確かめます。
- 両方をスピードテストにかけ、読み込まれるCSSの量を比べます。
- 静的コピーを公開してしばらく経つまでは、WordPressのサイトと元のCSSファイルを残しておきます。