この記事のもくじ
指定した期日が来たら、投稿が自動で非表示になるWordpressプラグイン
HP改編に伴い、イベント情報をアップするフローの見直しをしていて思いました。
イベントを行う日時は決まっているのだから、当然、イベントが終了する日時もわかっている。
なのに、イベントを告知欄から下ろす（消す）作業を手動でおこなっている。
たまに、更新者の見落としがあり、終了したイベント表示がHP上に残っていることもある。
条件とアクションが決まっているこの「イベント情報を下ろす作業」を自動化出来ないものだろうか。
前提として、当初のHP内の「イベント情報」に関する投稿は、「固定ページ」を使って行っていました。
固定ページのページIDをhome.phpに読み込ませてトップに表示していた。
天使の自動書記ラブリーゴーストライターも驚きのthe 完全手動手記。コンテンツマネジメント？なにそれ？状態。
このhtml文には特定の属性情報などを持たせられないので、現状では不可能でした。
イベントの期限が来たら、自動でトップページから非表示にする為に必要な２点
用意するものは、新たな「属性をもたせられるイベント用投稿スペース」と「イベント期間を指定してコントロールするなにか」
この２つ。
前者はカスタムポストタイプ、後者はwordpressプラグイン「PostExpirator」で、なんだかふわっと解決できました。
まずはWordpressの本領、イベント情報のCMS化
いままでのイベント情報に関するコンテンツ情報は、固定ページの編集スペースを「上書き更新」していく方法が取られていました。
いうなれば「フロー」の情報。これを「ストック」の情報に変えることから始めないと行けません。
１投稿＝１イベント情報として、イベント情報をストックする必要があります。
ここでパッと思いついたのが、イベント更新情報をカテゴリとして区分けして、一般投稿画面からコントロールするというもの。
記事をカテゴリ指定してトップページに表示させることで、イベント情報を表示させることができます。
しかし。これでは、更新者にとてもわかりづらい。
「投稿内容が「イベント情報」の場合、記事には「イベント」カテゴリにチェックを入れてください。」
[フロー] 投稿→イベント情報入力→カテゴリにチェック→公開
まあまあです。
できれば、投稿スペース自体を分け、
「イベント情報はココをクリックして新規投稿してください。」
[フロー] イベント投稿→イベント情報入力→公開
これくらいわかりやすくアクションが少ない方がいい。
実務者がWordpressに精通している場合は少なく、極力、実務者には技術的な要素を求めたくないのです。
「この条件のときは、ここを更新する」程度のルールで回したいのです。
わかりやすくするための「カスタム投稿タイプ」
一般投稿とは、完全に別の投稿の入り口を作ってあげます。
この場合は、イベント情報を入力するためだけの入力画面。
目的がフォーカスされるので、初心者でも迷いが少ないと思います。
（入力手順の説明は必要ですが、何も考えずフローをこなすだけで更新、公開までいけます）
ここでも多少の思いやりをば。
真っ白な投稿画面内で、
「本文に自由にイベント告知を書いてくださいね。よろしく！」
と実務者の判断に投げてしまうのではなく、
こちらで事前に投稿フォーマットを固定しておいてあげます。
日時を入力する投稿欄、場所を入力する投稿欄、催し物詳細を入力する投稿欄、etc…
この機能をカスタムフィールドといいます。
WordPress準拠のカスタムフィールドは微妙に使い勝手が悪いので、後述するプラグイン「カスタムフィールドテンプレート」を使って見栄えを調整してあげましょう。
イベント日時、開催場所、イベント名、等、入力する欄が何もない白紙の場合は何を書いていいのかわからず入力が少なくなってしまいますが、「最低限この項目は埋めてください」という指標があれば、ゴールが明確化して必須入力項目を埋める作業をただこなすだけなのでストレスフリーです。
こういったゴールまでの道筋を立てることの重要性は、GTDから学びました。
本題 カスタム投稿タイプ（カスタムポストタイプ）の導入
話はそれましたが、カスタム投稿タイプを既存のWordPressに追加しましょう。
カスタム投稿タイプについてはこちらを参照ください。
やり方は二通りあって、プラグインを利用する場合と、自分が記述する場合の２つです。
オススメは自分で記述するパターン。プラグインだと、相性により動かない場合がありますので。
プラグインについての解説はこちらがわかりやすかったです。
コンテンツ管理がスッキリ！WordPressカスタム投稿タイプの使い方
自分で記述する場合ですと、functions.phpというファイルにコードを追加するだけで完了です。
functions.phpの場所はというと、以下の場所を探ってみてください。
/www/wordpress/wp-content/themes/テーマ名/functions.php
技術的に未熟な私などは、WordPress Custom Post Type Code Generator（http://themergency.com/generators/wordpress-custom-post-types/）（※現在はリンク切れ）という
カスタム投稿タイプの自動生成オンラインジェネレーターという便利アイテムを使用して作成しました。
勝手に、ここに書くためのコードを自動生成してくれます。ありがたや。
このオンラインジェネレーターは英語ページですが、日本語で解説してくれているサイトを紹介しておきます。
さて、生成されたコードを貼り付けます。
今回のサイトの場合は以下のようになりました。
いろいろ追記しているもんで、わかりにくくなってしまっているかもしれませんが。。。
まあ、備忘録なのでいいか。
/カスタム投稿タイプ「イベント」設定 イベントを入力項目を追加/
function event_postype() {
$labels = array(
'name' => 'イベント',
'singular_name' => 'イベント',
'add_new' => '新規追加',
'add_new_item' => '新規イベントを追加',
'edit_item' => 'イベントを編集',
'new_item' => '新規イベント',
'view_item' => 'イベントを表示',
'search_items' => 'イベントを検索',
'not_found' => '投稿されたイベントはありません',
'not_found_in_trash' => 'ゴミ箱にイベントはありません。',
'parent_item_colon' => '',
);
$args = array(
'label' => __('Events'),
'labels' => $labels,
'public' => true,
'menu_position' => 5,
'menu_icon' => 'dashicons-calendar',/イベントのダッシュアイコンを変更/
'supports'=> array('title', 'thumbnail', 'excerpt', 'editor') ,
'taxonomies' => array( 'eventcategory', 'post_tag'),
'has_archive' => "event"
);
register_post_type( 'events', $args);
}
add_action( 'init', 'event_postype' );
/カスタム入力タイプ「イベント」でカスタム分類（タクソノミー）の設定/
function eventcategory_taxonomy() {
$labels = array(
'name' => 'イベントカテゴリー',
'singular_name' => 'イベントカテゴリー',
'search_items' => 'イベントを検索',
'popular_items' => 'よく使われているイベント',
'all_items' => 'すべてのイベント',
'parent_item' => null,
'parent_item_colon' => null,
'edit_item' => 'イベントカテゴリーの編集',
'update_item' => '更新',
'add_new_item' => '新規イベントカテゴリー',
'new_item_name' => '新しいイベントカテゴリー'
);
register_taxonomy('eventcategory','events', array(
'label' => 'イベントカテゴリー',
'labels' => $labels,
'hierarchical' => true,
'show_ui' => true,
'query_var' => true,
'rewrite' => array( 'slug' => 'event-category' ),
));
}
add_action( 'init', 'eventcategory_taxonomy', 0 );
/カスタムフィールドで日付入力（events）/
add_action( 'admin_init', 'event_create' );
function event_create() {
add_meta_box('events_meta', 'イベント日時', 'events_meta_html', 'events');
}
function events_meta_html () {
global $post;
$custom = get_post_custom($post->ID);
//メタキーがあったら
if(!empty($custom)) {
$event_start = $custom["event_start"][0];
$event_end = $custom["event_end"][0];
//日付だけ表示
$event_date = date("Y-m-d", strtotime($event_start));
//開始時間
$start_time = date("H:i", strtotime($event_start));
//終了時間
$end_time = date("H:i", strtotime($event_end));
}
echo '<input type="hidden" name="events-nonce" id="events-nonce" value="' . wp_create_nonce( 'events-nonce' ) . '" />';
//入力フィールドの表示
?>
<style type="text/css">
#event-meta table th {
text-align: left;
font-weight: normal;
padding-right: 10px;
}
</style>
<div id="event-meta">
<table>
<tr>
<th>日付</th>
php if(isset ( $event_date)) echo $event_date; ?>" />
</tr>
<tr>
<th>時間</th>
<td>
php if(isset ( $start_time)) echo $start_time; ?>" /> ～
php if(isset ( $end_time)) echo $end_time; ?>" />
</td>
</tr>
</table>
</div>
<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php
}
/カスタムフィールドの値（メタキー）を保存する/
add_action ('save_post', 'save_events');
function save_events($post_id){
global $post;
if ( !wp_verify_nonce( $_POST['events-nonce'], 'events-nonce' )) {
return $post_id;
}
if ( !current_user_can( 'edit_post', $post->ID )) {
return $post_id;
}
$temp_date = $_POST['event_date'];
$temp_stime = $_POST['start_time'];
$temp_etime = $_POST['end_time'];
$event_start = date('Y-m-d H:i:s', strtotime($temp_date .' '. $temp_stime));
$event_end = date('Y-m-d H:i:s', strtotime($temp_date .' '. $temp_etime));
update_post_meta($post->ID, 'event_start', $event_start);
update_post_meta($post->ID, 'event_end', $event_end);
}
/イベント一覧画面に項目（カラム）を追加する/
function manage_events_columns($columns) {
global $post_type;
if( 'events' == $post_type ) {
$columns['event_date'] = 'イベント日付';
$columns['event_time'] = 'イベント時間';
$columns['ecategory'] = 'カテゴリー';
}
return $columns;
}
function add_column($column_name, $post_id) {
//日付表示
if( $column_name == 'event_date' ) {
echo date('Y年m月d日', strtotime(get_post_meta($post_id, 'event_start', true)));
}
//時間表示
if( $column_name == 'event_time' ) {
//開始時間
$start_time = date('H:i', strtotime(get_post_meta($post_id, 'event_start', true)));
//終了時間
$end_time = date('H:i', strtotime(get_post_meta($post_id, 'event_end', true)));
echo $start_time . '～' . $end_time;
}
//カテゴリー表示
if( $column_name == 'ecategory' ) {
$terms = get_the_terms($post_id, 'eventcategory');
foreach ($terms as $key => $value) {
echo attribute_escape($value->name);
//最後以外は「,」を
if (end(array_keys($terms)) != $key) {
echo ', ';
}
}
}
}
add_filter( 'manage_posts_columns', 'manage_events_columns' );
add_action( 'manage_posts_custom_column', 'add_column', 10, 2 );
<span style="font-family: Courier New;">
<span style="font-family: Courier New;">
ここまでで、カスタム投稿タイプの導入は完了です。
次は、カスタムフィールドの設定をしてあげます。
カスタムフィールドの項目＝Metaタグを決定しましょう。
※上記のfunctions.phpで、すでにメタ情報「イベント日時」を入力しております。
これ以外のメタ情報は、カスタムフィールドを使用します。
ここで活躍するのが、プラグイン「カスタムフィールドテンプレート」
カスタムフィールドのUIを向上させる目的のテンプレート作成プラグインです。
このプラグインの解説は、こちらのサイトが一番わかりやすかった。
Custom Field Templateの使い方[WordPress]
この設定を終わらせると、CMSとしてある程度わかりやすく、説明しやすい土台がつくられました。
最後に投稿記事の表示期間を設定するプラグイン「Post Expirator」のインストール
ここまでくるともう簡単です。
WordPressで「Post Expirator」プラグインを検索してインストールです。
日本語化パッチもありましたのでこちらをご紹介。
このインストールが完了すると、カスタム投稿タイプの記事内に「表示期限の設定」という項目が現れます。
ここに、イベント終了日時、若しくはその翌日の日付を入力して上げると、記事のステータスが自動で下書き状態になりますので、home.php(index.php)上で投稿記事が表示されることはなくなりました。
※もちろん、home.php(index.php)上にカスタム投稿タイプの呼び出しを設定しないと読み込まれることはありません。
home.php(index.php)に記述したコードは以下。
カスタム投稿タイプイベント記事（events）として投稿（ステータス公開）された最新４件をループ表示
アイキャッチ画像にはイベントバナーを表示するようにし、サムネイルを650×220ピクセルで表示させてそこにカスタム投稿タイプ「イベント」の記事リンクをはりつけました。
<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php /* カスタム投稿タイプ"events"を表示する / $loop = new WP_Query( array( 'post_type' => 'events', 'posts_per_page' => 4 ) ); /最新４件の記事を表示*/ while ( $loop->have_posts() ) : $loop->the_post(); ?> php the_permalink(); ?>"><!--?php the_post_thumbnail(array(650,220)); ?--> <!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php endwhile; ?> <!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php wp_reset_postdata(); ?>
カスタム投稿タイプでは、投稿ページの見え方も編集する必要があるので以下の用に記述
<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php /* WordPress CMS Theme WSC Project. */ get_header(); ?>
<div id="content">
<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php the_post_thumbnail(array(950,300)); ?>
php the_ID(); ?>" <!--?php post_class(); ?-->>
<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php the_content(__('more')); ?>
<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php wp_link_pages( array( 'before' => '</pre>
<div class="page-link">Pages', 'after' => '</div>
<pre>' ) ); ?>
</div>
<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php comments_template(); ?>
<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php endwhile; endif; ?>
</div>
<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php get_sidebar(); ?>
<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php get_footer(); ?>
アーカイブページも同様に
<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php /* WordPress CMS Theme WSC Project. */ get_header(); ?>
<div id="content">
</pre>
<h2><!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php echo post_type_archive_title()."一覧"; ?></h2>
<pre>
<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php /最新イベントを昇順で表示/
$query = new WP_Query(array(
'post_type' => 'events', /* イベント投稿タイプ /
'post_status' => 'publish', / 公開している /
'meta_value' => date('Y-m-d H:i'), / 現在の日付を基準 /
'meta_key' => 'event_start', / 比較するmeta_key /
'meta_compare' =>'>=', / meta_keyがvalueより大いものだけ /
'orderby' => 'meta_value', / ソートはmeta_valueを基準に /
'order' => 'ASC', / 昇順に並び替え */
));
?>
<ul>
<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php if($query->have_posts()): while($query->have_posts()) : $query->the_post(); ?>
<li></pre>
<h3>php the_permalink() ?>"><!--?php the_title(); ?--></h3>
<pre>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array(650,200)); ?></a>
<?php the_excerpt(); ?>
<?php
//日付だけ表示
$event_date = date("Y-m-d", strtotime(post_custom('event_start')));
//開始時間
$start_time = date("H:i", strtotime(post_custom('event_start')));
//終了時間
$end_time = date("H:i", strtotime(post_custom('event_end')));
echo '日時:'. $event_date .' '. $start_time . '～' . $end_time
?>
<!--?php echo get_the_term_list( $post--->ID, 'eventcategory' ," /"); ?>
</li>
<!--?php <span class="hiddenSpellError" pre="php " data-mce-bogus="1"-->endwhile; endif; ?>
</ul>
/デフォルト/
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php comments_template(); ?>
<!--?php <span class="hiddenSpellError" pre="php " data-mce-bogus="1"-->endwhile; endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
こんな感じで備忘録
マサオカマサオカブログのLINE@はじめました！ブログの更新情報やお得情報を最速でお届けしています。
気軽に友だち登録してくださいね！
