【WordPress】プラグインなしで管理画面をカスタマイズする方法

シュウ

公開日: 2020.01.25 / 更新日: 2026.10.20
今回は【WordPress】プラグインを使わずに管理画面をカスタマイズする方法の解説になります！ダッシュボードにショートカットボタンを追加して、管理画面を使いやすくします。

こんな方に読んでほしい

お客様にWordPressを納品する制作担当の方
管理画面の操作に慣れていないお客様でも、迷わず使える画面にしたい方です。
プラグインを増やさずに管理画面を改善したい方
functions.phpとCSSだけで、軽量にカスタマイズしたい方です。
functions.phpの使い方を学びたい方
コピペで使えるコードを用意して、ステップごとに解説しています。

[記事の内容]

プラグインを使わずにWordPress管理画面をカスタマイズする理由

WordPressの管理画面は、プラグインを使わなくても、functions.phpとCSSだけでカスタマイズできます。プラグインを増やすと、更新の手間や動作の重さが増えてしまいます。

今回は、ダッシュボードに「投稿新規追加」や「メディア追加」などのショートカットボタンを追加する方法を紹介します。よく使う画面にワンクリックで移動できるので、管理画面に慣れていないお客様にも便利です。

こう見ると、左のサイドメニューの文字が小さく見える方もいますね。

準備するもの

今回は、次の2つのファイルを使用します。

admin-custom.css(管理画面用のオリジナルCSS)
functions.php(テーマのPHPファイル)

ダッシュボードにショートカットボタンを追加する方法

管理画面用のCSS(admin-custom.css)を作成する

テーマのフォルダ内にadmin-custom.cssを作成し、次のCSSを記述します。ショートカットボタンのデザインを指定するCSSです。

/* ダッシュボードを1カラム表示にする */
#wpbody-content #dashboard-widgets .postbox-container {
  width: 100% !important;
}

/* ボタンを並べるエリア */
.dashbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ボタン1つ分(2列で表示) */
.dashbox {
  flex: 0 0 calc(50% - 5px);
  box-sizing: border-box;
  background-color: #eeeeee;
  border: 1px solid #ffffff;
  border-radius: 7px;
  box-shadow: 0 0 3px #999999;
}

/* リンク部分 */
.dashbox a {
  display: block;
  padding: 30px 50px;
  font-size: 16px;
  color: #666666;
  text-align: center;
  text-decoration: none;
  border-radius: 3px;
}

/* ホバー時 */
.dashbox a:hover {
  color: #ffffff;
  background-color: #00cccc;
}

/* スマホ表示では1列にする */
@media screen and (max-width: 782px) {
  .dashbox {
    flex-basis: 100%;
  }
}

●①1カラム表示: .postbox-containerの幅を100%にして、ダッシュボードを1カラムで表示します。!importantは、WordPress標準のCSSより優先させるために指定しています。

●②ボタンを並べるエリア: display: flex;とflex-wrap: wrap;で、ボタンを横に並べて、入りきらない分は折り返します。gapでボタン同士の間隔を指定します。

●③ボタン1つ分のサイズ: flex: 0 0 calc(50% - 5px);で、ボタンの幅を約半分にして2列で表示します。5pxは、gapの半分の値です。

●④リンク部分のデザイン: display: block;でリンク全体をクリックできるようにして、paddingでボタンの大きさを調整します。

●⑤ホバー時の色: a:hoverで、マウスを乗せたときに背景色と文字色を変更します。

●⑥スマホ表示への対応: @media screen and (max-width: 782px)で、WordPress管理画面のスマホ幅のときにボタンを1列にします。

色やフォントサイズ、ボタンの大きさは、お好みに合わせて変更できます。

functions.phpで管理画面にCSSを読み込む

次に、テーマのfunctions.phpに、先ほど作成したCSSを管理画面で読み込むコードを追加します。

/* ------------------------------------------------------------------------------
	管理画面カスタマイズ
------------------------------------------------------------------------------ */

// 管理画面にオリジナルCSSを読み込む
add_action( 'admin_enqueue_scripts', 'admin_css_custom' );
function admin_css_custom() {
  wp_enqueue_style(
    'admin-custom',
    get_stylesheet_directory_uri() . '/admin-custom.css',
    array(),
    '1.0'
  );
}

●①admin_enqueue_scriptsフック: add_action( 'admin_enqueue_scripts', ... )で、管理画面でCSSやJavaScriptを読み込むタイミングに関数を実行します。

