函数.php注入内联css

时间：2017-02-06 作者：Matt

我试图通过函数将内联样式的css注入到我的body元素中。php文件。它需要内联，因为我使用ACF让用户更改图像。

结果应该是：

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

我读到关于wp add inline style, 但我想不出来。

更新：以下是我尝试的函数：

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

我确实装了一具尸体。css尝试添加内联css。但它没有起作用——也许这根本不是正确的方法？

3 个回复

SO网友:vhs

THE EA.s我EsT WA.Y 我\'五、E sEEN 我s To ECHo 我T WHERE YoU NEED 我T:

&#十、A.;

FUNCT我oN 我NL我NE_Css() {&#十、A.;  ECHo &QUoT;<sTYLE>HTML{BA.CKGRoUND-CoLoR:#001.3.3.7.}</sTYLE>&QUoT;;&#十、A.;}&#十、A.;A.DD_A.CT我oN( \'WP_HEA.D\', \'我NL我NE_Css\', 0 );&#十、A.;

&#十、A.;

s我NCE 2.01.9 YoU CA.N A.Lso A.DD sTYLEs 我NL我NE 我Ns我DE THE BoDY, sHoWN HERE W我THoUT Us我NG ECHo:

&#十、A.;

FUNCT我oN E十、A.MPLE_BoDY_oPEN () { ?>&#十、A.;  <sTYLE>&#十、A.;    HTML {&#十、A.;      BA.CKGRoUND-CoLoR: #B4.D4.5.5.;&#十、A.;    }&#十、A.;  </sTYLE>&#十、A.;<?PHP }&#十、A.;A.DD_A.CT我oN( \'WP_BoDY_oPEN\', \'E十、A.MPLE_BoDY_oPEN\' );&#十、A.;

&#十、A.;

THE BENEF我T HERE 我s YoU GET BETTER sYNTA.十、 H我GHL我GHT我NG A.ND Do NoT NEED To EsCA.PE DoUBLE-QUoTEs. NoTE TH我s PA.RT我CULA.R HooK W我LL oNLY WoRK W我TH THEMEs 我MPLEMENT我NG WP_BoDY_oPEN HooK.

&#十、A.;

SO网友:Anwer AR

内联样式是直接写入文档标记中的样式&；这就是你要找的。

但是wp_add_inline_style 将在<head> 文档的节（嵌入样式），而不是HTML样式标记。

因此，如果您想通过样式标记将CSS值直接放入HTML标记中，那么wp_add_inline_style 不会为你这样做的。您应该传递get_field 到模板文件中的HTML样式标记，或考虑使用JavaScript。

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

</div>

SO网友:Nathan Johnson

也许这根本不是正确的方法？

wp_add_inline_style 向注册的样式表添加额外的CSS样式。此函数不会向body标记添加内联html样式。

然而，我确实认为这是解决问题的正确方法。您基本上做得不错，但您需要在主体中添加内联css和另一个类，以便css实际执行某些操作。

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

小码农CODE

函数.php注入内联css

相关推荐

通过主题定制器编辑style.css