Cómo cargar Javascript y CSS correctamente en WordPress

Hoy en día, muchos sitios web de WordPress están empezando a discutir cómo cargar jQuery, Javascript y CSS correctamente en sitios web de WordPress. El artículo de hoy presentará en detalle cómo cargar scripts/CSS utilizando el método recomendado oficialmente de WordPress.

Hay dos ganchos add_action comúnmente utilizados para cargar scripts y CSS en WordPress:

init: asegúrese de que siempre sea el encabezado del sitio web (si usa home.php, index. php o archivos de plantilla) y otros scripts de carga de estilo de plantilla, página y publicación "frontal" y CSS.

wp_enqueue_scripts: el método de enlace "correcto", pero no siempre funciona, dependiendo de su configuración de WordPress.

Todos los ejemplos siguientes se probaron en modo multisitio de WordPress, WordPress 3.4.2 (deje un mensaje si no se admiten versiones posteriores)

Carga de bibliotecas jQuery externas y scripts de personalización de temas, estilo

El siguiente ejemplo utiliza init en el gancho add_action. Hay dos razones para usar init: una, comentamos la biblioteca jQuery predeterminada de WordPress y luego cargamos la biblioteca jQuery de Google; dos, nos aseguramos de que los scripts y CSS se carguen directamente en el encabezado de WordPress.

El propósito de usar if ( !is_admin() ) es garantizar que estos scripts y CSS solo se carguen en el front-end y no se vuelvan a cargar en la interfaz de administración en segundo plano.

/** Biblioteca jQuery de Google, archivos jQuery y CSS personalizados*/ ?

