web-dev-qa-db-ger.com

functions.php Inline CSS einbinden

Ich versuche, über die Datei functions.php ein CSS im Inline-Stil in mein Body-Element einzufügen. Es muss inline sein, da ich ein ACF verwende, damit der Benutzer das Bild ändern kann.

Dies sollte das Ergebnis sein:

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

Ich habe über das wp add inline style gelesen, aber ich konnte es nicht herausfinden.

Update: Hier ist die Funktion, die ich ausprobiert habe:

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' );

Ich habe eine body.css geladen, um zu versuchen, die Inline-CSS hinzuzufügen. Aber es hat nicht funktioniert - vielleicht ist das überhaupt nicht der richtige Ansatz?

4
Matt

Inline-Stile sind Stile, die direkt in das Tag des Dokuments geschrieben werden und nach denen Sie suchen.

wp_add_inline_style fügt jedoch ein zusätzliches Stück CSS in den Abschnitt <head> des Dokuments ein (eingebetteter Stil), nicht in das HTML-Stil-Tag.

Wenn Sie also Ihren CSS-Wert über ein Style-Tag direkt in HTML-Markup platzieren möchten, übernimmt wp_add_inline_style dies nicht für Sie. Sie sollten entweder den Wert von get_field an ein HTML-Tag in Ihren Vorlagendateien übergeben oder JavaScript verwenden.

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

</div>
3
Anwer AR

vielleicht ist das überhaupt nicht der richtige Ansatz?

wp_add_inline_style Fügt einem registrierten Stylesheet zusätzliche CSS-Stile hinzu. Diese Funktion fügt dem Body-Tag keinen Inline-HTML-Stil hinzu.

Ich do denke jedoch, dass dies die richtige Herangehensweise an das Problem ist. Grundsätzlich machen Sie es richtig, aber Sie müssen dem Body sowohl Inline-CSS als auch eine weitere Klasse hinzufügen, damit das CSS tatsächlich etwas tut.

/**
 * Conditionally add body class and inline css to body
 */

//* Add action to wp_loaded to initialize the plugin
add_action( 'wp_loaded', 'wpse_106269_wp_loaded' );
function wpse_106269_wp_loaded() {
  add_action( 'wp_enqueue_scripts', 'wpse_106269_enqueue_scripts' );

  //* Conditionally add hooks
  if( '' !== get_theme_mod( 'my-mod', '' ) ) {
    add_filter( 'body_class', 'wpse_106269_body_class' );
    add_action( 'wp_enqueue_scripts', 'wpse_106269_add_inline_style' );
  }
}

//* Make sure we load the custom css.
function wpse_106269_enqueue_scripts() {
  wp_enqueue_style( 'custom-style', '/style.css' );
}

//* Add another class to the body tag.    
function wpse_106269_body_class( $classes ) {
  $classes[] = 'custom-background-image';
  return $classes;
}

//* Add 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 );
}
3
Nathan Johnson

Der einfachste Weg, den ich gesehen habe, ist es, echo dorthin zu bringen, wo Sie es brauchen:

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

Kombinieren Sie mit HEREDOC und NOW doc, wenn Sie mehr Kontrolle benötigen.

3
Josh Habdas