新潟県妙高市|ホームページと広告の相談相手

妙高Web屋

お仕事のご依頼お見積りのご依頼

WordPress

MW WP Formの問い合わせデータの表がスマートフォンで崩れている場合の対処法【WordPress】

2019.1.30 2019.1.30

MW WP Formの問い合わせデータの表がスマートフォンで崩れている場合の対処法【WordPress】
WordPress 0 0

こちらの記事は、このような方におすすめです。

・WordPressのプラグイン「MW WP Form」を使用されていて、スマートフォンからお問い合わせ件数をチェックされている方

WordPressのお問い合わせフォーム系のプラグインで多く用いられるもののひとつに、「MW WP Form」というものがあります。

私は単純に「エム・ダブリュー・ダブリュー・ピー・フォーム」と呼んでいます。

こちらのプラグインの特徴的な部分は、お問い合わせフォームが使えるのはもちろんとして、お問い合わせしてくださった方のデータを表形式にまとめて管理画面でチェックできること。

アンケートを取りたい場合などに重宝しそうなプラグインですね(^^)

ただし、

スマートフォンで管理画面の「お問い合わせデータ」を確認しようとすると、表が崩れている場合がある!!

WordPressの管理画面の「投稿」や「固定ページ」の一覧は、記事タイトルやカテゴリー、投稿日などが1件ずつ横に並んで、それが件数分だけ表になっていますよね?

一方で、「MW WP Form」の「お問い合わせデータ」をスマートフォンから確認しようとすると、PCでは表形式でタテヨコに並んでいるデータが全部タテ並びになってしまっているのです。

データ集計に誤りがあるわけではありませんし、スクロールすれば全部確認することは一応できます。

でも、スマートフォンからWordPressのデータを確認したい方もいらっしゃるでしょうし、確認するなら見やすい方が良いというのは自然な考え方だと思います。

そのような場合に、スマートフォンで管理画面の「お問い合わせデータ」のレイアウトを修正するCSSの記述があります。

作業しやすいようにPCから「MW WP Form」の「お問い合わせデータ」の画面を開いていただき、そのページのソースを見てみてください。

いくつかのCSSファイルを読み込んでいるかと思いますので、その中で、ご自身が一番編集しやすそうなCSSファイルの末尾に、下記のコードを追加してみてください。

@media screen and (max-width: 782px) {
.wp-list-table:not(.posts):not(.pages) tr:not(.inline-edit-row):not(.no-items) td:not(.check-column) {
display:table-cell !important;
}
}

上記の[max-width]の値は、お使いの端末などに応じて自由に調整してみだください。

スマートフォンより少し大きめのタブレット端末などでは、もう少し大きい値にした方が良い場合もあるかもしれませんし、そこはご自身の判断でお願いします。

レイアウト崩れの原因は、テーブルのtdタグに[display:block;]が指定されていることが原因のようでした。

それを解消するために[display:table-cell;]で上書きをして、念の為[!important]も追加したものです。

また、tableタグの部分は[.wp-list-table:not(.posts):not(.pages)]というクラス指定にしています。

[.wp-list-table]のすべてに上記のdisplay属性を指定してしまうと、「投稿」や「固定ページ」のリストにも影響を与えてしまうため、直後に[:not(.posts):not(.pages)]を付加することによって、

「固定ページは対象外、投稿でも対象外」

としています。

カスタム投稿タイプなどで独自の管理画面にされている方はこの限りではありませんが、参考になれば幸いです。

こちらの記事に感想をお寄せください

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
0 0

企業のWeb担当者さん向け!メルマガ購読はこちら

妙高Web屋では、ホームページの管理・運営のお役立ち情報を当サイト内よりも早く、メールマガジンでご紹介しております。

次回配信予定のテーマは、こちらです!

「無料でお仕事を依頼する&お受けするときに気をつけたい事」

気になる方は、下記のボタンからメルマガ購読をお申し込みください。

メルマガをご購読いただいた方には、妙高Web屋作成の無料レポート「ホントは公表したくない!受注につなげるホームページ作りの話」をプレゼントいたします。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