投稿にページを追加+追加したページに独自フィールド

投稿にページ追加

管理画面に独自ページを追加します。
投稿じゃなくてもいいのですが、例として。

functions.phpへ

/**- 投稿にサブメニュー追加 -**/
function add_sub_menu01() {
  add_submenu_page('edit.php', 'ページ名', 'ページ名', 8,'self_sub01', 'display_sub_menu01');
}
add_action('admin_menu', 'add_sub_menu01');

/* サブメニューのページの内容はmy_setting.phpをインクルード */
function display_sub_menu01() {
  require_once('my_setting.php');
}

追加するページの内容

my_setting.phpへ

<?php
if(isset($_POST['meta_nonce'])) {
  update_option('mytxt', wp_unslash($_POST['mytxt']));
  update_option('myimg', wp_unslash($_POST['myimg']));
  update_option('myeditor', wp_unslash($_POST['myeditor']));
  echo '<div id="setting-error-settings_updated" class="updated settings-error notice is-dismissible"><p><strong>設定を保存しました。</strong></p></div>';
}
?>
<script>
jQuery(document).ready(function () {

  function buildMedia(self) {
    return wp.media({
      title: self.attr('data-title'),
      library: {type: self.attr('data-library')},
      frame: self.attr('data-frame'),
      button: {text: self.attr('data-button')},
      multiple: self.attr('data-multiple')
    });
  }

  var setMedia = [];
  jQuery('.add_upload_media').click(function (event) {

    event.preventDefault();

    var self = jQuery(this);
    var targetId = self.attr('data-targetId');

    // キャッシュを表示する
    if(setMedia[targetId]) {
      setMedia[targetId].open();
      return;
    }

    // ビルド
    setMedia[targetId] = buildMedia(self);

    //ファイル選択時の動作
    setMedia[targetId].on('select', function() {
      var media = setMedia[targetId].state().get('selection').first().toJSON();
      jQuery('#' + targetId +  '_id').val(media.id);
      jQuery('#' + targetId +  '_text').val(media.url);
      jQuery('#' + targetId +  '_preview').css('background-image', 'url(' + media.url + ')');

    });

    //モーダルを展開
    setMedia[targetId].open();
  });

  // 削除イベント
  jQuery('.remove_upload_media').click(function (event) {
    event.preventDefault();

    var self = jQuery(this);
    var targetId = self.attr('data-targetId');

    if(confirm('ファイルを削除しますか？')){
      jQuery('#' + targetId +  '_id').val('');
      jQuery('#' + targetId +  '_text').val('');
      jQuery('#' + targetId +  '_preview').css('background-image', 'url()');
    }
  });

});
</script>
<style>
.field_wrap {
  width: 100%;
  max-width: 900px;
  background: #fff;
  border-bottom: #eee solid 1px;
  margin: 50px 0;
}
.field {
  padding: 10px 12px;
}
.field:not(:last-of-type) {
  border-bottom: #eee solid 1px;
}
.field > table { width: 100%; }
.field > table th, .field > table td {
  font-weight: normal;
  text-align: left;
  font-size: 13px;
  padding: 7px 5px;
  vertical-align: top;
}
.field > table th { width: 25%; }
.field > table td label { margin-right: 10px; }
.field > table td .view {
  position: relative;
  width: 100%;
  height: 230px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.previewarea {
  display: block;
  width: 100%;
  height: 250px;
  margin-bottom: 15px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #eee;
}
</style>

<div class="wrap">
<h1 class="wp-heading-inline">ページタイトル</h1>
<form method="post" action="" id="poststuff">
<input type="hidden" name="meta_nonce" id="meta_nonce" value="<?php echo wp_create_nonce( 'meta_nonce' ) ?>">

<div class="field_wrap">

  <div class="field">
    <table>
      <tr>
        <th>テキスト項目名</th>
        <td>
        <input type="text" name="mytxt" value="<?php $mytxt = get_option('mytxt'); echo esc_html($mytxt); ?>" class="widefat">
        </td>
      </tr>
    </table>
  </div>

  <div class="field">
    <table>
      <tr>
        <th>画像項目名</th>
        <td>
         <?php $id = "myimg"; $id_txt = $id.'_text'; ?>

         <div id="<?=$id?>_preview" class="previewarea" style="background-image: url(<?=get_option($id)?>);"></div>

         <input type="hidden" id="<?=$id?>_text" name="<?=$id?>" value="<?=get_option($id)?>">
         <button
           class="add_upload_media"
           data-targetId="<?=$id?>"
           data-title="ファイルアップロード"
           data-library=""
           data-frame="select"
           data-button="画像を選択"
           data-multiple="false"
           data-preview="false">画像選択</button>
          <button class="remove_upload_media" data-targetId="<?=$id?>" href="#">削除</button>
        </td>
      </tr>
    </table>
  </div>

  <div class="field">
    <table>
      <tr>
        <th>テキストエディタ項目名</th>
        <td>
<?php
$content = get_option('myeditor');
$editor_id = 'myeditor';
$settings = array( 'textarea_name' => 'myeditor' );
wp_editor( $content, $editor_id, $settings );
?> 
        </td>
      </tr>
    </table>
  </div>


</div>
<?php
  submit_button();
?>
  </form>
</div>

参考にさせていただきました：wp.mediaを使って、WordPressのメディアモーダルを呼び出す ? カバの樹

スタイルとか必要フィールドはカスタムしてください。
ただ、上記コードからテキストエディタを抜くとメディアのモーダルが動かない…ので、
テキストエディタが不要な場合はフォームの閉じタグ前くらいに

<!--
<?php
wp_editor();
?>
-->

とか入れると動きます。
上記、なんでだろう？

テンプレートからの呼び出し

<?php
echo get_option('mytxt');
echo get_option('myimg'); //画像のURL
echo get_option('myeditor');
?>

前の記事

カテゴリー編集部分に独自のフィールド設置

次の記事

レスポンシブでないウェブサイトを縮小表示させる