この記事は最後に更新してから1年以上経過しています。

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

説明

レスポンシブ対応した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ではスタイル設定が微妙に違っているので、最終的には実際の画面で確認してほしい。


最終更新 : 2014年06月03日 18:08


お勧め

wp_get_original_image_path(2020年4月2日 更新)

string | false wp_get_original_image_path( int $attachment_id [ , bool $unfiltered = false ] )
オリジナルの画像ファイルのパス名を取得する。

wp_enqueue_style(2019年11月25日 更新)

void wp_enqueue_style( string $handle [ , string $src = false [ , array $deps = array() [ , string $ver = false [ , string $media = 'all' ] ] ] ] )
使用するスタイルシート(CSS)を出力用のキューに入れる。パラメータ$srcが指定された場合は、グローバル変数$wp_stylesに登録してから出力用のキューに入れる。

register_taxonomy_for_object_type(2014年7月1日 更新)

bool register_taxonomy_for_object_type( string $taxonomy, string $object_type )
投稿タイプにタクソノミーを割り当てる。

get_sitemap_url(2020年9月2日 更新)

string | false get_sitemap_url( string $name [ , string $subtype_name = '' [ , int $page = 1 ] ] )
XMLサイトマップのURLを取得する。

delete_term_meta(2018年5月27日 更新)

bool delete_term_meta( int $term_id, string $meta_key [ , mixed $meta_value = '' ] )
タームのメタ情報を削除する。