আমি একটি মেগা মেনু ওয়াকার তৈরি করার চেষ্টা করছি। দুর্ভাগ্যক্রমে, ওয়াকাররা আমার কোডিং জ্ঞান পুরোপুরি এড়িয়ে চলে। আমি এটির কাজ করতে সত্যিই কিছু সহায়তা ব্যবহার করতে পারি। আমার প্রয়োজনীয় বৈশিষ্ট্যগুলি এখানে:
- দ্বিতীয় স্তরের
<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";
}
}উইজেট এইচটিএমএল তৈরি করুন:
ob_start();
dynamic_sidebar("Navigation Callout");
$widget = ob_get_contents();
ob_end_clean();আউটপুট এইচটিএমএল হবে:
<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;
});
আমার মনে হয় না, এটি এখনও দু'টি সাইটে ব্যবহার করেছি বলে মনে হচ্ছে। আমি উপরের কোডটি আপডেট করেছি, যদি প্রয়োগ করার সময় আমি কিছু পরিবর্তন করেছি। এটি আবার চেষ্টা করুন এবং এটি এখনও কাজ না করে তা আমাকে জানান; আমি পিএইচপি-তে খুব একটা ভাল নই তবে চেষ্টা করে সাহায্য করতে পেরে আমি খুশি হব :)
—
জ্যাকব দ্যদেব
আমাকে যা করতে হয়েছিল তা হ'ল এটি মুছে ফেলার মধ্যে এটি পরিবর্তন
—
জেসনডাভিস
function add_column_number($items, $args) {করা এবং এটি আমার পক্ষে এই পরিবর্তনটির সাথে খুব সুন্দর কাজ করে! আপনার কোডটি ভাগ করে নেওয়ার জন্য ধন্যবাদ যদিও দীর্ঘদিনের জন্য আমার এটির প্রয়োজন ছিলfunction add_column_number($items) {$args
কোনও সমস্যা নেই, আমি জানি এটি করা কতটা কঠিন, যার কারণেই আমি আমার সম্পূর্ণ কোডটি ভাগ করেছি :) খুশী হ'ল এটি সাহায্য করেছে!
—
জ্যাকবডেদেভ
Warning: Missing argument 2 for add_column_number()আপনি কি এই সমস্যাটির মুখোমুখি হয়েছেন ?