【WordPress】Advanced Custom Fieldを使用して写真投稿ページを作成する

WordPressの機能を外(Wordpress外のPHPページ)から利用して、Wordpressにログインせずに写真を投稿出来るページを作る機会があったので書きたいと思います。

WordPressってパッケージ製品っぽいので、APIとは別にこういう事って苦手そうと思っていましたが出来ましたね。笑

投稿管理にWordpress機能が使用出来る為、簡単に且つ実装工数も削減して写真投稿ページが作成できます。

スクラッチでイチから組むと時間が掛かる為、Wordpressサイトで実装しようと思っている人はおススメの組み方です。

WordPressでログインせずに外部ページから写真が投稿出来るページを作成する

 

手順は以下になります。

手順
  1. カスタム投稿タイプを作成
  2. Advanced Custom Filed(ACF)でデータの受け皿の項目を作成
  3. WordPress外のPHPページでwp-load.phpを外部参照

1.カスタム投稿タイプを作成

 

写真投稿の管理を行い易い様に、今回はWordpressメニューに専用メニューを設けます。

 

 

左メニューに「フォト」というメニューが表示されていますが、Function.phpに以下コードを追記する事でメニューに独自の項目を設定出来ます。


function create_custom_photo()
{
    register_post_type('photo', 
        [
            'labels' => [
                'name' => __('フォト', 'rafty'), 
                'singular_name' => __('フォトページ', 'rafty'),
                'add_new' => __('新規追加', 'rafty'),
                'add_new_item' => __('新規フォトページ追加', 'rafty'),
                'edit' => __('編集', 'rafty'),
                'edit_item' => __('フォトページ編集', 'rafty'),
                'new_item' => __('新規フォトページ', 'rafty'),
                'view' => __('フォトページ表示', 'rafty'),
                'view_item' => __('フォトページ表示', 'rafty'),
                'search_items' => __('フォト検索', 'rafty'),
                'not_found' => __('お探しのぺーじが見つかりませんでした', 'rafty'),
                'not_found_in_trash' => __('お探しのページがゴミ箱には入っていません。', 'rafty'),
            ],
            'public' => true,
            'publicly_queryable' => true,
            'show_ui' => true,
            'query_var' => true,
            'rewrite' => true,
            'capability_type' => 'post',
            'hierarchical' => true,
            'has_archive' => true,
            'menu_position' => 6,
            'menu_icon' => 'dashicons-exerpt-view',
            'supports' => [
                'title',
                'editor',
                'excerpt',
                'thumbnail',
            ], 
            'can_export' => true,
            'taxonomies' => [
                'phototype',
			]
        ]);
        flush_rewrite_rules( false );
}
add_action('init', 'create_custom_photo'); 

 

2.Advanced Custom Filed(ACF)でデータの受け皿の項目を作成

投稿されたフォーム内容をWordpressの保存フォーマットに合わせる為にACFを使用してデータを管理します。

フィールドグループから新規作成

左メニューの「カスタムフィールド」→「新規追加」を選択しフィールドグループ名を入力して下さい。

今回は例という事で「photo_stock」という名称にしています。

 

Advanced Custom Filed(ACF)で今回作成する項目

今回作成する項目は以下の3項目です。

  • 氏名(投稿者)
  • 写真1
  • 写真2

上記項目を作成出来ましたら、画像1にある「位置」というセクションの設定を行います。

「このフィールドグループを表示する条件」の設定項目を以下に設定して下さい。

左から、

  • 投稿タイプ
  • 等しい
  • フォトページ

最後に保存を行って下さい。

3.Wordpress外のPHPページでwp-load.phpを外部参照

次に、実際の投稿画面と投稿された内容を処理する部分を作成していきます。

手順
  1. 投稿画面を作成
  2. 投稿されたデータを処理するページを作成

ディレクトリ構成は、

photoディレクトリ

– index.php

– post.php

とします。

1.投稿画面を作成

※以下コードにページのデザインは含まれていませんので見栄えなどのコードやCSSは別途記載して下さい。

index.phpに以下コードを記載します。



<?php require_once('../wp-load.php'); ?>
<!DOCTYPE html>
<html >
<head>
    <meta charset="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>フォト - 投稿

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">


    <?php wp_head(); ?>

