[ 完成イメージ ]

404 NOT FOUND | IT大好きシニアのリタ活生活

IT大好きシニアがリタイア後のライフスタイルを提案します。

gungii.site

固定ページの作成

固定ページの新規作成

「新規追加」をクリック

タイトルの入力

タイトルを入力して、下書き保存します。

表示の確認

当然ですが、タイトルやパンくずリスト、ヘッダー、フッター、サイドバーが表示されています。これらを非表示にしていきます。

CSSの変更

固定ページの編集

固定ページのサイドバーを非表示とする。

固定ページの追加ヘッダーに以下のCSSを記述します。

サイトの確認

保存して、プレビューすると、以下のように表示されます。

1カラムとなり、サイドーバーが表示されなくなりました。

固定ページから不要な表示を消す。

ヘッダー画像、タイトル、パンくずリスト、メニューバーを非表示とします。但し、フッターについては、ここでは削除できませんので、テンプレートファイルを作成することで対応します。

サイトの確認

ヘッダー画像、タイトル、パンくずリスト、メニューバーが非表示となりました。

テンプレートの適用

テンプレートファイルの作成

WordPress の公式オンラインマニュアル(Codex)に記載ある通り固定ページの表示順番は、カスタムテンプレートの後にpage.phpが読み込まれますので、カスタムテンプレートを作成して、カスタムテンプレートでフッターを非表示とします。

page.phpのダウンロード

カスタムテンプレートファイルは、page.phpを変更して作成しますので、ダウンロードします。

ファイル名の変更

ここでは、「page.php」を「1column.php」に変更します。

1column.phpの変更

まず、テンプレートとして認識させる為に、テンプレート変更します。ここでは、Template Nameを「1カラム」とします。
注意:エディターは、VSC(ビジュアルスタジオコード)を使用しています。

つぎに、サイドバーとフッターを呼び込んでいる箇所をコメントアウトします。

サーバーへUPLOAD

内容を変更した1column.phpをサーバーにUPLOADします。
※ダウンロードしたpage.phpと同じ階層へアップロードします。

固定ページの編集

パーマリンクの変更

日本語は、英数字に変えておきます。
注意:これは、LPの作成方法とは何らの関係もありませんので、変更しなくとも良いてす。

テンプレートの選択

1column.phpで、「Template Name: 1カラム」と記述したテンプレートを選択します。

追加ヘッダーの修正

サイドバーの非表示は、「1column.php」で、読み込まない様にした為、追加ヘッダーに記載したCSSは、サイドバーの箇所は削除します。

最終的には、追加ヘッダーの設定は以下の通りです。

サイトの確認

サイトを確認すると、LP用の何もないページとなりました。完成です。

サイトスピードが遅い

PageSpeed Insightsのスコア

今回、計測したのは、次の環境です。

• WordPress:V5.8
• WordPressテーマ:ルクセリタスV3.20.1

モバイル

モバイルは、明らかにスコアがアップしています。

パソコン

パソコンもアップしています。

注意:
gungii.siteは、まだアドセンス広告を表示していませんので、表示させると大幅に評価は下がると思います。逆に言えば、アドセンスがなければ、100点も可能という事です。

PageSpeed Insightsの「改善できる項目」

改善できる項目としてトップに挙がっているのが「使用していないJavaScriptの削除」です。詳細を見ると、「recaptcha__ja.js」や、「adsbygoogle.js」とあります。いづれもgoogleに関連するもので、reCAPTCHAやAdSenseを止めてしまえば良いのですが、スパムメールを防ぐ為であり、アドセンス収入確保の為であり、やめる訳にはいきません。

モバイル

パソコン

サイトスピードの改善

改善できる項目としてトップに挙がっているのが「使用していないJavaScriptの削除」です。そして次に素人でも取り組めそうなのが「適切なサイズの画像」です。

改善策:「適切なサイズの画像」

Googleが開発した画像圧縮アプリ「Squoosh」で、画像サイズを削減します。Squooshで削減した画像をアップすることで、さらにWebp(ウェッピー)と言うGoogleが開発した高圧縮率の次世代の静止画フォーマットに変換します。

改善策:「使用していないJavaScriptの削除」

こちらは、素人では難しい為、プラグインを使用して削除します。「Flying Scripts by WP Speed Matters」というプラグインをインストールします。
ユーザーが何等かの操作(マウスホバーやスクロール等)を起こすまでJavaScriptの実行を遅らせるというプラグインです。そして、ユーザーが何もしなくても指定した時間が経過するとJavaScriptが実行されるので、遅延時間をあまりに伸ばさない限りは、画面表示が崩れるようなことは起こる可能性は低いようです。

インストール

インストールして有効化します。

「Flying Scripts by WP Speed Matters」の設定

Flying Scripts」の起動

Javascriptの登録

設定画面が表示されますので、「Include Keywords」欄にJavaScriptを登録します。
注意:Pagespeed Insightの「使用していないJavaScript」を登録します。

※Timeoutは2秒。何もしないで2秒経過するとJavascriptが稼働します。

PageSpeed Insightの再計測

「適切なサイズの画像」

再度、計測すると「改善できる項目」から「適切なサイズの画像」はなくなりました。(0.45Sが無くなりました。)

「使用していないJavaScriptの削除」

登録したJavaScriptが全て消えたわけでなく、消えていないものもあります。ただ、これは2秒後にはJavaScriptが稼働するため、PageSpeed Insightで計測する時点では稼働している為、消えてないように見えるのかも知れません。このへんのところは、知識がない為、全くわかりません。が、スコアは上がってします。(0.46Sが、0.32S)

サイトのスピード改善の評価

サイトのスピードアップ対策は、必要ですが、それぞれの環境によっても異なり、原因は複雑な為、常に同じ結果となることはありません。今回、WordPressのテーマ「ルクセリタス」を使って、「PageSpeed Insight」で表示された゛改善できる項目゛の一部「適切なサイズの画像」については、画像を圧縮して、「使用していないJavaScriptの削減」については、プラグインを使うことで、大きな改善をすることができました。但し、アドセンス広告がない状態なので、アドセンス広告を貼って、どのくらいのスコアとなるか?です。そして、WordPressのテーマ「Cocoon」で同様の対策を行ってみましたが、「ルクセリタス」ほどの大きな改善は見られましたが、以下のような改善となりました。(こちらは、アドセンス広告付きです。)

[ 計測環境 ]

• WordPress:V5.8
• WordPressテーマ:CocoonV2.3.5.1