Tutorial

Tutorial Buat Menu Apps pada Website WordPress

Adapun langkah-langkahnya Menu Apps pada WordPress ini adalah agar tampilan website terlihat seperti mobile apss. Hal ini sangat penting untuk akses yang baik dan menarik bagi para pengunjung. Berikut kami buatkan langkah-langkah tutorialnya adalah

Buatkan masukkan kode ini di direktori “themeanda/assets/sesuaikan direktory”. ini adalah boostrap-icon berbentuk json file. selengkapnya silahkan download dibawah ini:

Download Asset

Isi dari aset tersebut adalah

  1. bootstrap.min.css
  2. bootstrap.bundle.min.js
  3. bootstrap-icons.woff
  4. bootstrap-icons.woff2
  5. bootstrap-icons.json
  6. bootstrap-icons.css

Keenam ini adalah library penting untuk membuat menu apps pada halaman wordpress anda. jadi hal pertama yang dilakukan adalah simpan semua file-file tersebut di direktori theme anda.

  1. Silahkan buatkan pada functions.php kode ini untuk memanggilnya:
function theme_enqueue_styles() {

wp_enqueue_script( 'bootstrap-js', $template_uri . '/js/bootstrap.bundle.min.js', array('jquery'), null, true );

wp_enqueue_style('bootstrap-icons', $theme_uri . '/css/bootstrap-icons.css', array(), null);
}
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

2. Selanjutnya pastekan kode ini pada functions.php untuk menambahkan menu input icon boostrap

// Tambahkan field ikon dengan pilihan ikon Bootstrap
function supa_add_menu_icon_field($item_id, $item, $depth, $args) {
    $icon = get_post_meta($item_id, '_menu_item_icon', true);
    ?>
    <p class="field-icon description description-wide">
        <label for="edit-menu-item-icon-<?php echo $item_id; ?>">
            <?php _e('Icon Class (Bootstrap Icons)', 'supa'); ?><br />
            <input type="text" id="edit-menu-item-icon-<?php echo $item_id; ?>" class="widefat code edit-menu-item-icon" name="menu-item-icon[<?php echo $item_id; ?>]" value="<?php echo esc_attr($icon); ?>" />
            <button type="button" class="button supa-icon-picker-button" data-target="#edit-menu-item-icon-<?php echo $item_id; ?>">Pilih Ikon</button>
            <span class="supa-icon-preview"><i class="<?php echo esc_attr($icon); ?>"></i></span>
        </label>
    </p>
    <?php
}
add_action('wp_nav_menu_item_custom_fields', 'supa_add_menu_icon_field', 10, 4);

3. Kemudian tambahkan lagi ke functions.php kode untuk fungsi untuk menyimpan icon boostrap

function supa_save_menu_icon_field($menu_id, $menu_item_db_id) {
    if (isset($_POST['menu-item-icon'][$menu_item_db_id])) {
        update_post_meta($menu_item_db_id, '_menu_item_icon', sanitize_text_field($_POST['menu-item-icon'][$menu_item_db_id]));
    }
}
add_action('wp_update_nav_menu_item', 'supa_save_menu_icon_field', 10, 2);

4. Tambahkan lagi ke functions.php kode untuk menampilkan icon boostrap di frontpage

function supa_add_menu_icon_to_title($title, $item, $args, $depth) {
    $icon = get_post_meta($item->ID, '_menu_item_icon', true);
    if ($icon) {
        $title = '<i class="bi ' . esc_attr($icon) . '"></i> ' . $title;
    }
    return $title;
}
add_filter('nav_menu_item_title', 'supa_add_menu_icon_to_title', 10, 4);

5. Untuk akses muda dalam mengisi item-item menu pada dan bisa memilih icon dengan tampilan jendela maka masukkan juga ke functions.php kode ini

