【Advanced Custom Fields】HTMLフォームから他の投稿のカスタムフィールドの値を更新する【WordPress】
カスタム投稿でデータを作り、クエリを使って動的な一覧表を作る。
というものを作る事になりました。
それに加えて、一覧表の各項目に入力フォームを用意。
該当のカスタム投稿のカスタムフィールド値を更新する。
という動作も加えます。
以前、「投稿の公開時に別投稿のカスタムフィールドの値を更新する」方法について書きましたが、基本的にはそれを元に考えていきます。
動作の流れを確認しておく
イメージとしては、「棚卸し」をイメージに近いかもしれません。
①入出庫のデータから計算上の在庫がいくらあるかが表示される。
②実在庫数を数えたら、数が違ったので修正する。
という流れです。
元在庫となるカスタム投稿タイプで公開されている記事(データとして登録された記事)をクエリで一覧表示します。
この時点では、更新されないように条件分岐をしておいて、送信ボタンが押されたタイミングで元データを更新。
再読み込みされた時に、一覧の数字も修正されている。
というのを目標に作業していきます。
HTMLでフォームを作る
今回作成する表は、要するに表です。
その表の項目を埋める内容が、クエリで取得した記事の一覧の内容となります。
なので、まずはクエリとループを書いてしまいます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <?php //クエリを作成 $args = array( 'post_type' => 'test', 'post_status' => 'publish', 'orderby' => 'ID', 'posts_per_page' => -1, ); $test_list_query = new WP_Query( $args ); //クエリ―のループ開始 if( $test_list_query->have_posts() ) : ?> <table> <tr> <td>商品名</td> <td>棚卸入力日</td> <td>棚卸数</td> <td>修正数</td> <td>更新ボタン</td> </tr> <?php while( $test_list_query->have_posts() ) : $test_list_query->the_post(); ?> <!-- ループの開始まで --> |
テーブルヘッダーとなるものは、while文の前に入力しておきます。
ループ内に書いてしまうと、記事データを取得するたびに表示されてしまいます。
次に表を作成していきますが、今回は分かりやすくtableで作っていきます。
投稿タイトルだけなら良いですが、カスタムフィールドの値を呼び出すのには投稿IDが必要です。
今回もカスタムフィールドの値を呼び出すので投稿IDを取得しておく必要がありますが、クエリで取得した投稿データから受け取れば良いので、the_ID()で取得できます。
入力フォームのname属性を動的に変えるのにもIDを使用しています。
更新するフィールドが別投稿のものとなるので、重複するのを避けるためです。
・・・簡単に、使用するname属性とIDを連結して変数に入れておきます。
1 2 3 | <?php $test_input_name = 'test-count-' . the_ID(); ?> |
このIDをフォーム内の必要なところで呼び出していきます。
ループするので、一記事分作成すれば良いのが気持ち的に楽なところですね笑
で、棚卸表ととらえた場合、連続して作業する可能性も考えると、また同じページに戻った方が効率が良さそうです。
なので、action属性を現在のURLに戻るようにしておきます。
1 2 3 4 5 6 7 8 9 10 | <!-- formの内容-- > <tr> <form method="post" action="<?php echo 'https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];/*一覧画面に戻るURL*/ ?>"> <td><?php echo the_title(); ?></td> <td><?php echo get_field( 'inventory-date', the_ID() ); ?></td> <td><?php echo get_field( 'inventory-count', the_ID() ); ?></td> <td><input style="width: 100px;" type="number" name="<?php echo $test_input_name; ?>" /></td> <td><input type="submit" value="更新" /></td> </form> </tr> |
クエリに絞込み条件を指定している場合は、hidden属性で絞込の条件を受け渡すようにしておかないと、違う内容が返されてしまうので気を付けて下さい。
あとは修正数が少ない場合、上とか下に戻るのは面倒だなぁと思ったので。各フォームの横にボタンを設置してしまってます。
ボタンの数が増えて見た目がうっとおしい場合は、ループの外でボタンを作成すればOKです。
最後に、クエリを終了させてフォームの作成は完了です。
update_field()が動作する内容を作る
続いて、送信ボタンを押してページが再読み込みされた時に、カスタムフィールドの値が更新されるようにします。
まずは、update_field()の引数を埋めてしまいます。
引数の解説と一緒にコードを載せておきます。
1 2 3 4 | <?php //update_field( 'フィールドキー', '更新する値' '更新するフィールドのあるID' ); update_field( 'フィールドキー', filter_input( INPUT_POST, $test_input_name ), the_ID() ); ?> |
第1引数はカスタムフィールドキーを指定します。
今回は更新したいカスタムフィールドが2か所にあるので2つ用意します。
第2引数は更新する値ですね。
POSTで受け取るので、filter_input()を使用して安全に処理します。
第3引数は更新したいカスタムフィールドが保存されている投稿IDの指定です。
クエリで呼び出したカスタム投稿に保存されているものを更新する場合は、the_ID()でそのまま取得します。
他のカスタム投稿に保存されているものは、いくつかやり方はありますが。
今回はクエリで使用した投稿の中に「投稿オブジェクト」を使用したフィールドがあったので、そこからIDを呼び出します。
1 2 3 | <?php $test_page_ID = get_field( 'test-field', the_ID() )->ID; ?> |
一応変数に入れてますが。ここでしか使わないので、入れなくても良いですね。
投稿オブジェクトは投稿に含まれるデータを取得する時にほんとに便利です。
で、このままだと読み込むために更新の動作を起こしてしまうので、if文で条件分岐を書いておきます。
1 2 3 4 5 6 7 8 9 10 11 12 | <?php //入力内容の更新処理 //更新するカスタムフィールドがある投稿IDの取得 $test_page_ID = get_field( 'test-field', the_ID() )->ID; //更新するvalue値のname属性を生成 $test_input_name = 'test-count-' . the_ID(); //$_POSTの判定があれば、該当フィールドを更新する処理 if( isset( $_POST[ $test_input_name ] ) ){ update_field( 'field_619358d1580e9', filter_input( INPUT_POST, $test_input_name ), $test_page_ID ); update_field( 'field_61935afddd8ae', filter_input( INPUT_POST, $test_input_name ), the_ID() ); } ?> |
これで、値の修正で送信ボタンを押したときだけ更新されます。
つまり初回読み込み時に更新動作しないようになりました。
コード全文
ということで、ごちゃごちゃ書きながら来たので、出来たコードの全文を載せておきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <?php $args = array( 'post_type' => 'test', 'post_status' => 'publish', 'orderby' => 'ID', 'posts_per_page' => -1, ); $test_list_query = new WP_Query( $args ); //クエリ―のループ開始 if( $test_list_query->have_posts() ) : ?> <table> <tr> <td>商品名</td> <td>棚卸入力日</td> <td>棚卸数</td> <td>修正数</td> <td>更新ボタン</td> </tr> <?php while( $test_list_query->have_posts() ) : $test_list_query->the_post(); ?> <article id="post-<?php the_ID(); ?>"> <?php //入力内容の更新処理 //更新するカスタムフィールドがある投稿のID取得 $test_page_ID = get_field( 'test-field', the_ID() )->ID; //更新するvalue値のname属性を生成 $test_input_name = 'test-count-' . the_ID(); //$_POSTの判定があれば該当フィールドを更新する処理 if( isset( $_POST[ $test_input_name ] ) ){ update_field( 'field_619358d1580e9', filter_input( INPUT_POST, $test_input_name ), $test_page_ID ); update_field( 'field_61935afddd8ae', filter_input( INPUT_POST, $test_input_name ), the_ID() ); } ?> <tr> <form method="post" action="<?php echo 'https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];/*一覧画面に戻るURL*/ ?>"> <td><?php echo the_title(); ?></td> <td><?php echo get_field( 'test-date', the_ID() ); ?></td> <td><?php echo get_field( 'test-count', the_ID() ); ?></td> <td><input style="width: 100px;" type="number" name="<?php echo $test_input_name; ?>" /></td> <td><input type="submit" value="更新" /></td> </form> </tr> </article> <?php endwhile; ?> <?php wp_reset_postdata(); ?> </table> |
途中さらっと書きましたが、実はname属性の指定に少しハマりました笑
全部同じ値だと配列になってしまってうまく更新できず。
ループで呼び出されるname属性に一意のものをつけるなら・・・と考えて、気づいたのがIDとの連結でした。
IDって便利です笑
複数の投稿の同じフィールドの更新に便利
一つのHTMLフォームから、複数のカスタムフィールドを更新してみる方法でした。
あまりこういう使い方をすることは無いかもしれませんが、一か所変更を掛ければ複数個所が変更される、ちょっとめんどくさいパターンぐらいで覚えておいても損はないかもしれません。
文字だけで説明するのがなかなか難しかったですが、自分の備忘録的な意味も込めて書いておくことにしました。
WordPress初心者～中級者の方にオススメの本！
初心者と言ってもある程度WordPressでブログなどを作成した方にオススメです。
基本的なことから、「あれ何だっけ？」と忘れがちな事が良くまとめられています。
コードとプラグインの利用を平行させたWordPressの制作をする際に横に置いておきたい本です。
前の記事
【WordPress】メインクエリとサブクエリ、メインループとサブループとは？
次の記事
【WordPress】カスタムフィールドを使用した投稿の条件付検索を実装する
こちらも読まれています
お問い合せ
この記事の内容や当社についてのお問い合わせはこちらのフォームをご覧下さい。
ご利用前に当社のプライバシーポリシーと免責事項をお読み下さい。
送信ボタンを押された時点で、当社プライバシーポリシー又は、免責事項にご同意頂いたものとみなします。