Cum să injectezi CSS inline în functions.php

Question

Cum să injectezi CSS inline în functions.php

6 feb. 2017, 18:21:47

Vizualizări: 17K

Voturi: 6

Încerc să injectez un stil CSS inline pentru elementul body prin fișierul functions.php. Acesta trebuie să fie inline, deoarece folosesc ACF pentru a permite utilizatorului să schimbe imaginea.

Acesta ar trebui să fie rezultatul:

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

Am citit despre wp add inline style, dar nu am reușit să îmi dau seama cum să implementez.

Actualizare: Iată funcția pe care am încercat-o:

function wpdocs_styles_method() {
    wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/body.css'
    );
        $img = get_theme_mod( "<?php the_field('background') ?>" );
        $custom_css = "body {background-image: {$img}";
        wp_add_inline_style( 'custom-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_styles_method' );

Am încărcat un fișier body.css pentru a încerca să adaug CSS-ul inline. Dar nu a funcționat - poate că aceasta nu este abordarea corectă?

Matt

160

funcții css câmpuri personalizate avansate

Comentarii

Arată-mi exemplul tău care nu a funcționat.

kaiser

6 feb. 2017 18:29:27

Văd câteva probleme în codul tău exemplu. Nu ai nevoie de tag-urile <?php și ?>, deoarece deja parsezi PHP. De asemenea, ar trebui să folosești get_field() deoarece nu vrei să echo valoarea returnată.

Pat J

6 feb. 2017 18:48:05

Toate răspunsurile la întrebare

Comentarii

M-ai bătut la asta. Aceasta este și o metodă "nu prea elegantă, dar practică și eficientă" de a adăuga JavaScript inline dacă este necesar.

admcfajn

4 mar. 2018 05:45:23

Comentarii

mulțumesc abdul - nu pot scrie direct în șablonul părinte... dar poate javascript este soluția. pot folosi javascript din tema copil?

Matt

6 feb. 2017 20:33:03

Da. poți face asta și din tema copil

Anwer AR

7 feb. 2017 08:56:54

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

Cea mai ușoară metodă pe care am văzut-o este să o echo unde ai nevoie de ea:

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

Începând din 2019, poți adăuga și stiluri inline în interiorul tag-ului body, arătat aici fără a folosi echo:

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

Avantajul aici este că obții o evidențiere mai bună a sintaxei și nu este nevoie să escapi ghilimelele duble. Reține că acest hook particular va funcționa doar cu teme care implementează wp_body_open hook.

vhs

350

17 apr. 2017 23:37:12

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

Stilurile inline sunt stiluri care sunt scrise direct în eticheta din document și acesta este ceea ce cauți.

Totuși, wp_add_inline_style va adăuga o porțiune suplimentară de CSS în secțiunea <head> a documentului (stil încorporat), nu în eticheta de stil HTML.

Deci, dacă dorești să plasezi valoarea CSS direct în marcajul HTML prin intermediul unei etichete de stil, atunci wp_add_inline_style nu va face asta pentru tine. Ar trebui fie să transmiți valoarea lui get_field către o etichetă de stil HTML în fișierele tale de șablon, fie să iei în considerare utilizarea 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

poate aceasta nu este abordarea corectă deloc?

wp_add_inline_style adaugă stiluri CSS suplimentare unui fișier de stiluri înregistrat. Această funcție nu va adăuga un stil inline html în tag-ul body.

Totuși, eu cred că aceasta este abordarea corectă pentru problema ta. Practic faci bine, dar trebuie să adaugi atât CSS inline cât și o altă clasă pentru body, astfel încât CSS-ul să aibă efect.

/**
 * Adaugă condițional o clasă body și CSS inline
 */

//* Adaugă acțiune la wp_loaded pentru inițializarea pluginului
add_action( 'wp_loaded', 'wpse_106269_wp_loaded' );
function wpse_106269_wp_loaded() {
  add_action( 'wp_enqueue_scripts', 'wpse_106269_enqueue_scripts' );

  //* Adaugă hook-uri condițional
  if( '' !== get_theme_mod( 'my-mod', '' ) ) {
    add_filter( 'body_class', 'wpse_106269_body_class' );
    add_action( 'wp_enqueue_scripts', 'wpse_106269_add_inline_style' );
  }
}

//* Asigură încărcarea CSS-ului personalizat.
function wpse_106269_enqueue_scripts() {
  wp_enqueue_style( 'custom-style', '/style.css' );
}

//* Adaugă o clasă suplimentară tag-ului body.    
function wpse_106269_body_class( $classes ) {
  $classes[] = 'custom-background-image';
  return $classes;
}

//* Adaugă 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 );
}