Как обрабатывать размер фона: изображение обложки в Wordpress?

Дизайнер, новичок в wordpress здесь. Я хочу разместить изображение в посте и сделать его изображением героя для отдельной страницы поста.

Обычно я бы сделал это так: создал div, установил ширину на 100%, высоту на любой vh, который я хочу, а затем установил фон для URL-адреса изображения в CSS с размером фона, установленным для покрытия.

Итак, я пытаюсь сделать это в Wordpress следующим образом: 

<section class="hero" style="background: url('<?php echo $hero_image['url'];?> ');" xmlns="http://www.w3.org/1999/html">

Но это звучит немного странно, потому что установка фон со встроенными стилями переопределяет все CSS обратно к элементам по умолчанию. Есть идеи, как сделать это лучше? Желательно без каких-либо плагинов, так как я пытаюсь научиться делать как можно больше в коде. Хотя у меня уже установлены Расширенные пользовательские поля и пользовательский интерфейс пользовательского типа сообщений, и я широко их использую.

Author: David A. French, 2017-04-16
Source

3 answers

Вы также пытались добавить размер фона "обложка" в строку, например

 <section class="hero" style="background: url('<?php echo $hero_image['url'];?> ') cover;" xmlns="http://www.w3.org/1999/html">
 0
Author: jay_R_champ, 2017-04-16 03:32:16

Вы можете подключиться к заголовку темы и добавить свой стиль. Добавьте этот фрагмент кода в файл вашей темы functions.php:

<?php 
add_action('wp_head','my_hero_image');
function my_hero_image() {
    if( is_single() ) { ?>
        section.hero {
            background-image: <?php the_post_thumbnail_url('full'); ?>;
            background-size: cover;
        } <?php 
    }
}
?>

Это добавит следующий стиль в заголовок вашей темы в одном сообщении:

<style>
    section.hero {
        background-image: YOUR IMAGE URL;
        background-size: cover
    }
</style>

Что сделает свое дело.

 0
Author: Jack Johansson, 2017-04-16 04:47:43

Итак, ответ Джека работает и верен, но я также нашел более элегантное решение для того, что у меня уже было. Я сделал встроенное фоновое изображение в стиле вместо фона:

 0
Author: David A. French, 2017-04-16 22:26:56