首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在wordpress中自定义wp-bootstrap-navwalker

在WordPress中自定义wp-bootstrap-navwalker可以通过以下步骤实现:

  1. 创建一个新的文件夹,命名为"wp-bootstrap-navwalker",并在该文件夹中创建一个名为"wp_bootstrap_navwalker.php"的文件。
  2. 打开"wp_bootstrap_navwalker.php"文件,并将以下代码复制粘贴到文件中:
代码语言:php
复制
<?php
class WP_Bootstrap_Navwalker extends Walker_Nav_Menu {
    public function start_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"dropdown-menu\">\n";
    }
 
    public function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
        $indent = ($depth) ? str_repeat("\t", $depth) : '';
 
        $li_attributes = '';
        $class_names = $value = '';
 
        $classes = empty($item->classes) ? array() : (array) $item->classes;
        $classes[] = ($args->walker->has_children) ? 'dropdown' : '';
        $classes[] = ($item->current || $item->current_item_ancestor) ? 'active' : '';
        $classes[] = 'menu-item-' . $item->ID;
 
        $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
        $class_names = ' class="' . esc_attr($class_names) . '"';
 
        $id = apply_filters('nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args);
        $id = strlen($id) ? ' id="' . esc_attr($id) . '"' : '';
 
        $output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';
 
        $attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
        $attributes .= !empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : '';
        $attributes .= !empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
        $attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';
 
        $attributes .= ($args->walker->has_children) ? ' class="dropdown-toggle" data-toggle="dropdown"' : '';
 
        $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 .= ($args->walker->has_children) ? ' <b class="caret"></b></a>' : '</a>';
        $item_output .= $args->after;
 
        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
    }
 
    public function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
        if (!$element) {
            return;
        }
 
        $id_field = $this->db_fields['id'];
 
        if (is_object($args[0])) {
            $args[0]->has_children = !empty($children_elements[$element->$id_field]);
        }
 
        parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }
}
?>
  1. 保存并关闭"wp_bootstrap_navwalker.php"文件。
  2. 在主题的functions.php文件中添加以下代码,以将自定义的导航菜单样式应用到主题中:
代码语言:php
复制
require_once get_template_directory() . '/wp-bootstrap-navwalker/wp_bootstrap_navwalker.php';

function register_my_menu() {
    register_nav_menu('primary', 'Primary Menu');
}
add_action('after_setup_theme', 'register_my_menu');
  1. 在主题的header.php文件中找到导航菜单的代码,并将其替换为以下代码:
代码语言:php
复制
<?php
wp_nav_menu(array(
    'theme_location' => 'primary',
    'depth' => 2,
    'container' => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id' => 'bs-example-navbar-collapse-1',
    'menu_class' => 'nav navbar-nav',
    'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
    'walker' => new WP_Bootstrap_Navwalker(),
));
?>
  1. 保存并关闭header.php文件。

现在,你已经成功地在WordPress中自定义了wp-bootstrap-navwalker。这将允许你使用Bootstrap样式的导航菜单,并根据需要进行自定义。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

何在 WordPress 嵌入 iFrame

何在 WordPress 嵌入 iFrame Iframe 是一种将网页嵌入到另一个页面的内容的方法。这是通过使用 HTML 元素、外部网站的 URL 以及窗口在您的网站上的外观参数来实现的。...如何在 WordPress 中使用 iframe:构建 iframe 的方法有多种,就像您希望在许多实例中使用其中一种一样。...我们将通过一种最常见的方式将 iframe 添加到您的 WordPress 网站。 手动将 iFrame 添加到 WordPress 页面: 将 iframe 添加到页面只需要一行代码。...语法: 嵌入 WordPress 页面的步骤: 第 1 步:转到您希望 iframe 出现的页面。...第 3 步:在要嵌入的页面的编辑器插入 iframe 标记。 注意:需要注意源 URL 的一些限制。首先,iframe 可能只显示来自与您使用相同超文本传输​​协议 (HTTP) 的网站的内容。

