メディア運営に最適!WordPressでバナー管理機能を実装する5つのステップ

ひろゆき


メディア運営に最適!WordPressでバナー管理機能を実装する5つのステップ

こんにちは、エンジニアのひろゆきです。

メディアを運営する上ではバナーを管理する機能ってわりと重要ですよね。
WordPressで構築されたサイトでバナーを管理する場合、外部のツールを入れたりプラグインを使ったりと、いろいろなやり方があります。

ということで、今回はちょっとしたカスタマイズとプラグインを利用してのバナー管理・運営方法について紹介していきたいと思います。

構築の5ステップ

「構築編」と「解析編」の2編に分けて紹介していきたいと思います。
ということで、今回は構築編になります。以下の手順で、サクッとバナー管理機能を実装しましょう。

WordPressでバナー管理機能を実装する5つのステップ

1. 投稿タイプを設定する

バナー投稿タイプを設定します。
とりあえず下記をfunction.phpにコピペすると、バナー投稿タイプができます。
いつもの投稿タイプ作成方法と同じです。

$args = array(
	'label' => 'バナー',//投稿タイプの名前
	'labels' => array(
		'singular_name' => 'バナー',//投稿タイプの名前
		'menu_name' => 'バナー',//メニュー(画面の左)に表示するラベル
		'add_new_item' => '新規投稿を追加',//新規作成ページの左上に表示されるタイトル
		'add_new' => '新規追加',//メニュー(画面の左)の「新規」の位置に表示するラベル
		'new_item' => '新規投稿',//一覧ページの右上にある新規作成ボタンのラベル
		'edit_item'=>'投稿を編集',//編集ページの左上にあるタイトル
		'view_item' => '投稿を表示',//編集ページの「○○を表示」ボタンのラベル
		'not_found' => '投稿は見つかりませんでした',//カスタム投稿を追加していない状態で、カスタム投稿一覧ページを開いたときに表示されるメッセージ
		'not_found_in_trash' => 'ゴミ箱に投稿はありません。',//カスタム投稿をゴミ箱に入れていない状態で、カスタム投稿のゴミ箱ページを開いたときに表示されるメッセージ
		'search_items' => '投稿を検索',//一覧ページの検索ボタンのラベル
	),

	'public' => true,//ユーザーが管理画面で入力するか設定
	'publicly_queryable' => true,//カスタム投稿タイプの機能でページを生成するかどうかを指定
	'show_ui' => true,//管理画面にこのカスタム投稿タイプのページを表示するか設定
	'show_in_menu' => true,//管理画面にメニュー出すか設定
	'query_var' => true,
	'has_archive' => true,//「true」に指定すると投稿した記事の一覧ページ(投稿タイプのトップページ)を作成することができる
	'hierarchical' => false,//カスタム投稿に固定ページのような親子関係(階層)を持たせるか設定
	'menu_position' => 5,//カスタム投稿のメニューを追加する位置を整数で指定
	'rewrite' => true,//リライト設定
);
register_post_type("banner",$args);

不足分、不必要な記述は適宜調整してください。

投稿タイプ

成功するとこんな感じになります。

2. サムネイルサイズを設定する

次にバナーのサイズを指定します。以下の記述をfunctions.php等に記述してください。

add_theme_support( 'post-thumbnails' );
add_image_size( 'banner', 200, 200, true);	// アイキャッチサイズ指定

引数には左から名前、横幅、縦幅、切り取るかどうか、を指定します。これで指定サイズのバナー画像を生成する準備ができました。

3. カスタムフィールドを設定する

画像とURLを設定できるカスタムフィールドを用意します。カスタムフィールドの設定にはお馴染みのAdvanced Custom Fieldsを使います。

Advanced Custom Fields

kasutamufieald2

画像とURL設定用のフィールドを設定します。

kasutamufieald3

カスタムフィールド以外の項目をあらかた非表示にしました。

single1

これでシンプルなバナー投稿画面が完成しました。

4. 非公開プラグインを導入する

バナーには公開期限があることが多いので、投稿の非公開日時を設定できるVA Simple Expiresを使います。

A Simple Expires

koukaibi

VA Simple Expiresを有効化すると、日時を設定できるフォームが表示されます。日付を入力し、“有効にする”にチェックを入れることで、記事を非公開にするタイミングを設定できるようになります。

5. テンプレートに記述する

最後にテンプレートの記述例です。

$banners = get_posts(array(
	'post_type' => 'banner',
	'post_status' => 'publish'
));

記事取得記述。

$image_id = get_field("banner_image",POSTID);
$image = wp_get_attachment_image_src($image_id,"banner");

画像取得記述。

$image_id = get_field("banner_image",POSTID);
$image = wp_get_attachment_image_src($image_id,"banner");

画像取得記述(ループ中)。
※POSTIDには記事idを設定する。

the_field("banner_url",POSTID);

URL表示記述(ループ中)。

通常のポストタイプの記事を表示するのと同じですね。
こちらが実際に表示される内容です。

最後に

以上で、とりあえず簡単なバナーを実装することができました。
通常の記事と同じなので、カテゴリを振ったりカスタムフィールドを追加したりなど、いろいろとカスタマイズができそうです。
次回は今回実装したバナーをアナリティクスで計測する手順を紹介したいと思います。

それでは、また次回。

01

ひろゆき
この記事を書いた人
ひろゆき

バックエンドエンジニア

関連記事