🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
WordPress

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

Q&A

解決済

2回答

4251閲覧

フロントエンドからカスタムフィールドの画像を更新したい【WordPress】

pineappleman

総合スコア26

WordPress

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

0グッド

1クリップ

投稿2019/11/11 12:08

編集2019/11/26 11:33

概要

以前質問させて頂いた件の続きになります。
https://teratail.com/questions/220558

WordPressで作成しているサイトがあります。
フロントエンドからカスタムフィールドを更新(追加)しようとしたところ、
画像のみアップロードができません。

フロントからカスタムフィールド用の画像アップロードについて、
助言を頂戴したく投稿致しました。

改善2019/11/26追記

初回質問時に回答を頂き、
WordPress関数「wp handle upload」を手がかりにコードを修正しました。
しかし画像のアップロードがうまくいきません。
メディアライブラリに画像が表示されないので、データベースに保存されない状況です。

function.php

php

1add_action( 'wp_ajax_update_info', 'update_info',10,15); 2function update_info(){ 3 $my_nonce = isset($_POST['_wpnonce']) ? $_POST['_wpnonce'] : null; 4 5 if( wp_verify_nonce( $my_nonce, 'UPDATEINFO' ) ){ 6 7 $post_id = filter_input( INPUT_POST, 'post_id', FILTER_SANITIZE_NUMBER_INT ); 8 $画像 = filter_input( INPUT_POST, '画像', FILTER_SANITIZE_STRING ); 9 if( !empty( $画像 ) ){ 10 return update_post_meta( $post_id, '画像', $画像 ); 11 } 12 } 13}

post.php

php

1<div id="InfoForm"> 2<form name="Info" id="Info" method="post" enctype="multipart/form-data" action="updatetenpoinfoaction"> 3 <input type="hidden" name="post_id" id="post_id" value="<?php echo $post->ID;?>" > 4 <input type="file" name="画像" multiple="false"> 5 <?php 6 if (!empty($_FILES['画像'])) { 7 require_once(ABSPATH . 'wp-admin/includes/image.php'); 8 require_once(ABSPATH . 'wp-admin/includes/file.php'); 9 require_once(ABSPATH . 'wp-admin/includes/media.php'); 10 $this->attachment_id = wp_handle_upload( array( 'test_form' => FALSE, 'action' => 'updatetenpoinfoaction' ) ); 11 if (is_wp_error($this->attachment_id)) { 12 $this->attachment_id = false; 13 } 14 } 15 ?> 16 <input class="submitbtn" type="submit" value="情報を更新"> 17 <?php wp_nonce_field('UPDATEINFO'); ?> 18 </form> 19</div>

私のレベルと懸念

WordPressを深く理解しているわけではなく、書籍と検索で調べたコードを組み上げています。初歩的なミスもあるかと思います。
恐れ入りますがどうかご指摘頂けると幸いです。

参考になりそうでわからない記事たち

以下の記事はかなり回答に近いと思われましたが、私は理解ができませんでした。
なにが理解できないかと言うと、
「どれをfunction.phpに書くことで再現できるか」
同じく「どれをpost.phpに書くことで再現できるか」
という点です。

参考1.
フロントから画像をアップロードする

参考2.
【WORDPRESSカスタマイズ】MEDIA_HANDLE_UPLOAD()を使って画像投稿する自作フォームの作り方

参考3.
wordpressのwp_handle_upload関数を使ってローカルファイルをメディアへアップロードする

参考4.
MEDIA_HANDLE_UPLOAD()を使って画像投稿する自作フォームの作り方

参考5.
ACF Upload Image in front-end with custom form

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

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

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

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

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

guest

回答2

0

ベストアンサー

フォーム<input type="file" ....の入力項目から画像をアップロードすると
一時ファイルとしてサーバーに画像がアップロードされ
その一時ファイルの情報を$_FILE変数から得ることができます
$_POSTにはいません

この一時ファイルに名前をつけて
無害化やサイズのチェックをし
アップロードフォルダにコピーする
と言うのがフォームから画像を
アップロードする処理の基本的な流れです

