Текст 3
<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: 1px solid #ccc;
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>
<!-- Tab links -->
<div class="tab">
<button class="tablinks active" onclick="openTab(event, 'zavisimosti')">Зависимости</button>
<button class="tablinks" onclick="openTab(event, 'kollectiv')">Коллектив</button>
<button class="tablinks" onclick="openTab(event, 'lichnost')">Личность</button>
<button class="tablinks" onclick="openTab(event, 'obschie')">Общие вопросы</button>
<button class="tablinks" onclick="openTab(event, 'otnosheniya')">Отношения</button>
<button class="tablinks" onclick="openTab(event, 'reabilitacia')">Реабилитация</button>
<button class="tablinks" onclick="openTab(event, 'eda')">Пищевые нарушения</button>
<button class="tablinks" onclick="openTab(event, 'roditeli')">Родители и дети</button>
<button class="tablinks" onclick="openTab(event, 'sexologi')">Сексология</button>
<button class="tablinks" onclick="openTab(event, 'dream')">Сны</button>
<button class="tablinks" onclick="openTab(event, 'test')">Тесты</button>
</div>
<!-- Tab content -->
<div id="zavisimosti" class="tabcontent" style="display: block;">
<h3>Зависимости</h3>
<?php
if ( have_posts() ) :
if ( is_home() && ! is_front_page() ) :
?>
<div>
<h2 class="page-title screen-reader-text"><?php single_post_title(); ?></h2>
</div>
<?php
endif;
query_posts($query_string.'&cat=8');
/* Start the Loop */
global $wp_query;
$args = array_merge( $wp_query->query_vars, ['posts_per_page' => 10 ] );
query_posts( $args );
while ( have_posts() ) :
the_post();
/*
* Include the Post-Type-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Type name) and that will be used instead.
*/
get_template_part( 'template-parts/content-ask', get_post_type() );
endwhile;
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>
</div>
<div id="kollectiv" class="tabcontent">
<h3>Коллектив</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="lichnost" class="tabcontent">
<h3>Личность</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<div id="obschie" class="tabcontent">
<h3>Общие</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<div id="otnosheniya" class="tabcontent">
<h3>Отношения</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<div id="reabilitacia" class="tabcontent">
<h3>Реабилитация</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<div id="eda" class="tabcontent">
<h3>Пища</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<div id="roditeli" class="tabcontent">
<h3>Родители</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<div id="sexologi" class="tabcontent">
<h3>Сексология</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<div id="dream" class="tabcontent">
<h3>Сны</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<div id="test" class="tabcontent">
<h3>Тесты</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<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>
<section class="" style="">
<div class="container">
<div class="tabwrapper">
<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: 1px solid #ccc;
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>
<div class="tab">
<button class="tablinks active" onclick="openTab(event, 'tab1')"><?php echo get_cat_name(8);?></button>
<?php
$parent_id = 8;
# получаем дочерние рубрики
$sub_cats = get_categories( array(
'parent' => $parent_id, # or 'child_of'
'hide_empty' => 0
) ); ?>
<?php $counter=2 ?>
<?php if( $sub_cats ){ foreach( $sub_cats as $cat ){ ?>
<button class="tablinks" onclick="openTab(event, 'tab<?php echo $counter ?>')"><?php echo $cat->name ?></button>
<?php $counter++ ?>
<?php
}
wp_reset_postdata(); // сбрасываем глобальную переменную пост
}
?>
</div>
<!-- Статичный таб -->
<div id="tab1" 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 ):?>
<h3 style="margin-bottom: 36px;"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<?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 $count=2 ?>
<?php
if( $sub_cats ){
foreach( $sub_cats as $cat ){
?>
<?php
# получаем записи из рубрики
$myposts = get_posts( array(
'numberposts' => 10,
'category' => $cat->cat_ID,
'orderby' => 'post_date',
'order' => 'DESC',
) ); ?>
<div id="tab<?php echo $count ?>" class="tabcontent">
<?php $count++ ?>
<?php
# выводим записи
global $post;
foreach($myposts as $post){
setup_postdata($post);
?>
<h3 style="margin-bottom: 36px;"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<?php
}
?>
</div>
<?php
}
wp_reset_postdata(); // сбрасываем глобальную переменную пост
}
?>
</div>
</div>
</section>
<section>
<div class="container">
<div class="tabswrapper">
<h2>Заголовок</h2>
<p>Описание</p>
<div class="tabs-custom tabs-vertical row no-gutters" id="tabs-1">
<ul class="nav nav-tabs nav-custom nav-custom-tabs col-md-3">
<li class="nav-item" role="presentation">
<a class="nav-link active" href="#tabs-1-1" data-toggle="tab"><?php echo get_cat_name(8);?></a>
</li>
<?php
$parent_id = 8;
# получаем дочерние рубрики
$sub_cats = get_categories( array(
'parent' => $parent_id, # or 'child_of'
'hide_empty' => 0
) );
?>
<?php $counterr=2 ?>
<?php
if( $sub_cats ){
foreach( $sub_cats as $cat ){
?>
<li class="nav-item" role="presentation"><a class="nav-link" href="#tabs-1-<?php echo $counterr ?>" data-toggle="tab"><?php echo $cat->name ?></a></li>
<?php $counterr++ ?>
<?php
}
wp_reset_postdata(); // сбрасываем глобальную переменную пост
}
?>
</ul>
<div class="tab-content text-left col-md-9" style="min-height: 620px">
<div class="tab-pane fade active show" id="tabs-1-1">
<div class="row row-60">
<?php
$posts = get_posts( array(
'numberposts' => -1,
'category' => 8,
'orderby' => 'date',
'order' => 'DESC',
'include' => array(),
'exclude' => array(),
'meta_key' => '',
'meta_value' =>'',
'post_type' => 'post',
) );
foreach( $posts as $post ):?>
<div class="col-md-6 col-xl-4">
<h5 style="margin-bottom: 36px;"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
</div>
<?php endforeach; ?>
<?php
wp_reset_postdata(); // сброс
?>
</div>
</div>
<?php
$parent_id = 8;
# получаем дочерние рубрики
$sub_cats = get_categories( array(
'parent' => $parent_id, # or 'child_of'
'hide_empty' => 0
) );
?>
<?php $countt=2 ?>
<?php
if( $sub_cats ){
foreach( $sub_cats as $cat ){
?>
<?php
# получаем записи из рубрики
$myposts = get_posts( array(
'numberposts' => -1,
'category' => $cat->cat_ID,
'orderby' => 'post_date',
'order' => 'DESC',
) );
?>
<div class="tab-pane fade show" id="tabs-1-<?php echo $countt ?>">
<!-- Owl Carousel -->
<div class="owl-carousel carousel-product" data-items="1" data-md-items="1" data-lg-items="2" data-xl-items="3" data-stage-padding="0" data-loop="true" data-margin="50" data-mouse-drag="true" data-autoplay="true" autoplayTimeout:5000 data-autoplayhoverpause="true" data-nav="true">
<?php $countt++ ?>
<?php
# выводим записи
global $post;
foreach($myposts as $post){
setup_postdata($post); ?>
<h5 style="margin-bottom: 36px;"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
<?php
}
?>
</div>
</div>
<?php
}
wp_reset_postdata(); // сбрасываем глобальную переменную пост
}
?>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="tabswrapper">
<h2>Заголовок</h2>
<p>Описание</p>
<div class="tabs-custom tabs-vertical row no-gutters" id="tabs-1">
<ul class="nav nav-tabs nav-custom nav-custom-tabs col-md-3">
<li class="nav-item" role="presentation">
<a class="nav-link active" href="#tabs-1-1" data-toggle="tab"><?php echo get_cat_name(8);?></a>
</li>
<?php
$parent_id = 8;
# получаем дочерние рубрики
$sub_cats = get_categories( array(
'parent' => $parent_id, # or 'child_of'
'hide_empty' => 0
) );
?>
<?php $counterr=2 ?>
<?php
if( $sub_cats ){
foreach( $sub_cats as $cat ){
?>
<li class="nav-item" role="presentation"><a class="nav-link" href="#tabs-1-<?php echo $counterr ?>" data-toggle="tab"><?php echo $cat->name ?></a></li>
<?php $counterr++ ?>
<?php
}
wp_reset_postdata(); // сбрасываем глобальную переменную пост
}
?>
</ul>
<div class="tab-content text-left col-md-9" style="min-height: 620px">
<div class="tab-pane fade active show" id="tabs-1-1">
<!-- Owl Carousel -->
<div class="owl-carousel carousel-product" data-items="1" data-md-items="1" data-lg-items="2" data-xl-items="3" data-stage-padding="0" data-loop="true" data-margin="50" data-mouse-drag="true" data-autoplay="true" data-autoplayhoverpause="true" data-nav="true">
<?php
$posts = get_posts( array(
'numberposts' => -1,
'category' => 8,
'orderby' => 'date',
'order' => 'DESC',
'include' => array(),
'exclude' => array(),
'meta_key' => '',
'meta_value' =>'',
'post_type' => 'post',
) );
foreach( $posts as $post ):?>
<h5 style="margin-bottom: 36px;"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
<?php endforeach; ?>
<?php
wp_reset_postdata(); // сброс
?>
</div>
</div>
<?php
$parent_id = 8;
# получаем дочерние рубрики
$sub_cats = get_categories( array(
'parent' => $parent_id, # or 'child_of'
'hide_empty' => 0
) );
?>
<?php $countt=2 ?>
<?php
if( $sub_cats ){
foreach( $sub_cats as $cat ){
?>
<?php
# получаем записи из рубрики
$myposts = get_posts( array(
'numberposts' => -1,
'category' => $cat->cat_ID,
'orderby' => 'post_date',
'order' => 'DESC',
) );
?>
<div class="tab-pane fade show" id="tabs-1-<?php echo $countt ?>">
<!-- Owl Carousel -->
<div class="owl-carousel carousel-product" data-items="1" data-md-items="1" data-lg-items="2" data-xl-items="3" data-stage-padding="0" data-loop="true" data-margin="50" data-mouse-drag="true" data-autoplay="true" autoplayTimeout:5000 data-autoplayhoverpause="true" data-nav="true">
<?php $countt++ ?>
<?php
# выводим записи
global $post;
foreach($myposts as $post){
setup_postdata($post); ?>
<h5 style="margin-bottom: 36px;"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
<?php
}
?>
</div>
</div>
<?php
}
wp_reset_postdata(); // сбрасываем глобальную переменную пост
}
?>
</div>
</div>
</div>
</div>
</section>
<section class="" style="">
<div class="container">
<div class="tabwrapper">
<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: 1px solid #ccc;
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>
<div class="tab">
<?php
$parent_id = 0;
$sub_cats = get_categories( array(
'child_of' => $parent_id, # or 'child_of'
'hide_empty' => 0,
'number' => 0,
'meta_key' => 'num4',
'orderby' => 'meta_value_num',
'order' => 'ASC',
) ); ?>
<?php $counter=1 ?>
<?php if( $sub_cats ){ foreach( $sub_cats as $cat ){ ?>
<?php
$nameCat = get_term_meta($cat->cat_ID, 'short', true); #вывод поля - echo $nameCat;
$numberCat = get_term_meta($cat->cat_ID, 'num4', true);
?>
<?php if (!empty($numberCat)) { ?>
<button class="tablinks" onclick="openTab(event, 'tab<?php echo $counter ?>')"><?php echo $cat->name ?></button>
<?php } ?>
<?php $counter++ ?>
<?php
}
wp_reset_postdata(); // сбрасываем глобальную переменную пост
}
?>
</div>
<?php
$parent_id = 0;
# получаем дочерние рубрики
$sub_cats = get_categories( array(
'child_of' => $parent_id, # or 'child_of'
'hide_empty' => 0,
'number' => 0,
'meta_key' => 'num4',
'orderby' => 'meta_value_num',
'order' => 'ASC',
) );
?>
<?php $count=1 ?>
<?php
if( $sub_cats ){
foreach( $sub_cats as $cat ){
?>
<?php
# получаем записи из рубрики
$myposts = get_posts( array(
'numberposts' => 10,
'category' => $cat->cat_ID,
'orderby' => 'post_date',
'order' => 'DESC',
) ); ?>
<?php
$nameCat = get_term_meta($cat->cat_ID, 'short', true); #вывод поля - echo $nameCat;
$numberCat = get_term_meta($cat->cat_ID, 'num4', true);
?>
<?php if (!empty($numberCat)) { ?>
<div id="tab<?php echo $count ?>" class="tabcontent">
<?php
# выводим записи
global $post;
foreach($myposts as $post){
setup_postdata($post);
?>
<h3 style="margin-bottom: 36px;"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<?php
}
?>
</div>
<?php } ?>
<?php $count++ ?>
<?php
}
wp_reset_postdata(); // сбрасываем глобальную переменную пост
}
?>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="activewrappertab">
<style>
.activewrappertab h5{
color: white;
}
.tabs {
overflow: hidden;
border-radius: 15px;
}
.tabs__head {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
}
.tabs__caption {
text-align: center;
text-transform: uppercase;
padding: 8px 30px;
font-size: 13px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: var(--color);
opacity: 0.6;
background: var(--primary);
transition: 0.25s;
}
.tabs__caption:hover {
opacity: 0.8;
}
.tabs__caption_active {
opacity: 1;
background: var(--primary);
}
.tabs__body {
background: var(--primary);
position: relative;
top: -2px;
transition: 0.25s;
}
.tabs__content {
display: none;
padding: 30px;
color: var(--color);
transform: scaleY(0.8);
opacity: 0;
transform-origin: center top;
-webkit-animation: showContent 0.6s forwards;
animation: showContent 0.6s forwards;
}
.tabs__content_active {
display: block;
}
.section {
--primary: #3fa7d6;
--color: #fff;
padding: 15px 0;
}
.about {
padding: 15px 0;
--primary: #8cff98;
--color: #121212;
}
@-webkit-keyframes showContent {
0% {
transform: scaleY(0.8);
opacity: 0;
}
100% {
transform: scaleY(1);
opacity: 1;
}
}
@keyframes showContent {
0% {
transform: scaleY(0.8);
opacity: 0;
}
100% {
transform: scaleY(1);
opacity: 1;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => { // Структура страницы загружена и готова к взаимодействию
const tabs = () => { /* объявляем основную функцию для вкладок, чтобы вся логика была в одном месте */
const head = document.querySelector('.tabs__head') // ищем элемент с кнопками и записываем в константу
const body = document.querySelector('.tabs__body') // ищем элемент с контентом и записываем в константу
const getActiveTabName = () => { // объявляем функцию для получения названия активной вкладки
return head.querySelector('.tabs__caption_active').dataset.tab // возвращаем значение data-tab активной кнопки
}
const setActiveContent = () => { // объявляем функцию для установки активного элемента контента
if (body.querySelector('.tabs__content_active')) { // если уже есть активный элемент контента
body.querySelector('.tabs__content_active').classList.remove('tabs__content_active') // то скрываем его
}
body.querySelector(`[data-tab=${ getActiveTabName() }]`).classList.add('tabs__content_active') // затем ищем элемент контента, у которого значение data-tab совпадает со значением data-tab активной кнопки и отображаем его
}
// проверяем при загрузке страницы, есть ли активная вкладка
if (!head.querySelector('.tabs__caption_active')) { // если активной вкладки нет
head.querySelector('.tabs__caption').classList.add('tabs__caption_active') // то делаем активной по-умолчанию первую вкладку
}
setActiveContent(getActiveTabName()) // устанавливаем активный элемент контента в соответствии с активной кнопкой при загрузке страницы
head.addEventListener('click', e => { // при клике на .tabs__head
const caption = e.target.closest('.tabs__caption') // узнаем, был ли клик на кнопке
if (!caption) return // если клик был не на кнопке, то прерываем выполнение функции
if (caption.classList.contains('tabs__caption_active')) return // если клик был на активной кнопке, то тоже прерываем выполнение функции и ничего не делаем
if (head.querySelector('.tabs__caption_active')) { // если уже есть активная кнопка
head.querySelector('.tabs__caption_active').classList.remove('tabs__caption_active') // то удаляем ей активный класс
}
caption.classList.add('tabs__caption_active') // затем добавляем активный класс кнопке, на которой был клик
setActiveContent(getActiveTabName()) // устанавливаем активный элемент контента в соответствии с активной кнопкой
})
}
tabs() // вызываем основную функцию
})
</script>
<div class="section__tabs tabs">
<div class="tabs__head">
<?php
$parent_id = 0;
$sub_cats = get_categories( array(
'child_of' => $parent_id, # or 'child_of'
'hide_empty' => 0,
'meta_key' => 'num4',
'orderby' => 'meta_value_num',
'order' => 'ASC',
'number' => '0',
) ); ?>
<?php $counterr=1 ?>
<?php if( $sub_cats ){ foreach( $sub_cats as $cat ){ ?>
<?php
$nameCat = get_term_meta($cat->cat_ID, 'short', true); #вывод поля - echo $nameCat;
$numberCat = get_term_meta($cat->cat_ID, 'num4', true);
?>
<?php if (!empty($numberCat)) { ?>
<div class="tabs__caption" data-tab="tabs<?php echo $counterr ?>"><?php echo $cat->name;?></div>
<?php } ?>
<?php $counterr++ ?>
<?php
}
wp_reset_postdata(); // сбрасываем глобальную переменную пост
}
?>
</div>
<div class="tabs__body">
<?php
$parent_id = 0;
$sub_cats = get_categories( array(
'child_of' => $parent_id, # or 'child_of'
'hide_empty' => 0,
'meta_key' => 'num4',
'orderby' => 'meta_value_num',
'order' => 'ASC',
'number' => '0',
) ); ?>
<?php $counterrr=1 ?>
<?php if( $sub_cats ){ foreach( $sub_cats as $cat ){ ?>
<?php
# получаем записи из рубрики
$myposts = get_posts( array(
'numberposts' => 10,
'category' => $cat->cat_ID,
'orderby' => 'post_date',
'order' => 'DESC',
) );
?>
<?php
$nameCat = get_term_meta($cat->cat_ID, 'short', true); #вывод поля - echo $nameCat;
$numberCat = get_term_meta($cat->cat_ID, 'num4', true);
?>
<div class="tabs__content" data-tab="tabs<?php echo $counterrr ?>">
<?php if (!empty($numberCat)) { ?>
<?php
# выводим записи
global $post;
foreach($myposts as $post){
setup_postdata($post); ?>
<h5 style="margin-bottom: 36px;"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
<?php
}
?>
</div>
<?php } ?>
<?php $counterrr++ ?>
<?php
}
wp_reset_postdata(); // сбрасываем глобальную переменную пост
}
?>
</div>
</div>
</div>
</div>
</section>
Текст 4