前回のカスタム投稿で作成したページの
投稿画面の管理画面までカスタマイズしてみよう！
って思い立ち、やってみました♪
備忘録として残しておきます。
カスタム投稿で管理画面も簡単にカスタマイズできる
プラグイン『Smart Custom Fields』を使用しました。
完成した時はちょっと感動でした♡
スポンサードリンク
Smart Custom Fieldsを使用してカスタム投稿タイプでカスタムページ作成
テーマは『Lightning』を使用しているので、事前にカスタム投稿の設定をしておきました。
■Lightningでカスタム投稿タイプ設定方法＞＞
■WordPress カスタム投稿 管理画面一覧カスタマイズ＞＞
さて今回は、【Smart Custom Fields】を利用して
カスタム投稿タイプの投稿ページのカスタマイズを行ってみます。
Smart Custom Fields をプラグインからインストールして、有効にします。
Smart Custom Fields の項目が出来ているので、新規作成をクリックします。
項目を入力していきます。
1.繰り返しにチェックを入れ、グループ名を入力します。
2.今回は全てテキストを選択、下記項目を入れています。
・催事場所 event_place
・催事期間 event_date
・開催住所 event_address
・電話番号 event_tel
3.必要な項目が入力できたら、表示したい条件にチェックを入れます。
これで更新。
更新前の、催事情報の投稿画面
更新後は、ちゃんと設定した項目が追加されています。
これで管理画面の項目設定ができましたが、
このままでは、ページでは表示されません。
Smart Custom Fields の情報を出力します。
<?php
$group_set = SCF::get( 'special_event' );
foreach ( $group_set as $field_name => $field_value ) {
?>
<?php echo esc_html( $field_value['event_place'] ); ?>
<?php echo esc_html( $field_value['event_date'] ); ?>
<?php echo esc_html( $field_value['event_address'] ); ?>
<?php echo esc_html( $field_value['event_tel'] ); ?>
<?php } ?>
2行目の『special_event』へ、フィールド編集で設定したグループ名。
5行目以降『$field_value[‘設定した名前’]』を入れていきます。
『Lightning』でのカスタム投稿の出力されるファイルは【single.php】です。
【single.php】の中身をそのままコピーし、【single-カスタム投稿名.php】で作成します。
作成した【single-カスタム投稿名.php】の出力したい場所へ
上のコードを記述します。
私の場合は、【single-event.php】のファイル名をつけ、
＜div class=”entry-body”＞の中へ出力させました。
（ついでにサムネイルも表示するように設定しています。）
<div class="entry-body">
<?php if ( has_post_thumbnail()) :?>
<p>
<a href="<?php the_permalink(); ?>">
<?php
$attr = array('class' => "media-object");
the_post_thumbnail('thumbnail',$attr); ?>
</a>
</p>
<?php endif; ?>
<?php
$group_set = SCF::get( 'special_event' );
foreach ( $group_set as $field_name => $field_value ) {
?>
<p><?php echo esc_html( $field_value['event_place'] ); ?> </p>
<p><?php echo esc_html( $field_value['event_date'] ); ?></p>
<p><?php echo esc_html( $field_value['event_address'] ); ?></p>
<p><?php echo esc_html( $field_value['event_tel'] ); ?></p>
<?php } ?>
<?php the_content();?>
</div>
■完成した 投稿ページ 管理画面
■表示される投稿ページ
後は、CSSなどで表示を設定していけばいいだけです♪
スポンサードリンク
