web-dev-qa-db-fra.com

functions.php injecter inline css

J'essaie d'injecter un css de style en ligne à mon élément body via le fichier functions.php. Il doit être en ligne, car j'utilise un fichier ACF pour permettre à l'utilisateur de modifier l'image.

Cela devrait être le résultat:

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

J'ai lu sur le wp add inline style , mais je ne pouvais pas comprendre.

Mise à jour: Voici la fonction que j'ai essayée:

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

J'ai chargé un body.css pour essayer d'ajouter le css en ligne. Mais cela n'a pas fonctionné - peut-être que ce n'est pas la bonne approche du tout?

functionscssadvanced-custom-fields
4
Matt

Les styles en ligne sont des styles écrits directement dans la balise du document. C'est ce que vous recherchez.

Cependant, wp_add_inline_style ajoutera un élément CSS supplémentaire dans la section <head> du document (style incorporé), et non dans la balise de style HTML.

Donc, si vous voulez placer votre valeur CSS directement dans le balisage HTML via une balise style, alors wp_add_inline_style ne le fera pas pour vous. Vous devez soit passer la valeur get_field à une balise de style HTML dans vos fichiers de modèle, soit envisager d'utiliser JavaScript.

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

</div>
3
Anwer AR

peut-être que ce n'est pas la bonne approche du tout?

wp_add_inline_style ajoute des styles CSS supplémentaires à une feuille de style enregistrée. Cette fonction n’ajoutera pas de style HTML intégré à la balise body.

Cependant, je do pense que c'est la bonne approche du problème. En gros, vous le faites bien, mais vous devez ajouter à la fois les fichiers inss css et une autre classe afin que les fichiers css fassent quelque chose.

/**
 * 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

Le moyen le plus simple que j'ai vu est de echo le cas échéant:

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

Combinez avec HEREDOC et NOW doc si vous avez besoin de plus de contrôle.

3
Josh Habdas