Iniettare CSS inline in functions.php

Question

Iniettare CSS inline in functions.php

6 feb 2017, 18:21:47

Visualizzazioni: 17K

Voti: 6

Sto cercando di iniettare uno stile CSS inline nell'elemento body tramite il file functions.php. Deve essere inline perché sto usando ACF per permettere all'utente di cambiare l'immagine.

Questo dovrebbe essere il risultato:

<body style="background-image: url('<?php the_field('background'); ?>');">

Ho letto riguardo wp add inline style, ma non sono riuscito a capire come implementarlo.

Aggiornamento: Ecco la funzione che ho provato:

function wpdocs_styles_method() {
    // Carica il foglio di stile
    wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/body.css');
    
    // Ottiene l'immagine dal campo ACF
    $img = get_theme_mod( "<?php the_field('background') ?>" );
    
    // Crea il CSS personalizzato
    $custom_css = "body {background-image: {$img}";
    
    // Aggiunge lo stile inline
    wp_add_inline_style( 'custom-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_styles_method' );

Ho caricato un file body.css per provare ad aggiungere il CSS inline. Ma non ha funzionato - forse questo non è l'approccio corretto?

Matt

160

funzioni css campi personalizzati avanzati

Commenti

Mostra il tuo esempio che non ha funzionato.

kaiser

6 feb 2017 18:29:27

Vedo un paio di problemi nel tuo codice di esempio. Non hai bisogno dei tag <?php e ?>, visto che stai già analizzando PHP. Inoltre, dovresti usare get_field() dato che non vuoi fare echo del valore restituito.

Pat J

6 feb 2017 18:48:05

Tutte le risposte alla domanda

Commenti

Mi hai preceduto. Anche questo è un modo "non così elegante ma pratico ed efficace" per aggiungere js inline se necessario.

admcfajn

4 mar 2018 05:45:23

Commenti

grazie abdul - non posso scrivere direttamente nel template genitore...ma forse javascript è la strada da percorrere. posso usare javascript dal child theme?

Matt

6 feb 2017 20:33:03

Sì. puoi farlo anche dal child theme

Anwer AR

7 feb 2017 08:56:54

vhs 350 · Answer 1 · 2017-04-17T23:37:12Z

Il modo più semplice che ho visto è usare echo dove ti serve:

function inline_css() {
  echo "<style>html{background-color:#001337}</style>";
}
add_action( 'wp_head', 'inline_css', 0 );

Dal 2019 puoi anche aggiungere stili inline all'interno del body, come mostrato qui senza usare echo:

function example_body_open () { ?>
  <style>
    html {
      background-color: #B4D455;
    }
  </style>
<?php }
add_action( 'wp_body_open', 'example_body_open' );

Il vantaggio qui è che ottieni un migliore syntax highlighting e non devi eseguire l'escape delle virgolette doppie. Nota che questo particolare hook funzionerà solo con temi che implementano l'wp_body_open hook.

vhs

350

17 apr 2017 23:37:12

Anwer AR 1.01K · Answer 2 · 2017-02-06T19:49:09Z

Gli stili inline sono stili che vengono scritti direttamente nel tag del documento e questo è ciò che stai cercando.

Tuttavia, wp_add_inline_style aggiungerà un pezzo extra di CSS nella sezione <head> del documento (stile incorporato), non al tag style HTML.

Quindi, se desideri inserire il tuo valore CSS direttamente nel markup HTML tramite un tag style, allora wp_add_inline_style non farà questo per te. Dovresti passare il valore di get_field a un tag style HTML nei tuoi file template, oppure considerare l'uso di JavaScript.

<div style="<?php the_field( 'some-field' ) ?>">

</div>

Anwer AR

1.01K

6 feb 2017 19:49:09

Nathan Johnson 6.53K · Answer 3 · 2017-02-06T22:36:55Z

forse questo non è l'approccio giusto?

wp_add_inline_style aggiunge stili CSS extra a un foglio di stile registrato. Questa funzione non aggiunge uno stile inline html al tag body.

Tuttavia, penso che questo sia l'approccio corretto al problema. Stai fondamentalmente facendo la cosa giusta, ma devi aggiungere sia il css inline che un'altra classe al body affinché il css abbia effetto.

/**
 * Aggiunge condizionalmente una classe al body e css inline
 */

//* Aggiunge l'azione a wp_loaded per inizializzare il plugin
add_action( 'wp_loaded', 'wpse_106269_wp_loaded' );
function wpse_106269_wp_loaded() {
  add_action( 'wp_enqueue_scripts', 'wpse_106269_enqueue_scripts' );

  //* Aggiunge hook condizionalmente
  if( '' !== get_theme_mod( 'my-mod', '' ) ) {
    add_filter( 'body_class', 'wpse_106269_body_class' );
    add_action( 'wp_enqueue_scripts', 'wpse_106269_add_inline_style' );
  }
}

//* Assicura che carichiamo il css personalizzato.
function wpse_106269_enqueue_scripts() {
  wp_enqueue_style( 'custom-style', '/style.css' );
}

//* Aggiunge un'altra classe al tag body.    
function wpse_106269_body_class( $classes ) {
  $classes[] = 'custom-background-image';
  return $classes;
}

//* Aggiunge background-image inline
function wpse_106269_add_inline_style() {
  $background_url = esc_url( get_theme_mod( 'my-mod', '' ) );
  $custom_css = ".custom-background-image { background-image:URL( $background_url ); }";
  wp_add_inline_style( 'custom-style', $custom_css );
}