WordPressの管理画面に独自ページを追加してみる

2023.12.15 09:00

2023.12.15 12:25

前回は管理画面に独自メニューを追加しました。今回はそこをクリックした先の独自ページを作ってみます。

function add_page_admin_menu() {
  add_menu_page('メニュータイトル', '独自メニュー', 'read', 'test', 'testfunc', 'dashicons-admin-generic');
}
add_action( 'admin_menu', 'add_page_admin_menu' );

function testfunc() {
  echo '追加メニューです';
}

前回はこんな感じでした。
今回の独自ページですが、ここでいうと「testfun()」の部分ですね。

結論から言うと、この関数の中にHTMLを書いていけばいいというシンプルなものです。
ただ、長々と書くとぐちゃぐちゃになりますね。
ということで外部ファイルにしちゃいます。まずはこう。

function add_page_admin_menu() {
  add_menu_page('メニュータイトル', '独自メニュー', 'read', 'test', 'testfunc', 'dashicons-admin-generic');
}
add_action( 'admin_menu', 'add_page_admin_menu' );

require_once('testfunc.php');

requrie_onceで呼び出します。そして呼び出されるファイルを作りましょう。

<?php
function testfunc() {?>

  <div class="wrap">
    <h2 class=".manual-title">独自ページ</h2>
    <br>
    <section>
      <p>
        文書をここに入れます。文書をここに入れます。
      </p>
    </section>
  </div>
<?php }

こんな感じです。
関数部分をこう書けば、HTMLを自由に書けるのは知りませんでした。便利ですね。
ページが増えてもこうやって外部に出してしまえばスッキリしますね。

外部CSSはどうするのでしょう？
調べたらこんな感じでできるみたいです。

まずはスタイルのPHPをつくります。
「admin_print_styles」で定義できるようです。
こんな感じ。

<?php 
function my_admin_style() {?>
<style>
  .manual-title {
    font-size: 2.4em;
    color: orange;
  }
</style>
<?php }
add_action('admin_print_styles', 'my_admin_style');

それをfunctions.phpなどで読み込みます。

require_once('style.php');

スタイルが無事反映されました！
これは管理画面内にマニュアルなどをつくるのに便利ですね。

今回は以上です！

WordPressの管理画面に独自ページを追加してみる

Category

Tag