Посадка сайта на WordPress. Картинки фоном. Возможность редакции с админки пользователем?

Ссылка скопирована
CSS HTML PHP WordPress Изображения
1 ответ

Есть блоки карусели с текстовой информацией и картинками. Фон в этих блоках выводится из css методом background-image. Как при посадке на wordpress вывести при помощи php изображения так, чтобы пользователь мог их менять в админке?
<?php the_post_thumbnail(); ?> работает только когда картинка была в html коде.

&lt;?php global $post;  $myposts = get_posts([ 	'numberposts' =&gt; -1, ]);  if( $myposts ){ 	foreach( $myposts as $post ){ 		setup_postdata( $post );  ?&gt; 		              &lt;div class="item card-1"&gt;        &lt;div class="card-content"&gt;          &lt;?php the_post_thumbnail() ?&gt;  /*  что вместо этого? */            &lt;span&gt;&lt;?php the_title(); ?&gt;&lt;/span&gt;          &lt;p&gt;&lt;?php the_content(); ?&gt;&lt;/p&gt;          &lt;a href="/testimonials"&gt;Подробнее&lt;/a&gt;        &lt;/div&gt;       &lt;/div&gt;     &lt;?php 	} }   wp_reset_postdata();  ?&gt;

&lt;?php global $post; $myposts = get_posts([ 'numberposts' =&gt; -1, ]); if( $myposts ){ foreach( $myposts as $post ){ setup_postdata( $post ); ?&gt; &lt;div class="item card-1"&gt; &lt;div class="card-content"&gt; &lt;?php the_post_thumbnail() ?&gt; /* что вместо этого? */ &lt;span&gt;&lt;?php the_title(); ?&gt;&lt;/span&gt; &lt;p&gt;&lt;?php the_content(); ?&gt;&lt;/p&gt; &lt;a href="/testimonials"&gt;Подробнее&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;?php } } wp_reset_postdata(); ?&gt;

Дополнительно:

Ответы:

style="background-image: url(<?= get_the_post_thumbnail_url() ?>);"

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Mobile-редакция Ответ

Если изображение должно быть фоном блока и при этом редактироваться из админки, получайте URL изображения через WordPress/ACF и подставляйте его в inline style или CSS-переменную. the_post_thumbnail() выводит готовый тег img, поэтому он не подходит напрямую для background-image.

Для миниатюры записи:

$image_url = get_the_post_thumbnail_url(get_the_ID(), 'large');
?&gt;
&lt;div class="item card-1" style="background-image: url('&lt;?php echo esc_url($image_url); ?&gt;');"&gt;
    &lt;div class="card-content"&gt;
        &lt;span&gt;&lt;?php the_title(); ?&gt;&lt;/span&gt;
        &lt;p&gt;&lt;?php echo esc_html(get_the_excerpt()); ?&gt;&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;

$image_url = get_the_post_thumbnail_url(get_the_ID(), 'large'); ?&gt; &lt;div class="item card-1" style="background-image: url('&lt;?php echo esc_url($image_url); ?&gt;');"&gt; &lt;div class="card-content"&gt; &lt;span&gt;&lt;?php the_title(); ?&gt;&lt;/span&gt; &lt;p&gt;&lt;?php echo esc_html(get_the_excerpt()); ?&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt;

Если картинка хранится в ACF, лучше настроить поле так, чтобы оно возвращало ID изображения. Тогда можно получать нужный размер:

$image_id = get_field('slide_bg');
$image_url = $image_id ? wp_get_attachment_image_url($image_id, 'large') : '';

$image_id = get_field('slide_bg'); $image_url = $image_id ? wp_get_attachment_image_url($image_id, 'large') : '';

Ещё аккуратнее — использовать CSS-переменную:

&lt;div class="item" style="--bg: url('&lt;?php echo esc_url($image_url); ?&gt;');"&gt;...&lt;/div&gt;

&lt;div class="item" style="--bg: url('&lt;?php echo esc_url($image_url); ?&gt;');"&gt;...&lt;/div&gt;

.item {
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
}

.item { background-image: var(--bg); background-size: cover; background-position: center; }

Не забывайте про fallback: если пользователь не задал картинку, выводите стандартный фон или добавляйте класс no-image. А если изображение несёт смысл, лучше использовать img, а не фон, потому что у фоновых картинок нет alt. Фон подходит для декоративных слайдов, но не для важных изображений товара или контента.

Если таких блоков много, не вставляйте полноразмерные оригиналы. Берите размер large, medium_large или свой зарегистрированный размер через add_image_size(). Иначе пользователь сможет поменять картинку в админке, но страница начнёт грузить тяжёлые изображения по несколько мегабайт.

Для адаптива фонов можно использовать image-set() или разные CSS-переменные под media query, но не усложняйте без причины. Если это hero-картинка, добавьте заранее понятные размеры блока, background-size: cover и проверьте мобильную обрезку. Если изображение важно для SEO и доступности, лучше вывести его как picture/img с alt, а поверх уже положить текстовый слой.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Telegram Как диагностировать ошибку с подключением к прокси в мобильном приложении Telegram? 1 ответ