ワードプレス プラグイン作成 サイドメニューのトップレベルメニュー一番上に表示

トップレベルメニューに自作プラグインを表示させたい

今までは「admin_menu」フックでワードプレス管理画面の左メニューの設定の中に自作プラグインを表示させていましたが、「add_menu_page」などを追加して左メニューのトップレベルに自作プラグインを表示させたい!と思いましたのでやってみます。

トップレベルメニューへ

今まで設定の中にリンクがありましたが、投稿の上あたりに表示させたい。ただそれだけなんです(汗)

こうすれば、記事投稿時の作業も多少やりやすくなります。多少ですが・・・

プラグインのメインファイルにフックを書くことによってワードプレスのサイドメニューに管理画面が表示されるようになります。

プラグインのディレクトリの場所

public_html/wp-content/plugins/該当プラグイン名のディレクトリ/該当プラグイン名.php

こちらのファイルに書いていきます。

トップレベルメニューにカスタムメニュー(自作プラグイン)を表示

WordPressCodex日本語版管理メニューの追加に詳しく載っています。

add_action('admin_menu', 'item_survey');
function item_survey() {
    add_options_page('設定サブメニュー', '設定サブメニュー', 8, 'options-submenu', 'options_page');
    add_management_page('ツールサブメニュー', 'ツールサブメニュー', 8, 'tools-submenu', 'tools_page');
    add_menu_page('アイテム調査', 'アイテム調査', 8, __FILE__, 'spec_admin');
    add_submenu_page(__FILE__, '価格調査', '価格調査', 8, 'kakaku-tyousa', 'kakakutyousa_admin');
}
function options_page() {//設定のサブメニューに表示
    echo "<h2>設定サブメニュー</h2>";
}
function tools_page() {//ツールのサブメニューに表示
    echo "<h2>ツールサブメニュー</h2>";
}
function spec_admin() {//メインページ
    echo "<h2>アイテム仕様</h2>";
}
function kakakutyousa_admin() {//サブページ
    echo "<h2>価格調査</h2>";
}

このように書くとサイドメニューに表示されたり設定の中やツールの中に表示されるようになります。

設定サブメニュー

設定サブメニューに管理画面のリンクを表示させたい場合はadd_options_pageを使う。

add_action('admin_menu', 'item_survey');
function item_survey() {

    add_options_page('設定サブメニュー', '設定サブメニュー', 8, 'options-submenu', 'options_page');
}
function options_page() {//設定のサブメニューに表示
    echo "<h2>設定サブメニュー</h2>";
}

上記(抜粋)のように書くと以下のように表示されます。

設定サブメニュー

ツールサブメニュー

設定サブメニューと同様にadd_management_pageを使うとサブメニュー内に表示される。

add_action('admin_menu', 'item_survey');
function item_survey() {
    add_management_page('ツールサブメニュー', 'ツールサブメニュー', 8, 'tools-submenu', 'tools_page');
}
function tools_page() {//ツールのサブメニューに表示
    echo "<h2>ツールサブメニュー</h2>";
}

ツールサブメニュー

このように表示される。

トップレベルメニューのみに表示

設定サブメニュー・ツールサブメニューは今のところ要らないので以下のようにしてみた。

add_action(‘admin_menu’, ‘item_survey’);
function item_survey() {
    add_menu_page(‘アイテム調査’, ‘アイテム調査’, 8, __FILE__, ‘spec_admin’);
    add_submenu_page(__FILE__, ‘価格調査’, ‘価格調査’, 8, ‘kakaku-tyousa’, ‘kakakutyousa_admin’);
}
function spec_admin() {//メインページ
    echo “<h2>アイテム仕様</h2>”;
}
function kakakutyousa_admin() {//サブページ
    echo “<h2>価格調査</h2>”;
}

一番下にカスタムメニューが表示される

ただ、一番下に表示されるので不満が残る。なんとか上の方に表示されるようにしたい。

WP管理画面のサイドメニューを並び替える

サイドメニューを並べ替える方法はないかと調べたところ、

WordPress 管理画面のカスタマイズ まとめのメニューの名称変更に詳しく載っていました。

あと、http://code.tutsplus.com/tutorials/customizing-your-wordpress-admin–wp-24941 こちらにも英語ですけど詳しく載ってます。

サイドメニューをカスタマイズするにはテーマのfunctions.phpにmenu_orderフックを追加するみたい。

public_html/wp-content/themes/テーマ名/functions.php

このファイルを編集してみます。

function custom_menu_order($menu_ord) {
    if (!$menu_ord) return true;
    return array(
        'admin.php?page=item-survey',      //自作プラグイン
        'index.php',                                // ダッシュボード
        'edit.php',                                    // 投稿
        'upload.php',                                // メディア
        'tools.php',                                // ツール
        'options-general.php',            // 設定
        'edit.php?post_type=page',    // 固定ページ
        'themes.php',                                // 外観
        'plugins.php',                            // プラグイン
        'link-manager.php',                    // リンク
        'edit-comments.php',                // コメント
        'users.php',                                // ユーザー
        'admin.php?page=jetpack',
        'admin.php?page=all-in-one-seo-pack',    
    );
}
add_filter('custom_menu_order', 'custom_menu_order');
add_filter('menu_order', 'custom_menu_order');

使う順に並べ替えてみた。JetpackやAll in one SEO Packも要らないので下の方に表示させようとしたがうまくいかない。

このフックをいれてみたところ??以下のような「フィードバック」という項目が出現!

JetpackやAll in one SEO Packいらないから下に表示させたかったけど、上のフックのようにしたら・・・一番上に表示されちゃう。どういうことだろう?

しばらく調査したが・・・サイドメニューはうまく並べ替えられないみたい。

そもそも、カスタムプラグインのadmin.phpのリンクは並べ替えできない?のかもしれない。

サイドメニュー並び替え解決

テーマ内のfunctions.phpでの並び替えがうまくいかないようだったので、add_menu_pageのパラメータで変更してみたらできた!

add_menu_page(‘ページタイトル’, ‘メニュー名’, 権限(数値), __FILE__, ‘コールバック関数’,’アイコンURL’,メニューの位置(数値));

最後のメニューの位置を「2」にしたら一番上に表示された。

一番上に表示された!

ヤッタ!これでサイドメニューのカスタマイズ完成です。