WordPressプラグイン作成～設定画面にカラーピッカー設置～

投稿日2022年9月17日 10:23 AM

更新日2022年9月17日 10:23 AM

今回、SNSアイコンを簡単に表示させるためのWordPressプラグインを作っているのですが、
WordPressの管理画面上から色も好きな色で出せるようにした方が良いよね！ということで、
色を選択するために、カラーピッカーを設置しつつ、必要な情報を入力する欄を作っていきます。
※まだ位置調整とかちゃんとしてないので、管理画面上の表示が微妙なのは流してください。。ｗ

▼カラーピッカーのイメージはこんな感じ

ということで、JSを追加していきます。

カラーピッカーJS自体は、元々用意されているファイル内に入ってます。
ファイルの場所は、こちら↓
\wp-admin\js\color-picker.js

あと、自分でカスタマイズを加えたいので、そのためのJSファイルを追加します。
今回は、「color-picker-main.js」っていう名前のファイルにしました。
ファイル追加した先はこちら↓
\wp-content\plugins\dashicons-list-view\js\color-picker-main.js

必要なファイルを準備できたので、このファイルに書いた内容とか、カラーピッカー自体を使えるようにするため、
下記コードを、「dashicons-list-view.php」に書いていきます。

public function admin_style () {
	wp_enqueue_style( 'wp-color-picker' );
}

public function admin_scripts () {
	wp_enqueue_script( 'color-picker-main-js', plugins_url( 'js/color-picker-main.js', __FILE__ ), array( 'jquery', 'wp-color-picker' ) );
}

public function admin_style () {

wp_enqueue_style( 'wp-color-picker' );

}

public function admin_scripts () {

wp_enqueue_script( 'color-picker-main-js', plugins_url( 'js/color-picker-main.js', __FILE__ ), array( 'jquery', 'wp-color-picker' ) );

}

そして、上記を動かすために、同じ「dashicons-list-view.php」ファイル内の
public function admin_menu () {
}
内に、下記コードを追加します。

add_action( 'admin_print_styles-'  . $list_view_register, array( $this, 'admin_style' ) );
add_action( 'admin_print_scripts-' . $list_view_register, array( $this, 'admin_scripts') );

1 2	add_action( 'admin_print_styles-' . $list_view_register, array( $this, 'admin_style' ) ); add_action( 'admin_print_scripts-' . $list_view_register, array( $this, 'admin_scripts') );

実際に表示する場所を作るために、HTMLの記述も追加していきます。
前回、「タイトル」と「内容」という表示だけさせていたページですが、
下記のようにいったん作成しました。
▼このファイル
\wp-content\plugins\dashicons-list-view\includes\dashicons-list-view-register.php

private function page_render() {
        $html  = '<div class="wrap">';
        $html .= '<h1>Dashicons List View Register</h1>';
        $html .= '<form method="POST" action="">';
        $html .= '<table>';
        $html .= '<tr>';
        $html .= '<th>&nbsp;</th>';
        $html .= '<th>Account</th>';
        $html .= '<th>Size</th>';
        $html .= '<th>Color</th>';
        $html .= '</tr>';
        $html .= '<tr>';
        $html .= '<th><label for="twitter_account">Twitter</label></th>';
        $html .= '<td><input type="text" name="twitter_account" id="twitter_account" maxlength="30"></td>';
        $html .= '<td>W:<input type="number" name="twitter_size_w" maxlength="3">H:<input type="number" name="twitter_size_h" maxlength="3"></td>';
        $html .= '<td><input type="text" name="twitter_color" id="twitter-color-picker"></td>';
        $html .= '</tr>';
        $html .= '<tr>';
        $html .= '<th><label for="facebook_account">Facebook</label></th>';
        $html .= '<td><input type="text" name="facebook_account" id="facebook_account" maxlength="30"></td>';
        $html .= '<td>W:<input type="number" name="facebook_size_w" maxlength="3">H:<input type="number" name="facebook_size_h" maxlength="3"></td>';
        $html .= '<td><input type="text" name="facebook_color" id="facebook-color-picker"></td>';
        $html .= '</tr>';
        $html .= '<tr>';
        $html .= '<th><label for="instagram_account">Instagram</label></th>';
        $html .= '<td><input type="text" name="instagram_account" id="instagram_account" maxlength="30"></td>';
        $html .= '<td>W:<input type="number" name="instagram_size_w" maxlength="3">H:<input type="number" name="instagram_size_h" maxlength="3"></td>';
        $html .= '<td><input type="text" name="instagram_color" id="instagram-color-picker"></td>';
        $html .= '</tr>';
        $html .= '<tr>';
        $html .= '<th><label for="youtube_account">YouTube</label></th>';
        $html .= '<td><input type="text" name="youtube_account" id="youtube_account" maxlength="30"></td>';
        $html .= '<td>W:<input type="number" name="youtube_size_w" maxlength="3">H:<input type="number" name="youtube_size_h" maxlength="3"></td>';
        $html .= '<td><input type="text" name="youtube_color" id="youtube-color-picker"></td>';
        $html .= '</tr>';
        $html .= '<tr>';
        $html .= '<th><label for="pinterest_account">Pinterest</label></th>';
        $html .= '<td><input type="text" name="pinterest_account" id="pinterest_account" maxlength="30"></td>';
        $html .= '<td>W:<input type="number" name="pinterest_size_w" maxlength="3">H:<input type="number" name="pinterest_size_h" maxlength="3"></td>';
        $html .= '<td><input type="text" name="pinterest_color" id="pinterest-color-picker"></td>';
        $html .= '</tr>';
        $html .= '</table>';
        $html .= '</form>';
        $html .= '</div>';
        echo $html;
    }

