質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

840閲覧

ワードプレスの自作カスタムフィールドで画像投稿欄を複数設置→1つ目しかデータが保存されない

mark07

総合スコア2

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2022/08/23 06:36

編集2022/08/24 11:55

前提

Wordpressでプラグイン無しでカスタム投稿フォームのカスタムフィールドを制作しています。
メディアアップローダーを使用した画像投稿欄を2種類以上設置したく、下記のコードを書いたのですが、
2つ目の画像データが保存されないようです。(1つ目は保存されます)

(メディアアップローダーで画像を入力した際、投稿欄にサムネイル画像は表示されますが、更新ボタンを押すと消えてしまいます)

エラーメッセージは特に出ていません。

実現したいこと

2つ目以降の画像投稿欄からも画像データを保存できるようにし、複数の画像投稿欄を設置できるようにしたいと思います。

該当のソースコード

php

1<?php 2function insert_custom_fields($post) 3{ 4 //nounceフィールドの追加 5 wp_nonce_field('custom_field_save_meta_box_data', 'custom_field_meta_box_nonce'); 6 //すでに保存されているデータを取得 7 $company_image01 = get_post_meta($post->ID, 'company_image01', true); 8 $company_image02 = get_post_meta($post->ID, 'company_image02', true); 9?> 10//htmlコード 11<div class="l-item mediaArea"> 12 <form method="post" action="admin.php?page=site_settings"> 13 <label for="company_image01">イメージ画像</label> 14 <input style="width:0;height:0;padding:0;margin:0;visibility:hidden" name="company_image01" type="text" value="<?php echo $company_image01 ?>" id="media01"/> 15 <input style="width:80px" type="button" name="media1" value="画像選択" class="media-btn" /> 16 <input style="width:80px" type="button" name="media-clear1" value="削除" class="media-clear-btn" /> 17 <div id="mediabox01"> 18 <img src="<?php echo $company_image01; ?>" alt=""> 19 </div> 20 </form> 21</div> 22<div class="l-item mediaArea"> 23 <form method="post" action="admin.php?page=site_settings"> 24 <label for="company_image02">イメージ画像2</label> 25 <input style="width:0;height:0;padding:0;margin:0;visibility:hidden" name="company_image02" type="text" value="<?php echo $company_image02 ?>" id="media02"/> 26 <input style="width:80px" type="button" name="media2" value="画像選択" class="media-btn" /> 27 <input style="width:80px" type="button" name="media-clear2" value="削除" class="media-clear-btn" /> 28 <div id="mediabox02"> 29 <img src="<?php echo $company_image02; ?>" alt=""> 30 </div> 31 </form> 32</div> 33<?php 34} 35 36function save_custom_fields($post_id) 37{ 38 //nounceがセットされているか確認 39 if (!isset($_POST['custom_field_meta_box_nonce'])) { 40 return; 41 } 42 43 //nounceが正しいか検証 44 if (!wp_verify_nonce($_POST['custom_field_meta_box_nonce'], 'custom_field_save_meta_box_data')) { 45 return; 46 } 47 48 //company_image01データを保存 49 if (isset($_POST['company_image01'])) { 50 update_post_meta($post_id, 'company_image01', $_POST['company_image01']); 51 } 52 //company_image02データを保存 53 if (isset($_POST['company_image02'])) { 54 update_post_meta($post_id, 'company_image02', $_POST['company_image02']); 55 } 56 57add_action('save_post', 'save_custom_fields'); 58 59 ?>

JavaScript

1jQuery(document).ready(function($){ 2 var custom_uploader; 3 var target_input; 4 var target_display; 5 $('.media-btn').click(function(e) { 6 target_input = $(this).prev().attr('id'); 7 target_display = $(this).next().next().attr('id'); 8 e.preventDefault(); 9 10 if (custom_uploader) { 11 custom_uploader.open(); 12 return; 13 } 14 15 custom_uploader = wp.media.frames.file_frame = wp.media({ 16 title: "画像を選択", //タイトルのテキストラベル 17 button: { 18 text: "画像を設定" //ボタンのテキストラベル 19 }, 20 multiple: false //選択できる画像を1つだけにする。 21 }); 22 23 custom_uploader.on('select', function() { 24 attachment = custom_uploader.state().get('selection').first().toJSON(); 25 $( '#' + target_input ).val(""); //テキストフォームをクリア 26 $( '#' + target_display ).empty(); //id mediaタグの中身をクリア 27 $( '#' + target_input ).val(attachment.url); 28 $( '#' + target_display ).append('<img src="'+attachment.url+'" />'); //プレビュー用にメディアアップローダーで選択した画像を表示させる 29 }); 30 31 custom_uploader.open(); 32 33 }); 34 35}); 36jQuery(document).ready(function($){ 37 $(".media-clear-btn").click(function() { 38 var clear_input = $(this).prev().prev().attr('id'); 39 var clear_display = $(this).next().attr('id'); 40 $( '#' + clear_input ).val(""); //テキストフォームをクリア 41 $( "#" + clear_display ).empty(); //id mediaタグの中身をクリア 42 }); 43});

$('.media-btn')をクリックした時に、.next()や.prev()で操作したいタグを指定し、入力するようにしています。

この方法に限らず、プラグインを使わずに複数の画像投稿欄を設置する方法をご存じでしたら掲載箇所の情報でも助かりますので教えていただけると幸いです。
何卒よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mark07

2022/08/24 00:10

console.logで調べたところ、各画像フォームへの入力は上手く行っているようですが、 更新ボタンを押すと保存がされない状態のようです。 保存方法に関して調べてみようと思います。 何かご存知の方いらっしゃいましたらご教示お願いいたします。
guest

回答1

0

ベストアンサー

formが2つに分かれているので1つにまとめてみてください。

投稿2022/08/24 01:10

tabuu

総合スコア2449

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mark07

2022/08/24 02:55

無事保存することができました! 初歩的なミスでしたね・・・form関連勉強しなおします。 非常に助かりました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問