<div class="tabwrapper" style="margin-top: 24px;" id="vopros">      
      <style>
      /* Style the tab */
      .tab {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
      }
      /* Style the buttons that are used to open the tab content */
      .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
      }
      /* Change background color of buttons on hover */
      .tab button:hover {
        background-color: #ddd;
      }
      /* Create an active/current tablink class */
      .tab button.active {
        background-color: #ccc;
      }
      /* Style the tab content */
      .tabcontent {
        display: none;
        padding: 6px 12px;
        border-top: none;
      }
      </style>  
      <script>
      function openTab(evt, tabName) {
        // Declare all variables
        var i, tabcontent, tablinks;
        // Get all elements with class="tabcontent" and hide them
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
        }
        // Get all elements with class="tablinks" and remove the class "active"
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        // Show the current tab, and add an "active" class to the button that opened the tab
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
      }
      </script>
        <a href="#vopros" class="button button-gray-light-outline active" style="font-size: 12px; margin-bottom: 4px; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s;" onclick="openTab(event, 'all')">Недавние</a>
        <div id="all" class="tabcontent" style="display: block;">
          <?php
          $posts = get_posts( array(
            'numberposts' => 10,
            'category'    => 8,
            'orderby'     => 'date',
            'order'       => 'DESC',
            'include'     => array(),
            'exclude'     => array(),
            'meta_key'    => '',
            'meta_value'  =>'',
            'post_type'   => 'post',
          ) );
          foreach( $posts as $post ):?>
            <div id="accordion" role="tablist">
                  <!-- Bootstrap card-->
                  <div class="card card-custom">
                    <div class="card-custom-heading">
                      <img style="width: 64px; height: 64px;" src="/wp-content/uploads/2021/10/avatar.png">
                      <br><?php the_field('name'); ?>
                      <div style="font-size: 12px; margin-top: 10px;">Вопрос психологу:
                       <?php
                        $post_objects = get_field('gadalka');
                        if( $post_objects ): ?>
                        <?php foreach( $post_objects as $post_object): ?>
                          <a href="<?php echo get_permalink($post_object->ID); ?>"><img style="width: 24px; height: 24px;" src="<?php echo wp_get_attachment_url( get_post_thumbnail_id( $post_object->ID ) ); ?>" alt="Психолог онлайн: <?php echo get_the_title($post_object->ID); ?>"></a>
                        <?php endforeach; ?>
                        <?php endif;?>                        
                        <?php
                        $post_objects = get_field('gadalka');
                        if( $post_objects ): ?>
                        <?php foreach( $post_objects as $post_object): ?>
                          <a href="<?php echo get_permalink($post_object->ID); ?>"><?php echo get_the_title($post_object->ID); ?></a>
                        <?php endforeach; ?>
                      <?php endif;?>
                      задан <?php echo get_the_date(); ?>
                      </div>
                      <h3 style="font-size: 24px;" class="card-custom-title"><?php the_title (); ?>
                      </h3>
                      <div style="font-size: 12px; margin-top: 10px;">Ответ от психолога:</div>
                      <i><?php the_excerpt(); ?></i>
                      <div style="line-height: 0; margin-top: 18px;">
                      <a href="<?php the_permalink(); ?>">Подробнее</a><br>
                      <p data-toggle="modal" data-target="#myModal" style="font-size: 10px;" class="button button-link">Задать свой вопрос</p>
                      </div>
                    </div>
                  </div>
              </div>
          <?php endforeach; ?>
        <?php  
          wp_reset_postdata(); // сброс
        ?>
        </div>
      <?php
      $parent_id = 8;
      # получаем дочерние рубрики
      $sub_cats = get_categories( array(
        'parent' => $parent_id, # or 'child_of'
        'hide_empty' => 0
      ) ); ?>
      <?php $counter=1 ?>     
      <?php
      if( $sub_cats ){
        foreach( $sub_cats as $cat ){
        echo '' ; ?>
          <a href="#vopros" class="button button-gray-light-outline" style="font-size: 12px; margin-bottom: 4px; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s;" onclick="openTab(event, 'tab<?php echo $counter ?>')"><?php echo $cat->name ?></a>
            <?php
        # получаем записи из рубрики
        $myposts = get_posts( array(
          'numberposts' => 5,
          'category'    => $cat->cat_ID,
          'orderby'     => 'post_date',
          'order'       => 'DESC',
        ) ); ?>
            <div id="tab<?php echo $counter ?>" class="tabcontent">
            <?php $counter++ ?>   
            <?php
        # выводим записи
        global $post;
        foreach($myposts as $post){
          setup_postdata($post); ?>
          <div id="accordion" role="tablist">
                  <!-- Bootstrap card-->
                  <div class="card card-custom">
                    <div class="card-custom-heading">
                      <img style="width: 64px; height: 64px;" src="/wp-content/uploads/2021/10/avatar.png">
                      <br><?php the_field('name'); ?>
                      <div style="font-size: 12px; margin-top: 10px;">Вопрос психологу:
                       <?php
                        $post_objects = get_field('gadalka');
                        if( $post_objects ): ?>
                        <?php foreach( $post_objects as $post_object): ?>
                          <a href="<?php echo get_permalink($post_object->ID); ?>"><img style="width: 24px; height: 24px;" src="<?php echo wp_get_attachment_url( get_post_thumbnail_id( $post_object->ID ) ); ?>" alt="Психолог онлайн: <?php echo get_the_title($post_object->ID); ?>"></a>
                        <?php endforeach; ?>
                        <?php endif;?>                        
                        <?php
                        $post_objects = get_field('gadalka');
                        if( $post_objects ): ?>
                        <?php foreach( $post_objects as $post_object): ?>
                          <a href="<?php echo get_permalink($post_object->ID); ?>"><?php echo get_the_title($post_object->ID); ?></a>
                        <?php endforeach; ?>
                      <?php endif;?>
                      задан <?php echo get_the_date(); ?>
                      </div>
                      <h3 style="font-size: 24px;" class="card-custom-title"><?php the_title (); ?>
                      </h3>
                      <div style="font-size: 12px; margin-top: 10px;">Ответ от психолога:</div>
                      <i><?php the_excerpt(); ?></i>
                      <div style="line-height: 0; margin-top: 18px;">
                      <a href="<?php the_permalink(); ?>">Подробнее</a><br>
                      <p data-toggle="modal" data-target="#myModal" style="font-size: 10px;" class="button button-link">Задать свой вопрос</p>
                      </div>
                    </div>
                  </div>
              </div>
         <?php
        } ?> </div>
        <?php
        }
        wp_reset_postdata(); // сбрасываем глобальную переменную пост
      }
          ?>  
    </div> 

