- 1 コーディング
- 2 実装・カスタマイズ
- 2.1 カスタム投稿タイプ「製品」と「ブランド」の詳細ページにカスタム投稿タイプ「コラム」の任意のおすすめ記事を表示させる機能の実装
- 2.2 カスタム投稿タイプ「製品」の各カテゴリー一覧ページ(タクソノミーページ)にそのカテゴリーの平均レビュー順ベスト5を表示する
- 2.3 診断ページにカスタムパンくずリストを作成
- 2.4 投稿ページ本文に使用するマイクロコピーの作成
- 2.5 アンカーリンクのスクロール位置の調整
- 2.6 ページスピードの改善70点から96点
- 2.7 画像になっているテキストをプレーンテキストに変更
- 2.8 カスタム投稿タイプ「製品」と「コラム」それぞれの詳細ページに「Twitter」「Facebook」「LINE」のシェアボタンを追加
- 2.9 カスタム投稿タイプ「コラム」の投稿のうちwebpになっていない画像が含まれる投稿を出力してwebpに変換
コーディング
ケータリングサービスサイトコラム記事一覧、詳細ページ追加コーディング
修正の指示で記事詳細ページの見出しを繰り上げて欲しいとありました。
すでにヘッダーのサイトロゴで<h1>タグが使用されていたため、記事のタイトルを<h2>としていたのですが、
繰り上げると記事のタイトルも<h1>となり、ページ内に<h1>が複数ある状態になってしまいます。
SEO的にどうなのかと思って調査したのですが、Googleのジョン・ミュラー氏は、ページ内に<h1>が複数あっても問題はないと発言しています。
ChatGPT関連サービスのLPコーディング
スクロールで要素が画面に入るとフェードインするアニメーションの実装
お問い合わせフォームはiframeで挿入して欲しいとのことだったので、エラーメッセージが表示されてもスクロール状態にならないようにJavaScriptで高さを制御しました。
実装・カスタマイズ
カスタム投稿タイプ「製品」と「ブランド」の詳細ページにカスタム投稿タイプ「コラム」の任意のおすすめ記事を表示させる機能の実装
「Smart Custom Fields」プラグインを使用して、カスタム投稿タイプ「製品」と「ブランド」の詳細ページの編集画面から、カスタム投稿タイプ「コラム」の任意の記事を表示させる機能の実装をしました。
カスタム投稿タイプ「製品」の各カテゴリー一覧ページ(タクソノミーページ)にそのカテゴリーの平均レビュー順ベスト5を表示する
4月の依頼実績ではトップページに全てのカテゴリーの商品の平均レビュー順ベスト5を表示させましたが、
今回は「製品」の各カテゴリー一覧ページにそのカテゴリーの平均レビュー順ベスト5を表示させました。
使用プラグイン「Site Reviews」
診断ページにカスタムパンくずリストを作成
診断ページだと選んだ選択肢によって遷移先が変わりますが、どのような選択肢を選んでも選んできた選択肢を辿る形でパンくずリストを作成しました。
投稿ページ本文に使用するマイクロコピーの作成
下記のようなマイクロコピーを作成しました。
ショートコードで作成しているのでリンク先と値段の編集が可能になっています。
ソースコードは下記記事で紹介しています。
WordPressの投稿に挿入できるマイクロコピーのショートコードを作成しました。ソースコードも紹介しています。
アンカーリンクのスクロール位置の調整
JavaScriptで調整をしました。ページ内と外からのどちらからでもスクロール位置が正しくなるように調整しています。
ページスピードの改善70点から96点
fontawesomeをCDNで読み込んでいたのをやめて、使用するアイコンのみをダウンロードして使用。
不要なプラグインを削除
jQueryを削除してJavaScriptのみで実装
スライダーのライブラリやお問い合わせフォームのjsを使用しているページのみに読み込ませる
ファーストビューの画像が遅延読み込みされていたので解除
画像になっているテキストをプレーンテキストに変更
get_terms関数を使用して製品カテゴリー名(タクソノミー名)を出力していたのですが、
管理画面で登録したカテゴリー名には「・」が入っているが、実際の出力では「・」がついていない。
また、長いカテゴリー名だと行を折り返すが、中途半端な位置で折り返さずきれいな位置で折り返したかった。
と言う場合にstr_replace関数を使用して、画像になっているテキストを上手くプレーンテキストに変更させました。
具体例を下記記事で紹介しています。
WordPressでカテゴリー一覧を表示するときにPHPのstr_replace関数で改行させカテゴリーをきれいに表示した方法を紹介しています。
カスタム投稿タイプ「製品」と「コラム」それぞれの詳細ページに「Twitter」「Facebook」「LINE」のシェアボタンを追加
各記事を上記SNSに共有できるようにしました。
カスタム投稿タイプ「コラム」の投稿のうちwebpになっていない画像が含まれる投稿を出力してwebpに変換
該当のサイトは「EWWW Image Optimizer」プラグインを使用して画像をWebpに変換していましたが、一部の画像はwebpに変換されていませんでした。なので下記のようにwebpでない画像が含まれる画像とその画像がある記事を出力をし、webpに変換しました。webpに変換されていない画像を1枚1枚探すのは大変ですよね。そう思われる方はぜひご相談いただければと思います。