WPにはこの一連の処理を行ってくれる関数があります
wp_handle_upload

wp-admin/includes/file.phpをincludeする必要があるので注意です

投稿2019/11/12 04:48

KazuhiroHatano

総合スコア7819

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

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

pineappleman

2019/11/12 10:22

早速のご回答誠にありがとうございました。 $_FILE、wp_handle_upload関数を調べて試しましたがうまくいきません。そもそも自分の理解が浅く、独自にプログラムを考える力に欠けております... なにか手本のようなコードを示して頂くことはできないでしょうか。 ググっても状況が一致する事例がなく、未だ手探りの状態なのです。
pineappleman

2019/11/14 04:36

またしてもご回答ありがとうございます。 いろいろと調べて試してみたのですが、 media_gandle_uploadの使用方法がよく理解できず結局未解決のままです。 せっかく教えてくださったのですが申し訳ございません。
pineappleman

2019/11/26 05:25 編集

前回ご回答を頂いてから随分立ちましたが、ようやく理解が追いつきました。本件に未だ一人でトライ&エラーをしています。 media_handle_uploadの関数リファレンスページの用例を元に試していますがうまくいきません。 疑問なのは、戻り値のIDをどのように処理するかについてです。 post_metaに入れるとかすることで一時ファイルが$_POSTに登録されるのであろう...と想像ができるようにはなりましたが、その具体的手法をご教示いただけませんか?
pineappleman

2019/11/26 11:29

ご回答頂いた内容はあっており、大変助かりました。 しかし抽象的で再現ができかねます。 私としては具体的な返答をいただきたいと思いました。
KazuhiroHatano

2019/11/27 04:26

wp_handle_upload は functions.php側 投稿時に送信されたファイルを wp_handle_uploadでwp-content/uploads/に移動して 戻り値からURLを取得してそれをpost_metaに保存
pineappleman

2019/11/28 11:43

ありがとうございました。 基礎から勉強しなおして理解し、ここに解決方法を書くようにしたいと思います。
guest

0

function.php

php

1add_action( 'wp_ajax_update_info', 'update_info',10,15); 2function update_info(){ 3 $my_nonce = isset($_POST['_wpnonce']) ? $_POST['_wpnonce'] : null; 4 $post_id = filter_input( INPUT_POST, 'post_id', FILTER_SANITIZE_NUMBER_INT ); 5 6 //画像アップロードのためにインクルード 7 require_once( ABSPATH . 'wp-admin/includes/image.php' ); 8 require_once( ABSPATH . 'wp-admin/includes/file.php' ); 9 require_once( ABSPATH . 'wp-admin/includes/media.php' ); 10 11 if( wp_verify_nonce($my_nonce, 'UPDATEINFO') // nonceのチェック 12 && current_user_can('edit_post', $post_id) ) { // 編集権限のチェック 13 14 if( isset( $_FILES['画像'] ) ){ 15 $media_id = media_handle_upload('画像', 0); 16 if(is_wp_error($media_id)) { 17 $msg = $media_id->get_error_message(); 18 wp_die($msg, '', array('response' => 500)); 19 } 20 update_post_meta($post_id, '画像', $media_id); 21 } 22 23 } 24 else 25 { 26 wp_die('編集権限がありません'); 27 } 28}

post.php

php

1<div id="InfoForm"> 2 <form name="Info" id="Info" method="post" enctype="multipart/form-data" action=""> 3 <input type="hidden" name="post_id" id="post_id" value="<?php echo $post->ID;?>" > 4 5 <input type="file" name="画像" id="画像" /> 6 7 <div class="edit-page-btns"> 8 <input class="submitbtn" type="submit" name="profile-group-edit-submit" id="profile-group-edit-submit" value="情報を更新" value="Upload" > 9 </div> 10 <?php wp_nonce_field('UPDATEINFO'); ?> 11 </form> 12</div>

複数画像の場合

foreachで一回づつまわす
http://www.kaasan.info/archives/2551

どなたかの役に立てば幸いです

投稿2019/12/12 08:48

pineappleman

総合スコア26

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問