¿Cómo registro o encolo un archivo CSS personalizado en WordPress?
Buen día.
Estoy usando un tema de WordPress y quiero agregar mi propio CSS personalizado. He intentado agregar mi propia hoja de estilos separada después de todas las llamadas a hojas de estilos PHP en el archivo header.php. También intenté editar la hoja de estilos en Apariencia>Editor, e incluso agregué !important a TODOS mis estilos. Pero WordPress sigue sobrescribiendo mis estilos con la hoja de estilos predeterminada.
He leído un poco sobre registrar/encolar hojas de estilos en functions.wp-styles.php pero el código allí es chino básico para mí... No sé dónde agregar mi CSS...
Aquí está el código en la página functions.wp-styles.php: ¡Tu ayuda será muy apreciada!
<?php
/**
* API procedural de estilos BackPress.
*
* @package BackPress
* @since r79
*/
/**
* Muestra estilos que están en la cola o son parte de $handles.
*
* @since r79
* @uses do_action() Llama al hook 'wp_print_styles'.
* @global object $wp_styles El objeto WP_Styles para imprimir estilos.
*
* @param array|bool $handles Estilos a imprimir. Un array vacío imprime la cola,
* un array con un string imprime ese estilo, y un array de strings imprime esos estilos.
* @return bool True en éxito, false en fallo.
*/
function wp_print_styles( $handles = false ) {
if ( '' === $handles ) // para wp_head
$handles = false;
if ( ! $handles )
do_action( 'wp_print_styles' );
global $wp_styles;
if ( ! is_a( $wp_styles, 'WP_Styles' ) ) {
if ( ! did_action( 'init' ) )
_doing_it_wrong( __FUNCTION__, sprintf( __( 'Los scripts y estilos no deben registrarse o encolarse hasta los hooks %1$s, %2$s, o %3$s.' ),
'<code>wp_enqueue_scripts</code>', '<code>admin_enqueue_scripts</code>', '<code>init</code>' ), '3.3' );
if ( !$handles )
return array(); // No hay necesidad de instanciar si no hay nada.
else
$wp_styles = new WP_Styles();
}
return $wp_styles->do_items( $handles );
}
/**
* Agrega CSS extra.
*
* Funciona solo si la hoja de estilos ya ha sido agregada.
* Acepta un string $data que contiene el CSS. Si dos o más bloques de código CSS son
* agregados a la misma hoja de estilos $handle, se imprimirán en el orden
* en que fueron agregados, es decir, los estilos agregados después pueden redeclarar los anteriores.
*
* @since 3.3.0
* @see WP_Scripts::add_inline_style()
*/
function wp_add_inline_style( $handle, $data ) {
global $wp_styles;
if ( ! is_a( $wp_styles, 'WP_Styles' ) ) {
if ( ! did_action( 'init' ) )
_doing_it_wrong( __FUNCTION__, sprintf( __( 'Los scripts y estilos no deben registrarse o encolarse hasta los hooks %1$s, %2$s, o %3$s.' ),
'<code>wp_enqueue_scripts</code>', '<code>admin_enqueue_scripts</code>', '<code>init</code>' ), '3.3' );
$wp_styles = new WP_Styles();
}
return $wp_styles->add_inline_style( $handle, $data );
}
/**
* Registra un archivo de estilo CSS.
*
* @since r79
* @see WP_Styles::add() Para información adicional.
* @global object $wp_styles El objeto WP_Styles para imprimir estilos.
* @link http://www.w3.org/TR/CSS2/media.html#media-types Lista de tipos de medios CSS.
*
* @param string $handle Nombre de la hoja de estilos.
* @param string|bool $src Ruta a la hoja de estilos desde el directorio raíz de WordPress. Ejemplo: '/css/miestilo.css'.
* @param array $deps Array de handles de cualquier hoja de estilos de la que dependa esta hoja.
* (Hojas de estilos que deben cargarse antes de esta.) Pasa un array vacío si no hay dependencias.
* @param string|bool $ver String que especifica el número de versión de la hoja de estilos. Establece null para deshabilitar.
* Se usa para asegurar que la versión correcta se envíe al cliente independientemente del caching.
* @param string $media El medio para el cual esta hoja de estilos ha sido definida.
*/
function wp_register_style( $handle, $src, $deps = array(), $ver = false, $media = 'all' ) {
global $wp_styles;
if ( ! is_a( $wp_styles, 'WP_Styles' ) ) {
if ( ! did_action( 'init' ) )
_doing_it_wrong( __FUNCTION__, sprintf( __( 'Los scripts y estilos no deben registrarse o encolarse hasta los hooks %1$s, %2$s, o %3$s.' ),
'<code>wp_enqueue_scripts</code>', '<code>admin_enqueue_scripts</code>', '<code>init</code>' ), '3.3' );
$wp_styles = new WP_Styles();
}
$wp_styles->add( $handle, $src, $deps, $ver, $media );
}
/**
* Elimina un archivo CSS registrado.
*
* @since r79
* @see WP_Styles::remove() Para información adicional.
* @global object $wp_styles El objeto WP_Styles para imprimir estilos.
*
* @param string $handle Nombre de la hoja de estilos.
*/
function wp_deregister_style( $handle ) {
global $wp_styles;
if ( ! is_a( $wp_styles, 'WP_Styles' ) ) {
if ( ! did_action( 'init' ) )
_doing_it_wrong( __FUNCTION__, sprintf( __( 'Los scripts y estilos no deben registrarse o encolarse hasta los hooks %1$s, %2$s, o %3$s.' ),
'<code>wp_enqueue_scripts</code>', '<code>admin_enqueue_scripts</code>', '<code>init</code>' ), '3.3' );
$wp_styles = new WP_Styles();
}
$wp_styles->remove( $handle );
}
/**
* Encuela un archivo de estilo CSS.
*
* Registra el estilo si se proporciona src (NO sobrescribe) y lo encola.
*
* @since r79
* @see WP_Styles::add(), WP_Styles::enqueue()
* @global object $wp_styles El objeto WP_Styles para imprimir estilos.
* @link http://www.w3.org/TR/CSS2/media.html#media-types Lista de tipos de medios CSS.
*
* @param string $handle Nombre de la hoja de estilos.
* @param string|bool $src Ruta a la hoja de estilos desde el directorio raíz de WordPress. Ejemplo: '/css/miestilo.css'.
* @param array $deps Array de handles (nombres) de cualquier hoja de estilos de la que dependa esta hoja.
* (Hojas de estilos que deben cargarse antes de esta.) Pasa un array vacío si no hay dependencias.
* @param string|bool $ver String que especifica el número de versión, si tiene uno. Este parámetro
* se usa para asegurar que la versión correcta se envíe al cliente independientemente del caching, y por lo tanto debe incluirse
* si hay un número de versión disponible y tiene sentido para la hoja de estilos.
* @param string $media El medio para el cual esta hoja de estilos ha sido definida.
*/
function wp_enqueue_style( $handle, $src = false, $deps = array(), $ver = false, $media = 'all' ) {
global $wp_styles;
if ( ! is_a( $wp_styles, 'WP_Styles' ) ) {
if ( ! did_action( 'init' ) )
_doing_it_wrong( __FUNCTION__, sprintf( __( 'Los scripts y estilos no deben registrarse o encolarse hasta los hooks %1$s, %2$s, o %3$s.' ),
'<code>wp_enqueue_scripts</code>', '<code>admin_enqueue_scripts</code>', '<code>init</code>' ), '3.3' );
$wp_styles = new WP_Styles();
}
if ( $src ) {
$_handle = explode('?', $handle);
$wp_styles->add( $_handle[0], $src, $deps, $ver, $media );
}
$wp_styles->enqueue( $handle );
}
/**
* Elimina un estilo encolado.
*
* @since WP 3.1
* @see WP_Styles::dequeue() Para información de parámetros.
*/
function wp_dequeue_style( $handle ) {
global $wp_styles;
if ( ! is_a( $wp_styles, 'WP_Styles' ) ) {
if ( ! did_action( 'init' ) )
_doing_it_wrong( __FUNCTION__, sprintf( __( 'Los scripts y estilos no deben registrarse o encolarse hasta los hooks %1$s, %2$s, o %3$s.' ),
'<code>wp_enqueue_scripts</code>', '<code>admin_enqueue_scripts</code>', '<code>init</code>' ), '3.3' );
$wp_styles = new WP_Styles();
}
$wp_styles->dequeue( $handle );
}
/**
* Comprueba si un estilo ha sido agregado a WordPress Styles.
*
* Por defecto, comprueba si el estilo ha sido encolado. También puedes
* pasar 'registered' a $list, para ver si el estilo está registrado,
* y puedes comprobar estados de procesamiento con 'to_do' y 'done'.
*
* @since WP desconocido; BP desconocido
* @global object $wp_styles El objeto WP_Styles para imprimir estilos.
*
* @param string $handle Nombre de la hoja de estilos.
* @param string $list Opcional. Por defecto 'enqueued'. Valores son
* 'registered', 'enqueued' (o 'queue'), 'to_do', y 'done'.
* @return bool Si el estilo está en la lista.
*/
function wp_style_is( $handle, $list = 'enqueued' ) {
global $wp_styles;
if ( ! is_a( $wp_styles, 'WP_Styles' ) ) {
if ( ! did_action( 'init' ) )
_doing_it_wrong( __FUNCTION__, sprintf( __( 'Los scripts y estilos no deben registrarse o encolarse hasta los hooks %1$s, %2$s, o %3$s.' ),
'<code>wp_enqueue_scripts</code>', '<code>admin_enqueue_scripts</code>', '<code>init</code>' ), '3.3' );
$wp_styles = new WP_Styles();
}
return (bool) $wp_styles->query( $handle, $list );
}

Consulta la entrada del Codex para wp_enqueue_style()
.
Suponiendo que tienes una hoja de estilos personalizada llamada custom.css
, ubicada en el directorio raíz de tu Tema:
wp_enqueue_style( 'mytheme-custom', get_template_directory_uri() . '/custom.css' );
Pondrías esto en functions.php
, dentro de una función de retorno, enganchada a un callback apropiado, así:
function wpse87681_enqueue_custom_stylesheets() {
if ( ! is_admin() ) {
wp_enqueue_style( 'mytheme-custom', get_template_directory_uri() . '/custom.css' );
}
}
add_action( 'wp_enqueue_scripts', 'wpse87681_enqueue_custom_stylesheets', 11 );
Puedes jugar con el hook (puedes usar uno tan tardío como wp_head
) o la prioridad (el valor predeterminado es 10
) para asegurarte de que tu hoja de estilos personalizada se cargue después de cualquier otra hoja de estilos que desees sobrescribir. Pero si solo intentas sobrescribir la hoja de estilos predeterminada, cualquier hook apropiado y cualquier prioridad deberían funcionar, porque el enlace a la hoja de estilos predeterminada normalmente está codificado directamente en el encabezado del documento en header.php
.
