[WordPress] カスタム投稿タイプでアクセス・店舗情報・会社概要ページを作成

  WordPress

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
wordpress theme テーマ 作成 PHP

WordPress においてプラグイン「Custom Post Type UI」、「Advanced Custom Fields」を用いてカスタム投稿タイプ・カスタムタクソノミーを作成することができます。そこで今回は、カスタム投稿タイプを用いたアクセス・店舗情報・会社概要ページの作成についてご紹介したいと思います。

作成するアクセス・店舗情報・会社概要ページ

まず初めに、今回作成するアクセス・店舗情報・会社概要ページの概要をご紹介したいと思います。
自分なりのカスタマイズをして項目の追加などを行ってみてください。

アクセス・店舗情報・会社概要ページの項目

アクセス・店舗情報・会社概要ページにおいて下記のような基本的に必要な項目を使用したいと思います。

  • 店舗名(会社名)
  • リッチエディター(自由記入欄)
  • 店舗画像(会社画像)
  • 営業時間
  • 定休日
  • 郵便番号
  • 住所
  • アクセス
  • Google Map

使用するプラグイン

カスタム投稿タイプ・カスタムタクソノミーを作成する下記のようなプラグインを使用したいと思います。

  • Custom Post Type UI
  • Advanced Custom Fields

「アクセス・店舗情報・会社概要ページ」をカスタム投稿タイプで作成

カスタム投稿タイプを作成する際の「プラグインのインストール」、「 Custom Post Type UI を使用したカスタム投稿タイプの作成」などを下記にご紹介したいと思います。

プラグインのインストール

まず、プラグイン「 Custom Post Type UI 」、「 Advanced Custom Fields 」をインストールしてください。
手順は「プラグイン」→「新規追加」→「検索窓の入力」

「 Custom Post Type UI 」プラグインによるカスタム投稿タイプの作成

「 Custom Post Type UI 」と「 Advanced Custom Fields 」をインストールすると下の画像のようにメニューに項目が追加されます。

Custom Post Type UI Advanced Custom Fields WordPress

CPT UI 」には「Add/Edit Post Types:カスタム投稿タイプの新規作成」と「Add/Edit Taxonomies:カスタムタクソノミーの新規作成」が下の画像のように現れるようになります。

カスタム投稿タイプ カスタムタクソノミー WordPress

「 CPT UI 」かカスタム投稿タイプの新規作成「Add/Edit Post Types」をクリックすると下の画像のように入力画面となります。

カスタム投稿タイプ WordPress

今回、カスタム投稿タイプの作成の為、項目に記入したものを下記に示したいと思います。

項目名 記入内容 初期値・記入例
Post Type Slug(必須) myshop movie
Plural Label 店舗情報 Movies
単数形のラベル 店舗情報 Movie
説明 未記入
Menu Name 店舗情報 My Movies
すべての項目 すべての店舗情報 All Movies
新規追加 新規追加 Add New
新規項目追加 店舗情報の新規追加 Add New Movie
編集 店舗情報の編集 Edit
項目を編集 店舗情報編集 Edit Movie
新規項目 新しい店舗情報 New Movie
表示 表示 View
項目を表示 店舗情報を表示 View Movie
Search Item 店舗情報を検索 Search Movie
見つかりません 見つかりません No Movies found
ゴミ箱にはありません。 ゴミ箱にはありません。 No Movies found in Trash
Parent Movie
一般公開 True True
UI を表示 True True
Has Archive True True
Exclude From Search False False
利用タイプ post post
階層 False False
リライト True True
カスタムリライトスラッグ post type slug
With Front True True
クエリーバージョン True True
メニューの位置 5-100
Show in Menu True True
Menu Icon Full URL for icon or Dashicon class
サポート title、editorなど
Custom “Supports”
ビルトイン分類 店舗カテゴリー(追加するタクソノミー) カテゴリー・タグ

カスタムタクソノミーの作成

カスタムタクソノミーの作成の際の「 Custom Post Type UI を使用したカスタムタクソノミーの作成」を下記にご紹介したいと思います。

「 Custom Post Type UI 」プラグインによるカスタムタクソノミーの作成

カスタムタクソノミーの新規作成「Add/Edit Taxonomies」をクリックすると下の画像のように入力画面となります。

カスタムタクソノミー  WordPress

今回、カスタムタクソノミーの作成の為、項目に記入したものを下記に示したいと思います。

