Javascript o CSS en páginas especificas

En ocasiones en nuestros proyectos necesitamos incluir javascript o CSS para realizar diferentes funcionalidades o estilos concretos. Pero no necesitamos que se incluyan en todo el proyecto solamente en algunas páginas especificas o solamente en la home por ejemplo.

Para ello podemos usar un sencillo truco lo cual nos permite realizar esta tarea sin dejar de implementar dichos estilos o js de una forma correcta en WordPress.

Debemos de irnos a nuestro archivo functions.php de nuestro tema hijo/child o en nuestro plugin y añadir lo siguiente:

function script_por_pagina() {
    global $post;
// modificar bajo vuestras necesidades
    if( is_page() || is_single() || is_home() )
    {

      if (get_post_type( $post->ID ) == 'postejemplo' || is_home()) {
        wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() . '/assets/js/custom.js', array( 'jquery' ) );
        wp_enqueue_style('mycss', get_template_directory_uri().'/assets/css/style.min.css', array(), '1.0.0');
      }
    }
}


add_action('wp_enqueue_scripts', 'script_por_pagina');

En este caso estamos verificando si es un tipo página, una single page o si es la propia home.

if( is_page() || is_single() || is_home() )

Y en nuestro caso estamos agregando un javascript y un archivo css a la home y al post «postejemplo»

if (get_post_type( $post->ID ) == 'postejemplo' || is_home()) {

En este caso estamos usando get_post_type donde le pasamos el ID del post para que nos devuelva el tipo de publicación del mismo y poder comparar con el que nosotros le estamos pasando (postejemplo)

En vez de usar un if para determinar al tipo de página donde queremos añadir, usamos un switch para determinar más opciones, por ejemplo:

  switch (get_post_type( $post->ID )) {
        case 'postejemplo1':
          wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() . '/assets/js/custom.js', array( 'jquery' ) );
          break;
        case 'postejemplo2':
          wp_enqueue_style('mycss', get_template_directory_uri().'/assets/css/style.min.css', array(), '1.0.0');
          break;
      }

Donde al post-type «postejemplo1» le estamos añadiendo un archivo javascript y al post-type «postejemplo2» le estamos añadiendo un archivo css.

Quedaría adaptar el script a vuestras necesidades.