プラグインの設定ページもレスポンシブ対応

(3.8以降)
プラグインの設定ページもレスポンシブ対応 - プラグインなどで管理画面をカスタマイズする際に意識しておくこと

説明

レスポンシブ対応したWordPressの管理画面。プラグインやテーマのカスタマイズで管理画面を拡張しているなら、切り替わるタイミングはきっちり押さえておきたいところではないだろうか。

確認方法は簡単で、ブラウザで幅を狭くしたり、広くしたりすればいい。整理すると、次のような感じになる(他にもあるかもしれないが)。

内容
901ピクセル以上標準設定
900ピクセル以下サイドナビゲーションがアイコンのみ
850ピクセル以下投稿画面のウィジェットが1段
782ピクセル以下サイドナビゲーションが消え、フォントが大きくなる

画面の見た目がはっきり変わるのが、幅が782ピクセル以下か783ピクセル以上かである。782ピクセル以下の場合は、ページ構成がシンプルになり、フォントサイズが変わることは意識しておきたい。

スタイルシートのスケルトンは次の通り。

<style type="text/css">
/* 幅が901px以上のスタイル */


@media screen and (max-width: 900px) {
	/* サイドナビゲーションがアイコンのみ */

}
@media screen and (max-width: 850px) {
	/* 投稿画面のウィジェットが1段になる */

}
@media screen and (max-width: 782px) {
	/* サイドナビゲーションが消え、フォントが大きくなる */

}
</style>

まあ3.8と3.9ではスタイル設定が微妙に違っているので、最終的には実際の画面で確認してほしい。

関連

お勧めコンテンツ

get_edit_term_link(2015年6月25日 登録)

string get_edit_term_link( int $term_id [ , string $taxonomy = '' [ , string $object_type = '' ] ] )
タームの編集ページURLを取得する。

status_header(2010年5月24日 登録)

void status_header( int $code [ , string $description = '' ] )
header関数を呼び出し、HTTPステータスをセットする。

wp_set_post_terms(2012年7月5日 登録)

mixed wp_set_post_terms( [ int $post_id = 0 [ , mixed $tags = '' [ , string $taxonomy = 'post_tag' [ , bool $append = false ] ] ] ] )
投稿情報に投稿タグを設定する。

__(2010年6月17日 登録)

string __( string $text [ , string $domain = 'default' ] )
現在のロケールに応じた翻訳テキストを取得する。

set_url_scheme(2016年3月9日 登録)

string set_url_scheme( string $url, string $scheme = null )
URLに適正なスキーマをセットする。

最終更新日時 : 2014-06-03 18:08