jquery - 如何将自定义 CSS 类添加到 Astra Theme for Wordpress 的主菜单按钮

标签 jquery css wordpress

<分区>


关闭 3 年前

我需要将特定的 CSS 类添加到我的 Wordpress 网站上的主菜单按钮。我在我的网站上使用 Astra 主题,在 Header > Primary Menu > Last Item in Menu 下 - 我选择使用一个按钮。我将该按钮用作登录按钮,我正在尝试使用 WPmembers 插件设置动态登录/注销链接。幸运的是,WPmembers 具有处理动态登录/注销链接的功能。为了使用它,菜单项必须具有正确的 CSS 类。

就目前而言,我看不到用于编辑按钮默认 CSS 类的选项(它不在 WP-Admin > Appearance > Menus 下(如果这是一个普通的菜单项,它就会如此)。

我已经使用了开发人员检查器并且按钮当前有一个 CSS 类(只是不正确)。我可以通过在 Wordpress 上添加自定义 CSS 来更改它吗?我在谷歌上搜索了一下,找到了一些关于使用 JQUERY .addclass("your_custom_class_here") 的文章。我不知道 JQUERY 是什么,并尝试使用自定义 CSS 编辑器,但它似乎无法识别 .addclass 函数。

有人有什么建议吗?非常感谢,盖伊

**按钮目前有一个类ast-custom-button * 我需要它是“wpmem_loginout”

link to my site here

编辑:

感谢 Andrey 提供此代码:

add_action('wp_head', 'login_out_button', 10);

function login_out_button() { ?>
<script>
jQuery(document).ready(function(){
jQuery("button.ast-custom-button").addClass("wpmem_loginout");
});
</script>
<?php
}

问题:

我已将代码添加到 my-custom-function.php 文件中 它似乎有效,但并不完全符合我的预期。 使用 Inspector,我可以看到它已将类“wpmem_loginout”添加到现有类“button.ast-custom-button”的末尾,因此我得到了 class="ast-custom-button wpmem_loginout"。

谁能建议修改删除旧类的代码?

谢谢, 盖伊

最佳答案

jQuery 是一个 JavaScript 库,有多种方法可以将 JavaScript 代码添加到 WordPress。
其中之一是创建插件并向其添加 JavaScript 代码:

<?php
/**
 * Plugin Name: Extra Code
 * Plugin URI: http://www.myplugin.com/my-first-plugin
 * Description: Important codes
 * Version: 1.0
 */
add_action('wp_head', 'login_out_button', 10);

function login_out_button() { ?>
<script>
    jQuery(document).ready(function(){
        jQuery(".ast-custom-button")
            .addClass("wpmem_loginout")
            .removeClass("ast-custom-button");
    });
</script>
<?php
}

创建一个扩展名为.php 的文件并添加上面的代码。然后使用您刚刚创建的 .php 文件创建 .zip 存档,并以通常的方式将其上传到 WordPress。

关于jquery - 如何将自定义 CSS 类添加到 Astra Theme for Wordpress 的主菜单按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59240728/

上一篇:css - 如何使用 gulp-clean-css 编写一个新的 -min.css 文件而不是默认覆盖现有的 css 源文件?

下一篇:css - 子菜单顶部的 Max Mega Menu 白色三 Angular 形

相关文章:

javascript - 我怎样才能嵌入特定的推文但仍对其进行样式设置?

html - Div 内容比父级宽

javascript - 如何将 SmartyStreets LiveAddress 插件与动态加载的表单一起使用

css - Theron-Lite Theme - 如何加宽页面宽度

javascript - jquery 数据表页面上未显示列选择器

javascript - 滚动时事件类未切换

javascript - Select2 在加载了 JQuery 的元素上

html - 删除选择框中的空间

jquery - 使用注入(inject)的 jquery 脚本创建可拖动的 div

php - 在 Woocommerce 3.3 中获取购物车项目删除 URL