Cargar estilos wp enqueue style en plantillas de página específicas

8 ago 2012, 22:20:46
Vistas: 74.9K
Votos: 37

Estoy en el proceso de crear un tema y me gustaría agregar páginas de aterrizaje (landing pages) usando plantillas de página. No puedo encontrar en ningún lugar que muestre cómo cargar estilos o javascript para plantillas de página específicas. ¿Alguna sugerencia? Por ejemplo, Landing Page 1 - landing-page-template-one.php necesitará estilos y javascript muy diferentes a los del blog o la página de inicio.

0
Todas las respuestas a la pregunta 8
0
40

Si planeas hacer mucho desarrollo para WP, deberías guardar esta página en tus favoritos: http://codex.wordpress.org/Conditional_Tags

La otra respuesta funciona pero el condicional depende de que el slug de tu página (miurl.com/este-es-el-slug) nunca cambie. Un método más confiable (en mi opinión), y que se ajusta a este caso, sería usar la verificación condicional is_page_template('example-template.php') en su lugar.

9 ago 2012 00:01:09
3
30

Puedes usar el condicional is_page( 'landing-page-template-one' ) alrededor de tus estilos/scripts específicos de página como parte de tus declaraciones generales de encolamiento.

function my_enqueue_stuff() {
  if ( is_page( 'landing-page-template-one' ) ) {
    /** Llamar al encolamiento de landing-page-template-one */
  } else {
    /** Llamar al encolamiento regular */
  }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );

Incluso podrías encadenar más condiciones elseif en el código anterior para otras páginas, etc.

Referencia: Referencia de Funciones - is_page()

8 ago 2012 22:34:39
Comentarios

De nada Sean, me alegra ayudar.

Edward Caissie Edward Caissie
15 ago 2012 22:27:16

Creo que usar is_page_template() es preferible ya que el slug de la página puede cambiarse fácilmente. Esta solución, aunque funciona bien, se rompería si se cambia el slug. Mira la solución de kchjr si alguien tiene problemas en el futuro.

BODA82 BODA82
15 nov 2015 00:46:53

¡Gracias! Para otros que se topen con esto: la declaración condicional is_page debe estar en la función adjunta a la acción y no envolviendo la declaración add_action en sí. Si envuelves la declaración add_action en un condicional, será demasiado pronto en el procesamiento de la página para saber qué página es.

Hendeca Hendeca
25 may 2016 06:32:18
1

Si la plantilla de página se encuentra en un subdirectorio del tema (desde WP 3.4), antepone el nombre de la carpeta y una barra inclinada al nombre del archivo de la plantilla, por ejemplo:

is_page_template( 'templates/about.php' );

Por lo tanto, la función completa se vería así:

function my_enqueue_stuff() {
  if ( is_page_template( 'landing-page-template-one' ) ) {
    /** Llamar al enqueue de landing-page-template-one */
  } else {
    /** Llamar al enqueue regular */
  }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );

Referencia: Documentación Oficial

21 oct 2018 07:58:20
Comentarios

Gracias por mencionar que la verificación de is_page_template () debería estar dentro de la función enqueue, y no alrededor de ella.

gregn3 gregn3
1 jul 2019 21:48:16
2

No sé si las soluciones proporcionadas en otras respuestas solían funcionar, pero (¡ya que no hay una respuesta aceptada!) parece que la respuesta correcta actualmente es:

function my_enqueue_stuff() {
    if ( get_page_template_slug() == 'landing-page-template-one.php' ) {
        wp_enqueue_script('my-script-handle', 'script-path.js', ... );
    }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );

is_page_template() solo funciona fuera del bucle, según https://developer.wordpress.org/reference/functions/is_page_template/.

22 dic 2016 15:08:15
Comentarios

según la documentación mencionada, no puede usarse dentro del bucle

Selrond Selrond
20 feb 2017 15:02:03

fuera del bucle. eso es lo que dije... sonrojo

richplane richplane
21 feb 2017 15:58:56
0

Supongamos que el nombre de tu plantilla es temper y deseas cargar bootstrap en esa página, puedes encolar el estilo en plantillas de página específicas de la siguiente manera:

Ve al archivo function.php y luego verifica la condición así:

function temper_scripts() {

    if(basename(get_page_template()) == 'temper.php'){

       wp_enqueue_style('bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');

    }

}

add_action('wp_enqueue_scripts', 'temper_scripts');
22 may 2019 13:40:13
0

Este funciona perfectamente.

      function my_enqueue_stuff() {

 // "page-templates/about.php" es la ruta del archivo de plantilla. Si tu archivo de plantilla está en la carpeta raíz del Tema, entonces úsalo como "about.php".

        if(is_page_template( 'page-templates/about.php' ))
        {
            wp_enqueue_script( 'lightgallery-js', get_template_directory_uri() . '/js/lightgallery-all.min.js');
            wp_enqueue_script('raventours-picturefill', "https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js", true, null);
        }
        }
        add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );
14 feb 2020 08:05:22
0

Prueba esto

 if(is_page_template(array( 'custom-template/about.php') )) 
    {            
        wp_enqueue_style('about-css', get_template_directory_uri() . '/assets/css/about.css', array(), time(), 'all');
    } 
26 abr 2022 08:27:10
0
function enqueue_my_script() {
    if ( is_page_template( 'my-page-template.php' ) ) {
        wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array( 'jquery' ), '1.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_script' );

En este ejemplo, la función enqueue_my_script está enganchada a la acción wp_enqueue_scripts, que es llamada por WordPress cuando está cargando scripts y hojas de estilo.

La función utiliza is_page_template para verificar si la página actual está usando una plantilla de página específica (en este caso, 'my-page-template.php'). Si la condición es verdadera, se llama a la función wp_enqueue_script para encolar el script 'my-script'.

La función wp_enqueue_script toma los siguientes argumentos:

'my-script': Este es el identificador único para el script. Se utiliza para referenciar el script cuando está registrado.

get_template_directory_uri() . '/js/my-script.js': Esta es la URL del archivo JavaScript.

array( 'jquery' ): Esto especifica que el script depende del script jquery, lo que significa que debe cargarse después del script jquery.

'1.0': Este es el número de versión del script.

true: Esto especifica que el script debe cargarse en el pie de página del documento HTML.

Puedes usar otras etiquetas condicionales como is_home, is_front_page, is_single, y `


8 ene 2023 09:08:05