[WordPress]管理者メニューに機能を追加するアレ

[コレ](https://qiita.com/AsilHatake/items/5991b796ca409c4613d3)の拡張記事です。
※WordPress環境作ってレッツトライ!!

# 有償使うとか甘えだよね（ｷｬﾊﾊ
プロジェクト的に金はあるけど時間がない場合は、金に物を言わせて有償のライブラリだったりツールを使ってガンガン作っていけばいいけど、そんなポンポン用意できるところなんか限られてたりするので、プログラマなら当然自作してオラオラしたいよね!!

# WordPressで管理者メニュー作ってオラオラする雛形的なアレ
よく管理者メニューを追加して画面とかガジェット作るみたいな記事がよくありますが、
WordPressバブちゃんからするとそもそも「functions.php」ってどこにあるの？ってところからのスタートだと思うので、とりあえず冒頭の記事で作ったWordPress:6.5.4で作られた記事にデフォルトで入ってるテーマの「Twenty Twenty-Four」を使って、ソレを魔改造しながら変えてみようっていう話。

![スクリーンショット 2024-07-05 122126.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/996378/d1365942-eedc-1e13-19b8-450d725906e3.png)

## そもそもテーマファイルってどこに有るの？
テーマをインストールすると以下のフォルダに格納がされます。

/ WordPressのルートディレクトリ
　|- wp-content
　　|- themes
　　　|- テーマフォルダ
   ![スクリーンショット 2024-07-05 122301.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/996378/eecd1f05-d675-1503-b60c-1fc1a1d4ec59.png)

このフォルダの中に特定のファイル(style.cssだったりindex.htmlとか)を作れば、
自分の独自のテーマなんか楽勝に作れます!!

## で、肝心のfunctions.phpってどこ何？
テーマフォルダの直下にいるよ（いないことも有るから、そん時は空の名前で作ればいいよ
※テーマ「Twenty Twenty-Three」にはいないよ
![スクリーンショット 2024-07-05 123835.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/996378/c1bdb6f2-3f18-04c7-0905-0fb0316c5676.png)

作る場所やファイル名とかが決まっているので、ルールに沿って作ってね!!

## メニューとその遷移先の画面の作り方は？
functions.phpのどこでもいいのでこんな感じのコードを書く
※サンプルとして、HPに表示する企業情報を登録するやつを作るよ
```php:functions.php
<?php
// 新規でファイルを作った場合だけ↑を入れてね！既存テーマに何かする場合は不要
// メニュー追加
function add_custom_admin_menu() {
    add_menu_page(
        '会社情報', // Page title
        '会社情報', // Menu title
        'manage_options', // Capability
        'company-info', // Menu slug
        'regist_company_info_page', // Callback function（画面を作る関数を指定）
        'dashicons-admin-generic',             // Icon
        2                                     // Position（挿入場所）
    );
}
// add_actionの第1引数に'admin_menu'を指定して、第2引数に作った関数を指定する
add_action('admin_menu', 'add_custom_admin_menu');

// 登録画面の定義
function regist_company_info_page() {
    ?>
    <div class="wrap">
        <h1>会社情報</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('custom_theme_options');
            do_settings_sections('custom_theme_options');
            submit_button(); // 登録ボタンの追加
            ?>
        </form>
    </div>
    <?php
}

function settings_init() {
    register_setting('custom_theme_options', 'custom_theme_options');

    add_settings_section(
        'section', 
        '基本情報', 
        null, 
        'custom_theme_options'
    );

    add_settings_field(
        'company_name',
        '企業名',
        'company_name_render',
        'custom_theme_options',
        'section'
    );

    add_settings_field(
        'ceo_name',
        '代表名',
        'ceo_name_render',
        'custom_theme_options',
        'section'
    );

    add_settings_field(
        'company_locations',
        '所在(本社)<br />所在(営業所1～)',
        'company_locations_render',
        'custom_theme_options',
        'section'
    );
}
add_action('admin_init', 'settings_init');

function company_name_render() {
    $options = get_option('custom_theme_options');
    ?>
    <input type="text" name="custom_theme_options[company_name]" value="<?php echo $options['company_name']; ?>">
    <?php
}

function ceo_name_render() {
    $options = get_option('custom_theme_options');
    ?>
    <input type="text" name="custom_theme_options[ceo_name]" value="<?php echo $options['ceo_name']; ?>">
    <?php
}

function company_locations_render() {
    $options = get_option('custom_theme_options');
    ?>
    <input type="text" name="custom_theme_options[company_locations_main]" value="<?php echo $options['company_locations_main']; ?>"><br />
    <input type="text" name="custom_theme_options[company_locations_sub1]" value="<?php echo $options['company_locations_sub1']; ?>"><br />
    <input type="text" name="custom_theme_options[company_locations_sub2]" value="<?php echo $options['company_locations_sub2']; ?>"><br />
    <input type="text" name="custom_theme_options[company_locations_sub3]" value="<?php echo $options['company_locations_sub3']; ?>"><br />
    <input type="text" name="custom_theme_options[company_locations_sub4]" value="<?php echo $options['company_locations_sub4']; ?>"><br />
    <input type="text" name="custom_theme_options[company_locations_sub5]" value="<?php echo $options['company_locations_sub5']; ?>"><br />
    <?php
}
```

## こんなん出ます!!
メニューに「会社情報」がでて、開くとシンプルな登録画面が表示されるようになりました。
![スクリーンショット 2024-07-05 132620.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/996378/4dd45646-85f8-44a7-305d-fca4f63d7f14.png)
もちろんここで登録した情報は画面側で参照することが可能になります。

## 画面から使う場合はPHPで
```php
<main>
    <?php
    $options = get_option('custom_theme_options');
    ?>
    <h1><?php echo esc_html($options['company_name']); ?></h1>
    <ul>
        <?php
        echo '<li>' . esc_html(trim($options['company_locations_main'])) . '</li>';
        echo '<li>' . esc_html(trim($options['company_locations_sub1'])) . '</li>';
        echo '<li>' . esc_html(trim($options['company_locations_sub2'])) . '</li>';
        echo '<li>' . esc_html(trim($options['company_locations_sub3'])) . '</li>';
        echo '<li>' . esc_html(trim($options['company_locations_sub4'])) . '</li>';
        echo '<li>' . esc_html(trim($options['company_locations_sub5'])) . '</li>';
        ?>
    </ul>
<main>
```
とまぁ、こんな感じで登録画面みたいなのは簡単に作れます。

# ね、簡単でしょ？
色々と手間だったり何だりは当然ありますが、自分で好き勝手カスタマイズ出来るのっていいよね！