Вопрос или проблема
Итак, я создаю веб-сайт, разделенный на две части: одна часть для текста, а другая для изображений. То, что я пытаюсь сделать, это отображать конкретные изображения, принадлежащие каждому посту. Я также использую Advanced Custom Fields, чтобы упростить задачу. Теперь я могу получить ID поста, используя:
global $post; echo $post->ID;
Что я не знаю, так это как отображать изображения, соответствующие этому посту.
Вот мой код:
<?php
$images = get_field('gallery');
if( $images ): ?>
<ul> <div class="slide-photos" id="<?php $post->ID;?>" data-id="<?php $post->ID;?>">
<?php foreach( $images as $image ): ?>
<li>
<div class="photos-ind"><img id="<?php $post->ID;?>" class="slide-photos" src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" data-id="<?php $post->ID;?>"/></div>
</li>
<?php endforeach; ?></div>
</ul>
<?php endif; ?>
У меня также есть этот Javascript
$(document).ready(function(){
$(".exposition").on('click',function(){
var hello = $(this).attr('data-id');
$('.slide-photos').hide();
$('[id='+ hello + ']').show();
$('[id='+ hello + ']').flickity({
wrapAround: true, lazyLoad: 2, selectedAttraction: 0.1,
friction: 0.5, cellAlign: 'left', adaptiveHeight: false, imagesLoaded: true,
});
console.log('[id='+ hello + ']');
});
});
Насколько я знаю, функция get_field() вернет ответ в соответствии с текущим постом (нет необходимости указывать ID поста). Но если вы хотите указать ID поста, то вам нужно ввести его во втором аргументе, например:
get_field( $selector, $post_id );
Таким образом, ваш код будет выглядеть так:
<?php
global $post;
$post_id = 0 !== $post->ID ? $post->ID : false;
$images = get_field( 'gallery', $post_id );
if ( $images ): ?>
// Ваш контент.
<?php endif; ?>
Не используйте $post->ID напрямую во втором аргументе, потому что значение может быть 0 иногда, если WP_Query не удалась. Если это произойдет, используйте false, чтобы нацелиться на текущий пост.
Проверьте ресурсы:
{“post_id”:”2399981986739769″,”storyId”:”UzpfSTEwMDAwMTgzOTczNzc3MzoyMzk5OTgxOTg2NzM5NzY5OjE1MDY1OTU0Njk4MzU4Njg=”,”content”:””,”url”:”https://www.facebook.com/tyler.viviers/posts/2399981986739769:1506595469835868″,”feedbackId”:”ZmVlZGJhY2s6MjM5OTk4MTk4NjczOTc2OQ==”,”reactionsCount”:0,”shareCount”:1,”commentCount”:0,”author”:{“id”:”100001839737773″,”name”:”Tyler Viviers”,”avatar”:”https://scontent-jnb2-1.xx.fbcdn.net/v/t39.30808-1/311807311_8238641479540428_938876000408656399_n.jpg?stp=cp0_dst-jpg_p40x40&_nc_cat=109&ccb=1-7&_nc_sid=0ecb9b&_nc_eui2=AeGwvBLNaAwqVOSPefcW0zqtVxwXsZN_Sf9XHBexk39J_5CWj6o1eemd9f6qeJVkfC_g_3Rfsq_ouS4zaTsuee7Z&_nc_ohc=QDe8JE6c2OkQ7kNvgGsuBAj&_nc_zt=24&_nc_ht=scontent-jnb2-1.xx&_nc_gid=AYPipuW1hltlELwmVwYyhpi&oh=00_AYCCaK3GWHHXHl9XA_aJgMg_Z6dR5VINQFse8pjVyFGoHg&oe=674609CB”,”profile”:”https://www.facebook.com/tyler.viviers”},”createdAt”:1547063788,”comments”:[],”attachedStoryAttachments”:null,”attachmentsDetails”:[],”_attachments”:[],”collectionId”:”100001839737773″,”folderNames”:”Tyler Viviers”}
Ответ или решение
Для отображения изображений, соответствующих конкретной записи на вашем сайте, использующем Advanced Custom Fields (ACF), вы можете следовать следующему пошаговому подходу. Давайте разберем ваш код и оптимизируем его для безупречной работы.
Шаг 1: Получение ID поста
Вы уже правильно используете глобальную переменную $post для получения ID текущего поста:
global $post;
$post_id = $post->ID;Можно улучшить этот шаг, добавив проверку, чтобы убедиться, что ID поста действительно существует и не равен 0. Таким образом, ваш код будет более защищённым:
global $post;
$post_id = !empty($post->ID) ? $post->ID : false;Шаг 2: Получение изображений через ACF
Теперь давайте получим изображения, используя функцию get_field(). Вам не нужно передавать ID поста, если вы работаете с текущей записью, однако вы можете сделать это для большей гибкости.
Вот ваш обновленный код для получения галереи изображений:
$images = get_field('gallery', $post_id);
if ($images): ?>
<ul>
<div class="slide-photos" id="<?php echo esc_attr($post_id); ?>" data-id="<?php echo esc_attr($post_id); ?>">
<?php foreach ($images as $image): ?>
<li>
<div class="photos-ind">
<img id="<?php echo esc_attr($post_id); ?>" class="slide-photos" src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" data-id="<?php echo esc_attr($post_id); ?>" />
</div>
</li>
<?php endforeach; ?>
</div>
</ul>
<?php endif; ?>Шаг 3: AJAX и динамическое отображение
С учетом вашего JavaScript кода, вы настроили событие клика, которое скрывает и показывает фотографии. Ваш код JavaScript выглядит хорошо, однако стоит убедиться, что все поля корректно работают с данным ID:
$(document).ready(function() {
$(".exposition").on('click', function() {
var hello = $(this).attr('data-id');
$('.slide-photos').hide();
$('[id=' + hello + ']').show().flickity({
wrapAround: true,
lazyLoad: 2,
selectedAttraction: 0.1,
friction: 0.5,
cellAlign: 'left',
adaptiveHeight: false,
imagesLoaded: true
});
console.log('[id=' + hello + ']');
});
});Рекомендации по SEO
- Альтернативный текст для изображений: Рассмотрите возможность добавления
altатрибута к изображениям для улучшения SEO и доступности. - Структурированные данные: Добавьте микроразметку, чтобы помочь поисковым системам лучше индексировать ваш контент.
- Минификация JavaScript и CSS: Это уменьшит время загрузки страницы и улучшит пользовательский опыт, что положительно скажется на SEO.
Заключение
Эти изменения помогут вам реализовать функциональность, которая автоматически отображает соответствующие изображения для каждой записи. Обновите свой код согласно данным рекомендациям, чтобы добиться более высокого качества и гибкости. Если у вас возникнут дополнительные вопросы или трудности, не стесняйтесь обратиться за помощью.