更改 Wordpress TopBar 插件 @media 屏幕中的内容（文本）答案

【问题标题】：Change content (Text) in Wordpress TopBar Plugin @media screen更改 Wordpress TopBar 插件 @media 屏幕中的内容（文本）
【发布时间】：2018-07-28 03:21:01
【问题描述】：

我想针对某些屏幕尺寸（例如 iPad、平板电脑和移动设备）更改 Wordpress TopBar 插件中的实际内容。不太清楚为什么这不起作用，有人可以建议吗？

@media screen and (max-width: 767px) {
    #tpbr_box {
        content: "Register for 10% Discount";
    }

    #tpbr_calltoaction {
        content: "Yes Please!";
    }
}

tpbr_bx = 需要更改文本的顶部栏

tpbr_calltoaction = 需要更改文本的按钮

【问题讨论】：

是否有可用的过滤器来执行此操作？ Gettext 过滤器可能适用于这些标题。
过滤器是指插件中的短代码吗？如果是这样，那么没有。您可以在此处查看网站 www.thailandpoolshop.com
呃不，WordPress 过滤器，平台的核心元素之一。查看网站不会告诉我任何需要查看插件源代码的信息。插件的下载地址是什么？
我查看了该插件的源代码，如果不破解核心代码，您将无法操纵消息文本。您可以随时 fork 代码并创建自己的插件版本；）
这里有一个想法，你可以操纵它来做你想做的事。 blog.escapecreative.com/how-to-replace-text-with-css你可以使用一些jQuery/javascript来删除当前内容并重新设置。

标签： css wordpress plugins media-queries

【解决方案1】：

感谢安德鲁！它使用以下方法更改为正确的文本：

@media screen and (max-width: 767px) {
#tpbr_box,
#tpbr_calltoaction {
    visibility: hidden;
    position: relative;
}

#tpbr_box:after {
    visibility: visible;
    content: "Register for 10% Discount" !important;
}

#tpbr_calltoaction:after {
    visibility: visible;
    content: "Yes Please!" !important;
}
}

现在唯一的问题是它没有继承原来的旧 CSS 格式。如：

#tpbr_calltoaction {
    background: #76b51b !important;
    font-weight: 600 !important;
}

#tpbr_calltoaction:hover {
    background: #01ace4 !important;
}

我想我可以轻松地将这些添加到 :after 部分中。

现在最后一个问题是按钮 tpbr_calltoaction 出现在文本 tpbr_box 上方。为什么会这样做？当然正常的做法是按照它们在代码中的顺序来做，哈哈。

【讨论】：