2.3K51
  • 何在 WordPress 创建联系表格?

    我们可以通过使用网站上的 WordPress 插件添加联系表格来做到这一点。因此,这将为你的访问者提供一种与你联系的方式,当他们需要帮助或有什么要分享的时候。 让我们看看如何创建联系表格。...通过 3 个步骤创建联系表: 第 1 步:在 WordPress 安装一个有助于创建表单的插件。因此,要安装插件,请转到你的 WordPress 仪表板。 单击仪表板的插件选项。...在搜索框搜索 Ninja forms。你可以选择任何联系人插件。 单击安装,然后在搜索到的插件上激活。 最后,插件已安装。 新选项将在你的仪表板上显示为 Ninja Forms。...弹出窗口将出现并选择你在 Ninja Form 创建的表单。 然后单击“插入”,表单将插入到你的页面。 点击发布按钮。 最后,查看你的联系我们页面。你的表格可以使用了。...这就是你在 WordPress 创建联系表单的方法。

    2.8K21

    何在 WordPress 创建登录页面

    使用 WordPress 创建登录页面 在本文中,我们将学习如何使用Elementor创建一个简单的登录页面。Elementor是一个页面构建器(可视化编辑器),用于开发漂亮的页面和网站。...第 1 步:获取你的 WordPress 网站 第一步是购买你的域名和主机。从托管平台的控制面板安装 WordPress。登录到你的 WordPress 帐户,这将打开你的仪表板。...该插件使用 Elementor、Beaver Builder、Brizy 和 WordPress 默认编辑器 Gutenberg 等页面构建器,可以将许多漂亮的预建网站模板作为单独的页面模板访问。...第 4 步:自定义和添加内容 根据你的要求开始自定义页面。Elementor 带有拖放功能,可以很容易地自定义任何模板。完成所有更改后,单击 PUBLISH 保存所做的更改。请详细查看可用的选项。

    2.8K21

    整合 Google 自定义搜索到 WordPress

    什么是 Google 自定义搜索 Google 自定义搜索可以人让你在一个网站或一堆网站中进行搜索。...我们可以利用 Google 自定义搜索创建符合自己的需求和兴趣的搜索引擎,并可以在我们自己的网站显示这些结果,Google 自定义搜索可以邀请朋友来一构建。...整合 Google 自定义搜索到 WordPress 整合 Google 自定义搜索到 WordPress ,可以减少数据库查询,因为搜索结果是 Google 提供的,WordPress 不用再去数据库搜索了...此外还能够进行更加全面的搜索,WordPress 目前只能搜索日志。另外还可以在搜索结果绑定 Google Adsense 赚钱。 那么如何整合 Google 自定义搜索到 WordPress 。...在 WordPress 创建一个页面,然后再在导航栏设置为不显示该页面,如果你是用 wp_list_pages() 这个函数输出页面的,你可以使用 exclude 这个参数把刚才创建的页面剔除出去。

    37420

    何在你的 wordpress 网站添加搜索框

    摸鱼划水的小伙伴,请点击【摸鱼学习交流群】 免费且实用的 前端刷题(面经大全)网站:点击跳转到网站 博主前些天发现了一个巨牛巨好用的刷题网站,忍不住分享一下给大家,点击跳转到网站 如果你的主题不提供在你的 WordPress...网站包含搜索框的功能,请按照以下步骤了解如何做到这一点: 转到你的仪表板并单击 Plugins 按钮。...例如,如果你已启用用户搜索页面但你想从搜索结果中排除某些页面,你可以在排除部分执行此操作。 同样,你还可以探索 Customize、AJAX 和 Options 部分来自定义你的搜索栏。...当你在 Ivory Search 表单工作时,将鼠标悬停到 Settings 选项(在 Ivory Search 下仪表板的左侧面板上),以设置搜索框的位置。这可以在页眉或页脚或水平菜单等。...菜单搜索部分可用的选项是特定于主题的。 在“Settings”部分,你可以设置搜索框的外观。

    3.9K31

    何在React Native添加自定义字体

    在这篇指南中,我们将探索使用 Google Fonts 在 React Native 应用添加自定义字体的方法。...让我们看看输出: 在Expo中使用自定义字体的React Native 在这一部分,我们将学习如何在Expo中使用自定义字体。...在我们的模拟器中看看这是什么样子: 使用自定义字体 假设你正在构建一个个人的 React Native 项目,并且你得到了一些自定义字体,这些字体并不在 Expo 支持的 Google 字体库。...性能影响:在React Native应用程序添加自定义字体时,请注意它们的文件大小(以kb/mb为单位)。大型字体文件可能会显著增加应用程序的加载时间,特别是在加载自定义字体时。...总结 本文所探讨的,将自定义字体集成到React Native应用程序不仅仅是技术上的提升,更是一种改善用户体验的策略性方法。

    45910

    Ryu:如何在LLDP添加自定义LLDPDU

    为实现LLDP数据单元的拓展,本文将以Ryu控制器为例,介绍如何添加自定义的LLDPDU,从而满足多种业务的需求。 ?...添加自定义LLDPDU其实只需修改ryu/lib/packet/lldp.py即可,但是由于该文件仅定义了LLDP的相关类,如何使用还需要其他文件去调用,所以还需要其他的修改步骤。...HB', self.typelen, self.subtype) +self.vport_id 总结 LLDP协议可添加自定义TLV格式的特性,使其可以灵活地被修改,进而应用到不同的业务场景,十分方便...本文就以Ryu控制器为例,介绍了如何添加自定义LLDPDU的详细流程,希望对读者有一定的帮助。...此外,为计算时延,还可以通过switches模块的PortDatak类的发送时间戳来实现,无需修改LLDP数据包格式。如何在Ryu完成时延测试的内容将在下一篇文章详细介绍,敬请关注。

    2.7K60

    何在 Swift 自定义操作符

    前言 很少有Swift功能能和使用自定义操作符的一样产生如此多的激烈辩论。虽然有些人发现它们真的有用,可以降低代码冗余,或实施轻量级语法扩展,但其他人认为应该完全避免它们。...爱它们或者恨它们 —— 无论哪种方式都有一些真正有趣的事情,我们可以与自定义操作一起做 ——无论我们是否重载现有的东西或定义自己的东西。...本周,让我们来看看可以使用自定义操作符的一些情况,以及使用它们的一些优点。 数字容器 有时我们定义了实质上只是容器的值类型其容纳着更加原始的值。...在此处 -= ,操作符的左侧是一个 inoiut 参数,这是我们要修改的值。...在这样的情况下,它非常常见,必须在二维值上进行数学操作 —— CGPoint,CGSize 和 CGVector。

    1.2K20

    何在Keras创建自定义损失函数?

    在本教程,我们将使用 TensorFlow 作为 Keras backend。backend 是一个 Keras 库,用于执行计算,张量积、卷积和其他类似的活动。...这种用户定义的损失函数称为自定义损失函数。 Keras 自定义损失函数可以以我们想要的方式提高机器学习模型的性能,并且对于更有效地解决特定问题非常有用。...我们可以通过编写一个返回标量并接受两个参数(即真值和预测值)的函数,在 Keras 创建一个自定义损失函数。...在缺省损失函数,实际值和预测值的差值不除以 10。 记住,这完全取决于你的特定用例需要编写什么样的自定义损失函数。在这里我们除以 10,这意味着我们希望在计算过程降低损失的大小。...你可以查看下图中的模型训练的结果: epoch=100 的 Keras 模型训练 结语 ---- 在本文中,我们了解了什么是自定义损失函数,以及如何在 Keras 模型定义一个损失函数。

    4.5K20
    领券