kansiho's memo

ruby, python, javascript. Rails, wordpress, OpenCV, heroku...

wordpressに独自のユーザープロフィール項目を追加<textarea形式/input形式>し、既定の項目を削除する

https://s.w.org/images/backgrounds/wordpress-bg-medblue.png

wordpress のユーザープロフィールに新しい項目を追加したいとき、 それをテキストフィールドとしてインラインのフォームで表示する方法はたくさん載っているけれど、 テキストエリア形式にするにはどうしたらいいんだろうか、ということを調べましたのでまとめます。

日本語文献は見つからなかったので、誰かの参考になればいいなと。

ユーザープロフィールページに表示するコード

function.php に、以下のコードを貼ってください。

my_show_extra_profile_fields() の中のhtmlは、実現したい内容に合わせて、

  • name
  • id, class
  • value

などの属性値を変えてくださいね。

add_action( 'show_user_profile', 'my_show_extra_profile_fields' );
add_action( 'edit_user_profile', 'my_show_extra_profile_fields' );

function my_show_extra_profile_fields( $user ) { ?>

    <h3>以下、追加するフィールド</h3>

    <table class="form-table">

        <tr>
            <th><label for="biography">Biography</label></th>

            <td>
            <textarea name="biography" id="biography" class="regular-text" cols="30" rows="5">
           <?php echo esc_html(get_the_author_meta('biography', $user->ID) ); ?>
         </textarea>
                
            </td>
        </tr>

    </table>
<?php }

textarea ではなくテキストフィールドを実装したい場合は<textarea>...</textarea>の部分を変更して

<input type="text" name="twitter" id="twitter" value="<?php echo esc_attr( get_the_author_meta( 'twitter', $user->ID ) ); ?>" class="regular-text" />

のようにすればOKです。

ちなみに、

<?php echo esc_html(get_the_author_meta('biography', $user->ID) ); ?>

は、テキストエリアに保存した項目を表示するためのコードです。

追加した項目をデータベースに保存させるためのコード

function.php に以下のコードをペースとしてください。

項目を増やすなら、update_usermeta() を追加してゆきます。

add_action( 'personal_options_update', 'my_save_extra_profile_fields' );
add_action( 'edit_user_profile_update', 'my_save_extra_profile_fields' );

function my_save_extra_profile_fields( $user_id ) {

    if ( !current_user_can( 'edit_user', $user_id ) )
        return false;
    update_usermeta( $user_id, 'biography', $_POST['biography'] ); // ここを追加してゆきます
}

update_usermeta の二つ目の引数は、フィールドIDと同じになるようにしてください。

既定の項目を削除する

以下は、wordpressの標準的なユーザー項目を利用しない・表示したくない場合に、利用してください。私の場合は、使用しているwordpressテーマが独自ユーザ項目を追加してしまうものだったことがあり、一部分表示したくなかったため利用しました。

以下のコードをfunctions.phpに貼り付けます。

var ids = []の配列の中の要素を、表示したくない項目のIDに合わせて改変してください。

// Hook into the admin footer
add_action( 'admin_footer-user-edit.php', 'remove_user_fields' );
function remove_user_fields(){
  
  // Set desired user role to target

  // Check for user ID query string
  if ( isset($_GET['user_id']) ) {
    // Get data for user currently being edited
    $id = filter_var($_GET['user_id'], FILTER_SANITIZE_NUMBER_INT);

      ?>
      <script type="text/javascript">
        jQuery(document).ready( function($) {
          // the following IDs are the input elements of the unneeded fields
          var ids = [
                                 '#past-work', 
                                 '#specialist',
                                 '#admin_bar_front',
                                 '#experience'
         ]; 
          for (var i = 0; i < ids.length; i++) {
            $(ids[i]).closest('tr').remove();
          }
        });
      </script>
     <?php 
  }
}

参考

Adding and using custom user profile fields

Remove user fields for specific user role in WordPress · GitHub