①カスタムフィールドの中身を独自データベースへ登録する
②カスタムフィールド内で画像を登録する際にメディアアップローダーを使用する
・メディアアップローダーを使用して画像のURLを独自DBに登録する
・画像登録は2箇所作りたい
③独自データベースは2個作りたい
④登録したカスタムフィールドの中身を取得してコンテンツ内に表示する
①はこちらの記事で取り上げた中身になります。
②カスタムフィールド内で画像を登録する際にメディアアップローダーを使用する
https://gist.github.com/sushat4692/33df8a65474798fca0c6
こちらの記事の方法を参考に、①の際に作ったカスタムフィールド&新規DBのソースと混ぜ合わせる必要があります。
「admin-media.js」がメディアアップローダーを使用してくれる動きをしてくれる。
「admin.css」これは今回使いません
「function.php」この中でカスタムフィールドを作成している部分があるが、カスタムフィールドを作成するところは①のプラグインとして作成してしまっているので、ソースの一部を参考する形になります。
1.「function.php」で画像の登録・表示処理をしている部分を、①のプラグイン「custom-meta-field1.php」に追記します。
function.phpにある[36行目]〜[50行目]を、プラグイン側の画像登録を表示したい箇所にコピペします。
プラグイン側のtableのtd内にコピペです。
<td>
<div class="custom-media" data-type="image" data-title="画像" data-target="#field-image">
<input type="text" id="field-image" class="my-uploader__url widefat" name="street_img" value="<?php echo $street_img; ?>">
<p>
<a href="#" class="button button-primary custom-media-append">イラスト画像選択</a>
<a href="#" class="button custom-media-delete">選択解除</a>
</p>
<!-- カスタムフィールド名(field-image)+'-photo'というIDを指定します -->
<div class="media-photo" id="field-image-photo">
<?php if( $image_attach_id !== NULL ): ?>
<img src="<?php echo esc_url( $image_file ); ?>" style="max-width: 150px; height: auto;">
<?php else: ?>
<?php if(!$street_img){ $street_img = 'http://****.jp/wp-content/uploads/2019/11/image.png'; } ?>
<?php if($street_img): ?>
<img class="my-uploader__image" src="<?php echo $street_img; ?>" style="width: 150px; height: auto;">
<?php endif; ?>
<?php endif; ?>
</div>
</div>
</td>
2.admin-media.jp
子テーマフォルダ内に新規フォルダを作成して配置
「wp-content」>「themes」>「***-child」>「my_admin_script」
1つのスクリプトで1つの画像アップロード機能として使用する。
このままだと画像登録した際に画像IDが登録されてしまうので、画像のURLを登録するようにする
[83] first.id ←first.url に変更
3.function.phpでjsを読み込む
//カスタムメタフィールドで画像アップロード
function my_admin_script() {
wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'/../basicstore-child/my_admin_script/admin-media.js' );
wp_enqueue_script( 'my_admin_script2', get_template_directory_uri().'/../basicstore-child/my_admin_script/admin-media2.js' );
}
add_action('admin_head-post-new.php', 'my_admin_script');
add_action('admin_head-post.php', 'my_admin_script');
子テーマ「basicstore-child」の中にあるjsを2つ分読み込む
③ ②-1、②-2をもう一つ作る(独自データベースに登録する項目は2種類に分けたい)
1.custom-meta-field2.phpを作成し、以下を追加
プラグイン側のtableのtd内にコピペです。
<td>
<div class="custom-media2" data-type="image" data-title="画像" data-target="#field-image">
<input type="text" id="field-image" class="my-uploader__url widefat" name="street_img" value="<?php echo $street_img; ?>">
<p>
<a href="#" class="button button-primary custom-media-append2">イラスト画像選択</a>
<a href="#" class="button custom-media-delete2">選択解除</a>
</p>
<!-- カスタムフィールド名(field-image)+'-photo'というIDを指定します -->
<div class="media-photo" id="field-image-photo">
<?php if( $image_attach_id !== NULL ): ?>
<img src="<?php echo esc_url( $image_file ); ?>" style="max-width: 150px; height: auto;">
<?php else: ?>
<?php if(!$street_img){ $street_img = 'http://****.jp/wp-content/uploads/2019/11/image.png'; } ?>
<?php if($street_img): ?>
<img class="my-uploader__image" src="<?php echo $street_img; ?>" style="width: 150px; height: auto;">
<?php endif; ?>
<?php endif; ?>
</div>
</div>
</td>
最初のdivのclassを「custom-media2」に。
イラスト画像選択ボタンのclassを「custom-media-append2」に。
選択介助ボタンのclassを「custom-media-delete2」に。
[17行目]データベース作成時の名前を「ex_***」と別名に。
[27行目]バージョンを1.0から1.1等、バージョンを変える。
2.admin-media2.jpを作成
本当はもっといいやり方があるのかもしれないが、2つ目はjs内のclass名を変えてjsを2つ用意。
[9] custom-media2 ←2を追加
[17] CustomMediaWindow2 ←2を追加
[19] .custom-media-append2 ←2を追加
[20] .custom-media-delete2 ←2を追加
[35] click.customMedia2 ←2を追加
[39] click.customMedia2 ←2を追加
[149] new CustomMediaWindow2 ←2を追加
④登録したカスタムフィールドの中身を取得してコンテンツ内に表示する
page.php等、カスタムフィールドを表示したい場所で以下の記述をする
//DBの中身を取得
global $wpdb;
$get_meta = $wpdb->get_row( "SELECT * FROM " .wp_ex_street. " WHERE post_id =". $post_id ,ARRAY_A);
$street_img = $get_meta['street_img'];
後は表示したい場所で echo $street_img すればOK。
ソース内にDB接続を直接書いてしまっているが、参考元にはちゃんと別で呼び出す方法が載ってます。
コメント
コメントを投稿