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をロードしました。しかし、それはうまくいきませんでした - 多分これはまったく正しいアプローチではないでしょうか?
インラインスタイルは文書のタグに直接書かれているスタイルです。これがあなたが探しているものです。
ただし、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>
多分これはまったく正しいアプローチではありませんか?
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 );
}
私が見た最も簡単な方法はあなたがそれを必要とするところにそれをecho
することです:
function inline_css() {
echo "<style>html{background-color:#001337}</style>";
}
add_action( 'wp_head', 'inline_css', 0 );
さらに制御が必要な場合は、HEREDOCとNOW docを組み合わせてください。