WordPressでプラグインを作ろう！（画像アップロード機能付き）

作るもののイメージ

こんな感じで画像をアップロードして好きな所にスライドショーとして画像を出せるプラグインを
作っていきましょう！

まずは、wp-contant配下のpluginsフォルダに「myplugin」というフォルダを作りましょう。
その中に
1,myplugin.php
2,app.js
3,app.css
の３つのファイルを作ります！

では早速楽しいプラグイン開発！

myplugin.php

<?php
/*
Plugin Name: お好きなプラグイン名
Description: 画面編集プラグイン
Version: 2.0
Author: Chaki（管理者）

*/



//まずcssとjsを読み込めるようにしましょう
function add_init()
{
  wp_register_style('css', plugins_url('app.css', __FILE__));
  wp_enqueue_style('css');
  wp_register_script('js', plugins_url('app.js', __FILE__));
  wp_enqueue_script('js');
}
add_action('admin_init', 'add_init');


class TopPageSetting
{

  /* 初期化処理でメニューを追加 */
  function __construct()
  {
    add_action('admin_menu', array($this, 'add_pages'));
  }

  function add_pages()
  {
    //第一引数　ページタイトル
    //第二引数　管理画面に表示される名前
    //第三引数　管理者
    //第四引数　スラッグ名
    //第五引数　プラグイン開いた時のページの中身
    //アイコン　https://developer.wordpress.org/resource/dashicons/　こん中にまとまってる
    //表示場所
    add_menu_page(
      'TOPメニュー編集',
      'TOPページ編集',
      'level_8',
      __FILE__,
      array($this, 'show_option_page'),
      '',
      25,
    );
  }



  /* 管理画面に表示する内容 */
  function show_option_page()
  {

    /* 値が POST されたら wp_options に保存する */
    if (!empty($_POST)) {
      //========================================================
      //保存用
      //========================================================
      $main_view = [];
 
      for ($i = 1; $i <= 3; $i++) {

        $main_view[$i] = $_POST['main-view' . $i];

        update_option('main_view' . $i, $main_view[$i]);

      }
      //==================================================
      //postされた値をwp_optionに保存
      //=================================================
 
     
    }

    //============================================
    //入力保持用
    //============================================
    $oldMain_view = [];

    for ($i = 1; $i <= 3; $i++) {

      $oldMain_view[$i] =  get_option('main_view' . $i);
     
    }
 

?>
<!-- ここから下は普通にマークアップ -->
    <form action="" method="POST" class="custom-form">
      <!--============== メインのビジュアル設定 =====================-->
      <div class="custom-tab">TOPページスライドショー<span class="js-arrow"></span></div>
      <div class="custom-area">
        <p>画像を3枚選んでください</p>
        <div class="culumn-flex">
          <?php for ($i = 1; $i <= 3; $i++) : ?>
            <div class="panel">
              <p>スライドショー画像選択<?php echo $i; ?></p>
              <div class="media-area-flex">
                <input type="button" name="main-view-select<?php echo $i ?>" style="width: 150px;" value="画像選択" class="media-select">
                <input type="button" name="clear-main-view<?php echo $i ?>" style="width: 150px;" value="画像削除" class="media-clear">
                <input type="text" name="main-view<?php echo $i ?>" style="visibility: hidden;" value="<?php if (!empty($Main_img[$i])) echo $Main_img[$i]; ?>" class="sample-media main-bc">
                <div id="main-view-preview<?php echo $i; ?>" class="media-preview ">
                  <img src="<?php echo $oldMain_view[$i]; ?>" alt="" style="width: 100%;">
                </div>
              </div>
            </div>
          <?php endfor; ?>
        </div>

      </div>

      <input type="submit" class="plug-save" name="" id="" value="設定保存">

    </form>

<?php
  }
}

//プラグインが有効かされた時のフック
register_activation_hook(__FILE__, 'install');
//プラグインが削除された時のフック
register_uninstall_hook(__FILE__, 'delete_data');

function delete_data()
{
//プラグインが削除された時の処理を書く。
//wp_option内の値を削除したり
}

function install()
{
//プラグインが有効かされた時の処理を書く
}

//最初に作ったクラスの初期化
//これないとプラグインの中に入れません。
new TopPageSetting();
?>

補足でWordPressはデフォルトでDBの中にwp_optionsというテーブルが存在します。
それで

update_option('カラム名',値);

でwp_optionsテーブルに登録できます。
データを取り出すときは

get_option('カラム名');

でデータを取り出せます。

例えば

sample.php

//これでタイトルを登録して
update_option('title','まる子ちゃんの日記');

//これでタイトルを取り出す
$title = get_option('title');

echo $title;
//まる子ちゃんの日記　と出力

画像アップロード処理用のjs
WordPressで画像アップロードを使用する場合はajax通信を使用している

app.js