項目名 記入内容 初期値・記入例
Taxonomy Slug(必須) myshop_cat actor
Plural Label 店舗カテゴリー Actors
単数形のラベル 店舗カテゴリー Actor
利用する投稿タイプ(必須) 店舗情報
Menu Name 店舗カテゴリー Actors
すべての項目 すべての店舗カテゴリー All Actors
項目を編集 店舗カテゴリーを編集 Actor
項目を表示 店舗カテゴリーを表示 View Actor
Update Item Name Update Actor Name
新規項目追加 新規店舗カテゴリーの追加 Add New Actor
新規項目名 New Actor Name
新項目 Parent Actor
新項目コロン Parent Actor:
項目検索 Search Actor
よく利用されている項目 Popular Actors
項目が複数ある場合はコンマで区切ってください。 Separate actors with commas
項目の追加もしくは削除 Add or remove actors
最もよく使われているものから選択 Choose from the most used actors
Not found No actors found
階層 True False
UI を表示 True True
クエリーバージョン True True
Custom Query Var String none
リライト True True
カスタムリライトスラッグ taxonomy name
Rewrite With Front True True
Rewrite Hierarchical False False
Show Admin Column True False

カスタムフィールドの作成

Advanced Custom Fields 」プラグインを使用したカスタムフィールドの作成を下記にご紹介したいと思います。

「 Advanced Custom Fields 」プラグインによるカスタムフィールドの作成

「カスタムフィールド」新規追加をクリックすると下の画像のように入力画面となります。

カスタムフィールド Advanced Custom Fields WordPress

今回、オプションに関しては特に入力はしていませんが、様々な設定ができるようなので試してみてください。

カスタムフィールド Advanced Custom Fields WordPress

タイトル「店舗の情報」として下の表のように入力します。

フィールドラベル(必須) フィールド名(必須) フィールドタイプ(必須) 必須か?
店舗画像 myshop_image 画像 いいえ
営業時間 myshop_time テキスト いいえ
定休日 myshop_date セレクトボックス いいえ
郵便番号 myshop_postnumber テキスト いいえ
住所 myshop_address テキストエリア いいえ
アクセス myshop_access テキストエリア いいえ
Google Map myshop_map Google Map いいえ

カスタムフィールド Advanced Custom Fields  WordPress

位置は「投稿タイプ」、「等しい」、「myshop(作成したカスタム投稿タイプ)」として公開します。

「 Custom Post Type UI 」の項目の出力

「 Custom Post Type UI 」で作成したカスタム投稿タイプの出力コードを下記に示したいと思います。

店舗画像の出力

下記に店舗画像の出力コードをご紹介したいと思います。

<?php $image = post_custom('myshop_image'); ?>
<?php if(!empty($image)): ?>
<?php $image_url = wp_get_attachment_image_src(post_custom('myshop_image'),'full'); ?>
<p><a href="<?php echo $image_url[0]; ?>"><?php echo wp_get_attachment_image($image, 'medium'); ?></a></p>
<?php endif; ?>

1行目はカスタムフィールドで設定したフィールド名「myshop_image」から画像を取得して変数「$image」に格納。
2行目は「empty」が空であるかどうか、「!」が違うならという意味なので画像の変数「$image」が存在しているなら。
3行目は画像のURLを画像の大きさ「full」で取得して変数「$image_url」に格納します。
4行目はaタグに3行目で取得したURLを入れ、画像のURLを画像の大きさ「medium」で画像の表示。
5行目は処理の終了。

各入力項目の出力

下記に各入力項目の出力コードをご紹介したいと思います。

<?php the_content(); ?>

<table>
	<?php $shoptime = post_custom('myshop_time'); ?>
	<?php if(!empty($shoptime)): ?>
	<tr>
		<th style="width:100px;">営業時間</th>
		<td><?php echo nl2br(post_custom('myshop_time')); ?></td>
	</tr>
	<?php endif; ?>
	<?php $shopdate = nl2br(post_custom('myshop_date')); ?>
	<?php if(!empty($shopdate)): ?>
	<tr>
		<th>定休日</th>
		<td><?php echo nl2br(post_custom('myshop_date')); ?></td>
	</tr>
	<?php endif; ?>
	<?php $shoppostnumber = post_custom('myshop_postnumber'); ?>
	<?php $shopaddress = post_custom('myshop_address'); ?>
	<?php if(!empty($shoppostnumber) && !empty($shopaddress)): ?>
	<tr>
		<th>住所</th>
		<td>〒<?php echo nl2br(post_custom('myshop_postnumber')); ?><br><?php echo nl2br(post_custom('myshop_address')); ?></td>
	</tr>
	<?php endif; ?>
	<?php $shopaccess = post_custom('myshop_access'); ?>
	<?php if(!empty($shopaccess)): ?>
	<tr>
		<th>アクセス</th>
		<td><?php echo nl2br(post_custom('myshop_access')); ?></td>
	</tr>
	<?php endif; ?>
