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

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

関連記事

折りたたみ要素やタブなどをショートコードで実装できるプラグイン「Arconix Shortcodes」

「Arconix Shortcodes」は、投稿内にショートコードでいろいろな要素を実装できるプラグインです。ダウンロードはこちらからできます。ダウンロード・解凍してpluginsディレクトリにアップ

Twenty Fourteen "コメントをどうぞ"の非表示と変更方法

Twenty Fourteenでは、デフォルトで投稿ページと各アーカイブページの各投稿のメタ情報欄に「コメントをどうぞ」というコメントフォームへのリンクが設置されます。 それぞれ、コメントが0件の場

ナビゲーションメニューに検索フォームを追加

メニュー内に検索フォームを追加したいという問い合わせをいただいたので試してみました。 メニューのつくられかた まずは、WordPressでメニューがつくられる手順を説明します。 箱をつく

開発やテストに便利なプラグイン

開発やカスタマイズに使えそうなプラグインを集めてみました。 テーマのカスタマイズには、使用中のテンプレートファイルなどを表示してくれると便利ですね。個人的には、テーマ開発の際に、実行しているSQ

no image

「固定ページ」ウィジェット カスタマイズ

「固定ページ」ウィジェットは、そのままではありますが、固定ページの一覧をウィジェットに表示してくれます。 カスタマイズは、管理画面よりいくつかできるようです。 目次 特定の(固定)ページ

Twenty Fifteen テーマ用フォント "Noto" / "Inconsolata"の使用を止

TwentyFifteenでは、テーマ用のフォントとして「Noto」と「Inconsolata」というフォントをGoogleフォントから引っ張ってきて使用されるようです。 ちなみにどのようなフォント

Twitterのツイートボタンの設置

Twitterのツイートボタンの設置はプラグインを使用しなくても容易に実装できるようです。 ソーシャルボタン設置のプラグインはこちらにいちおうまとめています。 Tweetボタンの設置コード 公式

投稿タイトルのtitle属性を削除など Twenty Twelve 1.2での変更点

TwentyTwelveが1.1から1.2にアップデートされたので、いくつか変更点を洗ってみました。 (*全てを網羅しているわけではありません) 全ての変更部分は、こちらに記載されています。

コメント欄停止・コメント削除

WordPressでは標準でコメント機能が付いてきます。この投稿ではコメント機能の停止や既に投稿されたコメントを削除する方法を紹介します。 設定による停止方法 新規の投稿に関してコメントを停止

「最近のコメント」ウィジェットをカスタマイズ

「最近のコメント」ウィジェットは、サイトに投稿されたコメントを新しい日付順に表示してくれます。件数も「ウィジェット」ページで設定できます。(管理画面の「外観」→「ウィジェット」) (削除

Comment

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

Message

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

*

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

PAGE TOP ↑