Как сделать чтобы ваш проект оказался в нашем портфолио?

Оформите заказ

На создание сайта и продвижение

Нужен продающий сайт под ключ?

Сайты с трафиком и заявками в наши дни - это редкость, но наша студия по созданию сайтов Seosite справится с этой задачей. Создать конверсионный сайт под ключ легко, с помощью наших инструкций это стало возможным. Ваш созданный сео сайт, словно правильно подобранный ключ от замка, откроет вам двери в заветный ТОП поисковой выдачи Яндекс и Google. Ищите надежную студию, кто занимается созданием сайтов под ключ, что работают и приносят заявки - тогда вы зашли по адресу. Обращайтесь к siteseo.site

Портфолио работ по созданию сайтов, SEO продвижению, рекламе

В интернет-магазинах важно определить структуру товаров. При создании товарного каталога важно учитывать факторы ранжирования. Наши разработчики имеют большой опыт разработки, вся система создания проектов строго структурирована и проходит по разработанным нами инструкциям. Поверьте нашему опыту, лучше не жалеть бюджет для создания качественной структуры сеосайта. Бюджет пойдёт на продвижение блога, главной страницы, услуг. Преимущество сеосайта заключается в удобном функционале и возможности учета продаж.

Табы со скроллом

Статичные табы

Копирайтинг: что это — 7 советов для начинающих копирайтеров

Копирайтинг — это написание эффективных продающих и информационных текстов для веб-сайтов и печатных изданий. Целью копирайтерских текстов является привлечь внимание читателей и побудить их к целевым действиям: заказать товар или услугу, подписаться на рассылку сайта.

Выбор админки

Табы без скролла