¿Cómo cargar condicionalmente una hoja de estilos solo para ciertas páginas?
Antes de empezar, quiero reconocer que hay algunos artículos muy buenos dirigidos a cómo cargar scripts condicionalmente basados en el contenido de páginas/entradas.
- Desarrollo de Plugins WordPress - Cómo incluir CSS y JavaScript condicionalmente y solo cuando sea necesario en las entradas
- Cómo cargar JavaScript como un Maestro de WordPress
Estos son excelentes, pero son mucho más avanzados de lo que quiero hacer.
Siento que la respuesta está en usar la función incorporada is_page()
(codex), pero cuando intento usarla el sitio se rompe o simplemente no funciona.
Creo que solo estoy ejecutando la lógica condicional en el lugar equivocado.
Esto es lo que he intentado agregar a mi functions.php:
function wpse39130_register_more_stylesheets() {
wp_register_style( 'stylesheet_name', get_stylesheet_directory_uri() . '/stylesheet.css' );
}
add_action( 'init', 'wpse39130_register_more_stylesheets' );
function wpse39130_conditionally_enqueue_my_stylesheet() {
// solo cargar en la página con slug products-services
if ( is_page( 'products-services' ) ) {
wp_enqueue_style( 'stylesheet_name' );
}
}
add_action( 'wp_enqueue_scripts', 'wpse39130_conditionally_enqueue_my_stylesheet' );
Cuando elimino la parte condicional, la hoja de estilos se carga correctamente, así que sé que eso funciona.

Copié y pegué tu código en mi entorno de desarrollo, no cambié nada excepto el nombre de la página, y funciona perfectamente. ¿Estás seguro de que no se está encolando y simplemente lo tienes apuntado mal o que el nombre de la página no está incorrecto o algo así?

Lo que tienes es correcto, solo que lo estás enganchando a la acción equivocada. Prueba con la acción "wp" en lugar de "init". Cuando init se ejecuta, is_page() aún no funcionará correctamente.
EDITADO: Estaba equivocado. Pensé que tenías add_my_stylesheet enganchado a init, pero no lo tienes. is_page debería funcionar desde la acción enqueue_scripts. Disculpa... continúa...

Estaba intentando seguir el mismo código para ver si obtenía el mismo resultado, y noté que is_page() no funciona como esperaba. Así que seguí la variable global $post y verifiqué el nombre/slug de la categoría, luego utilicé una comparación de texto simple para decidir la acción.
global $post;
$postcat = get_the_category( $post->ID );
if ( ! empty( $postcat ) ) {
echo esc_html( $postcat[0]->ID ); // Depuración
echo esc_html( $postcat[1]->name ); // Depuración
echo var_dump($postcat ); // Depuración
}
El valor de la categoría si es solo una categoría (no una subcategoría) sería:
echo esc_html( $postcat[0]->name ); //Muestra el nombre en pantalla
Para una subcategoría, tendrás la siguiente variable llena:
echo esc_html( $postcat[1]->name ); //Muestra el nombre en pantalla
Ahora, basado en tu necesidad, usa el código de abajo, como yo lo uso para verificar el nombre de la subcategoría:
//Usa $postcat[0]->name para el nombre de la categoría padre Puede ser el nombre de tu subcategoría
if ( $postcat[1]->name == 'Shopping' ) {
wp_enqueue_style( 'stylesheet_name' );
}else{
// otro código
}
Código completo:
function wpse39130_register_more_stylesheets() {
wp_register_style( 'stylesheet_name', get_stylesheet_directory_uri() . '/whatsqshop.css' );
}
add_action( 'init', 'wpse39130_register_more_stylesheets' );
function wpse39130_conditionally_enqueue_my_stylesheet() {
// solo cargar en la página con slug product-services
global $post; //Variable global Post
$postcat = get_the_category( $post->ID ); // Obtener la información de la categoría desde el ID del POST
if ( ! empty( $postcat ) ) { // SI LA CATEGORÍA DEL POST NO ESTÁ VACÍA
// echo esc_html( $postcat[0]->slug ); //Muestra el SLUG en la pantalla <Opción de depuración>
//echo esc_html( $postcat[0]->name ); //Muestra el nombre en pantalla
//echo esc_html( $postcat[1]->name ); //Muestra el nombre en pantalla
//echo var_dump($postcat ); // Para depuración
}
// if( is_single(88)) {
if ( $postcat[1]->name == 'Shopping' ) {
wp_enqueue_style( 'stylesheet_name' );
}else{
//wp_enqueue_style( 'stylesheet_name' );
}
}
add_action( 'wp_enqueue_scripts', 'wpse39130_conditionally_enqueue_my_stylesheet' );
Ejemplo: *Sin CSS extra http://whatsq.com/category/gst16/
*CSS extra con fondo solo para la categoría anterior http://whatsq.com/information-technology/shopping-information-technology/mothers-day-gift-plan-show-mom-the-love-with-flowers-and-and-more/
