删除WordPress gutenberg 按钮默认样式

gmxoilav  于 2023-04-11  发布在  WordPress
关注(0)|答案(1)|浏览(114)

尝试使用WordPress + gutenberg 和Tailwind建立一个网站。
它包括了一堆蹩脚的内联样式在每一个单一的按钮,我不想不断地争取覆盖这些与!重要的或具体的战斗。
举例来说...

<style id='global-styles-inline-css' type='text/css'>
...
...

a:where(:not(.wp-element-button)) {
    text-decoration: underline;
}

.wp-element-button, .wp-block-button__link {
                background-color: #32373c;
                border-width: 0;
                color: #fff;
                font-family: inherit;
                font-size: inherit;
                line-height: inherit;
                padding: calc(0.667em + 2px) calc(1.333em + 2px);
                text-decoration: none;
}

如何阻止WordPress将这些垃圾注入到您的主题中?

6yt4nkrj

6yt4nkrj1#

为了避免处理内联样式和特殊性之争,您可以取消注册或退出默认的WordPress gutenberg 样式,然后使用您自己的Tailwind CSS类来设置按钮的样式。
以下是如何将默认的 gutenberg 样式移出队列:
将以下代码添加到主题的functions.php文件中:

function remove_gutenberg_styles() {
    wp_dequeue_style('wp-block-library');
    wp_dequeue_style('wp-block-library-theme');
}

add_action('wp_enqueue_scripts', 'remove_gutenberg_styles', 100);

此代码将删除默认的 gutenberg 样式,因此它们不会干扰Tailwind CSS类。
然后,在删除默认样式后,您可以使用Tailwind CSS类创建自己的按钮样式。将这些样式添加到样式表或主题中的<style>标签中。

/* Custom button styles using Tailwind CSS */
.custom-button {
    @apply bg-gray-800;
    @apply border-none;
    @apply text-white;
    @apply font-inherit;
    @apply text-base;
    @apply leading-inherit;
    @apply py-2 px-4;
    @apply no-underline;
}

.custom-button:hover {
    @apply bg-gray-700;
}

最后,当您使用WordPress gutenberg 编辑器向您的网站添加按钮时,请将自定义类custom-button应用于按钮。这将根据Tailwind CSS类设置按钮的样式,并且您不必处理内联样式或特定性战斗。

相关问题