¿Cómo cargar JS y CSS solo en páginas específicas usando is_page()?

Question

¿Cómo cargar JS y CSS solo en páginas específicas usando is_page()?

5 ene 2016, 18:52:07

Vistas: 47.4K

Votos: 11

Estoy construyendo mi primer plugin de WP, que debe cargar algunos archivos JS y CSS solo en páginas específicas seleccionadas a través de un formulario disponible en el área de administración del plugin. Una vez seleccionado en el formulario, el Título de la Página se almacena en la tabla wp_options de la base de datos, luego los datos se extraen en una variable llamada $page_selected. Para cargar archivos JS y CSS solo en las páginas seleccionadas en el formulario, quería usar la función is_page(), pasando la variable $page_selected como parámetro.

function my_custom_tooltip() {
    if (  is_page($page_selected) ) {
        // Cargar hoja de estilos CSS
        wp_enqueue_style( 'custom_tooltip_frontend_css', plugins_url('custom-image-tooltip/custom-image-tooltip.css') );
        // Cargar archivo JavaScript con dependencia de jQuery
        wp_enqueue_script( 'custom_tooltip_frontend_js', plugins_url('custom-image-tooltip/custom-image-tooltip.js'), array('jquery'), '', true );
    }
} add_action('wp_enqueue_scripts', 'my_custom_tooltip');

Desafortunadamente, en mi caso, esa declaración condicional no funciona correctamente. ¿Hay alguna manera de lograr el mismo resultado, haciendo coincidir la página seleccionada en el formulario por el usuario con la página actual que se está mostrando?

RaymondMik

111

páginas wp enqueue script configuracion especifica pagina

Comentarios

is_page() acepta variables como parámetro. De hecho, puedes usar variables como parámetro para cualquier función PHP que acepte parámetros. ¿Por qué dices que no? Debería funcionar si pasas el valor correcto en la variable. Creo que el problema es que la variable no tiene el valor que piensas que tiene.

cybmeta

5 ene 2016 19:20:34

Intenté almacenar en una variable php el Título de la Página o el Slug de la Página (ej. $my_page_id = 'about';) y luego usar esa variable como parámetro de is_page(), pero no funcionó. En el codex de WP descubrí que is_page() acepta como parámetros el ID de Página, Título de Página o Slug de Página. Soy nuevo en PHP y WP y pensé que eso significaba que solo podías pasar strings o integers como parámetro de la función is_page(). Corregí mi publicación para evitar brindar información engañosa a otros usuarios.

RaymondMik

6 ene 2016 11:40:49

¿puedes mostrar un var_dump($page_selected)

WPTC-Troop

6 ene 2016 11:56:22

Ahora creo que tu pregunta no es sobre tu problema real. Pienso que necesitas saber cómo obtener el valor establecido en el formulario del plugin. Acabo de notar que la variable $page_selected no está definida en tu código. ¿Puedes mostrarnos cómo has construido el formulario en el área de administración y cómo almacenas los valores establecidos en ese formulario?

cybmeta

6 ene 2016 12:12:02

Así es como construí mi formulario en el área de Admin: <select name="page_dropdown"> <option value=""><?php echo esc_attr( __( 'Select page' ) ); ?</option> <?php $pages = get_pages(); foreach ( $pages as $page ) { $option = '<option>'; $option.= $page->post_title; $option .= '</option>'; echo $option; } ?> </select> Digamos que selecciono "test_page_1" en mi formulario - var_dump($page_selected) = string(11) "test_page_1";

RaymondMik

6 ene 2016 12:32:03

Todas las respuestas a la pregunta

Comentarios

Para que funcionen correctamente, los scripts deben encolarse en el momento adecuado durante la carga de la página. Si se cargan demasiado tarde, puede que no funcionen en absoluto. Por eso necesitas engancharlos a la acción wp_enqueue_scripts.

AddWeb Solution Pvt Ltd

9 ene 2016 15:00:40

Puneet Sahalot 141 · Answer 1 · 2016-01-05T19:19:24Z

Si $page_selected devuelve una cadena que contiene el título de la página, debería funcionar correctamente. Lo he probado y is_page() acepta el título de la página, el ID de la página y el slug.

Si estás teniendo problemas, será mejor almacenar el ID de la página en la base de datos y usarlo con is_page().

Por favor, consulta https://codex.wordpress.org/Function_Reference/is_page para obtener más detalles sobre los posibles argumentos que se pueden pasar a esta sentencia condicional.

Puneet Sahalot

141

5 ene 2016 19:19:24

AddWeb Solution Pvt Ltd 2.14K · Answer 2 · 2016-01-09T13:13:14Z

Hice algunos cambios bastante útiles y espero que esto te ayude bien. Prueba el siguiente código:

function my_custom_tooltip() {
  wp_enqueue_style( 'custom_tooltip_frontend_css', plugins_url('custom-image-tooltip/custom-image-tooltip.css') );
  wp_enqueue_script( 'custom_tooltip_frontend_js', plugins_url('custom-image-tooltip/custom-image-tooltip.js'), array('jquery'), '', true );
} 

if(is_page($page_selected)){
    add_action('wp_enqueue_scripts', 'my_custom_tooltip');
}

Aquí, asegúrate acerca de $page_selected.

NOTA: Siempre deberías encolar tus scripts en el archivo functions.php del tema - no en un archivo de plantilla. Los archivos de plantilla simplemente no son el lugar correcto 99.9% de las veces.

Puedes usar is_page() de múltiples formas como:

// Cuando se está mostrando cualquier Página individual.
is_page();

// Cuando se está mostrando la Página 42 (ID).
is_page( 42 );

// Cuando se está mostrando la Página con un post_title de "Contacto".
is_page( 'Contacto' );

// Cuando se está mostrando la Página con un post_name (slug) de "sobre-mi".
is_page( 'sobre-mi' );

// Devuelve true cuando la Página mostrada es el ID 42, o el post_name "sobre-mi", o el post_title "Contacto".  
is_page( array( 42, 'sobre-mi', 'Contacto' ) );

Nota: La capacidad de usar arrays fue añadida en la Versión 2.5.

Lucas Miranda 21 · Answer 3 · 2017-09-18T03:32:13Z

Si estás ejecutando este código dentro de un archivo de plantilla, funcionará bien, pero si este código está en functions.php o en un archivo de plugin, generará este error en debug.log:

PHP Notice: is_page fue llamado incorrectamente. Las etiquetas condicionales de consulta no funcionan antes de que se ejecute la consulta. Antes de eso, siempre devuelven false.

En este caso, podrías usar el hook de acción template_redirect, como se explica aquí.

Lucas Miranda

21

18 sept 2017 03:32:13

C C 1.96K · Answer 4 · 2016-01-05T19:21:29Z

No probado... pero algo como esto debería funcionar para obtener el nombre (es decir, el slug) de la página que se está mostrando actualmente:

function my_custom_tooltip() {
    global $post;
    if ( is_object( $post ) && $post->post_type=='page' ) {
        if ( $post->post_name == $page_selected ) {
            wp_enqueue_style( 'custom_tooltip_frontend_css', plugins_url('custom-image-tooltip/custom-image-tooltip.css') );
            wp_enqueue_script( 'custom_tooltip_frontend_js', plugins_url('custom-image-tooltip/custom-image-tooltip.js'), array('jquery'), '', true );
        }
    }
}

La comparación con $page_selected por supuesto espera que esté en formato "slug"... o si se compara con el título de la página, se podría usar $post->post_title en lugar de $post->post_name.

Nota, este es un ejemplo donde usar clases PHP es útil, para evitar tener que usar una variable global ($page_selected) dentro de esa función...