Создание php javascript слайд-шоу в WordPress
Я делаю свои первые шаги, учась программировать. Я сделал несколько курсов в Интернете, и теперь я продолжаю учиться на этом опыте, пока создаю дочернюю тему WordPress.
Дело в том, что я делаю слайд-шоу с изображениями. Я нашел этот замечательный и простой в w3schools: http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_self.
Это действительно хорошо, но есть некоторые проблемы, если я хочу использовать его в WordPress.
У меня есть шаблон пост-типа с некоторыми полями, которые я создаю с помощью приложения «Дополнительные настраиваемые поля». На данный момент у меня есть 10 полей изображений, чтобы сделать слайд-шоу.
Итак, это означает, что это:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<h2 class="w3-center">Manual Slideshow</h2>
<div class="w3-content" style="max-width:800px;position:relative">
<img class="mySlides" src="img_fjords.jpg" style="width:100%">
<img class="mySlides" src="img_lights.jpg" style="width:100%">
<img class="mySlides" src="img_mountains.jpg" style="width:100%">
<img class="mySlides" src="img_forest.jpg" style="width:100%">
<a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">❯</a>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
</body>
</html>
Стать таким в WordPress:
<?php get_header(); ?>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script><div class="mySlides"><?php the_field("image"); ?></div>
<div class="mySlides"><?php the_field("image_2"); ?></div>
<div class="mySlides"><?php the_field("image_3"); ?></div>
<div class="mySlides"><?php the_field("image_4"); ?></div>
<div class="mySlides"><?php the_field("image_5"); ?></div>
<div class="mySlides"><?php the_field("image_6"); ?></div>
<div class="mySlides"><?php the_field("image_7"); ?></div>
<div class="mySlides"><?php the_field("image_8"); ?></div>
<div class="mySlides"><?php the_field("image_9"); ?></div>
<div class="mySlides"><?php the_field("image_10"); ?></div><a class="home-btn-left" onclick="plusDivs(-1)">❮</a>
<a class="home-btn-right" onclick="plusDivs(1)">❯</a></div><!-- .content-area -->
<a class="homelink" href="http://localhost/wordpress/">Sarah Morris</a>
<?php get_footer(); ?>
Теперь проблема в том, что мне нужно загрузить 10 изображений во всех моих сообщениях. Если однажды я загружу только 8 изображений, например, я увижу 8 изображений, но я также увижу два пробела из-за других полей изображения, которые я не использую.
После нескольких дней, пытаясь найти решение, я обнаружил, что у меня есть два варианта сделать это:
1) Использование поля повторителя плагина Advanced custom fields.
2) Используя этот код:
<?php if(get_field("image") != ""): ?>
<div class="mySlides"><?php the_field("image"); ?></div>
<?php endif; ?>
Поле повторителя является премиальной функцией. Я не хочу платить за плагин, я предпочитаю учиться делать самостоятельно, поэтому я решил использовать второй вариант.
Теперь проблема в том, что второй вариант не работает правильно. Это не делает то, что я хочу: сделать слайд-шоу без пробелов, когда я использую менее 10 изображений.
Я знаю, что этот код действительно близок к цели, которую я хочу достичь. У вас есть предложение?
Решение
Вы можете скрыть пустые поля, вот ссылка на сайт
Так что ваш php-код должен выглядеть примерно так:
<?php if( get_field("image") ): ?>
<div class="mySlides"><?php the_field("image"); ?></div>
<?php endif; ?>
Вот предложение, как сделать эту работу — проверено и работает на 100%
- Перейдите к «Пользовательские поля»
- В разделе «Группы полей» создайте новый и назовите его «слайдер», например.
- Нажмите кнопку «+ Добавить поле», и вы должны настроить свое поле следующим образом
- Повторите это для всех изображений, которые вы хотите отобразить на слайдере.
- в «настройках местоположений» настройте условие, где вы хотите, чтобы ваш слайдер появился, вот пример — этот появляется на всех страницах и сообщениях
- Нажмите кнопку «Опубликовать» и ваш слайдер готов
Код шаблона страницы
Я предлагаю вам создать собственный шаблон страницы для этого, хотя это не обязательно
<?php
/**
* Template Name: Example Template
*
*
* @package WordPress
* @subpackage Twenty_Sixteen
* @since Twenty Sixteen 1.0
*/
get_header();
// get ACF values
$image = get_field('image');
$image2 = get_field('image_2');
$image3 = get_field('image_3');
?>
<div id="primary" class="content-area" style="position:relative;">
<main id="main" class="site-main" role="main">
<?php // 1st image
if( !empty($image) ): ?>
<div class="mySlides"><img style="width:100%;" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /></div>
<?php endif; ?>
<?php // 2nd image
if( !empty($image2) ): ?>
<div class="mySlides"><img style="width:100%" src="<?php echo $image2['url']; ?>" alt="<?php echo $image2['alt']; ?>" /></div>
<?php endif; ?>
<?php // 3rd image
if( !empty($image3) ): ?>
<div class="mySlides"><img style="width:100%" src="<?php echo $image3['url']; ?>" alt="<?php echo $image3['alt']; ?>" /></div>
<?php endif; ?>
<a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">❯</a></main><!-- .site-main -->
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
<?php get_sidebar( 'content-bottom' ); ?>
Или другое простое решение:
используя php пустой
if( !empty(get_field('image')) ): ?>
<div class="mySlides"><?php the_field("image"); ?></div>
<?php endif; ?>
if( !empty(get_field('image_2')) ): ?>
<div class="mySlides"><?php the_field("image_2"); ?></div>
<?php endif; ?>
if( !empty(get_field('image_3')) ): ?>
<div class="mySlides"><?php the_field("image_3"); ?></div>
<?php endif; ?>
Попробуйте сначала так — с вашим существующим кодом
Другие решения
Других решений пока нет …