40代主婦の仕事や子育てなどのひとりごと

WordPressでMap付のお客様の企業情報をテーマカスタマイザーで簡単に設定できるようにする方法（コード付）

このブログではアフィリエイト・アドセンス広告を利用しています

当ブログでは、アドセンス・アフィリエイト広告を掲載しています。
消費者庁が発表しているルールに沿って記事を作成していますが、問題のある表現を見つけた際にはご連絡ください。

仕事でお客様のサイトを制作する時に、企業情報やスクール情報などをまとめて「外観」→「カスタマイズ」メニューから、テーマのカスタマイズで簡単に設定できるようにすると喜ばれることが多いです。

テーマカスタマイズで、店舗情報・キャッチコピー・Googleマップを設定できるWordPressのテーマカスタマイズ方法をご紹介します。

目次（読みたいところへジャンプ！）

    このWordPressテーマカスタマイズで実現できること

    WordPressで案内をテーマカスタマイズで設定する方法
    上の写真のような企業紹介部分をまとめてテーマのカスタマイズ機能を使って設定することができるようになります。

    カスタマイズで企業情報を設定
    カスタマイズメニューで入力するだけで、店舗案内などが正しく表示されるため、ITやWebが苦手な担当者の方でもご自身で修正ができるようになります。

    WordPressカスタマイズの流れ

    1. Google Map APIキーを取得しておく
    2. Google Mapアイコンの準備
    3. functions.phpにテーマカスタマイザー機能を追加する
    4. schoolinfo.phpを作成する

    Google Map APIキーを取得しておく

    サイト内でGoogle Map APIを使用するため、Google Map APIキーを取得しておきましょう。

    APIキーの取得手順は、こちらの記事でくわしく手順を書いています。

    GoogleMapをサイトに表示するためにGoogle Map APIキーを取得する方法

    Google Mapアイコンの準備

    Google Map内のアイコンをオリジナルに変更したいなら、アイコンを作成してレンタルサーバー内にアップロードしておきます。

    サンプルのアイコンは、Canvaで簡単に作成しました。

    functions.phpにテーマカスタマイザー機能を追加する

    functions.phpファイルにテーマカスタマイズ機能を追加するコードを書いていきます。

    これで、テーマカスタマイザーに設定内容を入力する欄が表示されるようになります。

    <?php
/*-------------------------------------------------------
	
	テーマカスタマイザー設定
	
-------------------------------------------------------*/	
function kimoba_theme_customizer( $wp_customize ) {
	/* ----- スクール情報設定機能追加 ----- */
	/* 教室写真アップロード機能 */
	$wp_customize->add_section( 'SCHOOL_INFO_SECTION' , array(
		'title' => 'スクール情報設定', 	
		'priority' => 50, 						
		'description' => 'スクール情報の設定ができます', 	
 	));
	$wp_customize->add_setting( 'school_photo_url', array(
		'sanitize_callback' => 'esc_url_raw',		
	));
	$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'school_photo_url', array(
		'label' => 'スクール写真設定', 					
		'section' => 'SCHOOL_INFO_SECTION', 			
		'settings' => 'school_photo_url', 		
		'description' => '教室の写真をアップロードできます',
 	)));
	//スクール住所（郵便番号）
	$wp_customize->add_setting('school_info_postal',array(
		'default' => '',
		'sanitize_callback' => 'sanitize_text_field'			
	));
	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'school_info_postal', array(
		'section' => 'SCHOOL_INFO_SECTION',
		'settings' => 'school_info_postal',
		'label' =>'スクールの郵便番号を入力してください'
	)));
	//スクール住所1
	$wp_customize->add_setting('school_info_add1',array(
		'default' => '',
		'sanitize_callback' => 'sanitize_text_field'			
	));
	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'school_info_add1', array(
		'section' => 'SCHOOL_INFO_SECTION',
		'settings' => 'school_info_add1',
		'label' =>'スクールの住所1を入力してください'
	)));
	//スクール住所2
	$wp_customize->add_setting('school_info_add2',array(
		'default' => '',
		'sanitize_callback' => 'sanitize_text_field'			
	));
	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'school_info_add2', array(
		'section' => 'SCHOOL_INFO_SECTION',
		'settings' => 'school_info_add2',
		'label' =>'スクールの住所2を入力してください'
	)));	
	//スクール最寄り駅
	$wp_customize->add_setting('school_info_station',array(
		'default' => '',
		'sanitize_callback' => 'sanitize_text_field'			
	));
	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'school_info_station', array(
		'section' => 'SCHOOL_INFO_SECTION',
		'settings' => 'school_info_station',
		'label' =>'スクールの最寄り駅を入力してください'
	)));
	//スクール道順案内URL
	$wp_customize->add_setting('school_info_navi',array(
		'default' => '',
		'sanitize_callback' => 'sanitize_text_field'			
	));
	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'school_info_navi', array(
		'section' => 'SCHOOL_INFO_SECTION',
		'settings' => 'school_info_navi',
		'label' =>'スクールまでの道順案内URLを入力してください'
	)));
	//スクール電話番号
	$wp_customize->add_setting('school_info_tel',array(
		'default' => '',
		'sanitize_callback' => 'sanitize_text_field'			
	));
	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'school_info_tel', array(
		'section' => 'SCHOOL_INFO_SECTION',
		'settings' => 'school_info_tel',
		'label' =>'スクールの電話番号と受付時間を入力してください'
	)));
	//スクールメールアドレス
	$wp_customize->add_setting('school_info_email',array(
		'default' => '',
		'sanitize_callback' => 'sanitize_text_field'			
	));
	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'school_info_email', array(
		'section' => 'SCHOOL_INFO_SECTION',
		'settings' => 'school_info_email',
		'label' =>'スクールのメールアドレスを入力してください'
	)));
	//スクールブログURL
	$wp_customize->add_setting('school_info_blogurl',array(
		'default' => '',
		'sanitize_callback' => 'sanitize_text_field'			
	));
	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'school_info_blogurl', array(
		'section' => 'SCHOOL_INFO_SECTION',
		'settings' => 'school_info_blogurl',
		'label' =>'スクールのブログのURLを入力してください'
	)));
	//スクール説明文タイトル
	$wp_customize->add_setting('school_desc_title',array(
		'default' => '',
		'sanitize_callback' => 'sanitize_text_field'			
	));
	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'school_desc_title', array(
		'section' => 'SCHOOL_INFO_SECTION',
		'settings' => 'school_desc_title',
		'label' =>'スクールの紹介文タイトルを入力してください'
	)));
	//スクール説明文
	$wp_customize->add_setting('school_desc',array(
		'default' => '',
		'sanitize_callback' => 'sanitize_text_field'			
	));
	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'school_desc', array(
		'section' => 'SCHOOL_INFO_SECTION',
		'settings' => 'school_desc',
		'label' =>'スクールの紹介文を入力してください'
	)));
	//スクール緯度
	$wp_customize->add_setting('school_lat',array(
		'default' => '',
		'sanitize_callback' => 'sanitize_text_field'			
	));
	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'school_lat', array(
		'section' => 'SCHOOL_INFO_SECTION',
		'settings' => 'school_lat',
		'label' =>'スクール緯度を入力してください'
	)));
	//スクール経度
	$wp_customize->add_setting('school_lng',array(
		'default' => '',
		'sanitize_callback' => 'sanitize_text_field'			
	));
	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'school_lng', array(
		'section' => 'SCHOOL_INFO_SECTION',
		'settings' => 'school_lng',
		'label' =>'スクール緯度を入力してください'
	)));
}
add_action( 'customize_register', 'kimoba_theme_customizer' );
?>

    schoolinfo.phpを作成する

    スクール情報を表示するテーマファイル（schoolinfo.php）を作成して追加します。

    別ファイルにすることで、好きな場所でschoolinfo.phpを読み込めば、どこでもスクール情報をすぐに表示できるようになります。

    <div class="schoolinfo">
  <table>
    <tr>
      <th>住所</th>
      <td>
        <?php if ((get_theme_mod('school_info_postal'))) : ?>
          <?php echo (get_theme_mod('school_info_postal')); ?>
        <?php endif; ?>
        <?php if ((get_theme_mod('school_info_add1'))) : ?>
          <?php echo (get_theme_mod('school_info_add1')); ?>
        <?php endif; ?>
        <?php if ((get_theme_mod('school_info_add2'))) : ?>
          <?php echo (get_theme_mod('school_info_add2')); ?>
        <?php endif; ?>
      </td>
    </tr>
    <tr>
      <th>最寄駅</th>
      <td>
        <?php if ((get_theme_mod('school_info_station'))) : ?>
          <?php echo (get_theme_mod('school_info_station')); ?>
        <?php endif; ?>
        <?php if ((get_theme_mod('school_info_navi'))) : ?>
          <i class="fa fa-external-link"></i><a href="<?php echo (get_theme_mod('school_info_navi')); ?>" target="_blank">きむおばスクールまでの詳しい道順はこちら</a>
        <?php endif; ?>
      </td>
    </tr>
    <tr>
      <th>お問い合わせ</th>
      <td>
        <?php if ((get_theme_mod('school_info_tel'))) : ?>
          <?php echo (get_theme_mod('school_info_tel')); ?>
        <?php endif; ?>
      </td>
    </tr>
    <tr>
      <th>メール</th>
      <td>
        <?php if ((get_theme_mod('school_info_email'))) : ?>
          <a href="mailto:<?php echo (get_theme_mod('school_info_email')); ?>"><?php echo (get_theme_mod('school_info_email')); ?></a>
        <?php endif; ?>
      </td>
    </tr>
    <tr>
      <th>ブログ</th>
      <td>
        <?php if ((get_theme_mod('school_info_blogurl'))) : ?>
          <a href="<?php echo (get_theme_mod('school_info_blogurl')); ?>" target="_blank"><?php echo (get_theme_mod('school_info_blogurl')); ?></a>
        <?php endif; ?>
      </td>
    </tr>
  </table>

  <h3>
    <?php if ((get_theme_mod('school_desc_title'))) : ?>
      <?php echo (get_theme_mod('school_desc_title')); ?>
    <?php endif; ?>
  </h3>
  <?php if ((get_theme_mod('school_desc'))) : ?>
    <?php echo (get_theme_mod('school_desc')); ?>
  <?php endif; ?>

  <div class="mapframearea">
    <?php
      $mylat = get_theme_mod('school_lat');
      $mylng = get_theme_mod('school_lng');
    ?>
    <script>
    function initMap() {
      var mylat = <?= $mylat; ?>;
      var mylng = <?= $mylng; ?>;
      var mapPosition = {lat: mylat, lng: mylng};
      var mapArea = document.getElementById('maps');
      var mapOptions = {
      center: mapPosition,
      zoom: 18,
      mapTypeControl:false,
      streetViewControl:false,
    };
    var map = new google.maps.Map(mapArea, mapOptions);
    var markerOptions = {
      map: map,
      position: mapPosition,
      title:"きむおばスクール",
      icon: new google.maps.MarkerImage(
        '<?php echo get_template_directory_uri(); ?>/map/mapicon.png', //アイコン場所を指定
        new google.maps.Size(60,78), //作成したアイコンサイズに変更
        new google.maps.Point(0,-10), //アイコン位置の微調整
      ),
    };
    var marker = new google.maps.Marker(markerOptions);
    var directionsService = new google.maps.DirectionsService();
    var directionsRenderer = new google.maps.DirectionsRenderer();
    directionsRenderer.setMap(map);
    var request = {
      origin: {lat:35.665270, lng:139.712130,stopover:false}, //出発地点：表参道駅（好きな緯度経度へ変更）
      destination: mapPosition,
      travelMode: "WALKING", //徒歩設定
    };
    directionsService.route(request,function(result,status){
      if (status === 'OK'){
        directionsRenderer.setDirections(result);
      }
    });
  }
  </script>

  <script async defer
