Cómo agregar una etiqueta HTML <rel=preload> al Header?

Question

Cómo agregar una etiqueta HTML <rel=preload> al Header?

24 jul 2019, 15:37:08

Vistas: 18.2K

Votos: 1

Dado que el informe de Google Speed Insights sugiere agregar:

para acelerar la carga de los siguientes recursos:

https://www.myoutlet.lt/wp-content/plugins/gdpr-cookie-compliance/dist/styles/lity.css

en el sitio web https://www.myoutlet.lt

El sitio web está basado en el tema Avada.

Me pregunto cómo podría lograr eso.

Más concretamente, he echado un vistazo al archivo header.php tanto del tema principal como del tema hijo, pero como están codificados en PHP, no puedo entender por mí mismo cómo agregar HTML.

Debería haber una forma de inyectar HTML en la página web mediante alguna función PHP en el archivo header.php. Como SEO junior he adquirido cierto conocimiento técnico, pero estoy lejos de ser desarrollador.

¡Quien me muestre el camino ganará mi eterna gratitud! Muchas gracias de antemano por cualquier pista valiosa.

Que la fuerza te acompañe, Roman

P.D.: Tengo que lograr esto manualmente, sin ningún plugin (¡el sitio web ya es bastante lento por sí mismo!)

Roman

23

plantillas

Todas las respuestas a la pregunta

Comentarios

Seamos un poco más precisos, por favor. ¿A qué archivo debería añadir el fragmento de código que publicaste? ¿functions.php o más bien header.php? ¿Esto solo hará el trabajo o tengo que añadir algo más en otro lugar?

Roman

24 jul 2019 16:32:44

¡He intentado hacer lo que me dijiste en el archivo header.php, pero no funcionó! Necesito una introducción más descriptiva... no todos hemos nacido programadores x)

Roman

24 jul 2019 16:43:21

Puedes añadir este código al archivo functions.php o al archivo principal del plugin.

nmr

24 jul 2019 16:46:40

Tengo que implementar esta solución a través del functions.php; así que, vamos a aclararlo: he añadido este fragmento al final del functions.php add_action('wp_head', 'se343581_add_preload_tag', 5); function se343581_add_preload_tag() { echo '<link rel="preload" href="/lity.css" as="style">'; }

Roman

24 jul 2019 16:54:43

Y todavía no funciona. ¿Dónde puedo definir la ruta que publicaste, es decir home_url('wp-content/plugins/gdpr-cookie-compliance/dist/styles/lity.css') ... Sé HTML/CSS pero no PHP

Roman

24 jul 2019 16:55:52

Mostrar los 3 comentarios restantes

nmr 4.52K · Answer 1 · 2019-07-24T16:09:12Z

El hook que estás buscando es wp_head.

functions.php

add_action( 'wp_head', 'se343581_add_preload_tag', 5);
function se343581_add_preload_tag()
{
    echo '<link rel="preload" href="'. 
         plugins_url('/gdpr-cookie-compliance/dist/styles/lity.css') .
         '" as="style">';
    //
    // -- si se agrega en el archivo del plugin --
    // echo '<link rel="preload" href="' . plugin_dir_url( __FILE__ ) . 'some_subdir/file_name.css" as="style">';
}

nmr

4.52K

24 jul 2019 16:09:12