KYO

ワードプレスの設定画面に項目を追加し独自の値を保存する

2018年5月27日 ワードプレス , , ,

ワードプレスのバージョン 4.6.1です

 

前回アクションフックについて触れました

ワードプレスのアクションフックの基本

 

アクションフックはワードプレスのコアのコアな部分の設定に手を入れることができる機能でした。

設定画面に項目を追加するにも、アクションフックというものが必須でした

 

 

今回はワードプレスの設定画面に項目を追加するだけでなく、値の保存までやっていきます。

正直、私も調べつつ作っているので間違っている部分があるかもしれません。備忘録的な感じで残していきます。

 

一応参考サイトを載せておきます

設定ページの作成

 

とりあえず前回のコードを使いますが、ちょっと改変しています。

ワードプレスのアクションフックの基本(前回の記事)

 



function my_menu() {
  add_menu_page('自作メニュー', '自作メニュー', 10, 'my_menu', 'my_menu_page');
}



function my_menu_page() {
    echo "自作メニューです";
}

add_action('admin_menu', 'my_menu');


 

 

前回は

add_options_page

でしたが今回は

add_menu_page

を使っています。

 

add_menu_pageを使うと、設定タブに項目が追加されるのではなくて、新しいメニューのタブが追加されます。

 

 

これだけで管理画面に新規項目が追加されました
管理画面に項目が追加されただけで特に何もないので、値を保存と読み取りをしてみます

 

 

ワードプレスで独自の値を設定する

参考サイトを見て作りました。

 

まずワードプレスで独自の値を保存するために以下の関数を使います

 

register_setting
settings_fields
do_settings_sections(必須ではない?)

 

そして値を取得するのに使うのが
get_option

 

 

基本的にはcodexのサイトを参考に作っています。ここで書いた内容で動きますが、正しい解説かどうかはわかりません(焦)

 

 

独自の値を設定するには、htmlのフォームを使用します。
このフォームにはグループの設定が必要で、そのグループの設定を

register_setting
settings_fields
do_settings_sections(必須ではない?)

が行なっています。

 

 

グループの設定をしていないとワードプレスで独自の値を使用することはできないようです。

 

実際にコードを書いていきます

 

 

 

STEP1、画面以外の準備をする

 



function my_menu() {
  add_menu_page('自作メニュー', '自作メニュー', 10, 'my_menu', 'my_menu_page');


  //***追加***
  //アクションフックで、admin_initにset_mymenu_groupをフックする
  add_action('admin_init','set_mymenu_group');
}



add_action('admin_menu', 'my_menu');


//グループとそのkeyの設定をする
//***追加***
function set_mymenu_group(){
  //my-menu-groupというグループにmy-keywordという値の変数を設定する
  register_setting('my-menu-group','my-keyword');


  //値の変数を増やしたい場合は追記すればOK
  //register_seting('my-menu-group','other-keyword');
}


 

大してコード量は増えていませんが、これで独自の値を使用する準備ができました。

 

register_settingを使って、グループ名と、データを格納したいkeyを設定します。
今回の場合は、my-keywordにアクセスして独自の値を取得するようにします。

 

add_action(‘admin_init’,’set_mymenu_group’);

で、admin_initというアクションフックに関数を登録する形で、グループの設定を行います

 

 

あとは画面の設定をします。

 

 

SETP2、画面の設定をする

 

内部の設定ができたので、あとは画面を作り込んでいきます

 



//***編集する***
//画面側のコード
//ここの内容が管理画面で表示されます
function my_menu_page() {

    //htmlを表示するのでphpを一旦閉じておく
    ?>

    
<div class="wrap">
    
<H3>マイメニュー値の設定</H3>


      <!-- post送信を行い、actionはoptions.phpを指定する -->
      
<form method="post" action="options.php">

        <!-- 先ほど設定したグループ名を指定する -->
          <?php settings_fields('my-menu-group'); ?>
          <?php do_settings_sections('my-menu-group'); ?>

          <!-- get_optionを利用して値を取得する -->
          <label for="my-keyword">値を設定します</label>
          <input type="text" id="my-keyword" name="my-keyword" value="<?php echo esc_attr(get_option('my-keyword')); ?>">

        <?php submit_button(); ?>

      </form>

    </div>


    <?php
}

 

