blog ブログ

WordPress管理画面のサイドメニューに外部リンクの項目を追加する方法

はじめに

WordPress管理画面のサイドメニューに外部リンクのメニューを追加する備忘録です。
クライアント用の管理画面でサーバにアップロードしたpdfや、アナリティクスなどに管理画面から遷移させる場合に便利です。

functions.php

functions.phpに以下を記述して管理画面用のJSを読み込みます。
「admin-script.js」というJSファイルを用意しました。テーマ直下に設置してください。
今回はGoogle Analyticsのページへ飛ばすメニューを例として作ってみます。

//========================================================================
// 管理画面用JSを追加
//========================================================================
function my_admin_style(){
  wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'/admin-script.js' );
}
add_action( 'admin_enqueue_scripts', 'my_admin_style' );

//========================================================================
// サイドバーにメニューを追加
//========================================================================
function add_page_admin_menu() {
  add_menu_page('Google Analytics', 'Google Analytics', 'read', 'ga_link');
  /* ▼ GoogleAnalyticsの例以外の場合 -------------
  add_menu_page('★ラベル名★ '★ラベル名★', 'read', '★メニュー名(小文字の英数字)★');
  ---------------------------------------- */
}
add_action( 'admin_menu', 'add_page_admin_menu' );

JS(admin-script.js)

functions.phpで読み込んだadmin-script.jsのコードです。

jQuery(function($) {

  $("#toplevel_page_ga_link a").attr("href","https://analytics.google.com/analytics/web/");
  $("#toplevel_page_ga_link a").attr("target","_blank");

  /* ▼ GoogleAnalyticsの例以外の場合 -------------
  $("#toplevel_page_★メニュー名(小文字の英数字)★ a").attr("href","★遷移先URL★");
  ---------------------------------------- */

});

これで作業は完了となります。
クライアント用や社内用にアナリティクスやマニュアルなどを設置する際に便利な管理画面カスタムです。

お問い合わせのご確認

現在、コーディング業務・デザイン業務の外部委託は行っておりません
ご確認の上、ご連絡いただきますようお願いいたします。