![見出し画像](https://assets.st-note.com/production/uploads/images/32212952/rectangle_large_type_2_87c2a6c31760d4672291a64046a2d739.png?width=1200)
WordPressで広告配信管理する
弊社のウェブメディアブックレコメンドで、広告配信管理するために、WordPressを活用することにしました。
やったこと
● 個々の広告をカスタム投稿で管理する
● 広告の記載内容、期間などをカスタムフィールドに登録する
● 広告を表示するショートコードを作る
■ 広告料金支払いをStripeで受け付ける
■ 支払いがあったら、広告をカスタム投稿に自動登録する
■ 広告申し込みフォームで広告のプレビューを表示する
今回の記事では、● の解説をしていきます。■ は、WordPressで広告配信管理 その2 Stripe 決済と連携するで公開しています。
個々の広告をカスタム投稿で管理する
広告は、1個だけでなく、何個か掲載する可能性があります。このため、広告を一覧で管理できると便利です。このため、WordPressのカスタム投稿機能を活用しています。
function ounziw_ad_posttype()
{
$labels = [
'name' => 'adurl',
'singular_name' => 'adurl',
];
$args = [
'label' => 'adurl',
'labels' => $labels,
'supports' => ['title', 'editor', 'custom-fields'],
'hierarchical' => false,
'public' => false,
'show_ui' => true,
'show_in_menu' => true,
'menu_position' => 35,
'show_in_admin_bar' => true,
'show_in_nav_menus' => false,
'can_export' => true,
'has_archive' => false,
'exclude_from_search' => true,
'publicly_queryable' => true,
'capability_type' => 'page',
];
register_post_type('adurl', $args);
}
add_action('init', 'ounziw_ad_posttype', 1);
こうすると、WordPressの管理画面で広告をリストで確認できます。
広告の記載内容、期間などをカスタムフィールドに登録する
個々の広告には、カスタムフィールドで、広告の見出しテキスト(heading1, heading2)、広告画像(image)、広告の期間(ad_start, ad_end)、などを入力するようにします。(ad_startが無い場合は即配信開始)
広告一覧ページのカスタマイズ
広告の詳細を確認するのに、広告を1個ずつ見ていくのは手間がかかりますね。なので、広告一覧ページでも、広告配信開始・広告配信期限・広告詳細を確認できるようにします。
// カスタム投稿一覧ページに、「広告配信期限」カラムを追加する
function ounziw_ad_url_columns_list($columns) {
$columns['ad_start'] = '広告配信開始';
$columns['ad_end'] = '広告配信期限';
$columns['detail'] = '広告詳細';
return $columns;
}
add_filter( 'manage_adurl_posts_columns', 'ounziw_ad_url_columns_list' );
// 各カラムで表示する内容
function ounziw_ad_url_custom_column_values( $column, $post_id ) {
switch ( $column ) {
case 'ad_start' : // 広告の開始日時
echo esc_html( get_post_meta( $post_id , 'ad_start' , true )));
// 期限切れ、と表示する
if (get_post_meta( $post_id , 'ad_start' , true ) > wp_date('Y-m-d H:i:s')) {
echo ' <span class="notice">配信前</span>';
}
break;
case 'ad_end' : // 広告の終了日時
echo esc_html( get_post_meta( $post_id , 'ad_end' , true ));
// 期限切れ、と表示する
if (get_post_meta( $post_id , 'ad_end' , true ) < wp_date('Y-m-d H:i:s')) {
echo ' <span class="notice">期限切れです</span>';
}
break;
case 'detail' : // 広告の画像、見出し文を出力する
echo esc_html( get_post_meta( $post_id , 'image' , true ));
echo '<br>';
echo esc_html( get_post_meta( $post_id , 'heading1' , true ));
echo '<br>';
echo esc_html( get_post_meta( $post_id , 'heading2' , true ));
break;
}
}
add_action( 'manage_adurl_posts_custom_column' , 'ounziw_ad_url_custom_column_values', 10, 2 );
// カラムを、並べ替え可能にする
function ounziw_adurl_sortable_columns( $columns ) {
$columns['ad_start'] = 'ad_start';
$columns['ad_end'] = 'ad_end';
return $columns;
}
add_filter( 'manage_edit-adurl_sortable_columns', 'ounziw_adurl_sortable_columns');
コードは、主に3つに分けられます。
1. カラムを設定する ounziw_ad_url_columns_list 関数
2. カラムで表示する内容を設定する ounziw_ad_url_custom_column_values 関数
3. カラムを、並べ替え可能にする ounziw_adurl_sortable_columns 関数
です。
広告を表示するショートコードを作る
広告を表示するショートコードを作ります。WP_Queryのmeta_queryを活用すると、日時での絞り込みが簡単に作れます。
function ounziw_page_ads_sc( $atts, $content = NULL ){
$now = current_datetime(); // 現在の日時を取得
$args = [
'post_type' => 'adurl',
'ignore_sticky_posts' => 1,
'posts_per_page' => -1,
'order' => 'rand',
'meta_query' => [
[ // 広告開始日時が、現在よりも前
'key' => 'ad_start',
'value' => $now->format('Y-m-d H:i:s'),
'compare' => '<=',
],
[ // 広告終了日時が、現在よりも後
'key' => 'ad_end',
'value' => $now->format('Y-m-d H:i:s'),
'compare' => '>=',
],
],
];
$the_query = new WP_Query( $args );
$output = '';
if ( $the_query->have_posts() ) {
// 出力。出力htmlは snow monkey テーマを想定
$output .= '<div class="snow-monkey-posts snow-monkey-recent-posts">
<ul class="c-entries c-entries--simple" data-has-infeed-ads="false" data-force-sm-1col="false">';
while ( $the_query->have_posts() ) {
$the_query->the_post();
$image_raw = get_post_meta( get_the_ID(), 'image', true );
// 画像のチェック。なければデフォルト画像を設定
if (filter_var($image_raw, FILTER_VALIDATE_URL)) {
$image = $image_raw;
} else {
$image = 'https://book-recommend.com/wp-content/uploads/2020/04/recommend.png';
}
$output .= '<li class="c-entries__item">
<a href="' . esc_url(get_the_title()) . '">
<section class="c-entry-summary c-entry-summary--post">
<div class="c-entry-summary__figure"><img src="'.
$image
.'" class="attachment-post-thumbnail size-post-thumbnail wp-post-image jetpack-lazy-image"></div>
<div class="c-entry-summary__body">
<header class="c-entry-summary__header">
<h2 class="c-entry-summary__title">'. mb_substr(esc_html( get_post_meta( get_the_ID(), 'heading1', true )), 0, 100) .'</h2>
</header>
<div class="c-entry-summary__content">'. mb_substr(esc_html( get_post_meta( get_the_ID(), 'heading2', true )), 0, 100) .'</div>
</div>
</section>
</a>
</li>';
}
$output .= '</ul>
</div>';
wp_reset_postdata();
} else {
$output = $content; // 広告がない場合
}
return $output;
}
add_shortcode('get_page_ads', 'ounziw_page_ads_sc');
ショートコードなので、[get_page_ads] のように記述すればOKです。
[get_page_ads]広告がない場合の表示内容[/get_page_ads] という使い方もできます。(詳細はWordPress ショートコードの作成方法を参照)
作ってみて
WordPressの日付周りの処理が大分改良されていますね。current_datetime()関数など、PHPのDateTimeとの連携が便利になりました。
運営会社
月70万PVホームページ制作・運用支援会社「レスキューワーク株式会社」
■ ホームページ上の計算機「自動計算」では、消毒液の希釈やメルカリ利益計算など、日常に役立つ計算式を紹介。
■ 見積書発行ウェサービス「マイ見積」では、問い合わせフォームで見積書PDFを生成して即時発行。ウェブ営業を効率よく、スピーディーにする。
この記事が気に入ったらサポートをしてみませんか?