मैं एक मेगा मेनू वॉकर बनाने की कोशिश कर रहा हूं। दुर्भाग्य से, वॉकर मेरे कोडिंग ज्ञान से पूरी तरह से बच जाते हैं। मैं वास्तव में इसे काम करने में कुछ मदद का उपयोग कर सकता हूं। यहां उन विशेषताओं की आवश्यकता है जो मुझे चाहिए:
- दूसरे स्तर
<ul>में लपेटें<section>। [पूर्ण] - जब कोई उपयोगकर्ता
<li>दूसरे स्तर पर कक्षा "ब्रेक" सेट करता है<ul>, तो<li>उसे प्रारंभ करें<ul>। यदि यह<li>सूची में पहला है, तो कुछ भी न करें, खाली अनियंत्रित सूचियों के गठन को रोकने के लिए। [पूर्ण] - जब कोई उपयोगकर्ता
<li>पहले स्तर पर "विजेट" सेट करता है जिसमें एक उप है<ul>, तो उस के अंत में एक विजेट जोड़ें<ul>। [पूर्ण] mega-menu-columns-#प्रथम स्तर के<li>तत्वों में वर्ग जोड़ें जिसमें कई कॉलम और / या एक विजेट के साथ ड्रॉप डाउन हैं।<ul>यदि यह मौजूद है तो # तत्वों की संख्या , +1 का प्रतिनिधित्व करता है। [पूर्ण]
मेरे पास इसमें से कुछ करने के लिए थोड़ा सा कोड है, लेकिन यह सब नहीं। नीचे कट-आउट अनुभाग हैं:
दूसरे स्तर <ul>में लपेटें <section>:
function start_lvl(&$output, $depth = 0, $args = array()) {
if ($depth == 0) {
$output .= "<section>";
}
$output .= "<ul class=\"sub-menu\">";
}
function end_lvl(&$output, $depth = 0, $args = array()) {
$output .= "</ul>";
if ($depth == 0) {
$output .= "</section>\n";
}
}
विजेट HTML उत्पन्न करें:
ob_start();
dynamic_sidebar("Navigation Callout");
$widget = ob_get_contents();
ob_end_clean();
आउटपुट HTML होगा:
<ul>
<li id="menu-item-1" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1 mega-menu-columns-2">
<a href="http://www.example.com/about/">
About Us
</a>
<section>
<ul class="sub-menu">
<li id="menu-item-2" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2">
<a href="http://www.example.com/about/company-profile/">
Company Profile
</a>
</li>
<li id="menu-item-3" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3">
<a href="http://www.example.com/about/leadership-team/">
Leadership Team
</a>
</li>
<li id="menu-item-4" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4">
<a href="http://www.example.com/about/professional-affiliations/">
Professional Affiliations
</a>
</li>
</ul>
<ul class="sub-menu">
<li id="menu-item-5" class="break menu-item menu-item-type-post_type menu-item-object-page menu-item-5">
<a href="http://www.example.com/about/clients/">
Clients
</a>
</li>
<li id="menu-item-6" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6">
<a href="http://www.example.com/about/partnerships/">
Partnerships
</a>
</li>
</ul>
</section>
</li>
<li id="menu-item-7" class="widget menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-7 mega-menu-columns-3">
<a href="http://www.example.com/services/">
Services
</a>
<section>
<ul class="sub-menu">
<li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8">
<a href="http://www.example.com/services/civil-engineering/">
Civil Engineering
</a>
</li>
<li id="menu-item-9" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9">
<a href="http://www.example.com/services/land-planning/">
Land Planning
</a>
</li>
<li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10">
<a href="http://www.example.com/services/surveying/">
Surveying
</a>
</li>
</ul>
<ul class="sub-menu">
<li id="menu-item-11" class="break menu-item menu-item-type-post_type menu-item-object-page menu-item-11">
<a href="http://www.example.com/services/information-technology/">
Information Technology
</a>
</li>
<li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12">
<a href="http://www.example.com/services/subsurface-utility-engineering/">
Subsurface Utility Engineering
</a>
</li>
</ul>
<aside>
<h6>Widget Title</h6>
<p>Maecenas quis semper arcu. Quisque consequat risus nisi. Sed venenatis urna porta eros malesuada euismod. Nulla sollicitudin fringilla posuere. Nulla et tellus eu nisi sodales convallis non vel tellus.</p>
</aside>
</section>
</li>
<li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15">
<a href="http://www.example.com/contact/">
Contact Us
</a>
</li>
</ul>
अद्यतन: मेरे काउंटर मुझे दु: ख दे रहे हैं। वे केवल उप मेनू के उत्पन्न होने के बाद गिन रहे हैं, जो मेरी मदद नहीं करता है। मेरा मतलब समझने के लिए यह स्क्रीनशॉट देखें:
शीर्ष नंबरों को अंदर खींचा जा रहा है start_el। नीचे के नंबरों को अंदर खींचा जा रहा है end_el। जैसा कि आप देख सकते हैं, शीर्ष नंबर मेरी गिनती नहीं कर रहे हैं .breaksजैसा कि उन्हें करना चाहिए। वे विजेट क्लास की गिनती करते हैं क्योंकि उन में गिनती की जा रही है $depth = 0। कोई मुझे इस भयावहता से बचाए!
// mega menu walker
/*
ONE REMAINING BUG:
- Need to add class to LI containing mega-menu-columns-#
*/
class megaMenuWalker extends Walker_Nav_Menu {
private $column_limit = 3; /* needs to be set for each site */
private $show_widget = false;
private $column_count = 0;
static $li_count = 0;
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
$classes = empty($item->classes) ? array() : (array) $item->classes;
$item_id = $item->ID;
if ($depth == 0) self::$li_count = 0;
if ($depth == 0 && in_array("widget", $classes)) {
$this->show_widget = true;
$this->column_count++;
}
if ($depth == 1 && self::$li_count == 1) {
$this->column_count++;
}
if ($depth == 1 && in_array("break", $classes) && self::$li_count != 1 && $this->column_count < $this->column_limit) {
$output .= "</ul><ul class=\"sub-menu\">";
$this->column_count++;
}
if ($depth == 0 && $this->column_count > 0) {
$mega_menu_class = " mega-menu-columns-" . $this->column_count;
}
$class_names = join(" ", apply_filters("nav_menu_css_class", array_filter($classes), $item));
$class_names = " class=\"" . esc_attr($class_names . $mega_menu_class) . "\"";
$output .= sprintf(
"<li id=\"menu-item-%s\"%s><a href=\"%s\">%s</a>",
$item_id,
$class_names,
$item->url,
$item->title
);
self::$li_count++;
}
function start_lvl(&$output, $depth = 0, $args = array()) {
if ($depth == 0) {
$output .= "<section>";
}
$output .= "<ul class=\"sub-menu\">";
}
function end_lvl(&$output, $depth = 0, $args = array()) {
$output .= "</ul>";
if ($depth == 0) {
if ($this->show_widget) {
ob_start();
dynamic_sidebar("Navigation Callout");
$widget = ob_get_contents();
ob_end_clean();
$output .= $widget;
$this->show_widget = false;
}
$output .= "</section>";
}
}
function end_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
if ($depth == 0 && $this->column_count > 0) {
/* needs to be added to opening level 0 li */
$column_count_class = " mega-menu-columns-" . $this->column_count;
$output .= $column_count_class;
/* end */
$this->column_count = 0;
}
$output .= "</li>";
}
}
अद्यतन 2: यहां टिप्पणियों के साथ आउटपुट का उदाहरण दिया गया है जिसमें बताया गया है कि mega-menu-columns-कक्षा को चीजों को कैसे गिनना चाहिए:
<ul>
<!-- +1 because this has a class of "widget" -->
<li id="menu-item-1" class="widget menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1 mega-menu-columns-3">
<a href="http://www.example.com/about/">
About Us
</a>
<!-- +1 because a drop down exists -->
<!-- gets added by my walker -->
<section>
<!-- end gets added by my walker -->
<ul class="sub-menu">
<!-- +0 because this "break" is the first child -->
<li id="menu-item-2" class="break menu-item menu-item-type-post_type menu-item-object-page menu-item-2">
<a href="http://www.example.com/about/company-profile/">
Company Profile
</a>
<ul>
<!-- +0 because this "break" is in level 2 -->
<li id="menu-item-3" class="break menu-item menu-item-type-post_type menu-item-object-page menu-item-3">
<a href="http://www.example.com/about/our-team/">
Our Team
</a>
</li>
</ul>
</li>
<li id="menu-item-4" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4">
<a href="http://www.example.com/about/leadership-team/">
Leadership Team
</a>
</li>
<li id="menu-item-5" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5">
<a href="http://www.example.com/about/professional-affiliations/">
Professional Affiliations
</a>
</li>
<!-- gets added by my walker -->
</ul>
<ul class="sub-menu">
<!-- end gets added by my walker -->
<!-- +1 because this "break" is in level 1 and not the first child -->
<li id="menu-item-6" class="break menu-item menu-item-type-post_type menu-item-object-page menu-item-6">
<a href="http://www.example.com/about/clients/">
Clients
</a>
</li>
<li id="menu-item-7" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7">
<a href="http://www.example.com/about/partnerships/">
Partnerships
</a>
</li>
</ul>
<!-- gets added by my walker for .widget -->
<section>
<header>
<h1>Widget Title</h1>
</header>
<p>This is a widget. It was hard to make appear!</p>
</section>
<!-- end gets added by my walker for .widget -->
<!-- gets added by my walker -->
</section>
<!-- end gets added by my walker -->
</li>
</ul>
अद्यतन: यहाँ मेरा अंतिम वाकर और कार्य है। यह वही करता है जो मैं इसे चाहता था। सहायता के लिए धन्यवाद!
// mega menu walker
class megaMenuWalker extends Walker_Nav_Menu {
private $column_limit = 3;
private $show_widget = false;
private $column_count = 0;
static $li_count = 0;
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
$classes = empty($item->classes) ? array() : (array) $item->classes;
$item_id = $item->ID;
if ($depth == 0) {
self::$li_count = 0;
}
if ($depth == 0 && in_array("widget", $classes)) {
$this->show_widget = true;
$this->column_count++;
}
if ($depth == 1 && self::$li_count == 1) {
$this->column_count++;
}
if ($depth == 1 && in_array("break", $classes) && self::$li_count != 1 && $this->column_count < $this->column_limit) {
$output .= "</ul><ul class=\"sub-menu\">";
$this->column_count++;
}
$class_names = join(" ", apply_filters("nav_menu_css_class", array_filter($classes), $item)); // set up the classes array to be added as classes to each li
$class_names = " class=\"" . esc_attr($class_names) . "\"";
$output .= sprintf(
"<li id=\"menu-item-%s\"%s><a href=\"%s\">%s</a>",
$item_id,
$class_names,
$item->url,
$item->title
);
self::$li_count++;
}
function start_lvl(&$output, $depth = 0, $args = array()) {
if ($depth == 0) {
$output .= "<section>";
}
$output .= "<ul class=\"sub-menu\">";
}
function end_lvl(&$output, $depth = 0, $args = array()) {
$output .= "</ul>";
if ($depth == 0) {
if ($this->show_widget) {
ob_start();
dynamic_sidebar("Navigation Callout");
$widget = ob_get_contents();
ob_end_clean();
$output .= $widget;
$this->show_widget = false;
}
$output .= "</section>";
}
}
function end_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
if ($depth == 0 && $this->column_count > 0) {
$this->column_count = 0;
}
$output .= "</li>";
}
}
// add mega-menu-columns-# classes
function add_column_number($items, $args) {
static $column_limit = 3;
static $post_id = 0;
static $x_key = 0;
static $column_count = 0;
static $li_count = 0;
$tmp = array();
foreach($items as $key => $item) {
if (0 == $item->menu_item_parent) {
$x_key = $key;
$post_id = $item->ID;
$column_count = 0;
$li_count = 0;
if (in_array("widget", $item->classes, 1)) {
$column_count++;
}
}
if ($post_id == $item->menu_item_parent) {
$li_count++;
if ($column_count < $column_limit && $li_count == 1) {
$column_count++;
}
if (in_array("break", $item->classes, 1) && $li_count > 1 && $column_count < $column_limit) {
$column_count++;
}
$tmp[$x_key] = $column_count;
}
}
foreach($tmp as $key => $value) {
$items[$key]->classes[] = sprintf("mega-menu-columns-%d", $value);
}
unset($tmp);
return $items;
};
// add the column classes
add_filter("wp_nav_menu_args", function($args) {
if ($args["walker"] instanceof megaMenuWalker) {
add_filter("wp_nav_menu_objects", "add_column_number");
}
return $args;
});
// stop the column classes function
add_filter("wp_nav_menu", function( $nav_menu ) {
remove_filter("wp_nav_menu_objects", "add_column_number");
return $nav_menu;
});
मुझे ऐसा नहीं लगता, यह उन दो साइटों पर ठीक काम कर रहा है जिन्हें मैंने अब तक इस्तेमाल किया है। मैंने उपरोक्त कोड को अपडेट कर दिया है, इसे लागू करते समय मैंने कुछ बदल दिया है। इसे फिर से आज़माएँ और मुझे बताएं कि क्या यह अभी भी काम नहीं करता है; मैं PHP के साथ बहुत अच्छा नहीं हूँ, लेकिन मैं कोशिश करने और मदद करने के लिए खुश हूँ :)
—
याकूबTheev
मुझे जो करना था वह
—
जेसनडेविस
function add_column_number($items, $args) {इस function add_column_number($items) {को हटाने में बदल गया $argsऔर यह मेरे लिए उस बदलाव के साथ ठीक काम करता है, बहुत अजीब है! अपने कोड को साझा करने के लिए धन्यवाद हालांकि यह सिर्फ वही है जो मुझे लंबे समय से चाहिए था
कोई बात नहीं, मुझे पता है कि ऐसा करना कितना मुश्किल है, यही वजह है कि मैंने अपना पूरा कोड साझा किया :) खुशी है कि इससे मदद मिली!
—
जैकब डेव
Warning: Missing argument 2 for add_column_number()क्या आपने इस समस्या का सामना किया है?