ダッシュボードに自作ウィジェットを作ってみた話

まずはモノを見てください

完成形

ワードプレスにログインすると最初に表示されます。

メニューの数はもっと増やせます。偶数の方が綺麗にレイアウトできると思います。

オススメは左メニューの下の方に表示される項目や第２階層の項目など、毎回探すのが面倒なものをメニューとしてまとめると便利です。

作り方とコードの説明

ウィジェット追加のテンプレート（PHP）

// ウィジェットを追加する
function add_custom_widget() {
　//ここに表示させる処理を記述する
}
function add_my_widget() {
　//ダッシュボードに自作ウィジェットを追加する関数
　wp_add_dashboard_widget( 'custom_widget', 'ここにウィジェットタイトル', 'add_custom_widget' );
}

add_action( 'wp_dashboard_setup', 'add_my_widget' );

2行目、ウィジェットとして表示する内容（後述のHTML）をここに表示します。

7行目、「ここにウィジェットタイトル」の部分にウィジェットの見出しを記述します。custom_widgetがウィジェットのidになります。

wp_add_dashboard_widget()関数について
WordPress Codex 日本語版

10行目、管理画面のダッシュボードを表示する時に、自作ウィジェット「add_my_widget」が呼び出されるように設定しています。

ウィジェットに表示させる内容（HTML）

function add_custom_widget() {
    if ( is_user_logged_in() && current_user_can('level_10') ){ //管理者ユーザがログインしている場合
        echo '<ul class="custom_widget" style="margin-left: auto;margin-right: auto;">
        <li><a href="edit.php"><div class="dashicons dashicons-edit"></div><p>投稿</p></a></li>
        <li><a href="plugin-install.php"><div class="dashicons dashicons-admin-plugins"></div><p>プラグイン追加</p></a></li>
        <li><a href="theme-editor.php"><div class="dashicons dashicons-code-standards"></div><p>テーマエディタ</p></a></li>
        <li><a href="customize.php"><div class="dashicons dashicons-welcome-widgets-menus"></div><p>カスタマイズ</p></a></li>
        </ul>';
    }
}

function add_my_widget() {
    wp_add_dashboard_widget( 'custom_widget', 'よく使う機能たち', 'add_custom_widget' );
}
add_action( 'wp_dashboard_setuじp', 'add_my_widget' );

2行目は、管理者ユーザ（level_10）がログインしている場合、3行目以降を実行する判断をしています。

管理者ユーザ以外も設定できます。詳しくは下記リンクをご覧ください。

ログインユーザの権限について

3行目〜8行目について簡単に解説すると、
リスト内にあるaタグのhref属性に飛ばしたいリンク先を指定します。

「投稿」であれば「edit.php」、「プラグイン追加」であれば「plugin-install.php」、「テーマエディタ」であれば「theme-editor.php」、「カスタマイズ」であれば「customize.php」になります。

他にリンク先を設定したい場合は、下記サイトに一覧が記載されていますので参考にしてください。

WordPressの管理画面を使いやすくする簡単カスタマイズ18選

アイコンはWordPress標準で実装されているdashiconsを使用します。

クラスのdashicons-media-documentの部分を変更することで対応したアイコンを表示できます。

各アイコンのコードはこちらをご覧ください。

ウィジェットにスタイルを適用（CSS）

このままだとプレーンなままなのでスタイルを適用します。

FlexBoxを使って横方向に並ぶようにレイアウトしております。一行で表示できない場合、自動で改行するようにしてあります。

FlexBoxについては下記リンクをご覧ください。

【保存版】CSS Flexbox プロパティまとめ

以下のようにして管理画面にスタイルを適用させます。

