プラグインなしでダッシュボードを1〜４カラムレイアウトに変更する方法

はじめに
完成イメージ
実装手順
さいごに

はじめに

WordPress 3.8の改善点の1つは、ダッシュボードです。
この改善により、ダッシュボードウィジェットを表示する列数を選択するオプションが削除されました。

How To Set Up 1 Or 2 Columns For WordPress Dashboard Widgets

One of the improvements in WordPress 3.8 was the responsive dashboard. Thanks to this improvement, the option to select ...

そのため、プラグイン「Dashboard Columns」を使いWordPress 3.8以前の1～4カラムまでを変更する方法があります。

なお、以下の記事でコードを追加する方法も紹介されていますが、そのままではCSSが期待通りに適用されないケースがあります。

【WordPress】ダッシュボードのカスタムウィジェットを横１列にする方法

ワードプレスの管理画面を開いた時に表示される、自由に表示非表示や並び替えができる便利な「ダッシュボードウィジェット」ですが、例えばこちらのダッシュボードを「１列にしたい」と思った時に使える方法です。ダッシュボードの標準は３列標準の表示列数は...

そこで、プラグイン「Dashboard Columns」などを使用せずに、ダッシュボードを1～4カラム表示とします。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

// 画面レイアウト列を変更
add_filter('screen_layout_columns', function ($columns) {
  $columns['dashboard'] = 4;

  return $columns;
});


// 管理画面用JS・CSSを追加
add_action('admin_enqueue_scripts', function ($hook) {
  if ($hook !== 'index.php') {
    return;
  }

  ob_start();
  ?>
  #wpbody #wpbody-content #dashboard-widgets {
    .postbox-container {
      width: 100%;
    }

    &.columns-1 {
      #postbox-container-2 .empty-container,
      #postbox-container-3 .empty-container,
      #postbox-container-4 .empty-container {
        display: none;
      }
    }

    &.columns-2 {
      #postbox-container-3 .empty-container,
      #postbox-container-4 .empty-container {
        display: none;
      }
    }

    &.columns-3 {
      #postbox-container-4 .empty-container {
        display: none;
      }
    }
  }

  @media (width >= 800px) {
    #wpbody #wpbody-content #dashboard-widgets:not(.columns-1) .postbox-container {
      width: 50%;
    }
  }

  @media (width >= 1500px) {
    #wpbody #wpbody-content #dashboard-widgets {
      &.columns-3 .postbox-container {
        width: 33.33%;
      }

      &.columns-4 .postbox-container {
        width: 25%;
      }
    }
  }
  <?php
  wp_add_inline_style('wp-admin', ob_get_clean());
});

さいごに

今回紹介した方法を使えば、プラグインを使わずに、WordPressダッシュボードの表示を1〜4カラムに最適化できます。
管理画面の視認性を高め、ウィジェットの配置を自分好みに整理したい方は、ぜひ試してみてください。