前回のカスタム投稿で作成したページの
投稿画面の管理画面までカスタマイズしてみよう!
って思い立ち、やってみました♪
備忘録として残しておきます。
カスタム投稿で管理画面も簡単にカスタマイズできる
プラグイン『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などで表示を設定していけばいいだけです♪
スポンサードリンク