acf(Advanced Custom Fields) PRO のフロント投稿 を使ってみてハマった点とか

みなさんこんにちは。上間ウェブ店の上間です。

最近ある会のサイトを作っていまして、写真ギャラリーをエンドユーザーがアップロードできる仕様にしました。

ボットとかに勝手にアップされてもあれなんで、アップするにはログインが必要って事にすればいいじゃないって事で会員制サイトにする事にしました。

LINEアカウントでしか登録できないパワハラサイトです。

ついでに、せっかく会員制サイトを作るので、wpの管理画面ではなくフロント側で投稿や編集ができるような物にしようやってみたんですが、ちょいちょいつまづきポイントにあたったので、備忘録も兼ねて記事にしたいと思います。

ACF PRO最高。こんなに簡単にフロントで投稿できるなんて。

このプラグイン最高です。有料版だとこんな機能まで使えるんですね。買わなきゃ損です。マジで。

テンプレートにこれ書くだけで新規記事が追加できます。

<?php
  $settings = array(
    'post_id' => 'new_post',
    'post_title' => true,
    'post_content' => true,
    'form' => true,
    'new_post' => array(
      'post_type' => 'post',
      'post_status' => 'publish',
    ),
    'submit_value' => __("投稿する", 'acf'),
    'return' => '%post_url%',
  );
  acf_form($settings);
?>

もっとオプションあります。公式サイトで確認できますよ。

ハマりポイントはカテゴリーとアイキャッチ

先ほどのコードにカテゴリーとアイキャッチが入ってないのに気づきましたか？

公式サイトのオプションで、”wp_insert_post” と同じ感じで使えるぞ 的な事かいてるんですけど、罠でしたね。

まず wp_insert_post にはアイキャッチの項目がなかったです。

カテゴリーは、テンプレートに直接書いたカテゴリーが入るって事で、フロントの投稿画面で選択できるようになるって事ではなかったです。

解決策はこのサイトに載ってました。

https://itsmereal.com/frontend-post-submission-edit-advanced-custom-fields/

カテゴリーの解決策

ACFで投稿用のカテゴリーフィールドをフィールドタイプ “タクソノミー” で作成。

タクソノミーで “カテゴリー” を選択。チェックボックスにチェックを入れておわりです。返り値はどっちでも大丈夫でした。

なんかもっとフックとかでゴニョゴニョするかと思ってたのでラッキーでした！

ちなみにフロントの出力はこんな感じです。

アイキャッチの解決策

ACFで投稿用のカテゴリーフィールドをフィールドタイプ “画像” で作成、返り値を “画像ID” に変更します。

function.php にこのコードを書いて終わりです。

function acf_set_featured_image($value, $post_id, $field) {
  if($value != ''){
    update_post_meta($post_id, '_thumbnail_id', $value);
  }
  else {
    if (has_post_thumbnail()) {
      delete_post_thumbnail($post_id);
    }
  }
  return $value;
}
add_filter('acf/update_value/name=post_eyecatch', 'acf_set_featured_image', 10, 3);

やっぱりフックでゴニョゴニョが必要でしたね。でもコピペだけでいけたんでめっちゃラッキーでした！

おわりに

会員制サイトのプラグイン(wp_members とか) を試してみたんですが、カスタマイズが難しかったんでACFだけで自作にトライしてみました。

まさかこんなにすんなりいくとは思ってなかったです。

今回の案件で会員制サイトの制作までカバーできるようになったのでかなりの収穫でした。

ACF、いつもありがとうございます。これからもよろしくです。