Forma más eficiente de agregar archivo javascript a entradas y/o páginas específicas

Question

Forma más eficiente de agregar archivo javascript a entradas y/o páginas específicas

10 oct 2012, 22:30:36

Vistas: 59.1K

Votos: 28

Me pregunto cuál es el método más eficiente para agregar un archivo javascript específicamente para una entrada y/o página.

Aquí hay algunas soluciones que se me ocurrieron:

Cambiar a la vista de edición HTML y colocar el JavaScript allí (una solución bastante mala)
Campos personalizados con el JavaScript específico para esa entrada/página en los pares de clave y valor
En footer.php, cargar archivos JavaScript dependiendo de la página en la que estés (aunque esto lleva a muchas condicionales)

Como nota adicional, ninguno de los archivos JavaScript será compartido entre páginas - será literalmente específico para lo que estés viendo actualmente.

¿Alguna sugerencia?

mousesports

434

php campo personalizado jquery javascript

Comentarios

Los meta boxes / campos personalizados son tu mejor opción

Miha Rekar

10 oct 2012 22:33:14

¿Cómo definirías la eficiencia?

fuxia

10 oct 2012 22:44:45

Por 'eficiente' me refiero a la menor cantidad de redundancia de código y la forma más efectiva de hacer esto específicamente para una sola entrada/página.

mousesports

10 oct 2012 23:44:17

Todas las respuestas a la pregunta

Comentarios

Pequeña función muy útil. Tienes razón sobre lo útil que es tener una 'ubicación centralizada'. Muchas gracias.

mousesports

11 oct 2012 00:57:31

Creo que esto se puede limpiar un poco. Básicamente estás comprobando lo mismo con dos bloques switch diferentes. Yo diría que combines ambos bloques switch, y el condicional if podría ser if (is_page() || is_single()). ¿Qué opinas Ben?

mousesports

11 oct 2012 04:40:52

Me parece una mejora. ¡Buen trabajo!

Ben HartLenn

11 oct 2012 05:01:01

@Ben ¿es el functions.php que está dentro del tema o en wp-includes? Mi título de página es Access to Home Online y he puesto tu función cambiando home por Access to Home Online pero no funciona ¿?

Ciasto piekarz

7 feb 2017 09:55:49

@Ciastopiekarz He actualizado mi respuesta para mostrar mejor que el código va en el archivo functions.php de tu tema.

Ben HartLenn

13 mar 2017 03:16:33

Mostrar los 2 comentarios restantes

Lo que haría es colocar en el footer o header y usar condicionales php.

Por ejemplo:

<?php if (is_page ('tu-pagina')){?>

  <script type="text/javascript" src="la-ruta-del-archivo"></script>

<?php } elseif ( is_page ('otra-pagina')){?>

  <script type="text/javascript" src="la-ruta-del-archivo"></script>

<?php } else { ?>

  <script type="text/javascript" src="la-ruta-del-archivo"></script>

<?php } ?>

De esta manera no estás llamando todos los scripts todo el tiempo en cada carga de página y solo llamas los que necesitas.

Aquí hay un enlace al codex de WordPress http://codex.wordpress.org/Conditional_Tags

Y si tienes scripts especiales que solo podrían necesitarse para una publicación específica, usa campos personalizados.

Nicole

852

10 oct 2012 23:18:18

Comentarios

Gracias Nicole - esta fue la #3. Es una solución decente considerando que no voy a tener muchas páginas... todavía lo estoy considerando.

mousesports

10 oct 2012 23:45:50

Lo que tengo arriba puede usarse con varios elementos del codex de WordPress como: is_categories, is_single (para posts), is_post_type ... Agregué un enlace a la lista condicional de WordPress en mi respuesta anterior.

Nicole

10 oct 2012 23:48:37

La otra forma probada es agregar directamente en la página desde el editor y añadir comentarios dentro de la etiqueta de script, de lo contrario no funcionará.

<script type="text/javascript">
<!--
var a = 5;
alert("hola mundo. El valor de a es: " + a);
-->
</script>

Dev G

101

2 mar 2017 06:07:16

Ben HartLenn 2.44K · Accepted Answer · 2012-10-11T00:45:08Z

Creo que el mejor equilibrio entre eficiencia y usar los métodos adecuados de WordPress para añadir JavaScript sería agregar algo como esto al archivo functions.php de tu tema. Por ejemplo:

functions.php:

function load_scripts() {
    global $post;

    if( is_page() || is_single() )
    {
        switch($post->post_name) // post_name es el slug del post, que es más consistente para hacer coincidencias aquí
        {
            case 'home':
                wp_enqueue_script('home', get_template_directory_uri() . '/js/home.js', array('jquery'), '', false);
                break;
            case 'about-page':
                wp_enqueue_script('about', get_template_directory_uri() . '/js/about-page.js', array('jquery'), '', true);
                break;
            case 'some-post':
                wp_enqueue_script('somepost', get_template_directory_uri() . '/js/somepost.js', array('jquery'), '1.6', true);
                break;
        }
    } 
}

add_action('wp_enqueue_scripts', 'load_scripts');

Esto te da control total sobre qué se carga dónde, una ubicación centralizada en el archivo functions.php de tu tema para editar qué se carga en cada lugar: y, de esta forma usas los métodos de WordPress para añadir JavaScript a tus posts y páginas de manera segura.