private function page_render() {

$html = '<div class="wrap">';

$html .= '<h1>Dashicons List View Register</h1>';

$html .= '<form method="POST" action="">';

$html .= '<table>';

$html .= '<tr>';

$html .= '<th> </th>';

$html .= '<th>Account</th>';

$html .= '<th>Size</th>';

$html .= '<th>Color</th>';

$html .= '</tr>';

$html .= '<tr>';

$html .= '<th><label for="twitter_account">Twitter</label></th>';

$html .= '<td><input type="text" name="twitter_account" id="twitter_account" maxlength="30"></td>';

$html .= '<td>W:<input type="number" name="twitter_size_w" maxlength="3">H:<input type="number" name="twitter_size_h" maxlength="3"></td>';

$html .= '<td><input type="text" name="twitter_color" id="twitter-color-picker"></td>';

$html .= '</tr>';

$html .= '<tr>';

$html .= '<th><label for="facebook_account">Facebook</label></th>';

$html .= '<td><input type="text" name="facebook_account" id="facebook_account" maxlength="30"></td>';

$html .= '<td>W:<input type="number" name="facebook_size_w" maxlength="3">H:<input type="number" name="facebook_size_h" maxlength="3"></td>';

$html .= '<td><input type="text" name="facebook_color" id="facebook-color-picker"></td>';

$html .= '</tr>';

$html .= '<tr>';

$html .= '<th><label for="instagram_account">Instagram</label></th>';

$html .= '<td><input type="text" name="instagram_account" id="instagram_account" maxlength="30"></td>';

$html .= '<td>W:<input type="number" name="instagram_size_w" maxlength="3">H:<input type="number" name="instagram_size_h" maxlength="3"></td>';

$html .= '<td><input type="text" name="instagram_color" id="instagram-color-picker"></td>';

$html .= '</tr>';

$html .= '<tr>';

$html .= '<th><label for="youtube_account">YouTube</label></th>';

$html .= '<td><input type="text" name="youtube_account" id="youtube_account" maxlength="30"></td>';

$html .= '<td>W:<input type="number" name="youtube_size_w" maxlength="3">H:<input type="number" name="youtube_size_h" maxlength="3"></td>';

$html .= '<td><input type="text" name="youtube_color" id="youtube-color-picker"></td>';

$html .= '</tr>';

$html .= '<tr>';

$html .= '<th><label for="pinterest_account">Pinterest</label></th>';

$html .= '<td><input type="text" name="pinterest_account" id="pinterest_account" maxlength="30"></td>';

$html .= '<td>W:<input type="number" name="pinterest_size_w" maxlength="3">H:<input type="number" name="pinterest_size_h" maxlength="3"></td>';

$html .= '<td><input type="text" name="pinterest_color" id="pinterest-color-picker"></td>';

$html .= '</tr>';

$html .= '</table>';

$html .= '</form>';

$html .= '</div>';

echo $html;

}

実際は表示させたい内容によって変えてください。

ここで大事なのは、カラーピッカーを表示させる部分の記述のところ。

<input type="text" name="twitter_color" id="twitter-color-picker">

1	<input type="text" name="twitter_color" id="twitter-color-picker">

このidを次のところで使用します。

実際に対応しているinputタグのところで表示させるために、
上記のidを下のコード内で記載することで、カラーピッカーを使用する事が出来るようになります。

(function($) {
    $(function() {
        var options = {
            defaultColor: false,
            change: function(event, ui){},
            clear: function() {},
            hide: true,
            palettes: true
        };
        $('#twitter-color-picker').wpColorPicker(options);
        $('#facebook-color-picker').wpColorPicker(options);
        $('#instagram-color-picker').wpColorPicker(options);
        $('#youtube-color-picker').wpColorPicker(options);
        $('#pinterest-color-picker').wpColorPicker(options);
    });
})(jQuery);

(function($) {

$(function() {

var options = {

defaultColor: false,

change: function(event, ui){},

clear: function() {},

hide: true,

palettes: true

};

$('#twitter-color-picker').wpColorPicker(options);

$('#facebook-color-picker').wpColorPicker(options);

$('#instagram-color-picker').wpColorPicker(options);

$('#youtube-color-picker').wpColorPicker(options);

$('#pinterest-color-picker').wpColorPicker(options);

});

})(jQuery);

上記でできたのはこんな感じです。

管理画面の作成は引き続き次回の記事で・・・！

WordPressプラグイン作成～設定画面にカラーピッカー設置～

コメントを残すコメントをキャンセル

カテゴリー

アーカイブ

最近の投稿

WordPressプラグイン作成～設定画面にカラーピッカー設置～

コメントを残す コメントをキャンセル

カテゴリー

アーカイブ

最近の投稿

コメントを残すコメントをキャンセル