如何在类别编辑页面中添加自定义颜色域?

时间:2020-07-21 作者:ralphjsmit

我正在构建Wordpress主题,目前正在完成category.php 页对于此页面,我希望用户选择两种颜色(背景色和标题/文本颜色),并在category.php

我在互联网上搜索了一些如何做到这一点的例子,但我只找到了一些没有解释的代码片段(example). 我还遇到了一些关于自定义字段的函数在Wordpress中被弃用的情况。

有人能告诉我如何为每个类别添加两个颜色自定义字段,以及如何在主题中应用这些字段吗?或者给我指出Wordpress中自定义字段的指南?

我不想使用内联CSS,所以我认为我们应该使用wp_add_inline_styles 应用样式。所以说颜色1应该应用于.background 和颜色2至.title 对于每个不同的类别,我会在wp_add_inline_styles?

非常感谢!

1 个回复
最合适的回答,由SO网友:Antti Koskinen 整理而成

要添加自定义字段并将元数据保存/更新到术语,基本上需要使用这些操作挂钩。

custom fields html for new term
{$taxonomy}_add_form_fields

save custom field data for new term, get data from $_POST
created_{$taxonomy}

custom fields html for existing term
{$taxonomy}_edit_form_fields

save custom field data for existing term, get data from $_POST
edited_{$taxonomy}

Save / update term meta
add_term_meta()
update_term_meta()

Get term meta
get_term_meta()

你可以在这里看到如何使用这些挂钩的一般想法,https://wordpress.stackexchange.com/a/296767/144392

Use saved meta data

使用保存术语元数据的一种方法是直接在类别模板上获取它,并将其作为内联样式添加到元素中。

// category.php
$color = sanitize_hex_color(get_term_meta(get_queried_object_id(), \'color\', true));
<h1<?php echo $color ? \' style="color: \' . $color . \';"\' : \'\'; ?>>Category title</h1>
另一种方法是将元数据作为内联样式添加到wp_add_inline_style() 在…上wp_enqueue_scripts 行动

// functions.php
function wpdocs_styles_method() {
    if ( is_category() ) {
        $id            = get_queried_object_id();
        $title         = sanitize_hex_color(get_term_meta($id, \'title_color\', true));
        $bg            = sanitize_hex_color(get_term_meta($id, \'bg_color\', true));
        $custom_css    = \'\';

        if ( $title ) {
            $custom_css .= ".title {color: {$color};}";
        }
        if ( $bg ) {
            $custom_css .= " .background {background-color: {$bg};}";
        }
        if ( $custom_css ) {
            // update the slug
            wp_add_inline_style( \'your-theme-styles-slug\', trim($custom_css) );         
        }
    }    
}
add_action( \'wp_enqueue_scripts\', \'wpdocs_styles_method\' );

Color picker

您可以使用wpColorPicker 脚本将文本输入字段转换为漂亮的颜色选择器。使用示例https://make.wordpress.org/core/2012/11/30/new-color-picker-in-wp-3-5/Color picker for posts and pages