Saltar al contenido
Closer Marketing

Cómo poner en cola elementos en WordPress

En vez de simplemente colocarlos en el título, posiblemente desee emplear un procedimiento de WordPress llamado cola, que es una forma estandarizada de manejar activos y tiene las ventajas adicionales de la administración de dependencias; aprenda cómo emplearlo a continuación. wp_enqueue_scripts.

Es de este modo como marcha la cola

Hay 2 pasos involucrados en la puesta en cola de un guion o estilo. Primero lo registra, dígale a WordPress que está allí, entonces lo pone en cola usted mismo y por último lo vierte en el título o antes de la etiqueta de cuerpo de cierre.

La razón de ambas fases está relacionada con la modularidad. A veces, desea contarle a WordPress sobre el contenido, pero posiblemente no quiera emplearlo en todas y cada una de las páginas. Por servirnos de un ejemplo: si crea un shortcode de galería personalizado que utiliza Javascript, solo necesita cargar el JS cuando usa el shortcode, quizás no en todas las páginas.

La forma de realizar esto es registrar el script primero y luego estar en la cola hasta el momento en que se muestre el shortcode (lectura sugerida: The Ultimate Guide to WordPress Shortcodes).

Información básica sobre enquue con wp_enqueue_scripts

Si quiere modificar scripts y estilos en la interfaz, debe hacerlo wp_enqueue_scripts Gancho En la función de gancho puede wp_register_script(), wp_enqueue_script(), wp_register_style() y wp_enqueue_style() Función.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() 
    wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
    wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );

    wp_enqueue_style( 'custom-gallery' );
    wp_enqueue_script( 'custom-gallery' );

En el ejemplo previo, registré y puse en cola la propiedad para el mismo rol, lo que es un tanto innecesario. De hecho, puede usar la función de rastreo para crear una cuenta y crear una cuenta instantaneamente utilizando los mismos factores que en la función de registro:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() 
    wp_enqueue_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );

Si tuviera que dividir estas 2 funcionalidades, lo haría usándolas en distintas ganchos en un caso de muestra práctico que tenemos la posibilidad de utilizar wp_enqueue_scripts Función de gancho para registrar activos y códigos cortos para realizar cola.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() 
    wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
    wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );



add_shortcode( 'custom_gallery', 'custom_gallery' );

function custom_gallery( $atts )

    wp_enqueue_style( 'custom-gallery' );
    wp_enqueue_script( 'custom-gallery' );

    // Gallery code here

Manejo de adicciones

El mecanismo de cola de WordPress tiene soporte incorporado para la gestión de dependencias que emplea el tercer factor de ambos wp_register_style() y wp_register_script() Función. Si no requiere separarlos, también puede usar la función de rastreo.

El tercer factor es el conjunto de scripts / estilos registrados que deben cargarse antes de que el contenido de hoy se ponga en cola. El ejemplo previo probablemente se basa en jQuery, así que especifiquemos:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() 
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) );

No requerimos registrarnos o poner en cola jQuery nosotros mismos, ya que ya es una parte de WordPress. Se puede conseguir una lista de scripts y estilos de WordPress en Codex.

Si tiene sus propias dependencias, va a deber registrarlas o su script no se va a cargar. Aquí hay un ejemplo:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() 
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) );
    wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery' ) );

Imaginemos que el primer guion es una galería y el segundo es una extensión que abre una imagen desde una caja de luz. Tenga en cuenta que si bien nuestro segundo script es dependiente de jQuery, no requerimos detallar esto porque nuestro primer script ahora está cargando jQuery. No obstante, puede ser una buena idea reportar todas y cada una de las dependencias solo para cerciorarse de que no haya ningún daño si olvida incluir las dependencias.

WordPress ahora sabe qué scripts necesitamos y puede calcular el orden en el que tienen que agregarse a la página.

Siempre que logre cargar un script en un pie de página, debe realizar esto. Esto incrementa relevantemente el tiempo de carga de la página y puede evitar que su cibersitio se cuelgue al descargar scripts, singularmente si contienen llamadas AJAX.

El mecanismo de puesta en cola puede utilizar el quinto factor (el cuarto es un número de versión opcional) para agregar scripts al pie de página. Si lo cambiamos un poco, el ejemplo anterior carga el script en un pie de página.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() 
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ), '1.0', true );
    wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery', 'jquery' ), '1.0', true );

Si true se establece en el quinto factor, el script se coloca en el pie de página con un valor falso o sin dejar el factor para cargar el contenido del encabezado. Como se mentó anteriormente, cargue el script en el pie de página siempre que resulte posible.

El quinto factor de la función de registro / predisposición de estilo le permite supervisar el medio de impresión del guion detallado (impresión, monitor, computadora de mano, etcétera.). Este factor le permite limitar la carga de estilos a determinados géneros de medios, lo cual es una pequeña técnica de ajuste útil.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() 
    wp_register_style( 'custom-gallery-print', plugins_url( '/css/gallery.css' , __FILE__ ), array(), '1.0', 'print' );


Para obtener una lista completa de las clases de medios libres, consulte las especificaciones de CSS.

resumen

Poner en cola los activos es una manera eficaz de lidiar con ellos. Le ofrece a usted y a otros distribuidores de complementos / temas un mejor control sobre todo su sistema y sostiene su dependencia bajo control.

Si eso no es bastante, es desde Si no emplea este método para agregar recursos, varios mercados de temas y archivos de WordPress no aceptarán su trabajo.


Ahorre tiempo, dinero y maximice el rendimiento del sitio:

  • Asistencia instantánea de especialistas en hosting de WordPress, 24 horas al día, 7 días por semana.
  • Integración de Cloudflare.
  • La audiencia global incluye 28 centros de datos en todo el mundo.
  • Utilice la supervisión integrada del desempeño de las apps para mejorar.

Todo esto y más en un solo plan sin contratos en un largo plazo, asistencia de inmigración y una garantía de devolución de dinero de 30 días. Consulte los planes o hable con un gerente de ventas para conseguir un plan que funcione para usted.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *