Kursus WordPress

Appearance

Campus Post Type & Google Map ​

Tujuan ​

  1. Membuat custom post type Campus
  2. Menambahkan ACF Google Map field untuk lokasi
  3. Setup Google Maps API key
  4. Menampilkan peta interaktif di frontend dengan pin untuk setiap kampus

⚠️ Peringatan Google Maps: Google mewajibkan kartu kredit untuk Maps JavaScript API. Gratis jika di bawah $200/bulan, tapi kebijakan bisa berubah. Jika tidak nyaman, skip fitur map dan lanjut ke chapter berikutnya.

Langkah 1: Register Campus Post Type ​

Di wp-content/mu-plugins/university-post-types.php:

php
// Campus post type
register_post_type('campus', array(
  'show_in_rest' => true,
  'supports' => array('title', 'editor', 'excerpt'),
  'rewrite' => array('slug' => 'campuses'),
  'has_archive' => true,
  'public' => true,
  'labels' => array(
    'name' => 'Campuses',
    'add_new_item' => 'Add New Campus',
    'edit_item' => 'Edit Campus',
    'all_items' => 'All Campuses',
    'singular_name' => 'Campus'
  ),
  'menu_icon' => 'dashicons-location-alt'
));

Langkah 2: Buat ACF Google Map Field ​

  1. Custom Fields → Add New
  2. Group Name: Map Location
  3. Add Field:
    • Label: Map Location
    • Name: map_location
    • Type: Google Map
    • Required: Yes
  4. Location: Post Type = Campus

Langkah 3: Setup Google Maps API Key ​

A. Di Google Cloud Console ​

  1. Kunjungi console.developers.google.com
  2. Buat project baru: "WordPress Theme Dev"
  3. Enable 3 API:
    • Maps JavaScript API
    • Places API
    • Geocoding API
  4. Credentials → Create Credentials → API Key
  5. Restrict key:
    • HTTP referrers: fictional-university.local
    • API restrictions: pilih 3 API di atas
  6. Set quota rendah (50 requests/day) untuk mencegah billing

B. Di WordPress Theme ​

Di functions.php, tambahkan di bagian bawah:

php
function universityMapKey($api) {
  $api['key'] = 'YOUR_GOOGLE_MAPS_API_KEY_HERE';
  return $api;
}

add_filter('acf/fields/google_map/api', 'universityMapKey');

Langkah 4: Buat Archive Template ​

Buat file: archive-campus.php

php
<?php get_header();

pageBanner(array(
  'title' => 'Our Campuses',
  'subtitle' => 'We have several conveniently located campuses.'
));
?>

<div class="container container--narrow page-section">
  <div class="acf-map">
    <?php
      while (have_posts()) {
        the_post();
        $mapLocation = get_field('map_location');
    ?>
      <div class="marker" data-lat="<?php echo $mapLocation['lat']; ?>" data-lng="<?php echo $mapLocation['lng']; ?>">
        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
        <?php echo $mapLocation['address']; ?>
      </div>
    <?php } ?>
  </div>
</div>

<?php get_footer(); ?>

Struktur Data get_field('map_location') ​

php
$mapLocation = get_field('map_location');

$mapLocation['address']  // Alamat lengkap (string)
$mapLocation['lat']      // Latitude (float)
$mapLocation['lng']      // Longitude (float)

💡 Gunakan print_r() untuk debug: print_r(get_field('map_location'));

Langkah 5: Load Google Maps JavaScript ​

Di functions.php, dalam fungsi university_files():

php
wp_enqueue_script('googleMap', '//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY', null, '1.0', true);
ParameterNilaiPenjelasan
Handle'googleMap'Nama label untuk script
URL'//maps.googleapis.com/...'Mulai // (tanpa http/https) agar fleksibel
DependenciesnullTidak bergantung pada script lain
Version'1.0'Bebas
In FootertrueLoad di bawah </body>

Langkah 6: JavaScript untuk Render Map ​

File src/modules/GoogleMap.js sudah disediakan (boilerplate dari dokumentasi ACF). Kode ini:

  • Mencari semua element dengan class marker
  • Membaca data-lat dan data-lng
  • Membuat pin di Google Map

Di src/index.js, import module:

js
import GoogleMap from './modules/GoogleMap';

const googleMap = new GoogleMap();

Langkah 7: Pastikan Semua Campus Muncul ​

Di functions.php, dalam fungsi university_adjust_queries():

php
if (!is_admin() AND get_post_type() == 'campus' AND is_main_query()) {
  $query->set('posts_per_page', -1);  // Tampilkan semua campus
}

Header Navigation ​

Di header.php, update link Campuses:

php
<li <?php if (get_post_type() == 'campus') echo 'class="current-menu-item"'; ?>>
  <a href="<?php echo get_post_type_archive_link('campus'); ?>">Campuses</a>
</li>