diff --git a/class/mtee_ogp_post_setting.php b/class/mtee_ogp_post_setting.php index 7179419..440db3c 100644 --- a/class/mtee_ogp_post_setting.php +++ b/class/mtee_ogp_post_setting.php @@ -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() . '"/>
- -

' . $this->set_ogp_thumb($post->ID) . '

+ + + +
' . $this->set_ogp_thumb($post->ID) . '
-
'; + +'; } - 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 ''; + return ''; } 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); - } - } } } \ No newline at end of file diff --git a/class/mtee_ogp_tax_setting.php b/class/mtee_ogp_tax_setting.php index ce0af87..e52f4c6 100644 --- a/class/mtee_ogp_tax_setting.php +++ b/class/mtee_ogp_tax_setting.php @@ -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() { - ?> - - true, '_builtin' => false)); $tax_array = array_merge(array('category', 'post_tag'), $custom_tax); @@ -61,19 +49,26 @@ if (!class_exists('mtee_ogp_tax_setting')) {
OGP title
OGP description
- +
+
+image
+ + + +
+
'; } @@ -84,22 +79,25 @@ class="tax-meta-field" /> OGP - + - - + - - -

' . $this->set_ogp_thumb($tag->term_id) . '

+ + + + +
' . $this->set_ogp_thumb($tag->term_id) . '
+ '; @@ -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 ''; + return ''; } 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); - } } } diff --git a/class/mtee_tax_setting.php b/class/mtee_tax_setting.php index 6d0511c..778cdc2 100644 --- a/class/mtee_tax_setting.php +++ b/class/mtee_tax_setting.php @@ -64,19 +64,16 @@ class="tax-meta-field" /> meta keywords
meta description - - '; diff --git a/css/mtee.css b/css/mtee.css index 64058fe..6fd1536 100644 --- a/css/mtee.css +++ b/css/mtee.css @@ -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; diff --git a/js/mtee.js b/js/mtee.js index c10f063..5fa47c8 100644 --- a/js/mtee.js +++ b/js/mtee.js @@ -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(''); + }); + }); + + custom_uploader.open(); + + }); + + /* クリアボタンを押した時の処理 */ + clear_ogp.click(function () { + $('.' + ogp_img_name).val(''); + thumb.empty(); + }); + } + }); \ No newline at end of file diff --git a/meta-tag-etc-extend.php b/meta-tag-etc-extend.php index 2e51111..be87aa6 100644 --- a/meta-tag-etc-extend.php +++ b/meta-tag-etc-extend.php @@ -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;