时间戳

首页 > 解决方案 > 如何将自定义 CSS 类添加到 Wordpress 的 Astra 主题的主菜单按钮

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

问题描述

我需要在我的 Wordpress 网站上的主菜单按钮中添加一个特定的 CSS 类。我在我的网站上使用 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”</p>

链接到我的网站

编辑：

感谢 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 文件中它似乎可以工作，但并不完全符合我的预期。使用检查器，我可以看到它已将类“wpmem_loginout”添加到现有类“button.ast-custom-button”的末尾，所以我最终得到了 class="ast-custom-button wpmem_loginout"。

任何人都可以建议对删除旧类的代码进行编辑吗？

谢了，兄弟们

标签： jquerycsswordpress

解决方案

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扩展名的文件并添加上面的代码。然后使用您刚刚创建.zip的文件创建存档，.php并以通常的方式将其上传到 WordPress。

推荐阅读