Как в wordpress реализавать список постов табами?

Question

[Blind-programmer]

Всем привет, мне нужно отобразить список постов табами, я уже задавал вопрос такой, но с джаваскримт у меня плохо,

Comments

[Антон Литвиненко]

мало информации

[Blind-programmer]

Антон Литвиненко, Можете есть плугин для отображения списка постов табоми, как на этом сайте https://elrus.ho.ua

[Dima Polos]

Вам может с js нужна помощь?

[Dima Polos]

2 час 18 минута

[Антон Литвиненко]

Blind-programmer, Я вот все равно не понимаю, по ссылке там обычные табы, тобишь заголовок и в табе какой то контент, в данном случае картинки.
Список постов это цикличный вывод, я например делал для новостного сайта : 2 таба, Новости и Свежее, и в каждом из них выводил какое-то количество записей, скажем по 5 штук. Но там я тоже использовал обычные табы.
Вот вам простейший скрипт с табами:

HTML:
<div class="wrapper">
  <div class="tabs">
    <span class="tab">Вкладка 1</span>
    <span class="tab">Вкладка 2</span>
    <span class="tab">Вкладка 3</span>        
  </div>
  <div class="tab-content">
    <div class="tab-item">Содержимое 1</div>
    <div class="tab-item">Содержимое 2</div>
    <div class="tab-item">Содержимое 3</div>
  </div>
</div>

jQuery:
$('.tab-item').not(':first').hide();
$('.wrapper .tab').on('click', function() {
  $('.wrapper .tab').removeClass('active').eq($(this).index()).addClass('active');
  $('.tab-item').hide().eq($(this).index()).fadeIn();
}).eq(0).addClass('active');

CSS:
.wrapper .active { color: red; }

[Blind-programmer]

Антон Литвиненко, спс, акак эть прибить к wp
Меня просто не устраивает стандартный вывод постов

[Антон Литвиненко]

Blind-programmer, в каждом tab-item запускаем кастомный вывод записей на базе wp_query с нужными параметрами

[Blind-programmer]

Антон Литвиненко, плис можете помоч?

[Антон Литвиненко]

Blind-programmer, вы же понимаете, что толком не объяснили что в итоге хотите получить? Я тут по факту сам с собой разговариваю, сам сделал предположение, сам на него ответил. Гадание на кофейной гуще

[Blind-programmer]

Антон Литвиненко, там где сами табы там заголовки постов,
А там где сам контент табов, там анонс поста и четать даллее

[Антон Литвиненко]

<div class="wrapper">

	<div class="tabs">

		<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

			<div class="tab"><?php the_title() ?></div>

		<?php endwhile; ?>

	<?php endif; ?>

	</div><!-- tabs -->

	<div class="tab-content">

	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

		<div class="tab-item">
			<?php the_excerpt() ?>
			<a href="<?php the_permalink() ?>">Читать далее</a>
		</div>

	<?php endwhile; ?>

	</div><!-- tab-content -->

	<?php endif; ?>

</div><!-- wrapper -->

<script>
	$('.tab-item').not(':first').hide();
	$('.wrapper .tab').on('click', function() {
	  $('.wrapper .tab').removeClass('active').eq($(this).index()).addClass('active');
	  $('.tab-item').hide().eq($(this).index()).fadeIn();
	}).eq(0).addClass('active');
</script>

[Антон Литвиненко]

Blind-programmer, как-то так

Answer 1

[Антон Литвиненко]

<div class="wrapper">

  <div class="tabs">

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

      <div class="tab"><?php the_title() ?></div>

    <?php endwhile; ?>

  <?php endif; ?>

  </div><!-- tabs -->

  <div class="tab-content">

  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    <div class="tab-item">
      <?php the_excerpt() ?>
      <a href="<?php the_permalink() ?>">Читать далее</a>
    </div>

  <?php endwhile; ?>

  </div><!-- tab-content -->

  <?php endif; ?>

</div><!-- wrapper -->

<script>
  $('.tab-item').not(':first').hide();
  $('.wrapper .tab').on('click', function() {
    $('.wrapper .tab').removeClass('active').eq($(this).index()).addClass('active');
    $('.tab-item').hide().eq($(this).index()).fadeIn();
  }).eq(0).addClass('active');