src="https://maps.googleapis.com/maps/api/js?key=取得したAPIキーを設定&callback=initMap">
  </script>
</div>
<p class="mapText"><a href="https://goo.gl/maps/googleMapのURLを指定" target="_blank"><i class="fa fa-file-picture-o"></i><span>Google Mapを開く</span></a></p>

    表示したいデザインに合わせて、HTMLやCSSを修正してみてください。

    できれば、スマートにGoogleMapのJavaScriptを別ファイルにしたかったのですが、JavaScriptとPHPの変数の受け渡しが試行錯誤しても上手くいかなかったので、しかたなく直書きしています。

    なにゆえ、JavaScript初心者なので、よい方法を教えてもらえると嬉しいです。

    事務職で働き続けるためにProgateでJavaScriptを一から勉強し直しています

    同じカテゴリの関連記事リスト

    WordPressテーマを自作している私が必ず入れている処理〜headerの掃除〜

    ページごとにサイドバーの表示を変えてくれるWordPressプラグイン

    WordPress4.6公開！新機能と非推奨まとめ

    6年ぶりにWordPressテーマを変えてみました〜自作テーマフルカスタマイズの記録

    JavaScriptがWordPressアップデートでエラーになった時の解決方法【アクションフックまとめ】

    • 主婦の働き方・生き方
    • WordPressでMap付のお客様の企業情報をテーマカスタマイザーで簡単に設定できるようにする方法（コード付）