</table>

「 Google Map 」の出力

下記にGoogle Mapの出力コードをご紹介したいと思います。

<style type="text/css">
 
.acf-map {
    width: 100%;
    height: 400px;
    border: #ccc solid 1px;
    margin: 20px 0;
}
 
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
(function($) {
 
/*
*  render_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   $el (jQuery element)
*  @return  n/a
*/
 
function render_map( $el ) {
 
    // var
    var $markers = $el.find('.marker');
 
    // vars
    var args = {
        zoom        : 16,
        center      : new google.maps.LatLng(0, 0),
        mapTypeId   : google.maps.MapTypeId.ROADMAP
    };
 
    // create map               
    var map = new google.maps.Map( $el[0], args);
 
    // add a markers reference
    map.markers = [];
 
    // add markers
    $markers.each(function(){
 
        add_marker( $(this), map );
 
    });
 
    // center map
    center_map( map );
 
}
 
/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   $marker (jQuery element)
*  @param   map (Google Map object)
*  @return  n/a
*/
 
function add_marker( $marker, map ) {
 
    // var
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
 
    // create marker
    var marker = new google.maps.Marker({
        position    : latlng,
        map         : map
    });
 
    // add to array
    map.markers.push( marker );
 
    // if marker contains HTML, add it to an infoWindow
    if( $marker.html() )
    {
        // create info window
        var infowindow = new google.maps.InfoWindow({
            content     : $marker.html()
        });
 
        // show info window when marker is clicked
        google.maps.event.addListener(marker, 'click', function() {
 
            infowindow.open( map, marker );
 
        });
    }
 
}
 
/*
*  center_map
*
*  This function will center the map, showing all markers attached to this map
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   map (Google Map object)
*  @return  n/a
*/
 
function center_map( map ) {
 
    // vars
    var bounds = new google.maps.LatLngBounds();
 
    // loop through all markers and create bounds
    $.each( map.markers, function( i, marker ){
 
        var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
 
        bounds.extend( latlng );
 
    });
 
    // only 1 marker?
    if( map.markers.length == 1 )
    {
        // set center of map
        map.setCenter( bounds.getCenter() );
        map.setZoom( 16 );
    }
    else
    {
        // fit to bounds
        map.fitBounds( bounds );
    }
 
}
 
/*
*  document ready
*
*  This function will render each map when the document is ready (page has loaded)
*
*  @type    function
*  @date    8/11/2013
*  @since   5.0.0
*
*  @param   n/a
*  @return  n/a
*/
 
$(document).ready(function(){
 
    $('.acf-map').each(function(){
 
        render_map( $(this) );
 
    });
 
});
 
})(jQuery);
</script>
<?php $location = get_field('myshop_map');
if( !empty($location) ):
?>
<div class="acf-map">
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
</div>
<?php endif; ?>
<a href="http://maps.google.com/maps?q=<?php echo $location['lat']; ?>,<?php echo $location['lng']; ?>" target="_blank">Google Mapで開く</a>

カスタム投稿タイプへの入力

店舗情報としてカスタム投稿タイプへの入力を下記に示したいと思います。

カスタム投稿タイプ Custom Post Type UI Advanced Custom Fields WordPress

カスタム投稿タイプ Custom Post Type UI Advanced Custom Fields WordPress

カスタム投稿タイプの店舗情報の出力は下の画像のようになります。

カスタム投稿タイプ Custom Post Type UI Advanced Custom Fields WordPress

参考サイト

参考にさせていただいたサイトを下記に示したいと思います。

SNSでもご購読できます。

コメント

  1. こたろう より:

    初心者ですみません。
    出力というのはそれぞれどこに貼り付けをすればよいのでしょうか?
    教えてください。

    1. ぶぶりん より:

      こたろうさん、返信が遅くなり、大変申し訳ありません。

      今回の例では、こたろうさんが使用されているテーマ内にある投稿を表示するsingle.phpやarchive.phpをコピーをして、Post Type Slugで設定した名前からsingle-myshop.phpとarchive-mayshop.phpにファイル名を変更します。myshopは設定した任意の名前で構いません。
      これにより今回作成したカスタム投稿に対応したファイルとなります。
      single-myshop.phpとarchive-mayshop.phpファイル内にある
      < ?php if ( have_posts() ): while ( have_posts() ) : the_post(); ?>
      貼り付ける場所
      < ?php endwhile; endif; ?>
      内に表示したい部分に記述します。上記は記事がある場合、記事を取得してある分だけ繰り返すループであり、記事に関する情報を出力させる場合はループ内に貼りつけます。

コメントを残す

*