wordpress-theming 相关问题

WordPress主题系统是为WordPress驱动的博客/网站设计样式的方式。

我正在使用 wp_nav_menu($args) 并且我想将 my_own_class CSS 类名添加到元素。我想得到以下结果：链接我正在使用 wp_nav_menu($args) 并且我想将 my_own_class CSS 类名添加到 <li> 元素。我想得到以下结果： <li class='my_own_class'><a href=''>Link</a> 如何做到这一点？无需创建自定义助行器。只需使用附加参数并为 nav_menu_css_class 设置过滤器即可。例如： $args = array( 'container' => '', 'theme_location'=> 'your-theme-loc', 'depth' => 1, 'fallback_cb' => false, 'add_li_class' => 'your-class-name1 your-class-name-2' ); wp_nav_menu($args); 注意新的“add_li_class”参数。并在functions.php上设置过滤器 function add_additional_class_on_li($classes, $item, $args) { if(isset($args->add_li_class)) { $classes[] = $args->add_li_class; } return $classes; } add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3); 您可以在functions.php 文件中为nav_menu_css_class 操作添加过滤器。示例： function atg_menu_classes($classes, $item, $args) { if($args->theme_location == 'secondary') { $classes[] = 'list-inline-item'; } return $classes; } add_filter('nav_menu_css_class', 'atg_menu_classes', 1, 3); 文档：https://developer.wordpress.org/reference/hooks/nav_menu_css_class/ 此处 WordPress 在 wp_nav_menu 链接中添加自定义类或您可以从管理面板添加课程<li class='my_own_class'><a href=''>Link</a></li>：前往YOURSITEURL/wp-admin/nav-menus.php 打开SCREEN OPTIONS 勾选CSS CLASSES，然后你会看到CSS Classes (optional) 每个菜单链接中的字段。将类添加到 <li> 标签而不编辑 functions.php 文件：转到外观 -> 菜单 -> 屏幕选项 -> CSS 类您将在 Menu Items 窗口中启用 CSS 类选项使用此过滤器nav_menu_css_class如下所示 function add_classes_on_li($classes, $item, $args) { $classes[] = 'nav-item'; return $classes; } add_filter('nav_menu_css_class','add_classes_on_li',1,3); 更新将此过滤器与特定菜单一起使用 if ( 'main-menu' === $args->theme_location ) { //replace main-menu with your menu $classes[] = "nav-item"; } 如果您只想“添加类”，那么只使用 str_replace 功能怎么样： <?php echo str_replace( '<li class="', '<li class="myclass ', wp_nav_menu( array( 'theme_location' => 'main_menu', 'container' => false, 'items_wrap' => '<ul>%3$s</ul>', 'depth' => 1, 'echo' => false ) ) ); ?> 对于单级菜单或要向所有 <li> 元素添加类的菜单来说，这是一种快速修复，不建议用于更复杂的菜单这些回应似乎都没有真正回答这个问题。这与我在我的网站上使用的类似，通过标题/名称来定位菜单项： function add_class_to_menu_item($sorted_menu_objects, $args) { $theme_location = 'primary_menu'; // Name, ID, or Slug of the target menu location $target_menu_title = 'Link'; // Name/Title of the menu item you want to target $class_to_add = 'my_own_class'; // Class you want to add if ($args->theme_location == $theme_location) { foreach ($sorted_menu_objects as $key => $menu_object) { if ($menu_object->title == $target_menu_title) { $menu_object->classes[] = $class_to_add; break; // Optional. Leave if you're only targeting one specific menu item } } } return $sorted_menu_objects; } add_filter('wp_nav_menu_objects', 'add_class_to_menu_item', 10, 2); 我添加了一个类来轻松实现菜单参数。所以你可以自定义并包含在你的函数中，如下所示： include_once get_template_directory() . DIRECTORY_SEPARATOR . "your-directory" . DIRECTORY_SEPARATOR . "Menu.php"; <?php $menu = (new Menu('your-theme-location')) ->setMenuClass('your-menu') ->setMenuID('your-menu-id') ->setListClass('your-menu-class') ->setLinkClass('your-menu-link anchor') ?> // Print your menu <?php $menu->showMenu() ?> <?php class Menu { private $args = [ 'theme_location' => '', 'container' => '', 'menu_id' => '', 'menu_class' => '', 'add_li_class' => '', 'link_class' => '' ]; public function __construct($themeLocation) { add_filter('nav_menu_css_class', [$this,'add_additional_class_on_li'], 1, 3); add_filter( 'nav_menu_link_attributes', [$this,'add_menu_link_class'], 1, 3 ); $this->args['theme_location'] = $themeLocation; } public function wrapWithTag($tagName){ $this->args['container'] = $tagName; return $this; } public function setMenuID($id) { $this->args['menu_id'] = $id; return $this; } public function setMenuClass($class) { $this->args['menu_class'] = $class; return $this; } public function setListClass($class) { $this->args['add_li_class'] = $class; return $this; } public function setLinkClass($class) { $this->args['link_class'] = $class; return $this; } public function showMenu() { return wp_nav_menu($this->args); } function add_additional_class_on_li($classes, $item, $args) { if(isset($args->add_li_class)) { $classes[] = $args->add_li_class; } return $classes; } function add_menu_link_class( $atts, $item, $args ) { if (property_exists($args, 'link_class')) { $atts['class'] = $args->link_class; } return $atts; } } <?php echo preg_replace( '#<li[^>]+>#', '<li class="col-sm-4">', wp_nav_menu( array( 'menu' => $nav_menu, 'container' => false, 'container_class' => false, 'menu_class' => false, 'items_wrap' => '%3$s', 'depth' => 1, 'echo' => false ) ) ); ?> 您可以简单地使用 wp_nav_menu_items 来过滤导航菜单的 HTML 列表内容。显示导航菜单 wp_nav_menu( array( 'theme_location' => 'parimary', 'container' => 'ul', 'menu_class'=> 'nav col-12 col-md-auto mb-2 justify-content-center mb-md-0', 'add_li_class' => 'your-class-name1 your-class-name-2', ) ); 菜单注册 function thesportworship_register_menus(){ register_nav_menus( array( 'primary' => __( 'Main Menu', 'thesportworship' ), ) ); } add_action( 'after_setup_theme', 'thesportworship_register_menus', 0 ); 应用过滤器 function add_additional_class($classes, $item, $args){ if(isset($args->add_li_class)){ $classes[] = $args->add_li_class; } return $classes; } add_filter('nav_menu_css_class', 'add_additional_class', 1, 3); 对我来说正确的解决方案是Zuan解决方案。请注意将 isset 添加到 $args->add_li_class ，但是如果您没有在所有 Notice: Undefined property: stdClass::$add_li_class 函数中设置该属性，则会得到 wp_nav_menu() 。这是对我有用的功能： function add_additional_class_on_li($classes, $item, $args) { if(isset($args->add_li_class)) { $classes[] = $args->add_li_class; } return $classes; } add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3); // 从主菜单中删除翻译 function wpdocs_channel_nav_class($classes, $item, $args){ { if ('primary' === $args->theme_location) { $classes[] = "notranslate"; } return $classes; } add_filter('nav_menu_css_class', 'wpdocs_channel_nav_class', 10, 4); 这是您轻松将新类添加到菜单包装的现有类数组中的方法这就是我将WordPress的MainMenu和类添加到li中的方法。 <?php $defaults = array( 'menu' => 'mainmenu', 'container' => false, 'fallback_cb' => 'wp_page_menu', 'items_wrap' => '<ul class="navbar-nav" id="myTab">%3$s</ul>', 'add_li_class' => 'nav-item', 'theme_location' => 'mainmenu' ); wp_nav_menu( $defaults ); ?> 在functions.php中使用此代码 function li_new_class($classes, $item, $args) { if(isset($args->add_li_class)) { $classes[] = $args->add_li_class; } return $classes; } add_filter('nav_menu_li_class', 'li_new_class', 1, 3); 这是一种非常简单的方法，可以轻松调用 “li” calss 和“任何类”替换。只需按照说明操作即可。在导航区域使用此代码。 <?php $consult_menu = wp_nav_menu(array( 'theme_location' => 'topmenu', 'menu_id' => 'menu', 'menu_class' => 'navbar-nav m-auto', 'echo' => false ) ); $consult_menu = str_replace('menu-item', 'nav-item', $consult_menu); echo $consult_menu; ?> 然后在浏览器上检查您的代码。找到 wp 默认类并替换 "str_replace("default_class_here","new_li_class_here",$consult_menu); | 注意： $consult_menu这是我的主题名称，您可以在这里使用任何名称。创建自定义步行者类 class Custom_Menu_Walker extends Walker_Nav_Menu { function start_lvl( &$output, $depth = 0, $args = null ) { // Add custom class to the <ul> at this level $indent = str_repeat("\t", $depth); $output .= "\n$indent<ul class=\"sub-menu-level-$depth\">\n"; } function start_el( &$output, $item, $depth = 0, $args = null ) { // Add custom class to each <li> item $indent = ($depth) ? str_repeat("\t", $depth) : ''; $class_names = $value = ''; $classes = empty($item->classes) ? array() : (array) $item->classes; $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args)); $class_names = ' class="'.esc_attr($class_names).'"'; $output .= $indent.'<li id="menu-item-'.$item->ID.'"'.$value.$class_names.'>'; $atts = array(); $atts['title'] = ! empty( $item->title ) ? esc_attr( $item->title ) : ''; $atts['target'] = ! empty( $item->target ) ? esc_attr( $item->target ) : ''; $atts['rel'] = ! empty( $item->xfn ) ? esc_attr( $item->xfn ) : ''; $atts['href'] = ! empty( $item->url ) ? esc_attr( $item->url ) : ''; $atts = apply_filters('nav_menu_link_attributes', $atts, $item, $args); $attributes = ''; foreach ( $atts as $attr => $value ) { if ( ! empty( $value ) ) { $value = ('href' === $attr) ? esc_url( $value ) : esc_attr( $value ); $attributes .= ' ' . $attr . '="' . $value . '"'; } } $item_output = $args->before; $item_output .= '<a' . $attributes . '>'; $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after; $item_output .= '</a>'; $item_output .= $args->after; $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args); // You can add more customizations or classes as needed } function end_lvl( &$output, $depth = 0, $args = null ) { // Add custom closing tag for the <ul> at this level $indent = str_repeat("\t", $depth); $output .= "$indent</ul>\n"; } // Add this method to fix the compatibility issue function end_el( &$output, $item, $depth = 0, $args = null ) { // Add custom closing tag for the <li> item $output .= "</li>\n"; } } 然后使用它 <?php wp_nav_menu(array('theme_location' => 'main-menu', 'walker' => new Custom_Menu_Walker())) ?> 此自定义步行器还指示菜单列表的深层，例如“子菜单级别 0”等等... 您无法非常轻松地将类直接添加到 LI，但是有什么理由不以稍微不同但同样具体的方式（通过其父 ul）来定位它们？您可以使用 menu_class 和 menu_id 参数（附加到 LI 的 UL 父级）设置菜单的类或 ID，然后通过 CSS 以这种方式定位 li，如下所示： <?php wp_nav_menu('menu_id=mymenu'); ?> 对于 CSS： ul#mymenu li { /* your styles here */ } 编辑：在 2013 年撰写本文时，这是添加它的最简单方法，但此后的更新添加了直接在管理导航编辑器中添加 CSS 类的功能。有关详细信息，请参阅更多最近的答案。

