きむおばプロフィール画像

きむおばです。関東在住の40代の主婦です。 パート・派遣・フリーランスの3足のわらじ中。フリーランスでは、ファイナンシャルプランナーとしてライターやセミナー講師をしたり、サイト制作やプログラムを作ったりしています。
お金・子育て・趣味のこと…何でも気ままに書く雑記ブログです。
目標は、ライター・サイト制作・広告他の収入バランスを整えること。ブログ収入UPに今年は力を入れます。

Menu
主婦の働き方・稼ぎ方 

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

WordPressで案内をテーマカスタマイズで設定する方法

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

テーマカスタマイズで、店舗情報・キャッチコピー・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で案内をテーマカスタマイズで設定する方法
Twitterで最新情報をお知らせ
記事がお役に立てたらシェアお願いします♪