【スマホ対応】WP Customer Reviewsをレスポンシブ化しよう

WP Customer Reviews 投稿フォームのレスポンシブ プラグイン

WordPressでレビュー、口コミ機能を実装する時に便利なプラグイン「WP Customer Reviews」ですが、残念なことにスマートフォンから閲覧すると、投稿フォームが横に飛び出て表示されるなど、最適化されていません。
今回はその対策として、スマホでも見やすくするために、レスポンシブデザインに編集してみました。

スポンサーリンク

「WP Customer Reviews」を使用した現状の投稿フォーム

下図は「WP Customer Reviews」を設置した、レスポンシブ化する前のページです。

WP Customer Reviewsスマホフォーム崩れ

投稿フォームが横に飛び出てしまっています。
※使用しているWordPressテーマによってフォームデザインは異なるかもしれません。

「WP Customer Reviews」投稿フォームのレスポンシブ化

投稿フォームをレスポンシブにするやり方はいくつかあると思いますが、今回ご紹介する方法はシンプルです。
以下にように、CSSを記述します。

記述するCSS

.wpcr3_div_2{
width: 100%!important;
}

table.wpcr3_table_2 tr{
margin-bottom: 10px;
display: block;
}

.wpcr3_table_2 td{
display: block!important;
}

.wpcr3_respond_2 input[type="text"]{
min-width: auto!important;
}

.wpcr3_respond_2 textarea{
min-width: auto!important;
}

どんなテーマを使っても最適化されやすいよう、項目名と入力エリアはあえて横並びにしない作りにしています。

CSSを記述する場所

子テーマがある場合は、そちらのCSSファイルに記述してください。
また「外観→カスタマイズ→追加CSS」にCSSを記述していただく形でも大丈夫です。

以下は、外観からの流れの手順です。

サイドバーから、外観→カスタマイズをクリックします。

外観からカスタマイズ

 

使用しているテーマのカスタマイズ画面に移るので、「追加CSS」をクリック。

現在のテーマ 追加CSS

 

CSSを記述して、「公開」ボタンを押せば完了です。

CSSを追加して公開をクリック

投稿フォームをレスポンシブにしたイメージ

僕の環境下でCSSを記述した場合、投稿フォームのイメージが以下の通りです。
(イメージはAndroidからです。iOSでも確認済み)

WP Customer Reviews投稿フォームのレスポンシブイメージ

「WP Customer Reviews」投稿フォームを開いた状態にしておく方法

「WP Customer Reviews」では、ボタンをクリックしないと投稿フォームが開きません。
これはこれでわかりやすいのですが、フォームを初めから開いた状態にしておきたい場合もあるでしょう。

そういった場合は、下記のCSSを記述することで対応できます。

記述するCSS

.wpcr3_respond_2{
display: block;
}

.wpcr3_show_btn,
.wpcr3_cancel_btn{
display: none;
}

記述する場所等については、前項を内容をご参考にしてください。

最後に

WEBサイトに、レビューや口コミ等の機能を簡単に取り入れられるプラグイン「WP Customer Reviews」ですが、ちょっとしたところはやはりカスタマイズなどが必要になってきます。

フォーム自体のデザインも、CSSを更に編集することで違ったデザインに変更できると思います。

「WP Customer Reviews」の設定方法やカスタマイズは、以下のページでも解説しているので、よろしければご参考にしてみてください。

 

人気のWordPressテンプレート
WordPressのテーマ(テンプレート)って、沢山あるけど無料と有料どっちが良いの?
そんな疑問にお答えすべく、おすすめのWordPressテーマをプロの目線でまとめてみました。
良かったら「フォロー」してね。
有益な情報を定期的につぶやき中。
お米と味噌汁がすきです…
マサムネ

フリーランスとして独立しブログ運営に勤しんでいる元WEBデザイナー。
記事を書くのって大変だけど色々な気付きがあって楽しい!
虚弱で家族に迷惑をかけてきたので、どんな親孝行ができるかプラン思考中。
日々穏やかでストレスを溜めない生活を心がけています。
フリーランス10年/ブログ10年/コンテンツSEOからの月収6桁達成
詳しいプロフィールはこちら

マサムネをフォローする
プラグイン
スポンサーリンク
ぽけぶ
タイトルとURLをコピーしました