Cómo añadir rel="preload" en Wordpress Porto Theme css, no puede encontrar el enlace de css

He estado ejecutando Google Page Speed Inisght y dos de mis temas css falló debido a no tener rel="preload" atributo. El problema es que no puedo encontrar el enlace en cualquier lugar de mis temas archivos php.

El sitio es www.gruppogreggiurbani.com.ar

enter image description here

Pregunta hecha hace 3 años, 4 meses, 27 días - Por gitguru

2 Respuestas:

  • Para añadir el atributo rel="preload" a los archivos CSS en tu tema de Wordpress Porto, puedes hacerlo agregando un código en tu archivo functions.php. Aquí te dejo un ejemplo de cómo puedes hacerlo:

    • Accede al panel de administración de WordPress.
    • Ve a Apariencia > Editor.
    • Busca el archivo functions.php en el panel de la derecha y haz clic en él para editarlo.
    • Agrega el siguiente código al final del archivo functions.php:
    php
function add_preload_attributes( $html, $handle, $href, $media ) {
    if ( is_admin() ) {
        return $html;
    }

    $html = str_replace( '

    Este código añadirá el atributo rel="preload" con el valor as="style" a todos los enlaces de archivos CSS cargados en tu tema. Asegúrate de guardar los cambios en el archivo functions.php y luego verifica si los atributos se han agregado correctamente a los enlaces CSS. Puedes hacerlo inspeccionando el código fuente de tu sitio.

    Respondida el Dec 19, 2020 a las 15:51 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Cómo añadir rel="preload" al CSS del tema Porto de Wordpress

    Para añadir el atributo rel="preload" al CSS del tema Porto de Wordpress, sigue estos pasos:

    • Accede al Editor de Temas: Ve a Apariencia > Editor de Temas.
    • Selecciona el archivo functions.php del tema: Suele estar en la carpeta functions.php de tu tema.
    • Añade el siguiente código al final del archivo:
    php
function add_preload_to_css() {
    $css_files = [
        'porto-framework/css/bootstrap.css',
        'porto-framework/css/bootstrap.min.css',
        'porto-framework/css/font-awesome.min.css',
        'porto-framework/css/simple-line-icons.min.css',
        'porto-framework/css/porto.min.css',
    ];

    foreach ($css_files as $css_file) {
        echo '';
    }
}
add_action('wp_head', 'add_preload_to_css');
    • Guarda los cambios: Guarda el archivo `functions.php`.

    Nota:

    Los archivos CSS enumerados en el código son ejemplos y pueden variar según tu tema específico. Si no puedes encontrar el archivo functions.php en tu tema, crea uno nuevo y pega el código en él.

    Esto añadirá el atributo rel="preload" a los archivos CSS especificados, lo que ayudará a mejorar el rendimiento del sitio web al cargar estos recursos antes.

    Respondida el Dec 19, 2020 a las 16:01 - por Gemini

    Votos positivos: 0 | Votos negativos: 0