</script>

Comments

[Blind-programmer]

я js рядом поставил, это не будет влеять на внешний вит?, я просто незрячий и мне NVDA не особо говорит про внешний вит.
вот ссылка на результат.
https://blind-programming.com.ua/games
и ещё как в вордпесс выводется рубрики метки и автор?
простите что сразу не сказал, я тогда сам до вставлю код

[Антон Литвиненко]

Blind-programmer, ну то что я скинул работает, но его ведь надо оформить стилями, так оно выглядит просто как текст подряд

[Blind-programmer]

Антон Литвиненко, и последнее
Как вывести рубрики метки и автора поста
Я уже сам довставлю код

[Blind-programmer]

Антон Литвиненко, в мести с ссылками насебя

[Антон Литвиненко]

Вывести все категории:

<?php
$category = get_the_category($post->ID);
foreach ($category as $cat) {
	echo $cat->name;
}
?>

Вывести метки:
<?php the_tags(); ?>

Вывести автора:
<?php the_author(); ?>

[kirill270999]

Антон Литвиненко, Здравствуйте, Простите, могу я спросить вашего совета по этому вопросу?

[Антон Литвиненко]

kirill270999, а что там смотреть, если вы не предоставили рабочего кода. сделайте в песочнице статикой, там и посмотрим. А вообще табы на чекбоксах - баловство

[kirill270999]

Антон Литвиненко, Я долго пытался решить проблему. Нашел эти табы ,пытался связать с Wordpress, но теперь они не открываются. Возможно в ссылке вместо "#" надо поставить команду из WP, но я не нашел какую. Вы могли бы подсказать , что тут не так?

[Антон Литвиненко]

kirill270999, это не табы а аккордион

[kirill270999]

Антон Литвиненко, ошибся в терминологии. То есть это невозможно сделать? Просто мне нужно выводить статьи именно через аккордеон.

[Антон Литвиненко]

kirill270999, с аккордионом из примера еще проще, тут не нужно два цикла, зачем вы делаете два цикла? а в вашем вопросе как раз остатки от табов, которые я приводил тут в примере.
А еще я не понимаю, почему мы обсуждаем совершенно другой вопрос в этом вопросе?

[kirill270999]

Антон Литвиненко, Мне показалось, что вы можете помочь, по этому и обратился к вам . Тот аккордеон, что я показывал в песочнице я пытался сделать с помощью query_post вот что получилось

<div class="main">
	<div>
		<div class="panel">
			<?php query_posts('cat=8'); 
			while (have_posts()) : the_post(); ?>
			<div class="panel-heading">
				<a href="#"><h3><?php the_title() ?></h3></a>
			</div>
			<div class="panel-collapse">
				<div class="panel-body">
			        <?php the_content(); ?>
				</div>
			</div>
			<?php endwhile; wp_reset_query(); ?>
		</div>
	</div>
</div>

Если вы сможете подсказать решение я создам отдельный вопрос , где ваш ответ отмечу как правильный.

[kirill270999]

Антон Литвиненко, Аккордеон на Wordpress без плагина, почему не работает?

[Антон Литвиненко]

kirill270999, со стандартным циклом

<div class="main">
	<div>

		<?php if ( have_posts() ) : ?>

			<?php while ( have_posts() ) : the_post(); ?>

			<div class="panel">
				<div class="panel-heading">
					<a href="#1"><i class="fa fa-trophy"></i><?php the_title() ?></a>
				</div>
				<div class="panel-collapse">
					<?php the_excerpt() ?>
					<div class="button"><a href="<?php the_permalink() ?>">Read more</a></div>
				</div>
			</div>

			<?php endwhile; ?>

		<?php endif; ?>

	</div>
</div>

вообще, не рекомендую использовать query_posts, если нужно изменять настройки цикла используй wp_query или get_posts

[kirill270999]

Антон Литвиненко, я использовал query_posts потому что с его помощью можно было вывести статьи по определенному id категории. А в этом цикли я не понял как это сделать

[Антон Литвиненко]

kirill270999,
https://wp-kama.ru/function/wp_query#categories