Cómo incluir style.css en functions.php en WordPress - Solución

19 ago 2016, 07:52:23
Vistas: 17.5K
Votos: 2

Soy nuevo en WordPress. Estoy incluyendo mi archivo usando

<link rel='stylesheet' href="<?php bloginfo("stylesheet_url")?>"/>

Pero si pongo en cola mi archivo CSS en functions.php no funciona. ¿Por qué? ¿Dónde está mi error?

<?php wp_enqueue_style('style',get_template_directory_uri())?>

¿Cuál es la solución para esto?

0
Todas las respuestas a la pregunta 2
0

Estás llamando a la función de manera incorrecta. No has proporcionado tu nombre de archivo, solo un directorio.

Del codex

wp_enqueue_style( string $handle, string $src = false, array $deps = array(), string|bool|null $ver = false, string $media = 'all' )

así que en tu caso, deberías encolar así

add_action( 'wp_enqueue_scripts', 'wpse_my_style' );
function wpse_my_style(){
  wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . 'ruta/a/tu/css' );
}    

el resto de los parámetros son opcionales

19 ago 2016 08:12:03
9
-1
function wpdocs_style() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );  //Esto es para obtener el style.css del tema actual
wp_enqueue_style( 'style-name1', get_teplate_directory_uri() . '/css/custom.css', array('jquery') );   //Esto es para obtener otro archivo CSS del directorio padre  
wp_enqueue_script( 'script-name1', get_teplate_directory_uri() . '/js/custom.js', array('jquery') );   //Esto es para obtener un archivo JS del directorio padre  
}
add_action( 'wp_enqueue_scripts', 'wpdocs_style' );
             O
//O como alternativa también puedes engancharlo con wp_head
add_action( 'wp_head', 'wpdocs_style' );

Para ejecutar la función anterior es necesario agregar <?php wp_enqueue_script("jquery"); ?> (Si usas esta acción add_action( 'wp_enqueue_scripts', 'wpdocs_style' );) en header.php antes de </head>.

Debes asignar un nombre a cada estilo (como asigné style-name, style-name1 etc) y el nombre debe ser único. Y si quieres encolar desde el functions.php del tema hijo, entonces debes usar get_stylesheet_directory_uri() en lugar de get_teplate_directory_uri().

19 ago 2016 08:32:11
Comentarios

La pregunta del OP no menciona jQuery en absoluto. Y NO deberías simplemente agregarlo en header.php, deberías ponerlo en cola como los estilos.

ngearing ngearing
19 ago 2016 08:46:50

get_stylesheet_directory_uri() funcionará tanto para el tema como para el tema hijo

bynicolas bynicolas
19 ago 2016 08:46:52

@Nath ¡Sé que él no mencionó jQuery! ¿y qué?, si quiero proporcionar información adicional que lo ayude a él y también a los futuros visitantes.

Rishabh Rishabh
19 ago 2016 08:52:03

De acuerdo, necesitas explicarlo mejor entonces. Y también dar información correcta.

ngearing ngearing
19 ago 2016 08:53:22

@Nath He mostrado la forma correcta. No entiendo qué hay de malo en mi código. Así es como suelo hacerlo y funciona bien en mi caso. No sé por qué dices que no es correcto. Dijiste que no debería añadirse en header.php. Si no es ahí, ¿entonces dónde? Si tienes una mejor forma, publica una respuesta, también me encantaría conocer una mejor manera de hacerlo.

Rishabh Rishabh
19 ago 2016 10:16:34

@Rishabh Enganchas jQuery exactamente de la misma manera que enganchas todo lo demás. Es decir, con el hook wp_enqueue_scripts. Dijiste que para ejecutar tu código necesitamos añadir jQuery en header.php antes de </head>, ¿por qué dices eso? Simplemente no es cierto. Especialmente no es cierto al añadir archivos CSS. Así que si quieres proporcionar más información para ayudarlo a él y a otros que lean esta respuesta, por favor hazlo de una manera que no confunda a la gente. De ninguna manera CSS requiere jQuery para funcionar. Con wp_enqueue_script tienes un parámetro que le dice a WP cargar en <head> o antes de cerrar </body>.

bynicolas bynicolas
19 ago 2016 15:38:00

Así que, en lugar de agregar scripts por todas partes haciendo que sea más difícil depurar y leer tu código, puedes agregar todos los scripts en el mismo lugar y usar el parámetro $deps que le indica a WP en qué secuencia cargar los scripts/CSS para respetar tus dependencias.

bynicolas bynicolas
19 ago 2016 15:40:09

@bynicolas Ok, entiendo tu punto. Pero en mi respuesta actualizada he mostrado una forma alternativa de enganchar con wp_head y en la descripción mencioné agregar <?php wp_enqueue_script("jquery"); ?> pero también aclaré que solo si no usas el enganche con wp_head. Entonces, mi segunda forma en la que mostré el enganche con wp_head en lugar de wp_enqueue_scripts, ¿te parece correcta según tú?

Rishabh Rishabh
19 ago 2016 16:08:27

Aunque funcione, no lo recomendaría como una práctica estándar, es mejor agrupar todos tus scripts/CSS juntos, facilita que tú (el desarrollador) y otros puedan leer y entender tu código.

bynicolas bynicolas
19 ago 2016 17:27:05
Mostrar los 4 comentarios restantes