Как сделать несколько миниатюр с разным атрибутом wp?

Question

[Константин]

Доброго времени суток.
т.к. я новичок и учусь натягивать верстку на WP, то естественно столкнулся с проблемой :)
Как мне сделать несколько фотографий к посту? т.к. они мало того что идут слайдером, дк еще имеют 3 функции.

Так выглядит запись с миниатюрами. т.е. тут все фотографии вместе и никак не разделены.

Картинка в спойлере

Вот код. У меня получается вывести только одну миниатюру. И можно добавить только одну.

<div class="main-slider-item">
			<div class="main-slider-item__photo">
        <div class="main-slider-item__slider swiper-container">
          <div class="main-slider-item__wrapper swiper-wrapper">
						<div class="main-slider-item__photo-wrapper swiper-slide"><img class="i-img" src="<?php $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id(), 'none' );
echo $thumbnail[0]; ?>" alt="<?php the_title(); ?>" ></div>
          </div>
          <div class="main-slider-item__button main-slider-item__button_next"><span data-dynamic="icn-arrow-r-light"></span></div>
          <div class="main-slider-item__button main-slider-item__button_prev"><span data-dynamic="icn-arrow-r-light"></span></div>
          <div class="main-slider-item__pagination"></div>
        </div>
      </div>
		  <div class="main-slider-item__card">
				<div class="badge">
				  <a href="<?php the_permalink(); ?>" class="badge__name"><?php the_title(); ?></a>
				  <div class="badge__kitchen">
						<div class="badge-kitchen">
							<div class="badge-kitchen__image" style="background: #CBC8A9;"><img src="https://kuhzavod.ru/upload/iblock/372/372cd4baf76bb4b17cea591194d54650.png"/></div>
						  <div class="badge-kitchen__colors">
								<div class="badge-colors">
									<div class="badge-colors__item badge-colors__item_active" style="background: #CBC8A9;"></div>
									<div class="badge-colors__item" style="background: #FED639;"></div>
									<div class="badge-colors__item" style="background: #8AC52B;"></div>
									<div class="badge-colors__item" style="background: #D10F0F;"></div>
									<div class="badge-colors__item" style="background: #2B7E9E;"></div>					
								</div>
							</div>
						</div>
				  </div>

				  <div class="badge__price">
				  	<div class="price price_old"><?php the_field('price'); ?> ₽</div>
						<div class="price price_discount">−50%</div>
						<div class="price price_font_l"><?php the_field('pricenew'); ?> ₽</div>
						<div class="price_info">цена за всю кухню</div>
				  </div>
				  <div class="badge__button"><a class="btn btn_bg_yellow" href="<?php the_permalink(); ?>">Узнать больше</a></div>
				</div>
		  </div>
		</div>

Так выглядит полная запись. (обратите внимание, на 3 кнопки внизу) при нажатии на каждую фильтрует только с определенным тегом.

Картинка в спойлере

Вот код данного слайдера:

<div class="kitchen-slider">
		  <div class="kitchen-slider__wrapper">
			<div class="kitchen-slider__item" data-type="1"><img src="https://kuhzavod.ru/upload/iblock/c70/c70d49941e5572e458e68dd65bb227fb.jpg"/></div>
			<div class="kitchen-slider__item" data-type="1"><img src="https://kuhzavod.ru/upload/iblock/b8f/b8f93c9fa88d5d5685ee6249fa5dc433.jpg"/></div>
			<div class="kitchen-slider__item" data-type="1"><img src="https://kuhzavod.ru/upload/iblock/811/8110bdbc21a62ab40111f38c22035c94.jpg"/></div>
			<div class="kitchen-slider__item" data-type="1"><img src="https://kuhzavod.ru/upload/iblock/494/49493aff94717c825033e3fa51320ffe.jpg"/></div>
			<div class="kitchen-slider__item" data-type="2"><img src="https://kuhzavod.ru/upload/iblock/8c9/8c9ebb919e9fcec8fc34c7b4b09e3ea8.jpg"/></div>
			<div class="kitchen-slider__item" data-type="2"><img src="https://kuhzavod.ru/upload/iblock/21a/21a3ff16567d40a0423e3ed3802c3069.jpg"/></div>
			<div class="kitchen-slider__item" data-type="2"><img src="https://kuhzavod.ru/upload/iblock/c63/c631d2855df426cbc58716a134cf2d2b.jpg"/></div>
			<div class="kitchen-slider__item" data-type="3"><img src="https://kuhzavod.ru/upload/iblock/67d/67d90755300d19a382753af682695d50.jpg"/></div>
			<div class="kitchen-slider__item" data-type="3"><img src="https://kuhzavod.ru/upload/iblock/310/310560f02e1c28c5829e1b2e620ed38b.jpg"/></div>
			<div class="kitchen-slider__item" data-type="3"><img src="https://kuhzavod.ru/upload/iblock/83a/83a1c0f3d79143d895106783f0171d09.jpg"/></div>
		  </div>
		  </div>

Answer 1

[Орхан Гасанлы]

