我需要在自定义插件中写入什么,才能在编辑页面中添加自定义css字符串的开关?

时间:2017-07-03 作者:McOwen

我在我们的一个网站上创建了一个页面,其中包含一些自定义CSS片段,使其以非常现代的100%宽度样式显示like this, 与标准相反,网站主题允许的页面样式更受限制。

然而,这种风格的页面不会在整个网站上使用,因此获取新主题或编辑现有主题的子主题实际上不是一种选择。

相反,我想做的是创建一个简单的插件,在编辑页面中添加一个复选框,选中该复选框后,将在相关页面上加载此自定义CSS。我大致知道如何设置插件,但如何编写插件;

是否在编辑页面中添加复选框虽然我可以手动将这个自定义CSS添加到每个页面,但创建插件意味着将代码从一个站点传输到另一个站点要容易得多,也意味着将覆盖和丢失代码的风险降到最低。

2 个回复
SO网友:Self Designs

这段代码应该可以做到这一点。把这个放进你的functions.php 文件

function add_custom_css_meta_box()
{

    add_meta_box(
        \'custom-css\',
        \'Custom CSS\',
        \'post_meta_checkbox\',
        \'page\',
        \'side\'
    );
}
add_action(\'add_meta_boxes\', \'add_custom_css_meta_box\');

function post_meta_checkbox($post)
{
    $checkbox  = get_post_meta($post->ID, \'custom-css\', true);
    $checked    = false;

    if($checkbox == \'true\')
    {
        $checked = true;
    }

    ?>

    <p>
        <label>Tick this for custom CSS</label><br />
        <input type="checkbox" name="custom-css" id="custom-css" value="true" <?php if($checked == true) { echo \'checked\'; } ?>/>
    </p>

    <?php
}

function save_post_meta()
{
    update_post_meta(get_the_ID(), \'custom-css\', $_POST[\'custom-css\']);
}
add_action(\'save_post\', \'save_post_meta\');
当您想检查是否需要加载CSS时,请执行if语句并使用get_post_meta($post->ID, \'custom-css\', true) 并检查是否正确。将$post->ID替换为您获取页面ID的方式。您可以在page.php 文件

SO网友:Johansson

要创建将选项页添加到仪表板的插件,请执行以下操作this 我的回答。在提供的答案中,我详细解释了如何做到这一点。

现在,CSS部分。如果您按照我提到的方式构建插件,您将能够通过以下方式获得复选框的值:

get_my_custom_plugin_value(\'checkbox\');
当复选框实际选中时,您可以将其与条件一起使用,以输出一些CSS。可以将其添加到插件中以实现此目的:

if (get_my_custom_plugin_value(\'checkbox\')===\'on\'){
    add_action(\'wp_enqueue_scripts\',\'my_styles\');
    function my_styles(){
        wp_enqueue_style(\'style-name\',\'URL TO YOUR CSS FILE\');
    }
}
这就是你要找的。

结束

相关推荐

保护快捷代码、自定义JS和CSS不受主题更新影响

我是一名经验丰富的PHP开发人员,但对WordPress还是新手。我创建了一个站点,并添加了一些自定义JavaScript、CSS和一些短代码。我的CSS刚刚添加到样式中。css(当我点击侧栏中的外观->编辑器时的默认设置)和JavaScript的挂钩以及短代码都在我的主题函数中。php文件。很自然,主题更新了,我所有的更改都被删除了。谢天谢地,我保存了备份,所以我能够恢复我的自定义代码,但我真的希望我的所有自定义代码完全独立于主题。处理短代码、css和脚本/样式嵌入的正确方法是什么,这样主题更改就