function supa_enqueue_menu_icon_picker_assets($hook) {
    if ($hook !== 'nav-menus.php') return;

    $theme_uri = get_template_directory_uri();
    $theme_dir = get_template_directory();

    // Enqueue Bootstrap Icons stylesheet
    wp_enqueue_style('bootstrap-icons', $theme_uri . '/css/bootstrap-icons.css');

    // Enqueue jQuery
    wp_enqueue_script('jquery');

    // Enqueue custom script file
    wp_enqueue_script('supa-icon-picker', $theme_uri . '/js/supa-icon-picker.js', array('jquery'), null, true);

    // Baca ikon dari file JSON
    $json_path = $theme_dir . '/assets/bootstrap-icons.json';
    $icon_data = file_exists($json_path) ? json_decode(file_get_contents($json_path)) : [];

    // Localize ke JavaScript
    wp_localize_script('supa-icon-picker', 'SupaIconPickerData', array(
        'icons' => $icon_data
    ));

    // Tambah CSS langsung
    wp_add_inline_style('bootstrap-icons', '
        .supa-icon-preview i {
            margin-left: 10px;
            font-size: 20px;
            vertical-align: middle;
        }
        .supa-icon-picker-modal i {
            font-size: 20px;
            margin: 5px;
            cursor: pointer;
        }
        .supa-icon-picker-modal {
            display: none;
            position: fixed;
            z-index: 99999;
            top: 47%;
            left: 50%;
            transform: translateX(-5%);
            width: 80%;
            max-width: 600px;
            background: #fff;
            border: 1px solid #ccc;
            padding: 20px;
            max-height: 400px;
            overflow-y: auto;
        }
        .supa-icon-grid {
            display: flex;
            flex-wrap: wrap;
        }
        .supa-icon-grid i {
            font-size: 20px;
            margin: 5px;
            cursor: pointer;
            padding: 5px;
        }
        .supa-icon-search {
            width: 100%;
            margin-bottom: 10px;
            padding: 6px;
            font-size: 14px;
        }

    ');
}
add_action('admin_enqueue_scripts', 'supa_enqueue_menu_icon_picker_assets');

catatan penting dari kode ini adalah penempatan direktory dari library resources agar sesuai dengan yang diload, ini bagian pentingnya:

a. Enqueue Bootstrap Icons stylesheet
wp_enqueue_style(‘bootstrap-icons’, $theme_uri . ‘/css/bootstrap-icons.css’);

b. Enqueue custom script file ini adalah untuk mengatur load icon di admin pengaturan menu item.
wp_enqueue_script(‘supa-icon-picker’, $theme_uri . ‘/js/supa-icon-picker.js’, array(‘jquery’), null, true);

c. Baca ikon dari file JSON
$json_path = $theme_dir . ‘/assets/bootstrap-icons.json’;

6. Selanjutnya pada bagian frontend silahkan tempatkan kode pada footer.php, dimana letakkan kode di atas kode footer tersebut. Adapun kodenya adalah:

<?php
if (wp_is_mobile()) :
  $menu_locations = get_nav_menu_locations();
  if (isset($menu_locations['primary'])) :
    $menu = wp_get_nav_menu_items($menu_locations['primary']);
    if ($menu) :
      // Mengelompokkan item menu berdasarkan parent
      $menu_items = [];
      foreach ($menu as $item) {
        $menu_items[$item->menu_item_parent][] = $item;
      }
?>
<nav class="bottom-navbar">
  <?php foreach ($menu_items[0] as $item) : 
    $has_children = isset($menu_items[$item->ID]);

    // Ambil ikon dari metadata, fallback jika tidak ada
    $icon_class = trim(get_post_meta($item->ID, '_menu_item_icon', true));
    $icon_class = empty($icon_class) ? 'bi-circle' : $icon_class;
  ?>
    <div class="bottom-nav-item-wrapper <?= $has_children ? 'has-children' : ''; ?>">
      <a href="<?= esc_url($has_children ? '#' : $item->url); ?>" class="bottom-nav-item" aria-haspopup="<?= $has_children ? 'true' : 'false'; ?>" aria-expanded="false">
        <i class="bi <?= esc_attr($icon_class); ?>"></i>
        <span><?= esc_html($item->title); ?></span>
        <?php if ($has_children) : ?>
          <i class="bi bi-chevron-up submenu-toggle-icon"></i>
        <?php endif; ?>
      </a>

      <?php if ($has_children) : ?>
        <div class="submenu" hidden>
          <?php foreach ($menu_items[$item->ID] as $child) : 
            $child_icon_class = trim(get_post_meta($child->ID, '_menu_item_icon', true));
            $child_icon_class = empty($child_icon_class) ? 'bi-circle' : $child_icon_class;
          ?>
            <a href="<?= esc_url($child->url); ?>" class="submenu-item">
              <i class="bi <?= esc_attr($child_icon_class); ?>" style="margin-right:5px;"></i>
              <?= esc_html($child->title); ?>
            </a>
          <?php endforeach; ?>
        </div>
      <?php endif; ?>
    </div>
  <?php endforeach; ?>
</nav>
<?php
    endif;
  endif;
endif;
?>

7. Agar menu apps tersebut responsive dan fungsional maka kita perlu menempatkan kode javascript untuk frontend, bisa ditulis secara inline langsung di footer atau enquequ dari functions.php. pada contoh kali ini saya buatkan kode inline saja agar lebih mudah dapat dipastekan langsung dibawah kode strukutur di atas.

<script>
document.addEventListener('DOMContentLoaded', function () {
  const menuWrappers = document.querySelectorAll('.bottom-nav-item-wrapper.has-children');

  menuWrappers.forEach(wrapper => {
    const link = wrapper.querySelector('.bottom-nav-item');
    const submenu = wrapper.querySelector('.submenu');

    link.addEventListener('click', function (e) {
      e.preventDefault();

      const isActive = wrapper.classList.contains('active');

      // Tutup semua submenu
      menuWrappers.forEach(w => {
        w.classList.remove('active');
        const sm = w.querySelector('.submenu');
        const a = w.querySelector('.bottom-nav-item');
        if (sm) sm.hidden = true;
        if (a) a.setAttribute('aria-expanded', 'false');
      });

      // Jika tidak aktif sebelumnya, buka submenu
      if (!isActive) {
        wrapper.classList.add('active');
        if (submenu) submenu.hidden = false;
        link.setAttribute('aria-expanded', 'true');
      }
    });
  });

  // Klik di luar = tutup semua
  document.addEventListener('click', function (e) {
    if (!e.target.closest('.bottom-navbar')) {
      menuWrappers.forEach(w => {
        w.classList.remove('active');
        const sm = w.querySelector('.submenu');
        const a = w.querySelector('.bottom-nav-item');
        if (sm) sm.hidden = true;
        if (a) a.setAttribute('aria-expanded', 'false');
      });
    }
  });
});
</script>

8. Untuk mempercantik bagian dari tampilan website ini kita membutuhkan css yang bisa ditempatkan di style.css sebagai stylesheet utama dari theme anda. berikut contoh css yang bisa digunakan

@media (max-width: 720px){.bottom-navbar{position: fixed;bottom: 0;left: 0;right: 0;background: #08512f;border-top: 1px solid #ddd;display: flex;justify-content: space-around;padding: 5px 0;z-index: 9999;box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);height: 68px}.bottom-nav-item-wrapper{position: relative;flex-grow: 1;text-align: center}.bottom-nav-item{display: flex;flex-direction: column;align-items: center;font-size: 11px;color: #fff;text-decoration: none;padding: 5px 0;cursor: pointer;user-select: none;border-left: 1px solid rgb(255 255 255 / 17%);border-right: 1px solid rgb(255 255 255 / 28%)}.bottom-nav-item i{font-size: 18px;margin-bottom: 2px}.submenu-toggle-icon{font-size: 12px;margin-top: 2px;transition: transform 0.3s ease}.submenu{position: absolute;bottom: 56px;left: 0%;transform: translateX(-39%);background: #fff;border: 1px solid #ddd;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);border-radius: 6px;min-width: 520%;z-index: 9999;display: none;flex-direction: column;transition: 0.6s ease out}.submenu-item{padding: 10px 30px;font-size: 12px;color: #333;text-decoration: none;white-space: nowrap;border-bottom: 1px solid #eee;display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center}.submenu-item:last-child{border-bottom: none}.submenu-item:hover{background-color: #f0f0f0;color: #007bff}.bottom-nav-item-wrapper.active .submenu{display: flex}.bottom-nav-item-wrapper.active .submenu-toggle-icon{transform: rotate(180deg)}body{padding-bottom: 60px}}

Demikianlah tutorial kali ini semoga bermanfaat. jika ada kendala silahkan komentarnya. Terima kasih.

Alexandra Pane

Alexandra Pane

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.