Здравствуйте!
Правильно ли я понимаю, что вам нужно натянуть эту верстку на ВП тему?
Если да, то:
1) можно исопльзовать кастомные поля (плагин ACF Pro), а именно создать повторитель (repeater) и добавить в него тип поля изображение. Соответственно, какждый элемент повторителя будет слайдом. Далее просто остается все это дело интегрировтаь в рнр.
2) можно использовать кастомные поля, но вместо повторителя использоать элемент "Галерея". Соответственно, каждый загружаемый элемент в галерею будет слайдом.
3) если вам нужны именно отдельные миниатюры, а не слайдер, то можно использовать плагин Multiple Post Thumbnails.

Comments

[Константин]

3-й способ пробовал. Он только одну миниатюру может добавить. И как к ней добавить еще значение даже хз.
А у меня от 9 до 15 фотографий.

[Константин]

Установил плагин ACF Pro. До этого был просто ACF.
Добавил доп поле "Галерея" с названием "foto"
Делаю вывод <?php the_field('foto'); ?> но ничего не работает.
Как понять повторитель? что как его сделать?)) я вообще дуб дубом) для меня все ново)

[Орхан Гасанлы]

Константин Дмитриев, не пробовали документацию к плагину ACF почитать?))) говорят, помогает))
А если серьезно, то галерею вы неправильно выводите...

Вот, цикл для галереи:

<?php 

$images = get_field('foto');
$size = 'full';

if( $images ): ?>
    <ul>
        <?php foreach( $images as $image ): ?>
            <li>
            	<?php echo wp_get_attachment_image( $image['ID'], $size ); ?>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

Галерея
https://www.advancedcustomfields.com/resources/gallery/

Повторитель
https://www.advancedcustomfields.com/resources/rep...

Повторитель доступен только в Pro версии плагина. Создав подобный тип поля, вы можете вложить другие поля в повторитель. Соответственно, эти кастомные поля будут выводится внутри цикла. Например, для слайдера нужно вложит в повторитель поле "Изображение".
Стандартный код повторителя:

<?php

// check if the repeater field has rows of data
if( have_rows('repeater_field_name') ):

 	// loop through the rows of data
    while ( have_rows('repeater_field_name') ) : the_row();

        // display a sub field value
        the_sub_field('sub_field_name');

    endwhile;

else :

    // no rows found

endif;

?>

документацию скинул выше

[Юпитер Макс]

Константин Дмитриев, вам надо сделать именно повторитель, потом выводить его согласно документации

<?php if(have_rows('foto') : ?>
    <?php while(have_rows('foto') : the_row(); ?>
        <? the_sub_field('foto_img') ?>
    <?php endwhile; ?>
<?php endif; ?>

[Орхан Гасанлы]

Юпитер Макс, да, там и повторитель подойдет, а можно не парится и галерею интегрировать. одинаково подходят...

[Константин]

azerphoenix, Изначально я делал без повторителя, а просто добавил код цикла галереи.
Фотографии вывелись, но не слайдером, а колонкой. После сделал повторитель как на видео в документации. И вписал код повторителя, уже со своими значениями. Но ничего не происходит.
Пытался сделать по документации, но изображения не выводятся...

[Орхан Гасанлы]

Константин Дмитриев, а причем тут документация) у вас есть верстка готовая, к которой вероятно, подключается скрипт слайдера.

<div class="kitchen-slider__item" data-type="1"><img src="https://kuhzavod.ru/upload/iblock/c70/c70d49941e5572e458e68dd65bb227fb.jpg"/></div>

Вот, указанный выше элемент будет внутри повторителя (цикла), а в него уже встроите вывод нужного поля

the_sub_field || get_sub_field

[Орхан Гасанлы]

Константин Дмитриев, примено, как-то так.. .только вам надо внутри цикла уже добавить ваши доп. поля sub_fields из повторителя

<div class="kitchen-slider">
      <div class="kitchen-slider__wrapper">
<?php if(have_rows('foto') : ?>
    <?php while(have_rows('foto') : the_row(); ?>
        <div class="kitchen-slider__item" data-type="1"><img src="https://kuhzavod.ru/upload/iblock/c70/c70d49941e5572e458e68dd65bb227fb.jpg"/></div>
    <?php endwhile; ?>
<?php endif; ?>
</div>
</div>

[Константин]

Добавил этот код. Не фурычит... выдает синтаксическую ошибку.

Parse error: syntax error, unexpected ':' in

В общем сделал повторитель с названием "slides"
в нем 2 поля:
1) Галерея - image
2) Вид - vid

[Орхан Гасанлы]

Константин Дмитриев,

<div class="kitchen-slider">
      <div class="kitchen-slider__wrapper">
		<?php if( have_rows('slides') ):
			while ( have_rows('slides') ) : the_row(); ?>
				
				<!-- Сюда вам необходимо создать тип поля изображение с возвращаемым типом ссылка на изображение -->
				<!-- Название полученного поля вставить в атрибут src в тег img  -->
				<div class="kitchen-slider__item" data-type="1"><img src="<?php the_sub_field('my_image');?>"/></div>

		<?php endwhile; endif;?>
	</div>
</div>

А вот, что за поле вид не знаю. Точнее не знаю зачем она вам, также, как и поле Галерея. Вам нужно использовать либо повторитель с изображением, либо просто галерею. Не нужно вкладывать галерею в повторитель

[Константин]

azerphoenix, Огромное спасибо!!!! работает) ты крут!)

Answer 2

[Юпитер Макс]

Вообще это делается плагинами, которые добавляют кастомные поля к каждому посту, в которые потом и загружаются картинки

Comments

[Константин]

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