función myScripts() { ?

wp_register_script( 'google', ' / ajax/libs/jquery/1.8.2/jquery.js' ?

wp_register_script( 'predeterminado', get_template_directory_uri() .'/jquery.js' ?

); wp_register_style( 'default', get_template_directory_uri() .'/style.css' ); ?

if ( !is_admin() ){ /** Solo carga scripts y estilos en el sitio web*/ ?< / p>

wp_deregister_script( 'jquery' ); ?

wp_enqueue_script( 'google' ?

wp_enqueue_script( 'predeterminado' ?

); wp_enqueue_style( 'predeterminado' ); ?

}?

} ??

add_action( 'init', 'myScripts' );

Cargue la biblioteca jQuery predeterminada de WP y los scripts y estilos personalizados del tema

Línea 3: usar array('jquery') es para decirle a WordPress que jquery.js depende del archivo de la biblioteca jQuery de WordPress, por lo que jquery .js se cargará después de los archivos de la biblioteca jQuery de WordPress.

/** Agregar archivos jQuery y CSS personalizados al tema*/ ?

function myScripts() { ?

wp_register_script( 'default', get_template_directory_uri ( ) .'/jquery.js', array('jquery'), '' ); ?

wp_register_style( 'default', get_template_directory_uri() .'/style.css' ); >

wp_register_style( 'default', get_template_directory_uri() .'/style.css' ); ?

p>

if ( !is_admin() ){ /** Solo carga scripts y estilos en el sitio web*/ ?

wp_enqueue_script( 'default' ?

wp_enqueue_style ( 'default' ?

}?

} ??

add_action( 'init', 'myScripts' );

Carga print.css en tu tema de WordPress

Línea 3: El "imprimir" al final es una llamada de pantalla de medios que garantiza que print .css solo se cargue cuando la impresora del sitio web carga el archivo.

/** Agregar una hoja de estilo de impresión al tema*/ ?

function myPrintCss() { ?

wp_register_style( 'print', get_template_directory_uri() .' /print.css', '', '', 'print' ); ?

if ( !is_admin() ){ /** Solo carga scripts y estilos en el sitio web*/ ?

wp_enqueue_style( 'imprimir' ); ?

}?

} ??

add_action( 'init', 'myPrintCss' ) ;

Use wp_enqueue_scripts en lugar de init

Si desea cargar scripts únicos en publicaciones o páginas, debe usar wp_enqueue_scripts en lugar de init. El uso de wp_enqueue_scripts solo cargará scripts y CSS en primer plano, no en la interfaz de administración en segundo plano, por lo que no es necesario utilizar el criterio !is_admin().

Utilice is_single() para cargar script o CSS solo en la publicación.

Reemplace # en la línea 3 con el ID de la publicación para cargar script y CSS solo en esa publicación. Por supuesto, si usa is_single() directamente (sin usar una ID), cargará el script y CSS en todas las publicaciones.

/** Agregar script para artículo único*/ ?

function myScripts() { ?

if ( is_single(#) ){ /** solamente Cargar scripts y estilos en la publicación */ ?

/** Agregar jQuery y/o CSS Enqueue */ ?

}?

} ??

add_action( 'wp_enqueue_scripts', 'myScripts' );

Utilice is_page() para cargar solo scripts o CSS en la página

Cambie el # en la línea 3 Reemplace con el ID de la página para cargar scripts y CSS solo en esa página.

Por supuesto, si usa is_single() directamente (sin usar una ID), cargará el script y CSS en todas las páginas.

/** Agregar script a una página única*/ ?

function myScripts() { ?

if ( is_page(#) ){ /** solamente Cargar scripts y estilos en la página */ ?

/** Agregar jQuery y/o CSS Enqueue */ ?

}?

} ??

add_action( 'wp_enqueue_scripts', 'myScripts' );

Utilice admin_enqueue_scripts para cargar scripts en el backend

Este ejemplo carga scripts y CSS en toda la interfaz de administración del backend . Este método no se recomienda para complementos a menos que el complemento reconstruya toda el área de administración.

Línea 10 Reemplace init o wp_enqueue_scripts con admin_enqueue_scripts

Líneas 5 y 6 Si desea personalizar el área de administración, es posible que desee deshabilitar las llamadas CSS predeterminadas de WordPress.

/** Solo agregar scripts al área de administración de WordPress*/ ?

function myAdminScripts() { ?

wp_register_script( 'default', get_template_directory_uri() . '/jquery.js', array('jquery'), '' ?

wp_enqueue_script( 'default' ?

//wp_deregister_style( 'es decir' ) ; /** Eliminar, es decir, hoja de estilo*/ ?

//wp_deregister_style( 'colors' ); /** Desactivar CSS predeterminado */ ?

wp_register_style( 'default', get_template_directory_uri() .'/style.css', ?array(), '', 'todos' ?

wp_enqueue_style( 'predeterminado' ?

}?

add_action( 'admin_enqueue_scripts', 'myAdminScripts' );

Cargando scripts y CSS en la pantalla de inicio de sesión de WordPress

Línea 6: No sé cómo haga esto en la página de inicio de sesión Registre/solicite archivos CSS, de modo que esta línea agregue la hoja de estilo manualmente.

Líneas 10-14: Se utilizan para eliminar la hoja de estilos predeterminada de WordPress.

/** Agregar script a la página de inicio de sesión de WordPress*/ ?

function myLoginScripts() { ?

wp_register_script( 'default', get_template_directory_uri() .' /jquery.js', array('jquery'), '' ); ?

wp_enqueue_script( 'predeterminado' ? > ?

' type='text/css' media='all' /> ?

< ?php } ??

add_action( 'login_enqueue_scripts', 'myLoginScripts' ); ?

/** Cerrar sesión en el archivo css*/ ?

función removeScripts ( ) { ?

wp_deregister_style( 'wp-admin' ?

wp_deregister_style( 'colores-frescos' ?

}?

add_action( 'login_init', 'removeScripts');

Mover la biblioteca jQuery al pie de página

No puedes mover la biblioteca jQuery predeterminada de WordPress al final de la página, pero sí la personalizada. jQuery u otras bibliotecas jQuery externas (como las de Google) se pueden mover al final. No mueva CSS al final de la página.

Líneas 3 y 4: El "verdadero" al final le dice a WordPress que cargue estos scripts en la parte inferior de la página.

/** Mover jQuery al pie de página*/ ?

función footerScript() { ?

wp_register_script('jquery', ("/ajax/ libs/ jquery/1.8.2/jquery.js"), falso, '', verdadero); ?

wp_register_script( 'default', get_template_directory_uri() .'/jquery.js', falso, ' ', true ); ?

if ( !is_admin() ){ /** Solo cargar scripts y estilos en el sitio web*/ ?

wp_deregister_script( 'jquery'

wp_enqueue_script( 'jquery' ); ?

wp_enqueue_script( 'predeterminado' ?

}?

} ??

add_action( 'init', 'footerScript' );

Cargue jQuery y CSS según las funciones y funciones de usuario no utilizadas

Si su sitio web tiene autores, editores y otros administradores , es posible que necesites usar jQuery para mostrarles información diferente. Debe utilizar current_user_can para determinar la función y las capacidades del usuario que ha iniciado sesión.

Los siguientes tres ejemplos cargarán estos scripts y CSS en todo el sitio si el usuario ha iniciado sesión. Envolver enqueue_script con !is_admin() garantiza que estos scripts y CSS solo se carguen en el frontend, y usar admin_enqueue_scripts en add_action garantiza que estos scripts y CSS solo se carguen en el área de administración del backend.

Carga scripts y CSS para administradores que pueden "editar publicaciones"

Solo disponible para superadministradores y administradores de sitios

/** Según el rol y la capacidad de agregar CSS y jQuery */ ?

función myScripts() { ?

if ( current_user_can('edit_posts') ){ ?

/** Agregar jQuery y/o CSS Enqueue */ ?

}?

}?

add_action( 'init', 'myScripts' );

Cargar scripts y CSS para todos los usuarios registrados

/** Administradores / Autores / Colaboradores /?Suscriptores */ ?

función myScripts() { ?

if ( current_user_can('read') ){ ?

/** Agregar jQuery y/o CSS Enqueue */ ?

}?

} ?

add_action( 'init', 'myScripts' );

Cargar scripts y CSS para usuarios registrados que no sean administradores

/** Desactivar para superadministradores / Los administradores habilitan para autores / ?Colaboradores/Suscriptores*/ ?

función myScripts() { ?

if ( current_user_can('read') && !current_user_can('edit_users ') ) { ?

/** Agregar jQuery y/o CSS Enqueue */ ?

}?

} ??

add_action( 'init', 'myScripts' );

Consejo final

Muchos de los ejemplos anteriores se pueden combinar en una sola función si se usa la misma add_action.

En otras palabras, puede usar múltiples declaraciones if en una sola función para dividir llamadas de script y CSS, como: if_admin! if_admin, is_page, is_single y current_user_can, porque cada init usará la misma add_action.