En este, el noveno tutorial sobre el tema gratuito Zerif Lite, aprenderemos cómo cambiar el color de los círculos de las “habilidades”. Este componente se ha hecho muy popular en las secciones que presentan los servicios o los conocimientos de los miembros de una empresa, y por lo general incluyen un número o porcentaje, una barra de progreso (en ocasiones animada), junto con un título y una descripción breve para enumerar los puntos principales que se intentan destacar.

Zerif Lite incluye esta opción en el panel Quiénes somos, desde el cual se pueden añadir hasta cuatro características o habilidades, que se muestran del lado derecho de la sección. Las opciones de estilo están limitadas a los colores predeterminados del tema, pero con un par de modificaciones en el código podemos asignarle los colores de nuestra preferencia.

Zerif Lite - Colores predeterminados

El primer paso es crear un tema hijo, para que los cambios no se pierdan al actualizar el tema. Las instrucciones para crear un tema hijo se encuentran en esta entrada anterior.

Luego, en la carpeta del tema hijo, deberá crear una carpeta llamada /js/. En esa carpeta deberá crear un archivo que va a contener el código JavaScript necesario. Podemos llamar este archivo zerif-child.js. Abrimos este archivo con un editor de texto y pegamos el siguiente código:

jQuery(function() {
    jQuery(".skill1").knob({
        'max':100,
        'width': 64,
        'readOnly':true,
        'inputColor':' #FFFFFF ',
        'bgColor':' #222222 ',
        'fgColor':' #e96656 '
    });
    jQuery(".skill2").knob({
        'max':100,
        'width': 64,
        'readOnly':true,
        'inputColor':' #FFFFFF ',
        'bgColor':' #222222 ',
        'fgColor':' #34d293 '
    });
    jQuery(".skill3").knob({
        'max': 100,
        'width': 64,
        'readOnly': true,
        'inputColor':' #FFFFFF ',
        'bgColor':' #222222 ',
        'fgColor':' #3ab0e2 '
    });
    jQuery(".skill4").knob({
        'max': 100,
        'width': 64,
        'readOnly': true,
        'inputColor':' #FFFFFF ',
        'bgColor':' #222222 ',
        'fgColor':' #E7AC44 '
    });
});

Los valores fgColor son los predeterminados. Lo que deberá hacer aquí es editar los códigos hexadecimales con los correspondientes a los colores que desee. También puede cambiar el color de fondo del círculo (la porción que no está cubierta por el porcentaje seleccionado), reemplazando el valor de bgColor.

Por último, tendremos que darle al navegador la orden de que cargue el archivo personalizado zerif-child.js, y esto lo haremos desde el archivo functions.php. Allí, a continuación de la línea wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/custom.css', array( $parent_style ) ); pegaremos wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/zerif-child.js', array( 'jquery' ) );:

Con lo cual el código completo de nuestro archivo functions.php quedará de la siguiente manera:

<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 99);
function child_enqueue_styles() {
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/custom.css', array( $parent_style ) );
    wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/zerif-child.js', array( 'jquery' ) );
}
if ( get_stylesheet() !== get_template() ) {
    add_filter( 'pre_update_option_theme_mods_' . get_stylesheet(), function ( $value, $old_value ) {
         update_option( 'theme_mods_' . get_template(), $value );
         return $old_value; // prevent update to child theme mods
    }, 10, 2 );
    add_filter( 'pre_option_theme_mods_' . get_stylesheet(), function ( $default ) {
        return get_option( 'theme_mods_' . get_template(), $default );
    } );
}
}
?>

Veamos un ejemplo gráfico:

Zerif Lite - Colores personalizados

Aquí reemplazamos los colores predeterminados por un naranja, un azul verdoso, un fucsia y un verde oscuro, y también aclaramos el fondo a un gris. El código sería el siguiente:

jQuery(function() {
    jQuery(".skill1").knob({
        'max':100,
        'width': 64,
        'readOnly':true,
        'inputColor':' #FFFFFF ',
        'bgColor':' #666666 ',
        'fgColor':' #ff7200 '
    });
    jQuery(".skill2").knob({
        'max':100,
        'width': 64,
        'readOnly':true,
        'inputColor':' #FFFFFF ',
        'bgColor':' #666666 ',
        'fgColor':' #1990A4 '
    });
    jQuery(".skill3").knob({
        'max': 100,
        'width': 64,
        'readOnly': true,
        'inputColor':' #FFFFFF ',
        'bgColor':' #666666 ',
        'fgColor':' #ee1a56 '
    });
    jQuery(".skill4").knob({
        'max': 100,
        'width': 64,
        'readOnly': true,
        'inputColor':' #FFFFFF ',
        'bgColor':' #666666 ',
        'fgColor':' #438458 '
    });
});

También podemos experimentar con el color del número y el ancho del círculo, si modificamos los valores de los atributos inputColor y width respectivamente. Para el siguiente ejemplo, reemplazamos los valores del color por los mismos de la barra, y los valores del ancho por 90:

Tutorial original en inglés: How to change skill circles’ color in Zerif

Caribdis Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en Electromecánica, Periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web

Últimas entradas por Caribdis Diseño Web (ver todas)