Un utente ha chiesto
Categoria: AddToAny Share Buttons di WordPress
Domanda: Le icone SVG non hanno un colore di sfondo impostato sulle pagine AMP

Ciao @micropat,

prima di tutto, grazie per tutto lo sforzo nel fornire questo fantastico plugin. Sto riscontrando il problema che i loghi SVG dei social media vengono visualizzati sulle pagine AMP con il colore bianco ma senza lo sfondo impostato. Se hai uno sfondo bianco, gli utenti normali non possono vederli affatto. Penso che gli attributi CSS del colore di sfondo non vengano aggiunti dinamicamente all’AMP CSS. Come soluzione rapida, ho aggiunto la seguente azione al mio functions.php per visualizzare i colori di sfondo del logo richiesti. Sto utilizzando la versione 1.7.39 del plug-in AddToAny e la versione 1.0.8 del plug-in Accelerated Mobile Pages.

// add missing color information for amp use of add to any
add_action( 'amp_post_template_css', 'afe_fix_addtoany_amp_styles' );
function afe_fix_addtoany_amp_styles( $amp_template ) {
        // CSS only
        ?>
        .addtoany_list a amp-img {
                border-radius: 4px;
        }
        .a2a_button_facebook amp-img {
                background-color: #3B5998;
        }
        .a2a_button_twitter amp-img {
                background-color: #55ACEE;
        }
        .a2a_button_whatsapp amp-img {
                background-color: #12AF0A;
        }
        .addtoany_share amp-img {
                background-color: #0166FF;
        }
        .addtoany_content {
                text-align: center;
        }
        <?php
}

Saluti,

Matteo

  • Autore del plugin

    (@micropat)

    Ciao Matteo, grazie per aver condiviso la tua soluzione.

    AddToAny supporta l’ufficiale amp plugin e non ufficiale accelerated-mobile-pages Il plug-in a cui ti riferisci condivide gli stessi hook relativi ad AMP del plug-in ufficiale, quindi dovrebbe supportare anche l’integrazione AMP di AddToAny.

    Però, accelerated-mobile-pages attualmente ha un bug nella sua ottimizzazione CSS e nell’albero di scuotimento. In almeno la versione 1.0.9, applica erroneamente gli stili a img elementi invece di amp-img elementi.

    CSS come:
    img.acss86243{background-color:#3B5998}

    Dovrebbe essere:
    amp-img.acss86243{background-color:#3B5998}

    Saresti così gentile da segnalare questo problema nel accelerated-mobile-pages forum di supporto plugin?

    (@theschappy)

    Ciao @micropat,

    Grazie per aver esplorato ulteriormente questo aspetto. Posso confermare che img.background-color Il tag fa parte della pagina AMP generata dal plug-in accelerated-mobile-ranges, ma manca del amp-img.background-color etichetta. Ho informato Ahmed, che è il manutentore di quest’ultimo plugin come proposto; continua a leggere qui: https://wordpress.org/support/topic/css-on-img-tag-not-translated-to-amp-img-in-hooks/

    Saluti,

    Matteo

Hai risolto il tuo problema?

0 / 0

Lascia un commento 0

Il tuo indirizzo email non sarà pubblicato. Required fields are marked *