Я хочу добавить фоновое изображение в WordPress в CSS - PullRequest
Новая
       10

Я хочу добавить фоновое изображение в WordPress в CSS

0 голосов
/ 15 января 2020

Мой html

<section class="banner-area">
    <div class="container">
      <h1>Home</h1>
    </div>
</section>

Мой css

.banner-area {
  position: relative;
  background: #f0fffa;
  padding: 30px 0;
}

Я хочу добавить фоновое изображение здесь. 

.banner-area:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background: url(../images/bg03.png) no-repeat;
  background-size: cover;
}

Я думаю, PHP код не может работать в CSS. Как я могу это сделать?

Ответы [ 2 ]

0 голосов
/ 15 января 2020

Я решил эту проблему. Это лучшее и простое решение 

<div style="background: url('<?php echo get_template_directory_uri();?>/img/bg03.png')no-repeat;background-size: cover;">
0 голосов
/ 15 января 2020

Предполагая, что ваш файл CSS находится в каталоге WordPress где-нибудь, например, в wp-content/themes/foobar/example.css, переименуйте файл в wp-content/themes/foobar/example.css.php (добавьте расширение *. 1015 *!) И добавьте следующий код в начало файл: 

<?php

header('Content-Type: text/css; charset=utf-8');
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
require_once($_SERVER['DOCUMENT_ROOT'].'/wp-load.php');

$pathToBackgroundImage = '../images/bg03.png'; // <- get image path dynamically
?>

Теперь вы можете выполнить PHP в файле CSS, в то время как для браузера вывод будет CSS из-за Content-Type.

Если вам не нужен API WordPress для получения пути к фоновому изображению, вы можете пропустить строку require_once. Тем не менее, если вам нужно запросить WP-носитель, может быть, он вам пригодится. Теперь у вас есть доступ ко всем функциям WP, а также возможность динамически вставлять путь: 

.banner-area:before {

  left: 0;
  content: "";
  background: url(<?= $pathToBackgroundImage ?>) no-repeat;
}

Затем измените путь к исходному файлу CSS на: wp-content/themes/foobar/example.css.php.

...