Lilu_Webb
@Lilu_Webb
Веб-чайник

Как вместо изображения записи вывести слайдер?

К записи в WordPress по умолчанию можно установить изображение, которое будет использоваться как миниатюра записи.
Мне нужно вывести для каждой записи свой слайдер. На странице записи распологаться он должен над title записи, а загружать изображения при редактировании/создании записи. "Родная" галерея WP не подходит(( ну или точней я немогу придать ей нужных настроек.
P. S. - еще на этом сайте я испольщую ACF (free version) , но галерею вывести с неготне могу.
Как это реализовать? Хелп ми
  • Вопрос задан
  • 146 просмотров
Пригласить эксперта
Ответы на вопрос 1
AntonLitvinenko
@AntonLitvinenko
HTML coder
Можно с помощью бесплатного ACF, но вы будете ограничены каким-то конечным числом слайдов, тобишь в админке скажим максимум 10 слайдов, у каждого свой слаг, который мы получаем в шаблоне, и дальше 10 проверок на существование и вывод слайдов. тут предельно просто.
С помощью встроенной галереи тоже можно, но галерея выводится фенкцией the_content(), тобишь есть неотъемлемой частью контента из редактора, соответственно выводится будет там где остальной контент. Если нужно решение как превратить стандартную галерею в слайдер я напишу.

PS/Слайдер из встроенной галереи

В functions.php
function gallery_slider($output, $attr) {
	$ids = explode(',', $attr['ids']);
	$images = get_posts(array(
		'include'        => $ids,
		'post_status'    => 'inherit',
		'post_type'      => 'attachment',
		'post_mime_type' => 'image',
		'orderby'        => 'post__in',
		'order'          => 'ASC',
	));
	if ($images) {
		$output = gallery_slider_template($images);
		return $output;
	}
}
add_filter('post_gallery', 'gallery_slider', 10, 2);

function gallery_slider_template($images) {
	ob_start();
	include 'gallery-slider.php';
	$output = ob_get_clean();
	return $output;
}

В корне темы соответственно создаем шаблон gallery-slider.php с подобной разметкой (у меня под slick)

<div class="gallery-slider">
	<?php
	foreach ($images as $image) {
		$src = wp_get_attachment_url($image->ID); // ссылка на изображение
		$alt = get_post_meta($image->ID, '_wp_attachment_image_alt', true); // атрибут alt
		$title = $image->post_title; // заголовок изображения
		$caption = $image->post_excerpt; // подпись к изображению
		$description = $image->post_content; // описание изображения
	?>
	<div>
		<img src="<?php echo $src; ?>" alt="<?php echo $alt; ?>">
		<div class="single-post-thimbnail-text"><?php echo $caption; ?></div>
	</div>
<?php } ?>
</div>

Собственно, не забываем, что нужно добавить стили и скрипты самого слайдера (в моем случае slick) и инициализировать его в файле с вашим js
$('.gallery-slider').slick({
	arrows: true,
	dots: true,
	speed: 500,
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы