特定のユーザーでログインすると特定のテーマで表示されるプラグインをAIに作ってもらった

近頃、Chat GPT なるものが話題ですが、私もChat AI 的なサブスクリプションサービスを契約してみました。

お題目にもある通り、そのAIさんにWordPressプラグインを作ってもらいましたので紹介と共有をしようと思います。

— 追記 ＠2023年12月9日 —————————————-

WordPress 6.4 系以降、このプラグインが機能しなくなりました。。。

ご自身のWordPressのバージョンをご確認の上、自己責任でご使用ください。

— END 追記 ＠2023年12月9日 —————————————-

プラグインの仕様

Web開発をしていると、本番環境と開発環境が欲しくなるタイミングが必ず訪れますよね。

今回AIさんに作ってもらったプラグインは、WordPressにおいて、特定のユーザーでログインすると、そのユーザーと紐づいている特定のテーマでサイトが表示される、という仕様のプラグインです。

つまり、ログインしているユーザーに応じて表示されるテーマを切り替えるプラグイン、ということです。

ユーザーA でログインすると、テーマa でサイトが表示され、

ユーザーB でログインすると、テーマb でサイトが表示される、といった感じです。

実際にそのプラグインを有効化すると、ユーザーのプロフィール編集ページの最下部にこのようなセレクトボックスが表示されます。

ズームするとこんな感じです。↓↓↓

このセレクトボックスの選択肢の中に、使用可能なテーマが入っていまして、お好みのテーマを選択して保存する、ということになります。

具体的な使い方

具体的にどのように使うかというと、以下の流れでやっていきます。

1. 開発用テーマを作成
2. 開発者ユーザーを作成
3. 開発者ユーザーのプロフィール編集ページで開発用テーマを選択

この記事をご覧になっているあなたはおそらくWebエンジニアだと思いますので、ご存知の情報があるかと思います。

適宜、飛ばして先へ進んで読んでいってください。

それでは、行ってみましょう！

開発用テーマを作成

では、まずは開発用テーマを作成しましょう。
とは言っても何も難しいことはなく、本番用テーマを中身のファイルごと複製して、開発用テーマとしてフォルダ名を変更し、開発用テーマ直下のstyle.cssの中身を一部書き換えるだけです。

例えば、themesフォルダの中身がこんな感じだとしていたとすると

~/wp-content/themes/
└ sample（本番用テーマ）

本番用テーマを複製して、sample-develop というフォルダ名（フォルダ名は自由に決めてください）で開発用テーマを作りましょう。

~/wp-content/themes/
├ sample（本番用テーマ）
└ sample-develop（開発用テーマ）

こんな感じです。

続きまして、sample-develop の直下にある style.css ファイルを開いて、一部書き換えます。

本番用テーマ直下の style.css がこんな感じだとします。

/*
Theme Name: SAMPLE
Description: 本番用テーマです
*/

（style.css 内には他にもテーマの情報を書くことができますが今回は必要無いので割愛します）

開発用テーマ直下の style.css は、例えばこのように書き換えましょう。

/*
Theme Name: SAMPLE DEVELOP
Description: 開発用テーマです
*/

書き換えることができたら保存して、sample-develop フォルダをアップロードしましょう。

WordPressの管理画面の「外観」>「テーマ」を見てみると、「SAMPLE」と「SAMPLE DEVELOP」というテーマが確認できるかと思います。

これで開発用テーマの作成が完了しました。

開発者ユーザーを作成

管理画面の「ユーザー」>「新規追加」から開発用のユーザーを作成してください。

メールアドレスの登録に関しては、すでに登録済みのメールアドレスを登録できませんので、別のメールアドレスを入力する必要があります。

ただし、同じメールアドレスを登録できるようにするプラグインがあるので、どうしても同じメールアドレスで開発者ユーザーを作りたいという方はこちらをご覧ください。↓↓↓

WordPressで開発環境を構築する方法

でも、Gmailを使っている方は、1つのメールアドレスで疑似的に複数のメールアドレスを持つことができるので、そちらの方法でも良いかもしれません。

例えば、あなたが持っているGmailのメールアドレスが

techstock-online@gmail.com

だとします。

ここで、下記のメールアドレスにメールを送ってみます。

techstock-online+develop@gmail.com

すると、techstock-online@gmail.com にメールが届きます。

つまり、@gmail.com の前に「+」を付けて、「+〇〇〇〇〇」といったようなアルファベットをつけても正常に機能する、というわけです。

例えば、このようなgmailメールアドレスが利用可能です。

techstock-online+develop@gmail.com
techstock-online+SNS@gmail.com
techstock-online+fuga-hoge@gmail.com
etc.

上記の2つの方法のどちらでも良いですし、別のメールアドレスで開発者ユーザーを作っても良いです。

お好みな方法で開発者ユーザーを作成してください。

開発者ユーザーのプロフィール編集ページで開発用テーマを選択

上の方でスクショをお見せした通り、ユーザープロフィール編集ページの最下部に「Choose a theme」とありますので、そのセレクトボックスでご希望のテーマを選択してください。

上記の開発テーマ作成の例でいうと、今回の場合は、

管理者：SAMPLE
開発者：SAMPLE DEVELOP

といったように選択して保存すると良いですね。

※このプラグインを有効化する以前に、すでにユーザーを作成している場合、そのユーザーのプロフィール編集ページで、改めて「保存」しないとテーマが選択されませんのでご注意ください。

プラグインをダウンロード

以上、プラグインの使い方を説明しました。

使ってみたいと思っていただいた方はぜひダウンロードして使ってみてください。

これは私が作ったプラグインではなく、AIさんが作ってくれたものなので著作権も何も無いと思います(笑)。

商用利用していただいてもカスタマイズしていただいても何をしても大丈夫ですので、ぜひこの記事を拡散してください…！！

また、もし「役に立った！」、「今後のWeb開発に絶対使える！」と思っていただけたなら、記事の下のリアクションボタンをぜひ押していってください！

（広告に飛んだりしませんのでご安心を）

最後まで読んでいただきありがとうございました。m(__)m

それでは。。。

↑↑↑ かなり怪しいボタンになっていますがウイルスとかは入っていないのでご安心ください(笑)

コード

「なんか怪しいしダウンロードするのはちょっと。。。」という方はこちらのコードをコピペするなりカスタマイズするなりして使ってください。

全文丸ごと張り付けておきますね。

<?php
/**
 * Plugin Name: 特定のユーザーでログインすると特定のテーマでサイトが表示されるプラグイン
 * Description: Sets a specific theme for certain users when logged in to the WordPress dashboard
 * Version:     1.0.0
 */

// Add custom settings to the user profile page
add_action( 'show_user_profile', 'cdt_add_user_theme_settings' );
add_action( 'edit_user_profile', 'cdt_add_user_theme_settings' );

function cdt_add_user_theme_settings( $user ) {

    // Get the saved theme option for the user, if any
    $user_theme = get_user_meta( $user->ID, 'cdt_user_theme', true );

    // Output the theme selector input field
    ?>
    <h3><?php _e( 'Custom Dashboard Theme', 'cdt_domain' ); ?></h3>

    <table class="form-table">

        <tr>
            <th><label for="cdt_select_theme"><?php _e( 'Choose a theme', 'cdt_domain' ); ?></label></th>

            <td>
                <select name="cdt_user_theme" id="cdt_select_theme">
                    <?php
                        // Get all installed themes and loop through them
                        foreach ( wp_get_themes() as $theme ) {
                            // Set the selected attribute if the theme matches the saved option for the user
                            $selected = selected( $user_theme, $theme->get_stylesheet(), false );
                            ?>
                            <option value="<?php echo esc_attr( $theme->get_stylesheet() ); ?>" <?php echo $selected; ?>><?php echo esc_html( $theme->get( 'Name' ) ); ?></option>
                            <?php
                        }
                    ?>
                </select>
            </td>
        </tr>

    </table>
    <?php
}

// Save the custom user theme option when the user profile is updated
add_action( 'personal_options_update', 'cdt_save_user_theme_settings' );
add_action( 'edit_user_profile_update', 'cdt_save_user_theme_settings' );

function cdt_save_user_theme_settings( $user_id ) {
    // Check if the current user can edit the profile
    if ( !current_user_can( 'edit_user', $user_id ) ) {
        return;
    }

    // Update the user meta with the selected theme
    update_user_meta( $user_id, 'cdt_user_theme', $_POST['cdt_user_theme'] );
}

// Load the custom dashboard theme when a user is logged in and their theme option is set
add_filter( 'pre_option_template', 'cdt_load_custom_dashboard_theme' );
add_filter( 'pre_option_stylesheet', 'cdt_load_custom_dashboard_theme' );

function cdt_load_custom_dashboard_theme( $theme ) {
    // Get the user ID of the currently logged in user
    $current_user_id = get_current_user_id();

    // Check if the user ID is valid and their custom theme option is set
    if ( $current_user_id && $user_theme = get_user_meta( $current_user_id, 'cdt_user_theme', true ) ) {

        // Get the theme object for the selected custom theme
        $custom_theme = wp_get_theme( $user_theme );

        // If the custom theme is valid, use it instead of the default theme
        if ( is_object( $custom_theme ) && $custom_theme->exists() ) {
            $theme = $user_theme;
        }
    }

    return $theme;
}