Come utilizzare CSS in linea nelle pagine AMP?

Un utente ha chiesto
Categoria: AMP di WordPress
Domanda: Come utilizzare CSS in linea nelle pagine AMP?

Sto cercando di capire come far funzionare CSS online nelle pagine AMP. Di seguito è riportato lo script che ho provato in functions.php. Notare la $raw_content tabella che include CSS in linea.

add_filter('amp_post_template_data', function($data) {
        $raw_content = array(
        '<h2 class="amp-wp-title" style="background-color: '.get_field('bg_color').';">'.get_field('h2_title').'</h2>',
        get_field('content_2')
        );
        
        foreach ($raw_content as $content) {
            list($sanitized_html, $scripts, $styles) = AMP_Content_Sanitizer::sanitize(
                $content,
                array( 'AMP_Img_Sanitizer' => array(), 'AMP_Style_Sanitizer' => array() )
                );
            
            $data['amp_component_scripts'] = array_merge($data['amp_component_scripts'], $scripts);
            
            $data['post_amp_styles'] = array_merge($data['post_amp_styles'], $styles);
            
            add_action('customamp', function() use ($sanitized_html) {
                echo $sanitized_html;
            });
        }
    return $data;
});

Nella pagina AMP ottengo il markup per il h2 tagga così:
<h2 class="amp-wp-title amp-wp-067014b">. Sembra che lo script abbia ripulito il CSS in linea e aggiunto una nuova classe amp-wp-067014b. Tuttavia, la nuova classe non viene aggiunta in <style amp-custom>.

Ho sbagliato qualcosa o c’è un modo migliore per risolverlo?

grazie

• Autore del plugin

  (@westonruter)

  Perché non tiri fuori il CSS nel amp_post_template_css azione invece?

  Per esempio:

  add_action( 'amp_post_template_css', function( $post_template ) {
      printf( '.amp-wp-title { background-color: %s }', get_field('bg_color') );
  } );

  (@wrip)

  Ciao @westonruter

  Grazie per una risposta rapida. Sì, sembra funzionare. Ma non dovrebbe funzionare anche in? add_filter('amp_post_template_data'...) codice nel mio esempio? Sto solo cercando di capire perché non ha funzionato nel mio codice.

  l’ho notato anche io AMP_Content_Sanitizer::sanitize() la funzione è ormai obsoleta. C’è un sostituto per questa funzione?

  grazie

  Autore del plugin

  (@westonruter)

  Ricordo che l’abbiamo sminuito a favore della chiamata AMP_Content_Sanitizer::sanitize_document() direttamente, come si può vedere nella generazione dell’immagine in primo piano:

  https://github.com/ampproject/amp-wp/blob/1bac7f7904530d534a10817e58c22117df0235fb/includes/templates/class-amp-post-template.php#L355-L364

  Ma credo sia meglio usare il amp_post_template_css agire qui. Anche amp_post_template_css e amp_post_template_data gli hook riguardano solo la modalità Classica. In futuro, la raccomandazione è di migrare alle modalità accoppiate o native quando possibile.

Hai risolto il tuo problema?

SìNo

0 / 0