Wordpress

Cargar estilos propios en WordPress

CMS Wordpress
Si te gusta, compártelo 🙂Share on Facebook
Facebook
Share on Google+
Google+
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

Cómo podemos cargar estilos propios en el diseño de nuestros temas o plantillas

A la hora de cambiar el css de un tema o plantilla simpre podemos editar la hoja de estilo del mismo, normalmente en la hoja style.css del tema. Para ello buscaremos la opción Apariencia>Editor:
Edición de temas y plugins

Una vez hecho esto podemos acceder al fichero css del tema como se muestra en la imagen siguiente:

Hoja de estilo del tema

Esta opción tiene no obstante sus inconvenientes, por ejemplo, si el tema es actualizado todas los cambios que realizaramos en este fichero se perderían. También sería difícil encontrar con el tiempo todos los cambios que realizamos sobre la hoja de estilos del tema.

A partir de aquí tenemos dos soluciones:

  1. Comprobar si entre las opciones de la plantilla nos da la opción de introducir nuestro código css
  2. Crear una hoja de estilos propia y añadirla al tema

Para esta segunda opción (la que más me convence) lo que hay que hacer es editar el fichero functions.php. Lo encontraremos como ya dijimos antes en Apariencia>Editor.

Una vez editado el fichero functions.php deberemos añadir al final del mismo estas líneas:


// Carga de hojas de estilo
function theme_styles()  
{ 

    // Registro estilo con el nombre “mi-estilo”
    // get_template_directory_uri() devuelve el directorio del tema utilizado actualemente
    wp_register_style( 'mi-estilo', get_template_directory_uri() . '/css/mi_estilo.css' );
    // invoco al estilo para su uso
    wp_enqueue_style( 'mi-estilo' );

}
add_action('wp_enqueue_scripts', 'theme_styles');

El problema de modificar el fichero del tema functions.php es que esta información se puede perder ante una actualización de dicho template. Para ello recomiendo la utilización de un plugin maravilloso que nos corta de raíz este problema: Code Snippets. Este plug-in nos permite la personalización de functións.php sin tener que editarlo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.