WP PLUGIN MTEE(Meta Tag etc Extend) OGPタグ設定

・画像アップロードをメディアアップローダーに変更
2021-06-06 12:31:29 +09:00
parent 2a28508124
commit 8c39e705e8
6 changed files with 118 additions and 163 deletions
@@ -15,13 +15,12 @@ if (!class_exists('mtee_ogp_post_setting')) {
        public function __construct($options) {
            $this->options = $options;
            add_action('admin_menu', array($this, 'add_meta_fields'));
-            //post_edit_form_tagをフックしてformタグにmultipart/form-data属性を追加
-            add_action('post_edit_form_tag', array($this, 'custom_meta_box_edit_form_tag'));
            add_action('save_post', array($this, 'save_meta_fields'));
+            add_action('wp_enqueue_scripts', array($this, 'my_media_script'));
        }

-        public function custom_meta_box_edit_form_tag() {
-            echo ' enctype="multipart/form-data"';
+        function my_media_script() {
+            wp_enqueue_media();
        }

        //add_meta_box(表示される入力ボックスのHTMLのID, ラベル, 表示する内容を作成する関数名, 投稿タイプ, 表示方法)
@@ -65,13 +64,17 @@ placeholder="' . $this->set_default_ogp_desc() . '"/>
 <div class="meta_key_desc_box">
 <label style="font-weight: bold; display: block">image</label>
 <div>
-<input style="width:100%" type="file" name="' . MTEE_OGP_IMG . '" accept="image/*"/>
-<p>' . $this->set_ogp_thumb($post->ID) . '</p>
+<input class="' . MTEE_OGP_IMG . '" name="' . MTEE_OGP_IMG . '" type="hidden" value="' . get_post_meta($post->ID, MTEE_OGP_IMG, true) . '" />
+<input type="button" class="select_ogp_img" name="select_ogp_img" value="選択" />
+<input type="button" class="clear_ogp_img" name="clear_ogp_img" value="クリア" />
+<div id="ogp_media">' . $this->set_ogp_thumb($post->ID) . '</div>
 </div>
-</div>';
+</div>
+<script>
+var ogp_img_name = ' . "'" . MTEE_OGP_IMG . "'" . '
+</script>';
        }

-
        public function set_default_ogp_title() {
            return get_the_title();
        }
@@ -80,11 +83,10 @@ placeholder="' . $this->set_default_ogp_desc() . '"/>
            return get_bloginfo('name') . 'の' . $this->set_default_ogp_title() . 'です。';
        }

-
        public function set_ogp_thumb($id): string {
            $ogp_thumb = get_post_meta($id, MTEE_OGP_IMG, true);
            if (!empty($ogp_thumb)) {
-                return '<img style="width: 200px;display: block;margin: 1em 0;" src="' . wp_get_attachment_url($ogp_thumb) . '">';
+                return '<img src="' . wp_get_attachment_image_src($ogp_thumb, 'thumbnail')[0] . '">';
            }
            return '';
        }
@@ -101,63 +103,13 @@ placeholder="' . $this->set_default_ogp_desc() . '"/>
            } else {
                delete_post_meta($post_id, MTEE_OGP_DESC);
            }
-            if (isset($_FILES[MTEE_OGP_IMG]) && $_FILES[MTEE_OGP_IMG]['size'] !== 0) {
-                $this->save_ogp_image('post', $post_id);
-            }
-        }
-
-        public function save_ogp_image($type, $id) {
-            $file_name = $this->set_ogp_filename();
-            $wp_upload_dir = wp_upload_dir(); //現在のuploadディクレトリのパスとURLを入れた配列
-            $upload_file = $_FILES[MTEE_OGP_IMG]['tmp_name'];
-            $upload_path = $wp_upload_dir['path'] . '/' . $file_name;
-            //画像ファイルをuploadディクレトリに移動させる
-            move_uploaded_file($upload_file, $upload_path);
-
-            $this->upload_ogp_file($type, $upload_path, $wp_upload_dir, $file_name, $id);
-        }
-
-        public function set_ogp_filename() {
-            $file_name = basename($_FILES[MTEE_OGP_IMG]['name']);
-            $file_name = trim($file_name);
-            return str_replace(' ', '-', $file_name);
-        }
-
-        public function upload_ogp_file($type, $upload_path, $wp_upload_dir, $file_name, $id) {
-            if (file_exists($upload_path)) {
-                //添付ファイルを追加
-                $attachment = $this->set_upload_file_param($wp_upload_dir, $file_name, $upload_path);
-                $attach_id = wp_insert_attachment($attachment, $upload_path, $id);
-                if (!function_exists('wp_generate_attachment_metadata')) {
-                    require_once(ABSPATH . "wp-admin" . '/includes/image.php');
-                }
-                //添付ファイルのメタデータを生成し保存
-                $this->save_ogp_file($type, $attach_id, $upload_path, $id);
+            if (!empty($_POST[MTEE_OGP_IMG])) {
+                update_post_meta($post_id, MTEE_OGP_IMG, $_POST[MTEE_OGP_IMG]);
            } else {
-                //保存失敗
-                echo '画像保存に失敗しました';
-                exit;
+                delete_post_meta($post_id, MTEE_OGP_IMG);
            }
        }

-        public function set_upload_file_param($wp_upload_dir, $file_name, $upload_path): array {
-            return array(
-                'guid' => $wp_upload_dir['url'] . '/' . basename($file_name),
-                'post_mime_type' => $_FILES[MTEE_OGP_IMG]['type'],
-                //正規表現で拡張子なしのスラッグ名を生成
-                'post_title' => preg_replace('/\.[^.]+$/', '', basename($upload_path)),
-                'post_content' => '',
-                'post_status' => 'inherit'
-            );
-        }
-
-        public function save_ogp_file($type, $attach_id, $upload_path, $id) {
-            $attach_data = wp_generate_attachment_metadata($attach_id, $upload_path);
-            wp_update_attachment_metadata($attach_id, $attach_data);
-            if ($type == 'post') {
-                update_post_meta($id, MTEE_OGP_IMG, $attach_id);
-            }
-        }
    }

 }
