管理画面の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変更方法を投稿してみました。その他スタイルも同様の方法で変更できますので、「管理画面のここのスタイル気になる」という場合は、変更してみてはいかがでしょうか。
また、こんなことしなくても管理画面のスタイルをカスタマイズするためのプラグインもあるようなので探してみてもいいかもしれません。

  • このエントリーをはてなブックマークに追加

関連記事

コメントフォーム・リストのカスタマイズ

コメント投稿部分は、基本的にはどのテーマでも同じフォームを出力してテーマのstyle.cssで外観を変えています。コメントフォーム欄をカスタマイズするには、プラグインもしくはフックを用いてカスタマイズ

投稿記事から「(ログイン)ユーザー名」がバレるのを防ぐ

ここ最近、アカウント乗っ取りやセキュリティ事故関連のニュースが相次いでいますが、WordPressで制作されたサイトも標的に会っているようです。一般的な手法としては「ブルートフォースアタック」という手

Twenty Eleven カスタマイズ

目次 author-info 消す 作成者(投稿者)を消す 投稿者情報を表示しない proudly powered by wordpressのリンクをコピーライトに変更

アバターサイズの変更など Twenty Twelve 1.3での変更点

Twenty Twelve 1.3 での変更点 アバターサイズの設定ロジック変更 ヘッダ画像の設定ロジック変更 全ての変更点はこちら Changes from twentytwel

Twenty Twelve "Proudly powered by WordPress"をCopyrightに変更

標準でページの最下部に表示される"Proudly ~"を変更します。 子テーマフォルダにfooter.phpをコピーし、以下のように編集を行ってください。リンクを外して、表示部分を書き換えるだけです

head内に出力される要素を整理

Wordpressを使用していくうちに、head内がカオスな状態になっていくきますよね。そこで、そういう状態になったものをスッキリさせていこうという試みをやっていこうと思います。 削除方法 取り急

titleタグ(wp_title) カスタマイズ

SEO対策を行う際に、titleタグは重要な要素だと言われています。 「サイトのタイトル」、「キャッチフレーズ」(site_description)、「カテゴリー名」など色々と組み合わせてみることが

jQueryをCDNから読み込む

WordPressではデフォルトでjQueryライブラリが同梱されています。この記事では、それをやめて、CDNから読み込み、使用する方法を解説します。 WordPress 3.6 3.9 4.0

Twenty Fourteen カスタマイズ

「Twenty Fourteen」はWordPress 3.8のデフォルトテーマです。TwentyThirteenから彩りもガラッとかわってますね。個人的には、すごく好きなデザイン。 Twent

条件を付けて訪問時に開くポップアップを実装できる「WordPress Popup」

「WordPress Popup」は、ユーザの訪問時にポップアップを開くように実装できるプラグインです。それぞれ条件によって開くかどうかを設定することができます。 ダウンロード / サンプル イン

Comment

  1. テーマ下に空CSSファイルを作成し、そこに変更したい要素のスタイルを追加していきます。 このCSSは/wp-admin/css/下のCSSを読み込んだ後読み込まれるため、変更する部分だけ記述して下さい。

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