web-dev-qa-db-ja.com

functions.phpインラインCSSの注入

Functions.phpファイルを介して私のbody要素にインラインスタイルのCSSを挿入しようとしています。ユーザーが画像を変更できるようにACFを使用しているので、インラインにする必要があります。

これは結果であるはずです：

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

wp addインラインスタイルについて読みました しかし、私はそれを理解できませんでした。

更新日：これは私が試した機能です：

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を追加しようとするためにbody.cssをロードしました。しかし、それはうまくいきませんでした - 多分これはまったく正しいアプローチではないでしょうか？

functionscssadvanced-custom-fields
4
Matt

インラインスタイルは文書のタグに直接書かれているスタイルです。これがあなたが探しているものです。

ただし、wp_add_inline_styleは、HTMLスタイルタグではなく、ドキュメントの<head>セクション（埋め込みスタイル）に追加のCSSを追加します。

そのため、スタイルタグを介してCSS値をHTMLマークアップに直接配置したい場合、wp_add_inline_styleはそれを行いません。テンプレートファイルのHTMLスタイルタグにget_fieldの値を渡すか、JavaScriptの使用を検討してください。

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

</div>
3
Anwer AR

多分これはまったく正しいアプローチではありませんか？

wp_add_inline_style 登録済みのスタイルシートに追加のCSSスタイルを追加する。この関数はbodyタグにインラインのhtmlスタイルを追加しません。

しかし、I do これが問題への正しいアプローチだと思います。基本的には正しいことですが、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 );
}
3
Nathan Johnson

私が見た最も簡単な方法はあなたがそれを必要とするところにそれをechoすることです：

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

さらに制御が必要な場合は、HEREDOCとNOW docを組み合わせてください。

3
Josh Habdas