footerのliをn個ずつwrapする用メモ

フッターカスタマイズ

①カスタムウォーカー
②wp_get_nav_menu_object
③力技

このうちカスタムウォーカー以外について書いていきます

wp_get_nav_menu_objectを使用してliをn個ずつwrapする例

functions.php

function my_menu_init() {
  register_nav_menus(
    array(
      'footer' => 'フッターメニュー',
    )
  );
}
add_action( 'init', 'my_menu_init' );

footer

<footer class="footer">
<?php
$location_name = 'footer'; //insert location name
$locations = get_nav_menu_locations(); //get location of all navigation menus
$footer_id = $locations[$location_name]; //get menu id
$footer_object = wp_get_nav_menu_object($footer_id); //get menu object
$footer_items = wp_get_nav_menu_items($footer_object->term_id); //get menu items
$footer_item_length = count($footer_items);

//divで囲むアイテム数
$encloseNum = 5;

echo '<ul class="footer__menu">';
  if (is_front_page() || is_home()) { //フロントページ
    for ($i = 0; $i < $footer_item_length; $i += $encloseNum) {
      echo '<div class="footer__items">';
      for ($j = 0; $j < $encloseNum; $j++) {
        echo '<li class="footer__item">';
	echo '<a href="' . $footer_items[$i + $j]->url . '">' . $footer_items[$i + $j]->title  . '</a>';
	echo '</li>';
      }
      echo '</div>';
    }
  }
echo '</ul>';
?>
</footer>

wp_nav_menuで出して、jsの力技でwrapする場合の例

footer.php

<footer class="footer">
<?php 
  wp_nav_menu( array( 
    'theme_location' => 'footer',
    'menu_class' => 'footer__menu', //ul class
    'add_li_class' => 'footer__item js-footer-item', //li class
  ) ); 
?>
</footer>

main.js

wrapItem({
  targetsClass: "js-footer-item",
  wrapperClass: "footer__items",
  num: 4,
});

function wrapItem(obj) {
  if(!obj.targetsClass || !obj.wrapperClass) return;
  
  document.addEventListener("DOMContentLoaded", () => {
    const targets = document.querySelectorAll(`.${obj.targetsClass}`);
    const targetsLen = targets.length;
    if(targetsLen === 0) return;
  
    //何個ずつ囲むか、数の設定
    const encloseNum = obj.num ? obj.num : 5;
  
    for(let i = 0; i < targetsLen; i += encloseNum) {
      //アイテム囲むdivを生成
      let wrapper = document.createElement("div");
      wrapper.classList.add(obj.wrapperClass);
  
      //アイテムを複製して生成したdivに挿入
      for(let j = 0; j < encloseNum && i + j < targetsLen; j++) {
        wrapper.appendChild(targets[i + j].cloneNode(true));
      }
  
      //wrapperを元のリストに置き換える
      targets[i].parentNode.insertBefore(wrapper, targets[i]);
    }
  
    //元々あった要素を削除
    targets.forEach(t => t.remove());
  });
}