jQuery(function ($) {


  var custom_uploader = [];

for(let i = 1;i <= 3;i ++){


  $(`input:button[name=main-view-select${i}]`).on('click', function (e) {
    e.preventDefault();
    if (custom_uploader[i]) {
      custom_uploader[i].open();
      return;
    }

    custom_uploader[i] = wp.media({
      title: "画像を選択", //タイトルのテキストラベル
      button: {
        text: "画像を設定" //ボタンのテキストラベル
      },
      library: {
        type: "image"//imageにしておく。
      },
      multiple: false //選択できる画像を1つだけにする。
    });

    custom_uploader[i].on('select', function () {
      var images = custom_uploader[i].state().get('selection');

      images.each(function (file) {
      
        $(`input:text[name=main-view${i}]`).val('');
        $(`#main-view-preview${i}`).empty();
     //テキストフォームに選択したURLを追加
        $(`input:text[name=main-view${i}]`).val(file.attributes.url); 

        $(`#main-view-preview${i}`).append('<img src="' + file.attributes.url + '" />');//プレビュー用にメディアアップローダーで選択した画像を表示させる
    });
  });

  custom_uploader[i].open();
});
//クリアボタンを押した時の処理
$(`input:button[name=clear-main-view${i}]`).click(function () {
  $(`input:text[name=main-view${i}]`).val(""); //テキストフォームをクリア
  $(`#main-view-preview${i}`).empty(); //id mediaタグの中身をクリア
});
}

});

プラグインの中の見た目を整える。
まぁ、ここはお好きにって感じですね。

app.css

.culumn-flex{
  display: flex;
  justify-content: space-around;
  margin-bottom: 24px;
}

.custom-area{
  width: 100%;
  padding: 16px 10px;
  background: #ddd;
  margin-bottom: 16px;
  display: none;
}
.custom-area th{
  width: 320px;
}

.custom-area td{
  width: 580px;
}

.input-style{
  width: 300px;
  margin-bottom: 10px;
}

.label{
  display: block;
}

.panel{
  text-align: center;
  width: 30%;
  

}

.media-preview{
  width: 100%;

  height: auto;
  background: #ddd;
  position: relative;
  overflow: hidden;
  justify-content: center;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.media-preview::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 18px;
  transform: translateX(-50%);
  color: #333;
  z-index: 0;
}

.media-preview img{
  width: 250px;
  position: relative;
  z-index: 2;
  
}

.icon-preview{
  justify-content: center;
}
.icon-preview img{
  width: 120px;
}

.icon{
  height: 240px;
}

/* ====================================================================== */



.plug-save {
  padding: 4px 8px;
  text-decoration: none;
  border: 1px solid #2271b1;
  border-radius: 2px;
  text-shadow: none;
  font-weight: 600;
  font-size: 13px;
  line-height: normal;
  color: #2271b1;
  background: #f6f7f7;
  cursor: pointer;
  width: 450px;
  margin-bottom: 40px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);

}


.media-select{
  padding: 4px 8px;
  text-decoration: none;
  border: 1px solid #2271b1;
  border-radius: 2px;
  text-shadow: none;
  font-weight: 600;
  font-size: 13px;
  line-height: normal;
  color: #2271b1;
  background: #f6f7f7;
  cursor: pointer;
  margin-bottom: 8px;
  transition: .2s;
  display: block;
  margin: auto;
}

.media-select:hover{

  color: #fff;
  background: #2271b1;
  transition: .2s;
}
.media-clear{
  transition: .2s;
  cursor: pointer;
  display: block;
  margin: 16px auto;
}
.media-clear:hover{
  opacity: .7;
  transition: .2s;
}

.detail-select,
.icon-select{
  background: #2271b1;
  border:none;
  color: #fff;
  text-decoration: none;
  text-shadow: none;
  outline: none;
  border-radius: 10px;
  padding: 4px ;
  cursor: pointer;
}


.components-disabled{
  padding: 0 48px;
}


/* タブメニュー */
.custom-tab{
  width: 65%;
  border: 1px solid rgb(28, 172, 230);
  border-radius: 6px;
  position: relative;
  padding: 18px 10px;
  margin: 28px auto;
  cursor: pointer;
  text-align: center;
  transition: .2s;
}
.custom-tab span{
  position: absolute;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 10px;
  border-bottom: 4px solid #000;
  border-right: 4px solid #000;
  transform: rotate(45deg);
  right: 30px;
  top: 15px;
  transition: .2s;
}
.custom-tab:hover{
  transition: .3s;
  background-color: rgb(28, 172, 230);
  color: #fff;
}

.js-arrow.active{
  transition: .2s;
  transform: rotate(225deg);

}

functions.phpにこれを忘れずに追記
これがないとメディアアップローダーが開かないはず

functions.php

    
wp_enqueue_media();

後はこんな感じで呼び出してあげれば登録した画像が表示されます。

index.php

$Main_img = [];


for ($i = 1; $i <= 3; $i++) {

  $Main_img[$i] =  get_option('main_view' . $i);

}

  <div class="fadeslider">
    <img src="<?php echo $Main_img[1]; ?>" alt="スライダー画像" id="sweet1" class="sweet">
    <img src="<?php echo $Main_img[2]; ?>" alt="スライダー画像" id="sweet2" class="sweet">
    <img src="<?php echo $Main_img[3];?>" alt="スライダー画像" id="sweet3" class="sweet">
  </div>

こんな感じでタブごとにまとめられる良い感じのプラグインです。

今回は画像の登録のみですが、文字やラジオボタンとか色々できますので
自分だけのプラグインを是非作ってみてください！
使い方次第ではカスタムフィールドとかより使いやすいかもですね！
ありがとうございました！