<body>

    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="sec_maincon_box center-block">
            <article id="form" class="hentry">
                <div class="entry-content">
                    <form id="form_toukou" action="post.php" method="post" enctype="multipart/form-data">
                        <fieldset>
                            <div class="text-left">
                                <div class="sec-form-block">
                                    <div class="form-group blk-form">
                                        <span class="hissu">必須
                                        <input id="cust_name" type="text" name="氏名" class="form-control txt-ctr-name-kana">
                                    </div>
                                </div>
                            </div>
                            <div class="sec-img">
                                <div class="clearfix form-item">
                                
                                    <img id="preview1" alt="" width="120" style="margin-bottom:10px;" />
                                    <label for="img_photo1" class="btn-sansyou">
                                        <i class="fas fa-camera"> 写真を選択して下さい
                                        <input name="img_photo1" id="img_photo1" type="file" size="40" tabindex="2" class="validate[required]">
                                    </label>
                                </div>
                                <div class="clearfix form-item">
                            
                                    <img id="preview2" alt="" width="120" style="margin-bottom:10px;" />
                                    <label for="img_photo2" class="btn-sansyou">
                                        写真を選択して下さい
                                        <input name="img_photo2" id="img_photo2" type="file" size="40" tabindex="4"> 
                                    </label>
                                </div>
                            </div>
                        </fieldset>
                    
                        <input type="hidden" name="mytype" value="photo" />
                        <button type="submit" class="btn-toukou">投稿
                
                    </form>
                </div>
            </article>
        </div>
    </div>

</body>

<?php get_footer(); ?>

<script>
$('#img_photo1').on('change', function (e) {
    var reader = new FileReader();
    reader.onload = function (e) {
        $("#preview1").attr('src', e.target.result);
    }
    reader.readAsDataURL(e.target.files[0]);
});
$('#img_photo2').on('change', function (e) {
    var reader = new FileReader();
    reader.onload = function (e) {
        $("#preview2").attr('src', e.target.result);
    }
    reader.readAsDataURL(e.target.files[0]);
});
</script>

2.投稿されたデータを処理するページを作成

投稿画面から渡されたデータを処理するコードは以下になります。

post.phpに以下コードを記載して下さい。


<?php

require_once('../wp-load.php');

function insert_attachment($file_handler,$post_id,$setthumb='false') 
{
    if ($_FILES[$file_handler]['error'] !== UPLOAD_ERR_OK) __return_false();
     
    require_once(ABSPATH . "wp-admin" . '/includes/image.php');
    require_once(ABSPATH . "wp-admin" . '/includes/file.php');
    require_once(ABSPATH . "wp-admin" . '/includes/media.php');
    $attach_id = media_handle_upload( $file_handler, $post_id );
    if ($setthumb)
        update_post_meta($post_id,'_thumbnail_id',$attach_id);
    return $attach_id;
}

$postarr = Array(
    'post_status' => 'draft',
    'post_title' => date('YmdHis'),
    'post_type' => $_POST['mytype'],
    'post_name' => date('YmdHis').'_'.$_POST['mytype']
);

if($_POST['cust_name']){ 
    $insert_id = wp_insert_post($postarr);
}

$insert_name_normal = Array(
    'cust_name',
    'email',
    'customer_review'
);

if($insert_id) {
   
    foreach ($insert_name_normal as $key) {
            update_post_meta($insert_id, $key, $_POST[$key]); 
    }

    if($_FILES['img_photo1']['size'] > 0)
    {
        $attachment_id1 = insert_attachment('img_photo1', $insert_id);
        update_post_meta($insert_id, 'img_photo1', $attachment_id1);
    }

    if($_FILES['img_photo2']['size'] > 0)
    {
        $attachment_id1 = insert_attachment('img_photo2', $insert_id);
        update_post_meta($insert_id, 'img_photo2', $attachment_id1);
    }
    
    update_post_meta($insert_id, 'sender_ip', $_SERVER["REMOTE_ADDR"]);
    update_post_meta($insert_id, 'sender_client', $_SERVER["HTTP_USER_AGENT"]);
    update_post_meta($insert_id, 'sender_riffer', $_SERVER["HTTP_REFERER"]);
}

get_header(); 
?>


<!DOCTYPE html>
<html >
<head>
    <meta charset="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>フォト - 投稿完了</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">

    <?php wp_head(); ?>

</head>

<body>

body>~/body内に投稿完了のHTMLを記載する

</body>

<?php get_footer(); ?>