ぬの部屋(仮)
nu-no-he-ya
  •      12
    3456789
    10111213141516
    17181920212223
    24252627282930
    31      
      12345
    6789101112
    13141516171819
    20212223242526
    2728293031  
           
    1234567
    891011121314
    15161718192021
    22232425262728
    2930     
           
        123
    45678910
    11121314151617
    18192021222324
    25262728293031
           
      12345
    6789101112
    13141516171819
    20212223242526
    27282930   
           
          1
    2345678
    9101112131415
    16171819202122
    23242526272829
    3031     
         12
    3456789
    10111213141516
    17181920212223
    242526272829 
           
      12345
    6789101112
    13141516171819
    20212223242526
    2728293031  
           
          1
    2345678
    9101112131415
    16171819202122
    23242526272829
    3031     
        123
    45678910
    11121314151617
    18192021222324
    252627282930 
           
     123456
    78910111213
    14151617181920
    21222324252627
    28293031   
           
          1
    2345678
    9101112131415
    16171819202122
    23242526272829
    30      
       1234
    567891011
    12131415161718
    19202122232425
    262728293031 
           
    1234567
    891011121314
    15161718192021
    22232425262728
    293031    
           
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
           
      12345
    6789101112
    13141516171819
    20212223242526
    2728293031  
           
    1234567
    891011121314
    15161718192021
    22232425262728
    2930     
           
        123
    45678910
    11121314151617
    18192021222324
    25262728293031
           
        123
    45678910
    11121314151617
    18192021222324
    25262728   
           
     123456
    78910111213
    14151617181920
    21222324252627
    28293031   
           
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    31      
       1234
    567891011
    12131415161718
    19202122232425
    2627282930  
           
    1234567
    15161718192021
    293031    
           
         12
    3456789
    10111213141516
           
      12345
    6789101112
    13141516171819
    20212223242526
    2728293031  
           
          1
    2345678
    9101112131415
    16171819202122
    23242526272829
    3031     
        123
    45678910
    11121314151617
    18192021222324
    252627282930 
           
     123456
    78910111213
    14151617181920
    21222324252627
    28293031   
           
          1
    2345678
    9101112131415
    16171819202122
    23242526272829
    30      
       1234
    567891011
    12131415161718
    19202122232425
    262728293031 
           
    1234567
    891011121314
    15161718192021
    22232425262728
    293031    
           
        123
    45678910
    11121314151617
    18192021222324
    25262728293031
           
      12345
    6789101112
    13141516171819
    20212223242526
    27282930   
           
        123
    45678910
    11121314151617
    18192021222324
    252627282930 
           
     123456
    78910111213
    14151617181920
    21222324252627
    28293031   
           
       1234
    567891011
    12131415161718
    19202122232425
    2627282930  
           
    1234567
    891011121314
    15161718192021
    22232425262728
    293031    
           
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
           
      12345
    6789101112
    13141516171819
    20212223242526
    2728293031  
           
      12345
    6789101112
    13141516171819
    20212223242526
    2728     
           
          1
    2345678
    9101112131415
    16171819202122
    23242526272829
    3031     
     123456
    78910111213
    14151617181920
    21222324252627
    282930    
           
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    31      
    1234567
    891011121314
    15161718192021
    22232425262728
    293031    
           
        123
    45678910
    11121314151617
    18192021222324
    252627282930 
           
     123456
    78910111213
    14151617181920
    21222324252627
    28293031   
           
     123456
    78910111213
    14151617181920
    21222324252627
    28293031   
           
       1234
    567891011
    12131415161718
    19202122232425
    262728293031 
           
     123456
    78910111213
    14151617181920
    21222324252627
    282930    
           
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    31      
      12345
    6789101112
    13141516171819
    20212223242526
    2728293031  
           
    1234567
    891011121314
    15161718192021
    22232425262728
    2930     
           
        123
    45678910
    11121314151617
    18192021222324
    25262728293031
           
      12345
    6789101112
    13141516171819
    20212223242526
    27282930   
           
          1
    2345678
    9101112131415
    16171819202122
    23242526272829
    3031     
          1
    2345678
    9101112131415
    16171819202122
    232425262728 
           
       1234
    567891011
    12131415161718
    19202122232425
    262728293031 
           
    1234567
    891011121314
    15161718192021
    22232425262728
    293031    
           
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
           
      12345
    6789101112
    13141516171819
    20212223242526
    2728293031  
           
    1234567
    891011121314
    15161718192021
    22232425262728
    2930     
           
        123
    45678910
    11121314151617
    18192021222324
    25262728293031
           
  • WordPressのカスタムフィールド追加(前編 メタボックス表示)

    1.全貌

    自分でカスタムフィールドを作成する場合、大きく分けて

    • メタボックスを表示するコードの記述
    • 値の読み込み/書き込みするコードの記述

    の二つが必要になります。

    まず、メタボックスを表示します。functions.phpに以下を記述します。

     

    <?php
    ////////////////////////////////////////////////////////////////////
    //カスタムフィールドの見た目(入力欄等)を追加する
    function hook_func_for_metabox(){
      // ① メタボックスの特性を定義する
      add_meta_box( 
        'metabox_div_id',//メタボックスのdivに指定されるID
        'メタボックス1', //タイトル
        'html_for_metabox_1_func', //表示用のHTMLを出力するphp関数(下で定義)
        'post', //どのタイプの記事入力画面で表示するか
        'normal',
        'high'
      );
    }
    // ② メタボックスの中身を実装する
    function html_for_metabox_1_func($post){
      $areaname = "field_1";
      $key = "_key_for_field_1";
      
        echo '<textarea name="' . $areaname . '" rows="8" cols="60">' . get_post_meta($post->ID,$key,true) . '</textarea>';
      
      // ③ nonceを作成し、hiddenフィールドとして書き込む
      wp_nonce_field( 'send_field1' , 'nonce_for_field_1' );
    }
    // ④ カスタムフィールド用のメタボックスを追加する
    add_action('admin_menu', 'hook_func_for_metabox');
    ?>
    

     

    動作としては、

    1.admin_menuアクションフックにより、管理画面が表示されたときにhook_func_for_metaboxが実行されます。

    2.hook_func_for_metaboxの中で、メタボックスを追加するadd_meta_box関数が呼び出されます。そしてこの関数から、メタボックスの中身を描画するhtml_for_metabox_1_func関数が呼び出されます。

    3.html_for_metabox_1_func関数内で、<textarea></textare>タグをechoし、入力欄を表示します。

    これにより、投稿画面に「メタボックス1」というタイトルの、テキスト入力フィールドを一つ持つ領域(通称メタボックス)が作成されます。

    customfield1_metabox1

     

    2.admin_menuアクションフック

    admin_menuアクションフックは、

    管理画面メニューの基本構造が配置された後に実行する。

    プラグイン API/アクションフック一覧

    とのことです。

    ちなみに、

    admin_menu

    という説明もあります。。。
    いずれにせよ、
    add_action(‘admin_menu’, ‘hook_func_for_metabox’);

    この一行により、管理画面メニューが配置された後に、hook_func_for_metaboxが実行されるようになります。

    ちなみに、add_meta_boxesアクションフックというのもあり、

    add_action(‘add_meta_boxes’, ‘hook_func_for_metabox’);

    こちらでもメタボックスを追加出来ます。この場合、下記add_meta_boxの$screenが’dashboard’など、引数によってはメタボックスが追加出来なくなります。

     

    3.add_meta_boxによるメタボックスの定義

    add_meta_boxはメタボックスを追加する関数です。

    関数リファレンス/add meta box

     

    引数名 今回の例 意味
    $id metabox_div_id

    例えばこのように出力されます:

    <div id="metabox_div_id">
    ...
    </div>
    $title メタボックス1

    タイトルです

    customfield1_metabox1

    $callback html_for_metabox_1_func このメタボックスの中身を表示するための関数を指定します(後述)
    $screen post
    • ‘post’
      投稿ページ編集画面
    • ‘page’
      固定ページ編集画面
    • ‘dashboard’
      ダッシュボード
      customfield1_metabox2_dashboard
    • ‘link’
      ※不明。廃止されたリンク集機能のことか?
    • ‘attachment’
      「メディアを編集」ページ
      メディアを追加し、リンク先を「添付ファイルのページ」に設定したときメディアをクリックして行く添付ファイルページから「メディアを編集」をクリックして表示されるページ
      customfield1_metabox3_attachment
    • ‘custom_post_type’
      カスタム投稿タイプのslugを指定するという意味
    • ‘comment’
      customfield1_metabox5_comment

     

    $context normal

    メタボックスの表示位置を指定します。

    • normal
      customfield1_metabox7_normal
    • advanced
      customfield1_metabox8_advanced
    • side
      customfield1_metabox6_side
    $priority high (※)
    $callback_args    

     

    (※) 表示順と思われます。

    <?php
    function hook_func_for_metabox(){
        //メタボックスの特性を定義する
      add_meta_box( 
        'metabox_div_id',
        'カスタムフィールド1',
        'html_for_field1_func',
        'post',
        'advanced',
        'low'
      );
      add_meta_box( 
        'metabox_div_id_dummy',
        'テストダミーボックス2',
        'html_for_field1_func',
        'post',
        'advanced',
        'high'
      );
      add_meta_box( 
        'metabox_div_id_dummy2',
        'てすとのぼっくす3',
        'html_for_field1_func',
        'post',
        'advanced',
        'high'
      );
    }
    ?>
    
    customfield1_metabox9_lhh

    <?php
    function hook_func_for_metabox(){
        //メタボックスの特性を定義する
      add_meta_box( 
        'metabox_div_id',
        'カスタムフィールド1',
        'html_for_field1_func',
        'post',
        'advanced',
        'high'
      );
      add_meta_box( 
        'metabox_div_id_dummy',
        'テストダミーボックス2',
        'html_for_field1_func',
        'post',
        'advanced',
        'low'
      );
      add_meta_box( 
        'metabox_div_id_dummy2',
        'てすとのぼっくす3',
        'html_for_field1_func',
        'post',
        'advanced',
        'high'
      );
    }
    ?>
    
     customfield1_metabox9_hlh

     

    4.メタボックスの中身の描画

    html_for_metabox_1_funcの中ではHTMLをechoしているだけですが、重要な点がいくつかあります。

    <?php
    //メタボックスの中身を実装する
    function html_for_field1_func($post){
      $areaname = "field_1";
      $key = "_key_for_field_1";
      
      echo '<textarea name="' . $areaname . '" rows="3" cols="40">' . get_post_meta($post->ID,$key,true) . '</textarea>';
      
      //nonceを作成し、hiddenフィールドとして書き込む
      wp_nonce_field( 'send_field1' , 'nonce_for_field_1' );
    }
    ?>
    

     

    最も重要なのは_key_for_field_1という値で、これがいわゆる、カスタムフィールドの値が保存されている変数名です。

    html_for_field1_funcでは<textarea>…</textarea>を表示しますが、その際に既に値が設定されていた場合はその値を表示したいので、get_post_meta関数で、現在のpostの_key_for_field_1の項目を取得して表示しています。

    生成されるHTMLの例:

    <textarea name="field_1" rows="3" cols="40"> この記事のカスタムフィールドの内容 </textarea>
    

     

    注意として、_key_for_field_1のように、キー名は_ (アンダースコア)から始めた方が格好良いです。必須ではないですが、_から始まるキー名でないと、自分で追加したメタボックスの中だけでなく、投稿編集ページに最初からある「カスタムフィールド」の領域にもこのキーのカスタムフィールドの編集欄が出来てしまいます。害はないですが同じ物が二つあるのは気持ちが悪いので避けた方が良いでしょう。

    customfield1_metabox10_double

     

    参考  Codex 関数リファレンス/add post meta 見えない カスタムフィールドを作る


    最後にwp_noce_fieldとwp_create_nonceですが、これらはセキュリティ的に必要なのでカスタムフィールドの書き込みと読み出しには直接関係はありません。従って省略可能ですが、普通セキュリティ対策は必須なので書きます

    5.wp_nonce_field

    nonce(ノンス)は、ある種の誤使用や悪意のある操作から URL やフォームを守るための「一度だけ使われる数値」です。

    https://wpdocs.osdn.jp/WordPress_Nonce

     

    私はセキュリティの専門家ではないのですが、もの凄くざっくりとした説明をすると以下のようになります。

    成功した場合。

    WordPress自分が発行したnonceと、「送信」ボタンが押されたときのnonceを比較し、その二つが等しければ

    「この通信は、確かに自分が作成した送信フォームから送られた」

    と結論します。

    nonce1

    失敗する場合。

    何らかの理由により偽フォームに飛んでしまったような場合、そのフォームは自分のWordpressが作成したページではないので、発行したnonceも記載されていません。このフォームから送信した場合、送信されてくるnonce(あれば)と先ほど自分が発行したnonceが異なるので、

    「この通信は、偽フォームから送られた」

    と考えます。

    nonce2

     

    wp_nonce_fieldは、内部で wp_create_nonce 関数を呼び出しています。

     

    wp_create_nonce

    nonce を生成して返します。nonce は現在の時刻$action 引数現在のユーザー ID に基づいて生成されます。

    関数リファレンス/wp create nonce

     

    つまり時間やユーザーや引数を元に、81b29b57b2のような文字列を作成します。そしてHTMLのhiddenフィールドとして出力します。

    表記

    wp_nonce_field( ‘send_field1’ , ‘nonce_for_field_1‘ );

     

    出力

    <input type="hidden" id="nonce_for_field_1" name="nonce_for_field_1" value="81b29b57b2" />
    

     

    ここで、HTMLのformからPOSTでSubmitした場合、PHP側では

    <?php
    if(isset($_POST[‘nonce_for_field_1’])){
      $nonce = $_POST[‘nonce_for_field_1’];
      echo $comment; //この結果は81b29b57b2
    }
    ?>
    

    と、$_POSTを使って受け取ることができます。

     

    これで表示が終わったので、次回にはこのカスタムフィールドの値が「投稿」ボタンや「下書き」ボタンが押されたときにデータベースに保存するコードを記述します。