wordpress wordpress-theming wp-nav-walker wp-nav-menu-item

回答 16 投票 0

以这种方式循环销售价格是个好主意吗？或者不是首选什么？

循环/price.php 我尝试了这个并且有效，但不确定这是不是好方法 get_price_html() ) : ?> 循环/price.php 我尝试了这个并且有效，但不确定这是不是好方法 <?php if ( $price_html = $product->get_price_html() ) : ?> <?php add_filter( 'woocommerce_format_sale_price', 'test_loop_price', 10, 3 ); ?> <span class="price"><?php echo $price_html; ?></span> <?php endif; ?> 是的，这是一个坏主意，因为这不是正确的方法......显然，您正在使用名为 test_loop_price() 的自定义函数，并且您没有在问题中提供该函数的代码。首先从 loop/price.php 模板文件中删除您的自定义代码。然后，您需要在该函数内定位 WooCommerce 产品循环，例如： add_filter( 'woocommerce_format_sale_price', 'test_loop_price', 10, 3 ); function test_loop_price( $price, $regular_price, $sale_price ) { global $woocommerce_loop, $product; if ( ( is_product() && isset($woocommerce_loop['name']) && empty($woocommerce_loop['name']) ) ) { return $price; } ## Here below come your existing code ## return $price; } Code goes in functions.php file of your child theme (or in a plugin). Tested and works.

wordpress woocommerce wordpress-theming hook-woocommerce woocommerce-theming

回答 1 投票 0

徽标调整大小 - 移动版

我正在尝试仅在移动版本上更改我的网站（www.skyrox.pl）上的徽标大小。我正在尝试使用这段代码，但它似乎不起作用。 @media（最大宽度：360px）{ .header-main .logo ...

css wordpress image mobile wordpress-theming

回答 1 投票 0

我需要一个功能，在三个帖子后给我添加，然后在四个帖子后给我添加第五个

我需要一个功能，在三个帖子之后给我我的添加，然后在四个帖子之后给我第五个添加，然后在八个帖子之后给我新的添加，然后在中间有一个大横幅，然后再次相同的场景...

wordpress wordpress-theming custom-wordpress-pages

回答 2 投票 0

更改 Wordpress RSS feed 的默认 URL

我的客户希望在他们的网站上有一个 URL 为 /feed 的页面。不幸的是，Wordpress RSS feed 的默认 URL 是 /feed。有什么方法可以将 rss feed 从 /feed 移动到 /