ちょっと長いですが、やっていることはフォームを作っているだけです。

さて、これをみると、さっきグループ作った意味はなんなのか?と思いますが、設定画面のソースコードをみるとしっかりと使われていることがわかります

 

<input type=’hiddenname=’option_pagevalue=’my-menu-group‘ />

 

こんな記載があります。

hidden項目としてしっかり送信しているのです。

なので、グループの設定は必ず必要になってきます。

 

ちなみにフォーム内で

settings_fields

を呼び出さないと、hidden項目が表示されないので、必ずsettings_fieldsをフォーム内に記述します。

 

独自の値を取得するにはこのようにします

get_option(‘my-keyword’)

 

get_optionという関数を使用します。
my-keywordはグループと一緒に設定したkeyの名前ですね。

 

 

実際に画面を見てみると

こんな感じになっています。

 

ここで設定した値は

 

<?php echo esc_attr(get_option(‘my-keyword’)); ?>

 

で取得できます。

これを使えば好きな場所から取得できます。

 

 

 

テーマ利用者が独自に設定する値を使用したい時は、このように管理者メニューに独自の項目を追加してやればいいですね

 


関連記事

ワードプレスの管理画面に設定項目を追加する

2018年7月16日

今、新しいテーマを作っているのですが、管理画面に値を設定させるフィールドを用意しています。そんなわけで管理画面で独自の値を設定する方法を本投稿で書いていきます。これができると、カスタマイズの幅が広がります。ここはクライアントが入力した値を使いたい!という場面で役に立ちます。 以前も似たような記事を書いたのですが ワードプレスの設定画面に項...

テーマカスタマイザでカラーコントロールを使って色を指定する

2018年7月27日

ワードプレスの自作テーマを作ってたんですが、テーマカスタマイザというのを最近知りました。 テーマカスタマイザとはヘッダー画像とか設定する「外観」→「カスタマイズ」の部分です。プレビュー見ながらテーマの設定を変更する画面のことです。 これは視覚的にテーマをカスタマイズできるので、初心者でもテーマカスタマイズをしやすくなるというメリットがあり...

ワードプレスでお店のホームページを作るならゲール

2018年6月23日

ワードプレスのテーマを作りました。 テーマの名前はゲールです。   ゲール紹介ページ デモページ   主に飲食店や美容系のお店をターゲットにしています。 普通のブログには向いていないのですが、ビジネスサイトを作るならば、とてもオススメのテーマになっています。   今のところは飲食店や美容系などのお店のホームペ...

ワードプレスのカスタムウィジェットでSNSシェアリンクを作る方法

2018年5月24日

環境:WordPress 4.6.1   ワードプレスで自作テーマを作っていると、ウィジェットを自作すればもっと開発効率が上がるのにな。と思うことがあると思います。 ワードプレスにはウィジェットエリアという便利な機能があるので、これを使いこなすことは自由度が高く、カスタマイズ力のあるテーマを作ることが可能になります。  ...

ワードプレス関連の記事

2018年5月14日

関連記事に表示されます。

アフィリエイトに使えるワードプレスのテーマ

2018年5月13日

アフィリエイトに強く自由度の高い、ワードプレスのテーマを作りました。 ダウンロード   修正履歴 2018/05/25 記事本文がはみ出す現象を修正しました   テーマの名前はメリーラです。意味は特にありません。 アフィリエイトサイトに特化したテーマになっています。稼げるサイト作りに役立てて頂ければと思います。 &nb...