【WordPress】プラグインを使わずにカテゴリー設定画面にサムネイル画像の設定項目を追加する方法

WordPressでプラグイン無しでカテゴリー設定画面にサムネイル画像の項目を追加する方法をまとめています。

経緯としては、ネットショップを作成する際にカテゴリー項目にサムネイル画像をつけたいと思っておりましたが、調べてみるとプラグインを使った方法はありましたが、今回は自作する必要があったため手順をまとめてみました。

完成イメージは下記のようなカテゴリーごとにサムネイル画像を表示できるようにします。

管理画面の完成イメージは下記のようにプレビュー機能付きで設定項目に写真を設定できるようにします。

カテゴリーの新規追加画面に設定項目を追加する
まずはカテゴリーの新規追加画面に入力蘭を追加します。

category_add_form_fieldsアクションフックを使います。

function.phpに以下のコードを追加します。

// カテゴリー一覧ページの新規追加エリアに要素を追加するフック
add_action( 'category_add_form_fields', 'my_category_add_form_fields' );
function my_category_add_form_fields( $taxonomy ) {
  ?>
  <div class="form-field form-required term-image-wrap">
    <label for="category-image">画像(URL)</label>
    <input name="category-image" id="category-image" type="text" value="" size="40" aria-required="true"/>
    <p>サムネイル用の画像を設定します。※写真は縦横比1:1になるようにしてください</p>
    <input type="button" name="image_select" value="選択" />
    <input type="button" name="image_clear" value="クリア" />
    <div id="image_thumbnail" class="uploded-thumbnail">
    </div>
  </div>
  <script type="text/javascript">
  (function ($) {
      var custom_uploader;
      // ①選択ボタンを押した時の処理
      $("input:button[name=image_select]").click(function(e) {
          e.preventDefault();
          if (custom_uploader) {
              custom_uploader.open();
              return;
          }
          custom_uploader = wp.media({
              title: "画像を選択してください",
              library: {
                  type: "image"
              },
              button: {
                  text: "画像の選択"
              },
              multiple: false
          });
          custom_uploader.on("select", function() {
              var images = custom_uploader.state().get("selection");
              images.each(function(file){
                  $("input:text[name=category-image]").val("");
                  $("#image_thumbnail").empty();
                  $("input:text[name=category-image]").val(file.attributes.sizes.full.url);
                  $("#image_thumbnail").append('<img src="'+file.attributes.sizes.full.url+'" style="width:50%;height:auto;"/>');
              });
          });
          custom_uploader.open();
      });
      // ②クリアボタンを押した時の処理
      $("input:button[name=image_clear]").click(function() {
          $("input:text[name=category-image]").val("");
          $("#image_thumbnail").empty();
      });
  })(jQuery);
  </script>
  <?php
}

 

カテゴリーの追加、更新、削除の処理

次に追加、更新、削除の処理を設定します。

新規追加の処理はcreate_categoryアクションフックを、
更新、削除の処理はedit_categoryアクションフックを使います。

function.phpに以下を記述します。

function my_edit_category( $term_id ) {
  $key = 'category-image';
  if ( isset( $_POST[ $key ] ) && esc_url_raw( $_POST[ $key ] ) ) {
    update_term_meta( $term_id, $key, $_POST[ $key ] );
  } else {
    delete_term_meta( $term_id, $key );
  }
}
add_action( 'create_category', 'my_edit_category' );
add_action( 'edit_category', 'my_edit_category' );

 

これで追加、更新、削除がされた際にデータベースの内容が更新されます。

メディアアップローダーの起動設定

最後に画像選択の際に、

WordPressのメディアアップローダーを表示できるように設定します。

function.phpに以下を記述します。

function my_admin_scripts() {
  wp_enqueue_media();
}
add_action( 'admin_print_scripts', 'my_admin_scripts' );

これで選択ボタンを押した際にメディアアップローダーが起動し、画像を選択できるようになります。

データを取得し表示する

データを取得する際にはget_term_meta()を用います。

下記のようなコードでカテゴリー一覧を表示する際に写真データを取得します。

<ul class="nav">
        <?php
          $args = array(
            'type'                     => 'post',
            'child_of'                 => 0,
            'parent'                   => '0',
            'orderby'                  => 'name',
            'order'                    => 'ASC',
            'hide_empty'               => 1,
            'hierarchical'             => 1,
            'exclude'                  => '150',
            'include'                  => '',
            'number'                   => '',
            'taxonomy'                 => 'category',
            'pad_counts'               => false
          );
          $categories = get_categories( $args );
          foreach( $categories as $category ){
            $category_image = get_term_meta( $category->term_id, 'category-image', true ); ?><li class="nav-02"><div class="item link"><div class="kiji_count"><?php echo $category->count; ?></div><img src="<?php echo $category_image ;?>" alt="">
           <a href="<?php echo get_category_link( $category->term_id ); ?>">
                   <?php echo $category->name ?> 
                </a>
       </div></li>
    <?php      }
        ?>
</ul>

CSSを導入します

.nav{
        margin-top:20px;
    }
    .nav-contents{
        margin-top:25px;
    }
    .nav li {
    width: 18.91534391534392%;
    margin-right: 1.32275132275132%;
        margin: 10px 10px 0 0;
    border: 1px solid #334454;
        list-style:none;
    padding: 25px 8px 20px 8px;
        text-align:center;
        float:left;
}

.item a {

   
    color: #828282;
}
    .nav li.nav-02 {
    border-bottom: 8px solid #334454;
}
    .title-h2{
            line-height: 1.4;
    padding: 10px 10px 10px 20px;
    border-left: 6px solid #334454;
    font-size: 2.0rem;
    font-weight: bold;
    }
     .LySupportSearchHeadTitle {
          margin-top:20px;
          margin-bottom:15px;
          line-height: 57px;
          font-size: 38px;
          font-weight: bold;
          color: #334454;
         text-align:center;
        }
    #search{
        max-width: 600px;
    margin: 25px auto;
    }
    #s {
    height: 50px;
}
#s {
    border-radius: 6px !important;
    box-shadow: none;
    border-color: #C4CCCE;
    font-size: 13px;
    font-size: 1.3rem;
    height: 40px;
    line-height: 1.5;
}
    .search-form{
        max-width:800px;
        margin:0 auto;
    }
    .search-field{
    width:80%;
    }