Split Slideshow

Сегодня в WordPress мы интегрируем вот такой интересный сладер:

See the Pen Split Slick Slideshow by Fabio Ottaviani (@supah) on CodePen.

Видео:

https://youtu.be/FYSZrfDmqik

Подключение скриптов и стилей:

	if ( is_page_template('split-slideshow/split-slideshow.php') ):
		wp_enqueue_style( 'slick-css', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css' );
		wp_enqueue_style( 'slick-theme-css', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css' );
		wp_enqueue_script( 'slick-js', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js',array('jquery') );
		wp_enqueue_script( 'jquery-mousewheel', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js',array('jquery') );
		
		wp_enqueue_style('split-slideshow-fonts', 'https://fonts.googleapis.com/css?family=Roboto+Condensed:100');
		wp_enqueue_style( 'split-slideshow-css', get_template_directory_uri() . '/split-slideshow/style.css' );
		wp_enqueue_script( 'split-slideshow-js', get_template_directory_uri() . '/split-slideshow/script.js' );
	endif;	

Шаблон страницы (ACF PRO):

<?php //Template Name: Split Slideshow ?>
<?php get_header(); ?>
<?php while(have_posts()): the_post(); ?>

<div class="split-slideshow">
  <div class="slideshow">
  	
    <div class="slider">
      <?php while ( have_rows('split_slideshow') ): the_row(); ?>	
    	
      <div class="item">
      	<?php $background = get_sub_field('background'); ?>
        <img src="<?php echo $background['sizes']['large']; ?>" />
      </div>
    
      <?php endwhile; ?>	  
    </div>
    
  </div>
  
  <div class="slideshow-text">
    <?php while ( have_rows('split_slideshow') ): the_row(); ?>
    	<div class="item"><?php the_sub_field('text'); ?></div>
    <?php endwhile; ?>
  </div>
  
</div>

<?php endwhile; ?>
<?php get_footer(); ?>

PHP-код группы полей:

//Add ACF Fields for Split Slider
if( function_exists('acf_add_local_field_group') ):

acf_add_local_field_group(array(
	'key' => 'group_608c235d8b01e',
	'title' => 'Управление слайдером Split Slideshow',
	'fields' => array(
		array(
			'key' => 'field_608c236007c47',
			'label' => '',
			'name' => 'split_slideshow',
			'type' => 'repeater',
			'instructions' => '',
			'required' => 0,
			'conditional_logic' => 0,
			'wrapper' => array(
				'width' => '',
				'class' => '',
				'id' => '',
			),
			'collapsed' => 'field_608c23aa07c49',
			'min' => 1,
			'max' => 5,
			'layout' => 'table',
			'button_label' => 'Добавить слайд',
			'sub_fields' => array(
				array(
					'key' => 'field_608c237c07c48',
					'label' => 'Фон слайда',
					'name' => 'background',
					'type' => 'image',
					'instructions' => '',
					'required' => 0,
					'conditional_logic' => 0,
					'wrapper' => array(
						'width' => '20',
						'class' => '',
						'id' => '',
					),
					'return_format' => 'array',
					'preview_size' => 'medium',
					'library' => 'all',
					'min_width' => '',
					'min_height' => '',
					'min_size' => '',
					'max_width' => '',
					'max_height' => '',
					'max_size' => '',
					'mime_types' => '',
				),
				array(
					'key' => 'field_608c23aa07c49',
					'label' => 'Текст слайда',
					'name' => 'text',
					'type' => 'text',
					'instructions' => '',
					'required' => 0,
					'conditional_logic' => 0,
					'wrapper' => array(
						'width' => '80',
						'class' => '',
						'id' => '',
					),
					'default_value' => '',
					'placeholder' => '',
					'prepend' => '',
					'append' => '',
					'maxlength' => '',
				),
			),
		),
	),
	'location' => array(
		array(
			array(
				'param' => 'page_template',
				'operator' => '==',
				'value' => 'split-slideshow/split-slideshow.php',
			),
		),
	),
	'menu_order' => 0,
	'position' => 'normal',
	'style' => 'default',
	'label_placement' => 'top',
	'instruction_placement' => 'label',
	'hide_on_screen' => array(
		0 => 'the_content',
	),
	'active' => true,
	'description' => '',
));

Скачать архив с файлами проекта:

Управление выводом глобальных acf-блоков в шаблоне страницы

blue and red cargo containers

В прошлой части мы отредактировали шаблон page.php, чтобы вывести на странице 3 acf-блока помимо основного контента. Данные блоки будут выводится автоматически на всех страницах, которые используют page.php. В этой части мы добавим настройки, которые позволят управлять какие блоки показывать на странице, а какие скрывать.

Continue reading «Управление выводом глобальных acf-блоков в шаблоне страницы»

Вывод глобальных acf-блоков в шаблоне страницы

five women and man standing near shipping containers during daytime

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

Continue reading «Вывод глобальных acf-блоков в шаблоне страницы»

Универсальный блок с помощью ACF, без программирования

aerial photography houses

Задача: вывести на каждой странице сайта html-блок без программирования. Редактирование блока должно приводить к его обновлению на всем сайте. Для наглядности пусть это будет информация о проекте или рекламный баннер.

Continue reading «Универсальный блок с помощью ACF, без программирования»

Страница настроек с бесплатной версией Advanced Custom Fields

black and white audio controller close-up photo

В предыдущей заметке я разобрал как и зачем создавать страницу настроек с помощью Advanced Custom Fields Pro. Но что делать если в наличии только бесплатная версия плагина? Давайте узнаем.

Continue reading «Страница настроек с бесплатной версией Advanced Custom Fields»

Страница настроек сайта с помощью Advanced Custom Fields Pro

gray and black industrial machine

Страница настроек — доступна только в платной версии плагина Advanced Custom Fields. На странице настроек удобно хранить данные общие для всего сайта, например: логотип, контактный телефон, текст копирайта. Т.е. все то, что повторяется в подвале или шапке сайта на каждой странице

Continue reading «Страница настроек сайта с помощью Advanced Custom Fields Pro»

Функция, увеличивающая значение acf-поля на 1

При разработке игровых механик часто нужно, чтобы один из параметров изменился на 1. Да, это тривиальная задача, которая решается в 3 действия:

  • Получить текущее значение из базы
  • Увеличить значение на 1
  • Сохранить новое значение
Continue reading «Функция, увеличивающая значение acf-поля на 1»