WordPress プラグイン開発
WordPress 口コミプラグイン開発
Cocoon テーマを使用したブログサイト向けに、Site Reviews プラグインの表示デザインをカスタマイズするオリジナルプラグインを開発。参考サイトのデザインを解析し、吹き出し・Swiper カルーセル・カードレイアウトを CSS のみで再現。
課題
既存の Site Reviews プラグインがデフォルトデザインのまま使われており、参考サイトと同等の「吹き出し見出し・Swiper カルーセル・星アイコン・カードレイアウト」にしたいというご要望でした。テーマ（Cocoon）の CSS と Site Reviews の CSS が競合しており、追加 CSS だけでは対応できない状況でした。
解決策
WordPress プラグインとして CSS・JavaScript・PHP をパッケージ化し、有効化するだけで自動的にデザインが変わる仕組みを構築。吹き出しは CSS の ::before / ::after で自動生成し、Site Reviews のカード一覧は JavaScript で Swiper カルーセルに変換。Cocoon のインライン CSS 結合にも対応し、!important の使い所を厳選して競合を解消しました。
実装した機能
吹き出し CSS 自動生成（::before / ::after）Swiper カルーセル変換（JS）レスポンシブ対応（3段階）Site Reviews デザイン上書きCocoon CSS 競合対策
成果
- ✓参考サイトのデザインを CSS のみで忠実に再現
- ✓プラグイン有効化だけで適用完了。ショートコードの変更不要
- ✓PC 3枚・タブレット 2枚・SP 1枚のレスポンシブカルーセルを実現
使用技術
WordPressPHPCSSJavaScriptSwiperSite Reviews