●②wp_enqueue_style: wp_enqueue_style()は、CSSを読み込むWordPress標準の関数です。1つ目の値は、CSSを識別する名前(ハンドル名)になります。

●③CSSファイルの場所: get_stylesheet_directory_uri()で、現在使用しているテーマのフォルダのURLを取得します。子テーマを使っている場合は、子テーマのフォルダを指します。

●④バージョン指定: 最後の'1.0'はCSSのバージョンです。CSSを更新したときに数字を変えると、ブラウザのキャッシュを更新できます。

functions.phpでダッシュボードにウィジェットを追加する

続けて、ダッシュボードに「更新」というウィジェットを追加するコードを、同じfunctions.phpに記述します。

// ウィジェットの中身(ショートカットボタン)
function example_dashboard_widget_function() {
  ?>
  <div class="dashbox-list">
    <div class="dashbox"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" target="_blank" rel="noopener">「サイトを表示」</a></div>
    <div class="dashbox"><a href="<?php echo esc_url( admin_url( 'post-new.php' ) ); ?>">「投稿新規追加」</a></div>
    <div class="dashbox"><a href="<?php echo esc_url( admin_url( 'edit.php' ) ); ?>">「投稿一覧」</a></div>
    <div class="dashbox"><a href="<?php echo esc_url( admin_url( 'media-new.php' ) ); ?>">「メディア追加」</a></div>
    <div class="dashbox"><a href="<?php echo esc_url( admin_url( 'upload.php' ) ); ?>">「メディア一覧」</a></div>
  </div>
  <?php
}

// ダッシュボードにウィジェットを登録する
function example_add_dashboard_widgets() {
  wp_add_dashboard_widget( 'example_dashboard_widget', '更新', 'example_dashboard_widget_function' );
}
add_action( 'wp_dashboard_setup', 'example_add_dashboard_widgets' );

●①ウィジェットの中身を出力: example_dashboard_widget_function()の中で、ショートカットボタンのHTMLを出力します。dashboxを1つ追加するごとに、ボタンを1つ増やせます。

●②リンク先のURLを取得: home_url( '/' )でサイトのトップページ、admin_url( 'post-new.php' )で管理画面内のページのURLを取得します。

●③URLのエスケープ: esc_url()で、URLを安全な形式に変換してから出力します。

●④ウィジェットの登録: wp_add_dashboard_widget()で、ダッシュボードにウィジェットを追加します。値は順に「ウィジェットのID」「表示するタイトル」「中身を出力する関数名」です。

●⑤wp_dashboard_setupフック: add_action( 'wp_dashboard_setup', ... )で、ダッシュボードの準備ができたタイミングに登録処理を実行します。

注目ポイント: ボタンを増やしたいときは「dashbox」を追加！

<div class="dashbox">の1行をコピーして、
リンク先と文言を書き換えるだけで、ショートカットボタンを増やせます。

ダッシュボードで動作を確認する

コードを保存したら、管理画面で次の手順で確認します。

●①管理画面にログイン: WordPressの管理画面にログインして、ダッシュボードを開きます。

●②「更新」ウィジェットを確認: ダッシュボードに「更新」のウィジェットが追加され、ショートカットボタンが表示されていれば成功です。

●③表示されない場合: ダッシュボード右上の「表示オプション」を開き、「更新」にチェックが入っているか確認してください。

左サイドメニューの文字を大きくする

冒頭で話題になった、左サイドメニューの文字が小さい問題は、同じCSSファイルに次のコードを追加すると解消できます。

/* 左サイドメニューの文字サイズを大きくする */
#adminmenu .wp-menu-name {
  font-size: 16px;
}

●①#adminmenu: #adminmenuは、WordPress管理画面の左サイドメニュー全体のIDです。

●②.wp-menu-name: .wp-menu-nameは、「投稿」や「固定ページ」などのメニュー名の部分です。font-sizeの値を変更すると、文字の大きさを調整できます。

管理画面のバージョンによってCSSの構造が変わる場合があります。文字サイズが変わらないときは、ブラウザの検証ツールでクラス名を確認してください。

注意点

テーマを更新すると、functions.phpとCSSが上書きされる場合があります。子テーマを使うことをおすすめします。
ダッシュボードのウィジェットは、ログインしているすべてのユーザーに表示されます。管理者だけに表示したい場合は、current_user_can()で権限を判定する条件を追加します。
functions.phpの編集前には、バックアップを取っておくと安心です。記述ミスがあると、サイトが表示されなくなる場合があります。