CSS adicional en WordPress

CSS adicional en WordPressUna vez en el área de administración de nuestro WordPress, basta con acceder a Apariencia > Personalizar para disponer de la opción "CSS adicional".

Allí podemos insertar estilos y reglas de CSS que se aplicarán a la plantilla que estemos usando. Eso sí, el selector (clase, identificador o elementos HTML) debe estar presente en aquélla. Si añadimos la clase "entry-content" y establecemos determinadas propiedades, tal clase debe ser utilizada por la plantilla que tengamos activa.

El método que nos ofrece WordPress es bastante práctico y directo pero la "caja" de inserción es pequeña y, a pocas reglas que añadamos, la verdad es que no se controlan de forma rápida. Si además vamos a realizar numerosas adiciones o modificaciones de la hoja de estilos, es preferible añadir una nueva que cumpla la misma función que el "CSS adicional". Para ello, vamos a utilizar la función wp_enqueue_style.

Lo primero de todo será crear nuestra hoja de estilos («estilos-personales.css» en nuestro ejemplo) y subirla al servidor (normalmente dentro de la carpeta del tema).

En segundo lugar, insertaremos el siguiente código bien en el archivo «functions.php» del tema, bien en nuestro plugin personal:

add_action( 'wp_enqueue_scripts', 'custom_enqueue_styles');
function custom_enqueue_styles() {
wp_enqueue_style( 'estilos-personales', get_template_directory_uri() . '/cod-personal/estilos-personales.css' );
}

Argumentos:

  • El primer argumento ($handle) es el nombre de la hoja de estilo. Obligatorio. Debe ser único.
  • El segundo argumento ($src) es también obligatorio y debemos introducir la URL de la hoja de estilos que vamos a añadir. Puede ser una URL absoluta o una relativa al directorio raíz de WordPress. En mi caso, he utilizado get_template_directory_uri() más la ruta hasta el archivo que he colocado dentro de la carpeta «cod-personal».
  • El resto de argumentos ($deps,  $ver y $media) son opcionales.

Propiedades en la hoja de estilos (background, height, position, width, etc):

  • Si no existe, se aplicará sin problemas.
  • Si existe, entonces es conveniente usar «!important» (debe ir siempre al final de la declaración, esto es, inmediatamente antes del punto y coma finales)

Deja una respuesta

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