vricot
Soy nuevo en el desarrollo web y he estado desarrollando mi primer sitio de WordPress usando solo HTML y CSS (+ un poco de Javascript). Mi sitio tiene una hoja de estilo CSS diferente para cada página HTML, pero parece que no puedo vincular correctamente más de una hoja en mi sitio de WordPress. Tengo una carpeta dentro de la ubicación de mi tema wp local dedicada solo a los archivos CSS, cada uno etiquetado como pagename_style.css.
Estoy bastante seguro de que es algo que me falta en mi functions.php, y supongo que tengo que usar condicionales para cada página del sitio, pero tengo muchos problemas para descubrir cómo se ve eso. Busqué en Internet situaciones similares y extrañamente no encontré nada (tal vez porque la respuesta es algo obvio que me falta).
Y en una nota menos relevante, mis fuentes de Google están siendo totalmente ignoradas, cuando antes funcionaban bien vinculadas a mi html. ¿Alguna idea, tal vez es mi sintaxis?
A continuación se muestra lo que he intentado, si eso es de alguna ayuda. Muchas gracias de antemano tt
function my_setup() {
wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300&family=Press+Start+2P&family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300;1,400&display=swap');
wp_enqueue_style('home', get_template_directory_uri() . '/css/home_style.css', microtime());
wp_enqueue_style('about', get_template_directory_uri() . '/css/about_style.css', microtime());
wp_enqueue_style('diary', get_template_directory_uri() . '/css/diary_style.css', microtime());
wp_enqueue_style('post', get_template_directory_uri() . '/css/post_style.css', microtime());
wp_enqueue_style('work', get_template_directory_uri() . '/css/work_style.css', microtime());
wp_enqueue_style('web-dev', get_template_directory_uri() . '/css/web-dev_style.css', microtime());
wp_enqueue_style('storyteller', get_template_directory_uri() . '/css/storyteller_style.css', microtime());
wp_enqueue_style('fashion', get_template_directory_uri() . '/css/fashion_style.css', microtime());
wp_enqueue_style('contact', get_template_directory_uri() . '/css/contact_style.css', microtime());
if(is_page('home')) {
wp_enqueue_style('home');
}
if(is_page('about')) {
wp_enqueue_style('/css/about_style.css');
}
}
add_action('wp_enqueue_scripts', 'my_setup');
Si usa wp_enqueue_style(), como lo hizo al principio, el estilo ya está cargado globalmente en cada página. Si quieres hacer alguna condición a cierta página, empieza bien. Si desea obtener más información al respecto, lea el artículo oficial de WP y su famoso códice. sitio web.
function my_setup() {
wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300&family=Press+Start+2P&family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300;1,400&display=swap');
if(is_page('home')) {
wp_enqueue_style('home', get_template_directory_uri() . '/css/home_style.css');
}
if(is_page('about')) {
wp_enqueue_style('about', get_template_directory_uri() . '/css/about_style.css');
}
// etc
}
add_action('wp_enqueue_scripts', 'my_setup');
Echa un vistazo a la documentación para wp_enqueue_style(). Tienes microtime() en el $dependency argumento. Eso significa que no se cargarán porque no hay estilo con el mango. 1234567891011 (o cualquiera que sea la hora actual) se está cargando, porque, bueno, no existe.
Si yo fuera usted, volvería a evaluar la necesidad de un archivo CSS completamente separado para cada página. Pero dicho esto, creo que también estás complicando un poco las cosas. Puedes usar wp_register_style() para preparar los archivos y luego ponerlos en cola en la página apropiada, pero wp_enqueue_style en realidad registra y los encola. Entonces, en su ejemplo, si se estuvieran cargando, TODOS se estarían cargando.
Dado que tiene una convención de nomenclatura conveniente de post_name = post_name_style.csscreo que sería mejor que mirara el nombre de la página actual y cargara ese archivo CSS.
También de la nota, no use microtime() como la versión, ya que evitará cualquier almacenamiento en caché. Su mejor apuesta es usar filemtime() y get_stylesheet_directory() para obtener la última vez que se modificó el archivo como una versión. Eso significa que se actualizará cada vez que lo cambie, pero permanecerá en caché hasta entonces (según la configuración de su servidor/navegador, por supuesto)
Por último, hay una diferencia entre get_template_[…] y get_stylesheet_[…] funciones En general, es preferible usar get_stylesheet_[…] en un tema porque hace referencia al tema actualmente activo, mientras que get_template_[…] hará referencia al tema principal si hay uno (esto también podría ser parte de su problema dependiendo de cómo se vea su estructura)
(Re: Google, ¿debería estar funcionando? Tal vez intente cambiar el identificador)
Nuevamente, volvería a evaluar la necesidad de archivos CSS individuales, pero lamentablemente, dado su código actual, hacer algo como lo siguiente probablemente sea lo más fácil/más fácil de mantener siempre que mantenga el post_name = post_name_style.css estructura:
function my_setup() {
wp_enqueue_style('google-fonts-notosanjp-press-start-2p-roboto', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300&family=Press+Start+2P&family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300;1,400&display=swap');
$slug = get_post_field( 'post_name', get_the_ID() ); // 'home', 'about', 'web-dev', etc.
if( file_exists( get_stylesheet_directory()."/css/{$slug}_style.css" ) ){
wp_enqueue_style( $slug, get_stylesheet_directory_uri()."/css/{$slug}_style.css", [], filemtime( get_stylesheet_directory()."/css/{$slug}_style.css" ) );
}
}
add_action('wp_enqueue_scripts', 'my_setup');
¡Gracias a los que respondieron! De hecho, encontré una solución mucho más simple, que consiste en incluir el archivo CSS respectivo en cada página PHP individual. Lo descubrí indirectamente en otra publicación de SO. En el futuro me limitaré a un archivo css tanto como sea posible, eso es seguro. A continuación se muestra un ejemplo de lo que hice, en caso de que ayude a alguien más:
<style>
<?php include 'CSS/single_style.css'; ?>
</style>
//where single_style is the file name