ようこそのお運びで、厚く御礼申し上げます。
今回は以前作成した、カスタムフィールドに画像を追加するの修正版です。
【修正版】新しくカスタムフィールド枠を追加してみる（メディアアップローダーで写真・画像を追加）。
ということで、以下の記事の修正版です。
修正箇所はどこ？？
今回、このようなご意見を頂きました
- 一括操作＞編集のとき、データが全部消える
- データベースやサーバーを移設したときに画像が消える
また、個人的に
- セキュリティ対策：nonceを追加して認証をする
- サムネイルの画像を扱う（前回はフルサイズだけでした）
- 表示は「ショートコード[cfimg]」を入れた場所に表示
- クラス化&スタイルシートの整理
※注意：前回との互換性はありません。
前回のURLを画像IDに変えてしまうので今回は互換性がありません。
上書きしてしまう可能性があるので、前回の使っている人は、自分で変数を変えるか、使用に注意してください。
画面遷移のおさらい
まず「画像を選択」をクリックします。
メディアアップローダーで画像を選択します。
表示はサムネイル画像の一覧が表示されます。
ただし今回はショートコード「[cfimg]」を入力した場所に表示
一括操作＞編集時に消えたらダメです。
save_postをフックしているので一括操作のときも、カスタムフィールドは更新されてしまいます。...と基本的な部分の見落としもあり、フラグを追加して処理を行います。
また、セキュリティ対策の「wp_nonce_field」をフラグとしても扱えそうなので・・・
あわせて、セキュリティ対策もフラグにしちゃえー。
今回はまず、カスタムフィールドの投稿側にはnonceのフォームを表示
//nonce
$wp_n = wp_nonce_field('paka3Img','cfimg_nonce');
echo <<<EOS
<div class="wrap">{$wp_n}
...
EOS
そして、更新側には
if(wp_verify_nonce($_POST[cfimg_nonce],'paka3Img')){
//更新処理
}
として、nonceの認証をおこない、trueならば更新処理をおこないます。
一括操作＞編集のときは、発行したnonceがないので更新処理はおこなわれません。
データベースやサーバーを移設したときにカスタムフィールド内の画像が消える
前回は、カスタムフィールドに登録するのは画像のURLを直接、保存していました。
これはこれで便利は良いのですが、WordPressの移設時に正しくURLを置き換えできないなど、問題が発生してしまい画像が表示されない等が起きてしまいます。
※移設時に云々はクライアントの環境や操作によって異なるので今回は議論しません。
今回は「画像のID」を保存して処理を行います。
投稿側は画像IDを設定します。表示にはサムネイル画像を使います。
foreach($paka3image as $akey => $imgID){
//サムネイル画像
$img = wp_get_attachment_image($imgID);
$imgHtml.=<<<EOS
<div id="img_{$akey}"><a class="paka3image_remove" href="#">削除する</a>
{$img}
<input type="hidden" name="paka3image[]" value="{$imgID}" /></div>
EOS;
}
また、javascript側にはフォーム（hidden）に「画像ID」と、表示に「サムネイル画像」を設定
images.each(function(file){
img_id = file.toJSON().id+"_"+date;
$('#paka3images').append('<div id="img_'+"></div>')
.find('div:last').append('<a class="paka3image_remove" href="#">削除する</a>'
+'<input type="hidden" name="paka3image[]" value="'+file.toJSON().id+'" />'
+'<img alt="" src="'+file.toJSON().sizes.thumbnail.url+'" />');
});
※更新側の変更はありません。
paka3imageには画像IDの配列（array()）が保存されます。
※原因がこれだけなのかがまだちょっとわからないので、調査は必要ですね。
「ショートコード[cfimg]」を挿入して記事に表示
前回はただ記事に表示するだけでしたが、ショートコードを使って表示します。
- 記事内に[cfimg]というショートコードを挿入してください。
今日はこんなことがありました。 [cfimg] ...また、来週。
- 属性に記事のidを入れることができます。
今日はこんなのでしたが、昨日はこんなことがありました。 [cfimg id="10"] ...また、来週。
今回はファイルは２つです。
「paka3_new_custom_field_img.php」というファイルを作成し、以下のコードを記入します。
また、javascript「paka3-uploader.js」は以下のファイルです
このファイルを[wp-content]>「plugins」ディレクトリに入れ、管理画面で有効にして完了です。
ちなみに、ファイル構成はこんな感じで。
今回のまとめ
今回は、前回の修正版でした。２ヶ月前といえども、自分のスキルがなかったなーっとちょっと反省。でも２ヶ月後にはスキルが身に付いているのだからこれは面白い実験だなー。だって３ヶ月前はプラグインのコードなんてかけなかったんだから、何でもやってみるものですね。