@@ -17,6 +17,11 @@ if (!class_exists('mtee_ogp_tax_setting')) {
            $this->set_fields();
            add_action('create_term', array($this, 'save_terms'));  //新規追加用フック
            add_action('edit_terms', array($this, 'save_terms'));   //編集ページ用フック
+            add_action('wp_enqueue_scripts', array($this, 'my_media_script'));
+        }
+
+        function my_media_script() {
+            wp_enqueue_media();
        }

        public function set_fields() {
@@ -24,26 +29,9 @@ if (!class_exists('mtee_ogp_tax_setting')) {
            foreach ($taxs as $tax) {
                add_action($tax . '_add_form_fields', array($this, 'insert_term_meta_add_fields'));
                add_action($tax . '_edit_form_fields', array($this, 'insert_term_meta_edit_fields'));
-                //formタグにmultipart/form-data属性を追加
-                add_action($tax . '_term_edit_form_tag', array($this, 'custom_meta_box_edit_form_tag'));
-                add_action($tax . '_add_form', array($this, 'create_form_tag'));
            }
        }

-        function create_form_tag() {
-            ?>
-            <script type="text/javascript">
-                jQuery(document).ready(function () {
-                    jQuery('#addtag').attr("enctype", "multipart/form-data");
-                });
-            </script>
-            <?php
-        }
-
-        public function custom_meta_box_edit_form_tag() {
-            echo ' enctype="multipart/form-data"';
-        }
-
        public function set_tax_types(): array {
            $custom_tax = get_taxonomies(array('public' => true, '_builtin' => false));
            $tax_array = array_merge(array('category', 'post_tag'), $custom_tax);
@@ -61,19 +49,26 @@ if (!class_exists('mtee_ogp_tax_setting')) {
 <div class="form-field">
 OGP title<br>
 <input type="text" name="' . MTEE_OGP_TITLE . '" 
-value="' . $input_values['title'] . '" 
+value="" 
 placeholder="' . $input_values['title_pl'] . '"
 class="tax-meta-field" />
 </div>
 <div class="form-field">
 OGP description<br>
 <input type="text" name="' . MTEE_OGP_DESC . '" 
-value="' . $input_values['desc'] . '" 
+value="" 
 placeholder="' . $input_values['desc_pl'] . '"
 class="tax-meta-field" />
-<label>image
-<input style="width:100%" type="file" name="' . MTEE_OGP_IMG . '" accept="image/*"/>
-</label>
+</div>
+<div class="form-field">
+image<br>
+<input class="' . MTEE_OGP_IMG . '" name="' . MTEE_OGP_IMG . '" type="hidden" value="" />
+<input type="button" class="select_ogp_img" name="select_ogp_img" value="選択" />
+<input type="button" class="clear_ogp_img" name="clear_ogp_img" value="クリア" />
+<div id="ogp_media"></div>
+<script>
+var ogp_img_name = ' . "'" . MTEE_OGP_IMG . "'" . '
+</script>
 </div>
 ';
        }
@@ -84,22 +79,25 @@ class="tax-meta-field" />
 <tr class="form-field">
 <th scope="row">OGP</th>
 <td>
-<label>
-title:<br><input type="text" name="' . MTEE_OGP_TITLE . '" 
+<label class="mtee-label">title:</label>
+<input type="text" name="' . MTEE_OGP_TITLE . '" 
 value="' . $input_values['title'] . '" 
 placeholder="' . $input_values['title_pl'] . '" 
 class="tax-meta-field" />
-</label>
-<label>
-description:<br><input type="text" name="' . MTEE_OGP_DESC . '" 
+
+<label class="mtee-label">description:</label>
+<input type="text" name="' . MTEE_OGP_DESC . '" 
 value="' . $input_values['desc'] . '" 
 placeholder="' . $input_values['desc_pl'] . '" 
 class="tax-meta-field"  />
-</label>
-<label>image
-<input style="width:100%" type="file" name="' . MTEE_OGP_IMG . '" accept="image/*"/>
-</label>
-<p>' . $this->set_ogp_thumb($tag->term_id) . '</p>
+<label class="mtee-label">image:</label>
+<input class="' . MTEE_OGP_IMG . '" name="' . MTEE_OGP_IMG . '" type="hidden" value="' . get_post_meta($tag->term_id, MTEE_OGP_IMG, true) . '" />
+<input type="button" class="select_ogp_img" name="select_ogp_img" value="選択" />
+<input type="button" class="clear_ogp_img" name="clear_ogp_img" value="クリア" />
+<div id="ogp_media">' . $this->set_ogp_thumb($tag->term_id) . '</div>
+<script>
+var ogp_img_name = ' . "'" . MTEE_OGP_IMG . "'" . '
+</script>
 </td>
 </tr>
 ';
@@ -133,9 +131,9 @@ class="tax-meta-field"  />
        }

        public function set_ogp_thumb($id): string {
-            $ogp_thumb = get_term_meta($id, MTEE_OGP_IMG, true);
+            $ogp_thumb = get_post_meta($id, MTEE_OGP_IMG, true);
            if (!empty($ogp_thumb)) {
-                return '<img style="width: 200px;display: block;margin: 1em 0;" src="' . wp_get_attachment_url($ogp_thumb) . '">';
+                return '<img src="' . wp_get_attachment_image_src($ogp_thumb, 'thumbnail')[0] . '">';
            }
            return '';
        }
@@ -147,65 +145,12 @@ class="tax-meta-field"  />
            if (array_key_exists(MTEE_OGP_DESC, $_POST)) {
                update_term_meta($term_id, MTEE_OGP_DESC, $_POST[MTEE_OGP_DESC]);
            }
-            if (isset($_FILES[MTEE_OGP_IMG]) && $_FILES[MTEE_OGP_IMG]['size'] !== 0) {
-                $this->save_ogp_image('term', $term_id);
-            }
-
-        }
-
-        public function save_ogp_image($type, $id) {
-            $file_name = $this->set_ogp_filename();
-            $wp_upload_dir = wp_upload_dir(); //現在のuploadディクレトリのパスとURLを入れた配列
-            $upload_file = $_FILES[MTEE_OGP_IMG]['tmp_name'];
-            $upload_path = $wp_upload_dir['path'] . '/' . $file_name;
-            //画像ファイルをuploadディクレトリに移動させる
-            move_uploaded_file($upload_file, $upload_path);
-
-            $this->upload_ogp_file($type, $upload_path, $wp_upload_dir, $file_name, $id);
-        }
-
-        public function set_ogp_filename() {
-            $file_name = basename($_FILES[MTEE_OGP_IMG]['name']);
-            $file_name = trim($file_name);
-            return str_replace(' ', '-', $file_name);
-        }
-
-        public function upload_ogp_file($type, $upload_path, $wp_upload_dir, $file_name, $id) {
-            if (file_exists($upload_path)) {
-                //添付ファイルを追加
-                $attachment = $this->set_upload_file_param($wp_upload_dir, $file_name, $upload_path);
-                $attach_id = wp_insert_attachment($attachment, $upload_path, $id);
-                if (!function_exists('wp_generate_attachment_metadata')) {
-                    require_once(ABSPATH . "wp-admin" . '/includes/image.php');
-                }
-                //添付ファイルのメタデータを生成し保存
-                $this->save_ogp_file($type, $attach_id, $upload_path, $id);
+            if (!empty($_POST[MTEE_OGP_IMG])) {
+                update_post_meta($term_id, MTEE_OGP_IMG, $_POST[MTEE_OGP_IMG]);
            } else {
-                //保存失敗
-                echo '画像保存に失敗しました';
-                exit;
+                delete_post_meta($term_id, MTEE_OGP_IMG);
            }
-        }

-        public function set_upload_file_param($wp_upload_dir, $file_name, $upload_path): array {
-            return array(
-                'guid' => $wp_upload_dir['url'] . '/' . basename($file_name),
-                'post_mime_type' => $_FILES[MTEE_OGP_IMG]['type'],
-                //正規表現で拡張子なしのスラッグ名を生成
-                'post_title' => preg_replace('/\.[^.]+$/', '', basename($upload_path)),
-                'post_content' => '',
-                'post_status' => 'inherit'
-            );
-        }
-
-        public function save_ogp_file($type, $attach_id, $upload_path, $id) {
-            $attach_data = wp_generate_attachment_metadata($attach_id, $upload_path);
-            wp_update_attachment_metadata($attach_id, $attach_data);
-            if ($type == 'post') {
-                update_post_meta($id, MTEE_OGP_IMG, $attach_id);
-            } elseif ($type == 'term') {
-                update_term_meta($id, MTEE_OGP_IMG, $attach_id);
-            }
        }

    }
