管理画面のCSSをカスタマイズ
管理画面のスタイルを変更したくなったので、カスタマイズしてみました。一例として以下を取り上げてみます。
「投稿一覧」の画面でカスタムフィールドが追加されていくと、そんなに幅が必要のないところが長くなってしまって、逆にテキスト多のカラムが短いままで全体的に縦長になってしまうことありますよね。そこで、ここのスタイルを変更しようと思い立ちました。
変更内容
対象の「投稿一覧」のテーブルのカラム幅ですが、/wp-admin/css/admin.css内に記載されています。table-layout: fixedとなっているため、カラムが追加されると狭いままになってしまいます。そこで、autoに変更しました。
/* wp-content/theme/[テーマ名]/styles/wp-admin.css*/
table.fixed {
table-layout: auto;
}
プラグイン「Add Admin CSS」を使用して変更する
Add Admin CSSを使用すると管理画面に対して使用するCSSファイルもしくはCSSスタイルを追加することができます。Add Admin CSS
管理画面のCSSファイル(子テーマ)を作成して変更する
管理画面のCSSファイルは【/wp-admin/css】下に配置されています。ここのファイルはWordpress自体がアップグレードされる時に上書きされてしまうので、これも子テーマフォルダ下で管理するようにします。
テーマ下に空CSSファイルを作成し、そこに変更したい要素のスタイルを追加していきます。
このCSSは/wp-admin/css/下のCSSを読み込んだ後読み込まれるため、変更する部分だけ記述して下さい。
あとは、このCSSを読み込みなさいという処理を追加するだけです。
functions.phpへ以下を追記して下さい。
[php][/php]
// wp-content/theme/[テーマ名]/functions.php
function wp_custom_admin_css() {
$url = get_settings( 'siteurl');
$url = $url . '/wp-content/themes/[テーマ名]/styles/wp-admin.css';
echo '<!-- custom admin css -->
<!-- /end custom adming css -->';
}
add_action( 'admin_head', 'wp_custom_admin_css', 100);
**[テーマ名]は置き換えてください。
CSSファイル名は何でもいいですが変更対象CSSを対応させるため同じにしています。(変える場合は$urlで定義しているcssファイル名を変えて下さい。)
これで少しスッキリすると思います。
今回、一例を挙げてWordpress管理画面のCSS変更方法を投稿してみました。その他スタイルも同様の方法で変更できますので、「管理画面のここのスタイル気になる」という場合は、変更してみてはいかがでしょうか。
また、こんなことしなくても管理画面のスタイルをカスタマイズするためのプラグインもあるようなので探してみてもいいかもしれません。
関連記事
-
-
JSやCSSに自動で付与されるバージョン番号を非表示に
Wordpressでは、JSやCSSがロードされる際にlinkタグやscriptタグ内にWordpressやプラグインもしくはスクリプトそのもののバージョン番号が付与されます。「?ver=」で検索して
-
-
Twenty Fourteen クレジットを非表示・変更方法
Twenty Fourteenにも最下部に「Proudly powered by WordPress」というコピーライトが表示されます。それを削除もしくは変更するには、footer.phpを編集して行
-
-
画像マウスオーバーでキャプションを表示
メディアをアップロードした際に、「キャプション」項目にテキストを設定された画像を挿入した場合はキャプションショートコードが生成され、ページ内の各画像下にその設定したテキストが表示されます。 今回
-
-
「編集(Edit)」リンクの非表示方法
ログインした状態で投稿ページを開くと投稿内や各コメントに各編集ページへリンクしてくれる「編集」リンクが表示されます。(繰り返し言いますが、自サイトにログインしているユーザにしか見えません。) こ
-
-
アバターサイズの変更など Twenty Twelve 1.3での変更点
Twenty Twelve 1.3 での変更点 アバターサイズの設定ロジック変更 ヘッダ画像の設定ロジック変更 全ての変更点はこちら Changes from twentytwel
-
-
Google+ プラスワン(+1)ボタンの設置
Google+の+1ボタンの設置はプラグインを使用しなくても容易に実装できるようです。ソーシャルボタン設置のプラグインはこちらにいちおうまとめています。 プラスワン(+1)ボタンの設置コード 公式
-
-
jQueryをCDNから読み込む
WordPressではデフォルトでjQueryライブラリが同梱されています。この記事では、それをやめて、CDNから読み込み、使用する方法を解説します。 WordPress 3.6 3.9 4.0
-
-
Twenty Twelve 投稿者情報を表示/非表示に
TwentyTwelveでは、投稿ページごとに投稿者の情報を掲載することができます。他のテーマでも同様だと思います。こんな感じです。ここでは、掲載と削除の方法について記載します。 表示方法 「
-
-
Twenty Eleven カスタマイズ
目次 author-info 消す 作成者(投稿者)を消す 投稿者情報を表示しない proudly powered by wordpressのリンクをコピーライトに変更
-
-
「続きを読む」(moreタグ)をカスタマイズ
WordPressではほとんどのテーマでは、複数の投稿を表示するアーカイブページ(カテゴリー別、タグ別、年月日別、作成者別など)ではmoreタグ(<!--more-->)を挿入することで、








Comment
wp管理画面
https://t.co/eGysK1jqmm
管理画面のCSSをカスタマイズ https://t.co/cfHIJq36ZZ #pocket2twitter
レスポンシブの管理画面を無効化したい https://ja.forums.wordpress.org/topic/137463
1件のコメント http://t.co/MwHDsboBvR “WordPress | 管理画面のCSSをカスタマイズ | Think deeply, Do less, More effective” http://t.co/3USvD1YnGh
管理画面
テーマ下に空CSSファイルを作成し、そこに変更したい要素のスタイルを追加していきます。 このCSSは/wp-admin/css/下のCSSを読み込んだ後読み込まれるため、変更する部分だけ記述して下さい。