コーディング
カスタム投稿タイプ詳細ページコーディング
Advanced Custom Fieldsプラグインを使用して、管理画面から自由にテキストやスライダーの画像などが変更可能な形で作成しました。
Advanced Custom Fields
実装・カスタマイズ
Googlemapの表示を建物名から会社名に変更
建物の中に入っている会社などでサイトにGooglemapを埋め込むと会社名ではなく建物名が表示されることがあります。
iframeのsrc属性のURLにパラメータを指定することで建物名の表示を会社名に変更しました。
jetpackの月間閲覧数上位6件を表示(ブログ記事と任意の固定ページ)
「WordPress Popular Posts」プラグインの不具合で閲覧数がうまく表示されなくなり人気記事一覧の表示がされなくなったため、他にインストールされていた「Jetpack」プラグインで人気記事一覧を実装しました。また投稿記事だけではなく任意の固定ページもランキングに含めて欲しいとのことだったので固定ページを含めたランキングで実装しました。
tcdテーマ(Zoomy)カスタマイズ
背景アニメーションの実装(particle.js)
particle.jsを使用してZoomyテーマに背景アニメーションを実装しました。
実際のページでは桜が散るアニメーションを実装しました。
A lightweight JavaScript library for creating particles.…
メインビジュアルの動画をスマホでも再生されるように変更
TCDテーマでは、メインビジュアルの動画を設定してもパソコンからしか表示されず、スマートフォンでは動画が静止画になってしまいます。しかし、スマートフォンでも動画を再生できるようにしたいというご要望があったため、そのようにカスタマイズしました。
WordPress「外観」の「メニュー」から任意の記事をサイドバーに表示させる機能の実装
「Walker_Nav_Menu」クラスを使用してWordPressの管理画面「外観」の「メニュー」から任意の記事をサイドバーに表示させる機能の実装をしました。
固定サイドバーの実装
スクロールした時にサイドバーを固定し、上記で設定した任意の記事を固定で追従するようにしました。
cssのposition: sticky;を使用しました。
Site Reviewsプラグインの平均レビュー順に並べる機能の実装
サンプルは下記です。
横スクロールができるタブでアクティブタブを常に表示させる機能の実装
上記の製品一覧サンプルページに、製品カテゴリー「全ての商品」「ゲーム」「スポーツ」「ペット」「本」「衣類」「道具」「食品」があります。スマートフォンで表示するとカテゴリーがすべて見えないので横スクロールできるようにしています。しかし、通常時に見えないカテゴリーでもアクティブになっていれば表示されるようにしています。ご確認ください。
メインビジュアルの画像とリンク先を管理画面から変更できる機能の実装
クライアント様のご要望にお応えし、メインビジュアルの画像とリンク先を管理画面から変更できるようにカスタマイズしました。
プラグインの「Smart Custom Fields」を使用しました。
修正・エラー解消
カラーミーショップ使用していないcssの削減
約3000行あったcssをおよそ半分まで削減しました。
ページスピードの改善(34点から97点)
- 画像の圧縮
- 画像をwebpに変換
- jQueryをJavaScriptに変換
- Googlefont(Noto Sans JP)の圧縮
- imgタグにwidth属性とheight属性の指定
など
