iT邦幫忙

0

wordpress mega menu walker 相關問題

abc 2024-02-20 03:41:38907 瀏覽
  • 分享至 

  • xImage

想要請問各位大神:

我現在有一個三層的menu想要利用walker來進行撰寫:

-國內旅遊
|->->->北部->{基隆, 新北}
|->->->中部->{苗栗, 台中}

<nav>
        <div class="wrapper">
            
            <input type="radio" name="slide" id="cancel-btn">
            <input type="radio" name="slide" id="menu-btn">
            
            <ul class="nav-links">

                <label for="cancel-btn" class="btn cancel-btn"><i class="fas fa-times"></i></label> <!-- for the RWD cancel icon -->
                <li><a href="https://pacificfeng.com/">關於我</a></li>
                
                <li><a href="#" class="desktop-item">國外旅遊</a>
                    <input type="checkbox" id="showDrop1">
                    <label for="showDrop1" class="mobile-item">國外旅遊</label>
                    <ul class="drop-menu">
                        <li><a href="https://pacificfeng.com/america-tour-homepage/">美西自由行</a></li>
                    </ul> 
                </li>
                    
                <li><a href="#" class="desktop-item">國內旅遊</a>
                    <input type="checkbox" id="showMega1">
                    <label for="showMega1" class="mobile-item">國內旅遊</label>
                    <div class="mega-menu">
                        <div class="mega-menu-content">
                            
                            
                            
                            <div class="row">  <!-- mega menu list -->
                                <header><i class="fa fa-location-dot"></i>&nbsp;北部</header>
                                <ul class="mega-links">
                                    <li><a href="#">基隆</a></li>
                                    <li><a href="#">新北</a></li>
                                </ul>
                            </div>
                            
                            <div class="row">  <!-- mega menu list -->
                                <header><i class="fa fa-location-dot"></i>&nbsp;中部</header>
                                <ul class="mega-links">
                                    <li><a href="https://pacificfeng.com/taichung-homepage/">臺中</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </li>
                
                <li><a href="#" class="desktop-item">科技新知</a>
                    <input type="checkbox" id="showDrop2">
                    <label for="showDrop2" class="mobile-item">科技新知</label>
                    <ul class="drop-menu">
                        <li><a href="https://pacificfeng.com/technology-homepage/">常見資訊問題</a></li>
                    </ul> 
                </li>
                
                <li><a href="#" class="desktop-item">競賽題目</a>
                    <input type="checkbox" id="showDrop3">
                    <label for="showDrop3" class="mobile-item">競賽題目</label>
                    <ul class="drop-menu">
                        <li><a href="https://pacificfeng.com/america-tour-homepage/">IC Contest</a></li>
                    </ul> 
                </li>
                
            </ul>
        </div>
    </nav>

目前我的walker function長這樣:

class Custom_Menu_Walker extends Walker_Nav_Menu {

        private $n = "\n";
        private $dropmenu_cnt = 1;
        private $submega_cnt = 1;
        private $submega_en = false;

        public function start_el ( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
            $output .= "{$this->n}<li>";

            if (esc_html($item->title) == "國內旅遊") {     // add more mega menu here
                $this->submega_en = true;
            }

            if ($args->walker->has_children) {
                if ($this->submega_en) {
                    if ($depth == 0) {
                        $output .= "{$this->n}<a href=\"esc_url($item->url)\" class=\"desktop-item'\">" . esc_html($item->title) . "</a>";
                        $output .= "{$this->n}<input type=\"checkbox\" id=\"showMega{$this->submega_cnt}\">";
                        $output .= "{$this->n}<label for=\"showMega{$this->submega_cnt}\" class=\"mobile-item\">" . esc_html($item->title) . "</label>";
                        $output .= "{$this->n}<div class=\"mega-menu\">";
                        $output .= "{$this->n}<div class=\"mega-menu-content\">";
                    }
                    else if ($depth == 1) {
                        $output .= "{$this->n}<header><i class=\"fa fa-location-dot\"></i>&nbsp;" . esc_html($item->title) . "</header>";
                    }
                }
                else {
                    if ($depth == 0) {
                        $output .= "{$this->n}<a href=\"esc_url($item->url)\" class=\"desktop-item'\">" . esc_html($item->title) . "</a>";
                        $output .= "{$this->n}<input type=\"checkbox\" id=\"showDrop{$this->dropmenu_cnt}\">";
                        $output .= "{$this->n}<label for=\"showDrop{$this->dropmenu_cnt}\" class=\"mobile-item\">" . esc_html($item->title) . "</label>";
                    }
                }
            }
            else {
                $this->submega_en = false;
                $output .= "<a href=\"esc_url( $item->url )\">" . esc_html( $item->title ) . "</a>";
            }
        }

        public function end_el ( &$output, $item, $depth = 0, $args = array() ) {
            if ($this->submega_en) {
                if ($depth == 0) {
                    $output .= "{$this->n}</div>";
                    $output .= "{$this->n}</div>";
                }
            }
            else {
                $output .= "{$this->n}</li>";
            }
        }

        public function start_lvl(&$output, $depth = 0, $args = null) {
            if ($depth == 0) {
                if ($this->submega_en) {
                    $output .= "{$this->n}<div class=\"row\">";
                }
                else {
                    $this->dropmenu_cnt++;
                    $output .= "{$this->n}<ul class=\"drop-menu\">\n";
                }
            }

            if ($depth == 1  && $this->submega_en) {
                $output .= "{$this->n}<ul class=\"mega-links\">";
            }
        }

        public function end_lvl(&$output, $depth = 0, $args = null) {
            $output .= "{$this->n}</ul>\n";
        }
    }

在執行到‵$output .= "{$this->n}<div class=\"row\">"時,我預期他應該會跑到start_el的"{$this->n}<header><i class=\"fa fa-location-dot\"></i>&nbsp;" . esc_html($item->title) . "</header>",但是他會直接輸出<div class="row"></div>,想要請問是否有方法可以解決。不好意思麻煩各位了!

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答