Как можно реализовать этот вариант с использованием ACF на WordPress?
Подскажите пожалуйста как можно реализовать такой пример используюя ACF на Wordpress.
Я этот вариант наверстал и реализовал с помощью jQuery-ui-tabs но как посадить на WP с помощью ACF пока не могу понять, подскажите пожалуйста.
Нет принципиальной разницы слайдером или табами, желательно вариант который будет проще реализовать и удобнее использовать с админки.
Спасибо !
$(function () {
$("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
$("#tabs").tabs({
active: 0,
});
});.tabs__descr {
background-color: #003333;
}
.ui-tabs-vertical {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.ui-tabs-vertical .ui-tabs-nav {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-flex: 0;
-ms-flex: 0 1 27%;
flex: 0 1 27%;
margin-right: 40px;
}
.ui-tabs-vertical .ui-tabs-nav:before {
position: absolute;
content: "";
width: 12px;
height: 95%;
top: 5px;
bottom: -10px;
background-color: #fff;
}
.ui-tabs-vertical .ui-tabs-nav li {
position: relative;
clear: left;
width: 100%;
border-bottom-width: 1px !important;
border-right-width: 0 !important;
margin: 0 -1px 0.2em 0;
}
.ui-tabs-vertical .ui-tabs-nav li:before {
position: absolute;
content: "";
width: 30px;
height: 30px;
left: -10px;
background-color: #003333;
border-radius: 50%;
border: 9px solid #fff;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active:before {
width: 104px;
height: 104px;
left: -48px;
border: 12px solid #fff;
background-image: url(../img/svg/ichtab.svg);
background-repeat: no-repeat;
background-position: center;
background-color: #33cccc;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ui-tabs-vertical .ui-tabs-nav li a {
display: block;
font-size: 26px;
line-height: 33px;
color: #fff;
font-weight: 600;
padding: 0 15% 0 65px;
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: 0;
padding-right: 0.1em;
border-right-width: 1px;
padding-left: 60px;
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active a {
color: #33cccc;
padding-left: 35px;
}
.ui-tabs-panel.ui-corner-bottom.ui-widget-content:before {
position: absolute;
content: "";
border: 40px solid transparent;
border-left-color: #fff;
margin: 0 0 0 -150px;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.ui-tabs-vertical .ui-tabs-panel {
-webkit-box-flex: 0;
-ms-flex: 0 1 73%;
flex: 0 1 73%;
padding: 70px;
position: relative;
background-color: #fff;
}
.ui-tabs-vertical .ui-tabs-panel p {
margin-bottom: 35px;
color: #003333;
font-size: 20px;
line-height: 26px;
font-weight: 500;
}
.tab__description__bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.tab__description__bottom p {
padding-left: 100px;
background-size: contain;
background-position: center left;
background-repeat: no-repeat;
}
.tab__description__bottom p:first-child {
background-image: url(../img/svg/ab-i1.svg);
}
.tab__description__bottom p:nth-child(2) {
background-image: url(../img/svg/ab-i2.svg);
}
.tab__description__bottom p:last-child {
background-image: url(../img/svg/ab-i1.svg);
}
.tab__button {
position: absolute;
bottom: -29px;
left: 50%;
margin-left: -105px;
}
.tab__button .button {
background-color: #33cccc;
color: #fff;
}
.tab__button .button:hover {
background-color: #fff;
color: #003333;
}<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<section class="tabs__descr">
<div class="container">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Citizenship of Ukraine</a></li>
<li><a href="#tabs-2">Temporary residence permit</a></li>
<li><a href="#tabs-3">Permanent residence permit</a></li>
<li><a href="#tabs-4">Invitation to Ukraine</a></li>
<li><a href="#tabs-5">Registration in Kiev</a></li>
<li><a href="#tabs-6">Extension of the period of stay</a></li>
</ul>
<div id="tabs-1">
<h2>Temporary residence permit</h2>
<p>
Picture with a title and a button to go to the corresponding
page. Slider images automatically switch at 3-5 second
intervals. At the bottom of the slider are the slider control
buttons. Picture with a title and a button to go to the
corresponding page. Slider images automatically switch at 3-5
second intervals.
</p>
<p>
At the bottom of the slider are the slider control buttons.
Picture with a title and a button to go to the corresponding
page. Slider images automatically switch at 3-5 second
intervals. At the bottom of the slider are the slider control
buttons. At the bottom of the slider are the slider control
buttons. Picture with a title and a button to go to the
corresponding page.
</p>
<p>
Slider images automatically switch at 3-5 second intervals. At
the bottom of the slider are the slider control buttons. At the
bottom of the slider are the slider control buttons. Picture
with a title and a button to go to the corresponding page.
Slider images automatically switch at 3-5 second intervals. At
the bottom of the slider are the slider control buttons. At the
bottom of the slider are the slider control buttons. Picture
with a title and a button to go to the corresponding page.
</p>
<p>
Picture with a title and a button to go to the corresponding
page. Slider images automatically switch at 3-5 second
intervals. Picture with a title and a button to go to the
corresponding page. Slider images automatically switch at 3-5
second intervals.
</p>
<div class="about__icons tab__description__bottom">
<p>
At the bottom of the slider are the slider control buttons.
</p>
<p>
At the bottom of the slider are the slider control buttons.
</p>
<p>
At the bottom of the slider are the slider control buttons.
</p>
</div>
<div class="tab__button">
<a href="#" class="button">contact</a>
</div>
</div>
<div id="tabs-2">
<h2>2Temporary residence permit</h2>
<p>
Picture with a title and a button to go to the corresponding
page. Slider images automatically switch at 3-5 second
intervals. At the bottom of the slider are the slider control
buttons. Picture with a title and a button to go to the
corresponding page. Slider images automatically switch at 3-5
second intervals.
</p>
<p>
At the bottom of the slider are the slider control buttons.
Picture with a title and a button to go to the corresponding
page. Slider images automatically switch at 3-5 second
intervals. At the bottom of the slider are the slider control
buttons. At the bottom of the slider are the slider control
buttons. Picture with a title and a button to go to the
corresponding page.
</p>
<p>
Slider images automatically switch at 3-5 second intervals. At
the bottom of the slider are the slider control buttons. At the
bottom of the slider are the slider control buttons. Picture
with a title and a button to go to the corresponding page.
Slider images automatically switch at 3-5 second intervals. At
the bottom of the slider are the slider control buttons. At the
bottom of the slider are the slider control buttons. Picture
with a title and a button to go to the corresponding page.
</p>
<p>
Picture with a title and a button to go to the corresponding
page. Slider images automatically switch at 3-5 second
intervals. Picture with a title and a button to go to the
corresponding page. Slider images automatically switch at 3-5
second intervals.
</p>
<div class="about__icons tab__description__bottom">
<p>
At the bottom of the slider are the slider control buttons.
</p>
<p>
At the bottom of the slider are the slider control buttons.
</p>
<p>
At the bottom of the slider are the slider control buttons.
</p>
</div>
<div class="tab__button">
<a href="#" class="button">contact</a>
</div>
</div>
<div id="tabs-3">
<h2>1Temporary residence permit</h2>
<p>
Picture with a title and a button to go to the corresponding
page. Slider images automatically switch at 3-5 second
intervals. At the bottom of the slider are the slider control
buttons. Picture with a title and a button to go to the
corresponding page. Slider images automatically switch at 3-5
second intervals.
</p>
<p>
At the bottom of the slider are the slider control buttons.
Picture with a title and a button to go to the corresponding
page. Slider images automatically switch at 3-5 second
intervals. At the bottom of the slider are the slider control
buttons. At the bottom of the slider are the slider control
buttons. Picture with a title and a button to go to the
corresponding page.
</p>
<p>
Slider images automatically switch at 3-5 second intervals. At
the bottom of the slider are the slider control buttons. At the
bottom of the slider are the slider control buttons. Picture
with a title and a button to go to the corresponding page.
Slider images automatically switch at 3-5 second intervals. At
the bottom of the slider are the slider control buttons. At the
bottom of the slider are the slider control buttons. Picture
with a title and a button to go to the corresponding page.
</p>
<p>
Picture with a title and a button to go to the corresponding
page. Slider images automatically switch at 3-5 second
intervals. Picture with a title and a button to go to the
corresponding page. Slider images automatically switch at 3-5
second intervals.
</p>
<div class="about__icons tab__description__bottom">
<p>
At the bottom of the slider are the slider control buttons.
</p>
<p>
At the bottom of the slider are the slider control buttons.
</p>
<p>
At the bottom of the slider are the slider control buttons.
</p>
</div>
<div class="tab__button">
<a href="#" class="button">contact</a>
</div>
</div>
<div id="tabs-4">
<h2>1Temporary residence permit</h2>
<p>
Picture with a title and a button to go to the corresponding
page. Slider images automatically switch at 3-5 second
intervals. At the bottom of the slider are the slider control
buttons. Picture with a title and a button to go to the
corresponding page. Slider images automatically switch at 3-5
second intervals.
</p>
<p>
At the bottom of the slider are the slider control buttons.
Picture with a title and a button to go to the corresponding
page. Slider images automatically switch at 3-5 second
intervals. At the bottom of the slider are the slider control
buttons. At the bottom of the slider are the slider control
buttons. Picture with a title and a button to go to the
corresponding page.
</p>
<p>
Slider images automatically switch at 3-5 second intervals. At
the bottom of the slider are the slider control buttons. At the
bottom of the slider are the slider control buttons. Picture
with a title and a button to go to the corresponding page.
Slider images automatically switch at 3-5 second intervals. At
the bottom of the slider are the slider control buttons. At the
bottom of the slider are the slider control buttons. Picture
with a title and a button to go to the corresponding page.
</p>
<p>
Picture with a title and a button to go to the corresponding
page. Slider images automatically switch at 3-5 second
intervals. Picture with a title and a button to go to the
corresponding page. Slider images automatically switch at 3-5
second intervals.
</p>
<div class="about__icons tab__description__bottom">
<p>
At the bottom of the slider are the slider control buttons.
</p>
<p>
At the bottom of the slider are the slider control buttons.
</p>
<p>
At the bottom of the slider are the slider control buttons.
</p>
</div>
<div class="tab__button">
<a href="#" class="button">contact</a>
</div>
</div>
<div id="tabs-5">
<h2>1Temporary residence permit</h2>
<p>
Picture with a title and a button to go to the corresponding
page. Slider images automatically switch at 3-5 second
intervals. At the bottom of the slider are the slider control
buttons. Picture with a title and a button to go to the
corresponding page. Slider images automatically switch at 3-5
second intervals.
</p>
<p>
At the bottom of the slider are the slider control buttons.
Picture with a title and a button to go to the corresponding
page. Slider images automatically switch at 3-5 second
intervals. At the bottom of the slider are the slider control
buttons. At the bottom of the slider are the slider control
buttons. Picture with a title and a button to go to the
corresponding page.
</p>
<p>
Slider images automatically switch at 3-5 second intervals. At
the bottom of the slider are the slider control buttons. At the
bottom of the slider are the slider control buttons. Picture
with a title and a button to go to the corresponding page.
Slider images automatically switch at 3-5 second intervals. At
the bottom of the slider are the slider control buttons. At the
bottom of the slider are the slider control buttons. Picture
with a title and a button to go to the corresponding page.
</p>
<p>
Picture with a title and a button to go to the corresponding
page. Slider images automatically switch at 3-5 second
intervals. Picture with a title and a button to go to the
corresponding page. Slider images automatically switch at 3-5
second intervals.
</p>
<div class="about__icons tab__description__bottom">
<p>
At the bottom of the slider are the slider control buttons.
</p>
<p>
At the bottom of the slider are the slider control buttons.
</p>
<p>
At the bottom of the slider are the slider control buttons.
</p>
</div>
<div class="tab__button">
<a href="#" class="button">contact</a>
</div>
</div>
<div id="tabs-6">
<h2>1Temporary residence permit</h2>
<p>
Picture with a title and a button to go to the corresponding
page. Slider images automatically switch at 3-5 second
intervals. At the bottom of the slider are the slider control
buttons. Picture with a title and a button to go to the
corresponding page. Slider images automatically switch at 3-5
second intervals.
</p>
<p>
At the bottom of the slider are the slider control buttons.
Picture with a title and a button to go to the corresponding
page. Slider images automatically switch at 3-5 second
intervals. At the bottom of the slider are the slider control
buttons. At the bottom of the slider are the slider control
buttons. Picture with a title and a button to go to the
corresponding page.
</p>
<p>
Slider images automatically switch at 3-5 second intervals. At
the bottom of the slider are the slider control buttons. At the
bottom of the slider are the slider control buttons. Picture
with a title and a button to go to the corresponding page.
Slider images automatically switch at 3-5 second intervals. At
the bottom of the slider are the slider control buttons. At the
bottom of the slider are the slider control buttons. Picture
with a title and a button to go to the corresponding page.
</p>
<p>
Picture with a title and a button to go to the corresponding
page. Slider images automatically switch at 3-5 second
intervals. Picture with a title and a button to go to the
corresponding page. Slider images automatically switch at 3-5
second intervals.
</p>
<div class="about__icons tab__description__bottom">
<p>
At the bottom of the slider are the slider control buttons.
</p>
<p>
At the bottom of the slider are the slider control buttons.
</p>
<p>
At the bottom of the slider are the slider control buttons.
</p>
</div>
<div class="tab__button">
<a href="#" class="button">contact</a>
</div>
</div>
</div>
</div>
</section>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"
integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="
crossorigin="anonymous"></script>Возможно есть способ который будет добавлять ссылку с id и соответственно id табу при клонирование поля?
Ответы (1 шт):
Автор решения: Simon
→ Ссылка
Вы можете сделать это при помощи repeater поля. Все что вам нужно, просто прогнать цикл 2 раза, чтобы не заморачиваться особо и все. Будет что-то вроде:
<?php if ( have_rows( 'your_repeater' ) ) : ?>
<section class="tabs__descr">
<div class="container">
<div id="tabs">
<ul>
<?php while ( have_rows( 'your_repeater' ) ) : the_row(); ?>
<?php // Тут просто текстовое поле заголовка + id таба если нужно, можно сделать отдельным полем и подставить его в href ?>
<?php // Учтите что the_row_index() было добавлено в ACF с версии 5.8.8 вроде как, если более ранняя версия, используйте echo get_row_index(); ?>
<li><a href="#tabs-<?php the_row_index(); ?>"><?php the_sub_field( 'title' ); ?></a></li>
<?php endwhile; ?>
</ul>
<?php while ( have_rows( 'your_repeater' ) ) : the_row(); ?>
<?php // Тут просто WYSIWYG ?>
<div id="tabs-<?php the_row_index(); ?>">
<?php the_sub_field( 'text' ); ?>
<?php if ( get_sub_field( 'description' ) ) : ?>
<div class="about__icons tab__description__bottom">
<?php // Тоже просто WYSIWYG ?>
<?php the_sub_field( 'description' ); ?>
</div>
<?php endif; ?>
<?php
// Relational -> Link
$button = get_sub_field( 'button' );
if ( $button ) : ?>
<div class="tab__button">
<a href="<?php echo esc_url( $button['url'] ); ?>" target="<?php echo ( $button['target'] ) ?: '_self'; ?>" class="button"><?php echo esc_html( $button['title'] ); ?></a>
</div>
<?php endif; ?>
</div>
<?php endwhile; ?>
</div>
</div>
</section>
<?php endif; ?>