技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

ブログ

名古屋のホームページ制作会社 花のや > 花のやブログ > 【WordPress】カスタムフィールドも含めたフロントエンドでの投稿 その2
2015/04/20ホームページ制作Wordpress

【WordPress】カスタムフィールドも含めたフロントエンドでの投稿 その2

こんにちは、今回は前回の続きになります。

カスタムフィールドも含めたフロントエンドでの投稿その1

今回はフロントエンド側の準備をしていきます。

どのように作るか?

最初に自分の投稿を一覧表示させて、そこに「編集」「削除」というボタンを付けておきます。
それとは別に「新規投稿」ボタンも必要になりますね。
この表示させる画面や投稿画面は固定ページで用意してしまいましょう。

frontend01  frontend02

その後、それぞれの固定ページ用のテーマファイルを作っていきます。
あなたの投稿一覧では自分の投稿をリスト表示して、それぞれの投稿idをgetパラメーターにして渡すような感じにしてしまえばいいでしょう。(この部分は割愛します。)

そして投稿画面のほう(今回の例の場合はpage-edit_my_post.php)に色々な処理を追加していきます。
投稿画面の最初の方に、条件に合わない人を弾くような処理を入れておきましょう
例として、投稿一覧から編集画面に飛ばす際にpidというgetパラメーターにpost_idを入れて渡しています。

page-edit_my_post.php

<?php
//対象になるpost_idを取得  (新規の場合は0で)
$post_id = 0;
$this_user = wp_get_current_user();
if (! empty($_REQUEST['pid'])) {
  $post_id = intval($_REQUEST['pid']);
}
//ログインしていないか、投稿者でなければTOPへリダイレクト
if (! is_user_logged_in() || ! in_array('author', $this_user->roles)) {
  wp_redirect( get_bloginfo('url').'/' );
}
//本人の投稿ではない場合はマイページへリダイレクト
if (! check_post_id_by_user($post_id)) {
  wp_redirect( get_bloginfo('url').'/my_page' );
}

acf_form_head();
get_header();
?>

条件に合わなかった人は トップページやマイページ(という固定ページ)に飛ばしていますが
この辺りは適宜変更で。

また、get_header()の前に、acf_form_head()でと書くようにします。

さらにcheck_post_id_by_userという関数をfunctions.php内に記述します。

functions.php

//  本人の投稿かどうか?
function check_post_id_by_user($post_id) {
  if ($post_id === 0) {
    return true;
  }
  //投稿を取得
  $post = get_post($post_id);
  if ($post){
    //ユーザーを取得
    $author = get_userdata($post->post_author);
    if ( $author->ID == get_current_user_id()) {
      //ログインidと投稿者のidが一致すればtrue
      return true;
    }
  }
  return false;
}

また、元のpage-edit_my_post.phpに戻ってにカスタムフィールド本体の方を表示させます。

page-edit_my_post.php

<?php
if (have_posts()) : while (have_posts()) : the_post();
  $opt = array(
    'return' => get_bloginfo('url').'/my_page',
  );
  if (intval($post_id) > 0) {
    $opt['post_id'] = intval($post_id);
    $opt['submit_value'] = '更新';
  } else {
    $opt['post_id'] = 'new';
    $opt['field_groups'] = array(10);
    $opt['submit_value'] = '新規登録';
  }
  acf_form($opt);

  the_content();
endwhile; endif;

?>

だいたいこのような感じです。カスタムフィールドの上下に何か書きたい場合のオプションも有りますが
普通にテンプレート内に書いちゃってもいいですし、固定ページの本文に何かを書いてthe_content()で
ひょうじさせてもいいでしょう。
オプションは適当ですが、新規投稿か、編集かの判断のために新規投稿の場合には「new」と入れておきます。

これで表示部分は完成しました。一度見てみると

frontend03 frontend04

こんなかんじでほとんど管理画面と同じ感じで表示されるようになりました。

wysiwygや画像のアップロード。タブや繰り返しフィールドなどもそのまま利用できます。
advanced custom fieldsはそれぞれのカスタムフィールドブロックに自分でつけたfield名のidが
付与されているのでフロント側でそれなりにcssを使って表示の調整も可能です。

あとは、実際の登録する処理を入れていく形になりますがまたまた次回へ続きます…。

書いた人:wada

エンジニア担当の和田です。
ボウリングの機械のメカニックから、漆を塗ったりトラックの運転手をしたりと紆余曲折ありましたが最終的にプログラマーへと転職してしまいました。

人気記事ランキング

株式会社 花のや
〒460-0011
愛知県名古屋市中区大須4-1-79 第2ハヤシビル 3F

花のやについて

お仕事のご依頼やご相談は、下記の電話番号
または、メールフォームよりお問い合わせください。
TEL.052-251-7090 / FAX.052-251-7092

お問い合わせ