En este tutorial aprenderás cómo agregar un campo personalizado de color a las categorías de WordPress y cómo utilizar ese color para cambiar el fondo del badge de las categorías en los posts de Elementor.
Agregar campo personalizado de color a las categorías
Para agregar un campo personalizado de color a las categorías, copia y pega el siguiente código en el archivo functions.php de tu tema de WordPress:
// Agregar campo personalizado de color a las categorías
function add_category_color_field() {
// Agregar campo personalizado de color
?>
<div class="form-field">
<label for="category-color"><?php _e('Color', 'textdomain'); ?></label>
<input type="text" name="category_color" id="category-color" class="color-field" value="">
</div>
<?php
}
add_action('category_add_form_fields', 'add_category_color_field', 10, 2);
// Guardar campo personalizado de color de categoría
function save_category_color_field($term_id) {
if (isset($_POST['category_color'])) {
$category_color = sanitize_hex_color($_POST['category_color']);
update_term_meta($term_id, 'category_color', $category_color);
}
}
add_action('created_category', 'save_category_color_field', 10, 2);
add_action('edited_category', 'save_category_color_field', 10, 2);
// Mostrar campo personalizado de color de categoría
function edit_category_color_field($term) {
$category_color = get_term_meta($term->term_id, 'category_color', true);
?>
<tr class="form-field">
<th scope="row" valign="top"><label for="category-color"><?php _e('Color', 'textdomain'); ?></label></th>
<td>
<input type="text" name="category_color" id="category-color" class="color-field" value="<?php echo esc_attr($category_color); ?>">
</td>
</tr>
<?php
}
add_action('category_edit_form_fields', 'edit_category_color_field', 10, 2);
// Actualizar campo personalizado de color de categoría
function update_category_color_field($term_id) {
if (isset($_POST['category_color'])) {
$category_color = sanitize_hex_color($_POST['category_color']);
update_term_meta($term_id, 'category_color', $category_color);
}
}
add_action('edited_category', 'update_category_color_field', 10, 2);
Con esta función, se agregará un campo de selección de color en la página de creación y edición de categorías en WordPress.
Este código se encarga de agregar un campo personalizado de color a las categorías, en este campo introduciremos el código del color correspondiente, por ejemplo: #000 (negro), debes añadir o editar el color para cada categoría y luego utilizaremos ese color para cambiar el fondo del badge de las categorías del post de Elementor.
Ahora solo necesitamos agregar otro snippet en archivo functions.php
//agregando colores a post de elementor
function add_custom_css() {
echo '<style type="text/css">';
$categories = get_categories();
foreach ($categories as $category) {
$color = get_term_meta($category->term_id, 'category_color', true);
if ($color) {
echo '.category-' . $category->slug . ' .elementor-post__badge { background-color: ' . $color . '!important; }';
}
}
echo '</style>';
}
add_action('wp_head', 'add_custom_css');
Este código se encarga de tomar el campo de color seleccionado para cada categoría y luego utilizarlo para cambiar el fondo del badge de las categorías del post de Elementor.
Agregar código Snippet mediante un plugin
Si no te sientes cómodo agregando código a través de «Functions.php», puedes utilizar un plugin para agregar código Snippet.
En conclusión, agregar color a las categorías de WordPress y cambiar el fondo del badge de las categorías del widget de publicaciones de Elementor puede ser una tarea sencilla gracias a las funciones y acciones que WordPress nos brinda. Con la ayuda de algunos snippets de código, podemos agregar un campo personalizado de color a las categorías y luego aplicar ese color a cada categoría utilizando una función para imprimir un estilo CSS global. Este proceso puede mejorar la estética y la organización de nuestro sitio web, haciendo que sea más fácil para los usuarios identificar las diferentes categorías de publicaciones. Esperamos que este artículo haya sido útil para entender cómo agregar color a las categorías de WordPress y cambiar el fondo del badge de las categorías del widget de publicaciones de Elementor.