ul.custom_widget {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* FlexBoxを適用 */
  clear: both;
  overflow: hidden;

  -ms-flex-wrap: wrap;
  flex-wrap: wrap; /* 子要素が入りきらない場合は自動改行 */
}
.custom_widget li {
  float: left;

  margin: 10px;

  text-align: center;

  -webkit-box-flex: 1;
  -ms-flex: 1 0 180px;
  flex: 1 0 180px;
}
.custom_widget a {
  display: block;

  padding: 10px 20px 30px;

  color: #696969;
  border-radius: 10px;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#fa709a),
    to(#fee140)
  );
  background-image: -o-linear-gradient(left, #fa709a 0%, #fee140 100%);
  background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.custom_widget a:hover {
  color: #fff;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#2af598),
    to(#009efd)
  );
  background-image: -o-linear-gradient(left, #2af598 0%, #009efd 100%);
  background-image: linear-gradient(90deg, #2af598 0%, #009efd 100%);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.custom_widget .dashicons {
  font-size: 70px;

  display: block;

  width: 70px;
  height: 70px;
  margin: 10px auto 0;
  padding: 5px;

  border-radius: 10px;
}
.custom_widget p {
  font-size: 20px;
  font-weight: bold;

  margin-bottom: 0;
}

ダッシュボードに表示する
「Code Snippets」

Code Snippetsダウンロード

プラグインのメリット

・追加したコードは、テーマを変えても使用できる
・追加したコードの管理が簡単にできる
・コードごとにON/OFFの切り替えができる
・コード中の文法的なエラーを教えてくれる
・コードのインポート・エクスポートが行える

プラグインの使い方

プラグインの基本的な使い方はこちらをご覧ください。

コード貼り付け

コード全体

/* ------------------------------------------------------------------------------
ダッシュボードに自作ウィジェットを追加する
------------------------------------------------------------------------------ */
function add_custom_widget() {
if ( is_user_logged_in() && current_user_can('level_10') ){ //管理者ユーザがログインしている場合
echo '<ul class="custom_widget" style="margin-left: auto;margin-right: auto;">
    <li><a href="edit.php">
            <div class="dashicons dashicons-edit"></div>
            <p>投稿</p>
        </a></li>
    <li><a href="plugin-install.php">
            <div class="dashicons dashicons-admin-plugins"></div>
            <p>プラグイン追加</p>
        </a></li>
    <li><a href="theme-editor.php">
            <div class="dashicons dashicons-code-standards"></div>
            <p>テーマエディタ</p>
        </a></li>
    <li><a href="customize.php">
            <div class="dashicons dashicons-welcome-widgets-menus"></div>
            <p>カスタマイズ</p>
        </a></li>
</ul>';
}
}

function add_my_widget() {
wp_add_dashboard_widget( 'custom_widget', 'よく使う機能たち', 'add_custom_widget' );
}
add_action( 'wp_dashboard_setup', 'add_my_widget' );

// 管理画面内で自作CSSを適用させる
function admin_css() {
echo '
<style>
    ul.custom_widget {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        /* FlexBoxを適用 */
        clear: both;
        overflow: hidden;

        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        /* 子要素が入りきらない場合は自動改行 */
    }

    .custom_widget li {
        float: left;

        margin: 10px;

        text-align: center;

        -webkit-box-flex: 1;
        -ms-flex: 1 0 180px;
        flex: 1 0 180px;
    }

    .custom_widget a {
        display: block;

        padding: 10px 20px 30px;

        color: #696969;
        border-radius: 10px;
        background-image: -webkit-gradient(linear,
                left top,
                right top,
                from(#fa709a),
                to(#fee140));
        background-image: -o-linear-gradient(left, #fa709a 0%, #fee140 100%);
        background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    }

    .custom_widget a:hover {
        color: #fff;
        background-image: -webkit-gradient(linear,
                left top,
                right top,
                from(#2af598),
                to(#009efd));
        background-image: -o-linear-gradient(left, #2af598 0%, #009efd 100%);
        background-image: linear-gradient(90deg, #2af598 0%, #009efd 100%);
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    }

    .custom_widget .dashicons {
        font-size: 70px;

        display: block;

        width: 70px;
        height: 70px;
        margin: 10px auto 0;
        padding: 5px;

        border-radius: 10px;
    }

    .custom_widget p {
        font-size: 20px;
        font-weight: bold;

        margin-bottom: 0;
    }
</style>
';
}
add_action('admin_head', 'admin_css');

ダッシュボードに表示されない場合

表示オプションにも追加したウィジェットの項目が追加されていると思うので確認してみてください。

以上で完成になります。

まとめ

WordPressにログインして最初の画面で表示されると「お？」となり利便性と満足度がアップすると思います。

さらに、ユーザーのお好みで自由にメニューを選択できるようにしたり、プラグイン化すると面白いかもしれません^^

他のサイトでは、functions.phpを直接編集するような内容を見受けます。
これでも実現できますが、構文エラーが発生するとブラウザの画面が「真っ白」になったり、WordPressがダウンしたり、エラー文が表示されてセキュリティリスクが高まったりしますので、プラグイン「Code Snippets」と組み合わせて影響範囲を限定した方が良いと思います。

WordPressの保守運用ならWEB先案内！

WordPressでのお困りの不具合等を復旧致します！

ココナラでも提供しております。ココナラだけでも、多数のご依頼を頂いています。またココナラではうれしい五つ星評価（最高評価）も頂いております。

ココナラでの評価・実績

WordPressの作業代行

お見積もりも、もちろん無料です。

日祝・時間を問わず対応しております。お気軽にご相談ください。

こんな不具合を解消しています。

下記のようなエラー復旧のご依頼を頂いています。

『WordPressにログインできない』
『ユーザー名、パスワードがわからなくなった』
『ワードプレスを更新したらおかしくなった』
『XXXX年間ビジターアンケートが表示された』
『ログインしようとしたら画面が真っ白（表示されなくなった）』
『サイトによくわからない文字が表示されている』
『400、500などのエラー表示が出ている』
『ウィジェットやバーが表示されない』
『ページが真っ白、エラーページが表示される』
『プラグインが動かない』
『403エラーが出て、サイトが見れなくなった』
『ホームページが改ざんされてしまった』
『不正なアクセスの検知をした旨のメールが届いた…』
『Fatal error: Uncaught Error:
Call to undefined function wp_unregister_GLOBALS() 』に関するエラー
『作業はやるので代わりに調べて欲しい』
『調べた内容は本当にできる？』
『詳しい人のアドバイスが欲しいだけ』
『WordPressを始めてみたけどこの後どうすればいいの？』
『インストールしたテーマの使い方がわからない…』
『外観＞カスタマイズ』で設定できる内容
『ERR_TOO_MANY_REDIRECTS』に関するエラー
『WordPressのバージョンを上げたらおかしくなった』
『テーマを更新したらデザインが崩れてしまった』
『サーバーを移行したら表示がおかしくなった』
『phpのバージョンを上げたらおかしくなった』
『画像をメディアにアップロードできない』
『サイト内の画像がすべて表示されなくなった』
『ドメインを変更したら表示がおかしくなった』
『サーバー移管SSL化（https）』
『他のブログからの引っ越し（アメーバブログ・他のWordPress等）』
『用途に応じたサーバー選び』

その他『とにかく助けて欲しい！』など、お気軽にお問い合わせ下さい

どのようなエラーでも復旧可能？

下記３点のケースを除けば基本的に復旧は可能です。復旧出来ない可能性のあるケース

元データ自体が無くなってしまっている
サイトを改ざんされてり内部ファイルを書き換えられたり削除されている
データを誤って削除してしまい、バックアップが無い場合

バックアップをお持ちではなくともサーバー側で自動的にバックアップを取っている場合があり、復旧出来ることもあります。諦めずまずはお問い合わせ下さい。

お問い合わせ

「お見積もり無料です！」

費用は作業完了後にご納得の上でのお支払です。

作業の流れ（お見積もり）

ご連絡頂く
詳細をお聞きする
ログイン情報を頂く
サーバー・サイトにログインして状況を確認
お見積もり金額の提示
依頼頂くかキャンセルされるかご判断下さい。（ここでキャンセルも可）
ご依頼確定となれば作業開始
作業完了
サイトの確認をして頂く（問題ないようでしたらお支払いに進む）
お支払いのご案内（メールにてご請求の案内）
ご依頼・作業終了となります。

お問い合わせへ

WordPress保守管理します！

WordPress保守管理(月額)サービスも行っております。

ダッシュボードに自作ウィジェットを作ってみた話

まずはモノを見てください

完成形

作り方とコードの説明

ウィジェット追加のテンプレート（PHP）

ウィジェットに表示させる内容（HTML）

ウィジェットにスタイルを適用（CSS）

ダッシュボードに表示する
「Code Snippets」

プラグインのメリット

プラグインの使い方

コード全体

ダッシュボードに表示されない場合

まとめ

WordPressでのお困りの不具合等を復旧致します！

WordPressの作業代行

こんな不具合を解消しています。

どのようなエラーでも復旧可能？

お問い合わせ

WordPress保守管理します！

【事例紹介】Chromeの赤い画面「偽のサイトにアクセスしようとしています」を復旧し...

はじめてのコーディング技術

WordPress本体・プラグインを更新して不具合が！でも大丈夫！

スライドショー

イラスト・オブジェクトの動き

GSAPについて勉強してみたよ

画像リンクの動き

ボタン１

タブメニュー

常時SSL化に失敗してログインできない時の対処法

動く背景

GSAPについて勉強してみたよ

【プラグイン】無料在席キャスト管理システム krc-cast-manager を使ってみた

スクロールダウン

テキストの動き

まずはモノを見てください

完成形

作り方とコードの説明

ウィジェット追加のテンプレート（PHP）

ウィジェットに表示させる内容（HTML）

ウィジェットにスタイルを適用（CSS）

ダッシュボードに表示する 「Code Snippets」

プラグインのメリット

プラグインの使い方

コード全体

ダッシュボードに表示されない場合

まとめ

WordPressでのお困りの不具合等を復旧致します！

WordPressの作業代行

こんな不具合を解消しています。

どのようなエラーでも復旧可能？

お問い合わせ

WordPress保守管理します！

【事例紹介】Chromeの赤い画面「偽のサイトにアクセスしようとしています」を復旧し...

はじめてのコーディング技術

WordPress本体・プラグインを更新して不具合が！でも大丈夫！

スライドショー

イラスト・オブジェクトの動き

GSAPについて勉強してみたよ

画像リンクの動き

ボタン１

タブメニュー

常時SSL化に失敗してログインできない時の対処法

GSAPについて勉強してみたよ

常時SSL化に失敗してログインできない時の対処法

グローバルナビゲーション２

カウンタ + グラフ

ローディング

動く背景

GSAPについて勉強してみたよ

【プラグイン】無料在席キャスト管理システム krc-cast-manager を使ってみた

スクロールダウン

テキストの動き

ダッシュボードに表示する
「Code Snippets」