@@ -64,19 +64,16 @@ class="tax-meta-field"  />
 <tr class="form-field">
 <th scope="row">meta keywords<br>meta description</th>
 <td>
-<label>meta keywords:<br>
+<label class="mtee-label">meta keywords:</label>
 <input type="text" name="' . MTEE_NAME_KEYWORDS . '" 
 value="' . $input_values['keywords'] . '" 
 placeholder="' . $input_values['keyword_pl'] . '" 
 class="tax-meta-field" />
-</label>
-<label>
-meta description:<br>
+<label class="mtee-label">meta description:</label>
 <input type="text" name="' . MTEE_NAME_DESCRIPTION . '" 
 value="' . $input_values['desc'] . '" 
 placeholder="' . $input_values['desc_pl'] . '" 
 class="tax-meta-field" />
-</label>
 </td>
 </tr>
 ';
@@ -116,6 +116,15 @@ h2 {
    color: #f35;
 }

+label.mtee-label {
+    display: block;
+    margin: .5em 0 0;
+}
+
+#ogp_media {
+    margin-top: 1em;
+}
+
@media screen and (max-width: 768px) {
    .mtee_description_tmp_list {
        display: block;
@@ -1,6 +1,7 @@
 jQuery(function ($) {

    nab_menu();
+    media_uploader();

    function nab_menu() {
        let menu_list = $('.mtee_tab_menu li');
@@ -17,4 +18,58 @@ jQuery(function ($) {
    }


+    function media_uploader() {
+
+        let custom_uploader;
+        let thumb = $('#ogp_media');
+        let select_ogp = $('.select_ogp_img');
+        let clear_ogp = $('.clear_ogp_img');
+
+        select_ogp.click(function (e) {
+
+            e.preventDefault();
+
+            if (custom_uploader) {
+                custom_uploader.open();
+                return;
+            }
+
+            custom_uploader = wp.media({
+                title: "画像を選択",
+                /* ライブラリの一覧は画像のみにする */
+                library: {
+                    type: "image"
+                },
+                button: {
+                    text: "画像選択"
+                },
+                /* 選択できる画像は 1 つだけにする */
+                multiple: false
+            });
+
+            custom_uploader.on("select", function () {
+                let images = custom_uploader.state().get("selection");
+                /* file の中に選択された画像の各種情報が入っている */
+                images.each(function (file) {
+                    /* テキストフォームと表示されたサムネイル画像があればクリア */
+                    $('.' + ogp_img_name).val('');
+                    thumb.empty();
+                    /* テキストフォームに画像の ID を表示 */
+                    $('.' + ogp_img_name).val(file.id);
+                    /* プレビュー用に選択されたサムネイル画像を表示 */
+                    thumb.append('<img src="' + file.attributes.sizes.thumbnail.url + '" />');
+                });
+            });
+
+            custom_uploader.open();
+
+        });
+
+        /* クリアボタンを押した時の処理 */
+        clear_ogp.click(function () {
+            $('.' + ogp_img_name).val('');
+            thumb.empty();
+        });
+    }
+
 });
@@ -8,11 +8,7 @@ Version: 1.0

 /*
 Todo:OGPタグ
-・OGPタグを追加する
-＜各OGP画像の保存＞
-・投稿のOGP用画像 => post_meta
-・各タクソノミーのOGP画像 => term_meta
-・トップ、カスタム投稿アーカイブ => wp_options
+タグの出力
 */

 include_once 'config.php';
@@ -23,6 +19,7 @@ add_action('admin_enqueue_scripts', function () {
    $plugin_url = plugin_dir_url(__FILE__);
    wp_enqueue_style('mtee_style', $plugin_url . 'css/mtee.css');
    wp_enqueue_script('mtee_js', $plugin_url . 'js/mtee.js', 'jquery');
+    wp_enqueue_media(); //メディアアップローダーのためのスクリプト読み込み
 });

 $mtee = new MTEE;