/ Дизайн / Slider v.2

Slider v.2

HIT

30.09.2017

1448

Доработал Slider v.1 добавив в него несколько функций: отдельный тип записей — слайды, ссылка со слайда. Сам скрипт слайдера остался прежним.

Тип записей Слайды

add_action( 'init', 'register_post_type_slide' );
 
function register_post_type_slide() {
	$slides = array(
	    'name' => 'Слайд',
	    'singular_name' => 'Slide', // админ панель Добавить->Функцию
		'add_new' => 'Добавить слайд',
		'add_new_item' => 'Добавить новый слайд', // заголовок тега <title>
		'edit_item' => 'Редактировать слайд',
		'new_item' => 'Новый слайд',
		'all_items' => 'Все слайды',
		'view_item' => 'Просмотр слайда на сайте',
		'search_items' => 'Искать слайд',
		'not_found' =>  'Слайд не найден.',
		'not_found_in_trash' => 'В корзине нет слайдов.',
		'menu_name' => 'Слайдер' // ссылка в меню в админке
	);
	$args = array(
		'labels' => $slides,
	        'exclude_from_search' => true,
		'public' => true,
		'show_ui' => true, // показывать интерфейс в админке
		'has_archive' => true, 
		'menu_icon' => 'dashicons-image-flip-horizontal', // иконка dashicons в меню
		'menu_position' => 21, // порядок в меню
		'supports' => array( 'title', 'editor', 'author', 'thumbnail')
	);
	register_post_type('slide', $args);
}

Поле ссылка слайда

// Поле ссылка со слайда

add_action('add_meta_boxes', 'link_box');
function link_box() {
	add_meta_box(
				'slidelink_box',
				'Ссылка слайда',
				'atb_box_func',
				'slide',
				'normal',
				'high'
				);
}

function atb_box_func($post){
$slidelink = get_post_meta($post->ID, 'slidelink', 1);

?>
<label><input style="width:100%;" type="text" name="extra[slidelink]" value="<?php if($slidelink){echo $slidelink;}?>" /></label>
<input type="hidden" name="atb_nonce" value="<?php echo wp_create_nonce(__FILE__); ?>" />
<?php 
}


add_action('save_post', 'atb_box_update');
function atb_box_update($post_id){
	if (!wp_verify_nonce($_POST['atb_nonce'], __FILE__)) return false; // Проверка, что сохраняется именно нужная нам страница.
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return false; // Проверка, что это не автосохранение
	if (!current_user_can('edit_post', $post_id)) return false; // Проверка, что пользователь может изменять этот пост
	if(!isset($_POST['extra']) ) return false;	// Проверка, что нам пришли все поля
	foreach($_POST['extra'] as $key=>$value){ // Циклом добавляем поля. Можно и в ручную это делать... Но так проще добавить новое поле
		if(empty($value) AND $value != 0){ // Если значение пустое и не равно 0
			delete_post_meta($post_id, $key); // Удаляем это поле из мета-данных
			continue; // Продолжаем
		}
		update_post_meta($post_id, $key, $value); // Обновляем или добавляем мета-данные
	}
	return $post_id;
}

Обновленный вывод слайдера

В предыдущей версии слайдера изображения выводились в виде фона блока div (свойство bacground-image). Теперь будем выводить слайды в виде изображений. И еще в данной версии нет подписи к слайдам.

<div id="slides">

<?php
global $post;
$args = array( 'posts_per_page' => 5, 'offset'=> 0, 'post_type' => 'slide' );
$myposts = get_posts( $args );
foreach( $myposts as $post ) : setup_postdata($post); ?>

<?php if( has_post_thumbnail() ) : ?>

<div><a href="<?php echo get_post_meta($post->ID, 'slidelink', true); ?>"><?php the_post_thumbnail(); ?></a></div>

<?php endif; ?>

<?php endforeach; ?>

<?php wp_reset_postdata() ?>

</div>
Добавить обновленные стили

Вывод слайда по месту назначения

Иногда требуется чтобы слайд выводился также на странице/разделе куда он ведет. На тот случай если человек перешел по прямой ссылке и должен увидеть баннер с акцией. Для этого я придумал простую систему.

При заполнении ссылки слайда вводим ее следующим образом, без домена: /product-category/compact-disc/

В месте где требуется вывод слайда прописываем следующий вывод и условие:

<?php
global $post;
$args = array( 'posts_per_page' => 5, 'post_type' => 'slide' );
$myposts = get_posts( $args );

$curlink = $_SERVER['REQUEST_URI'];

foreach( $myposts as $post ) : setup_postdata($post); ?>

<?php 
$link = get_post_meta($post->ID, 'slidelink', true); 

if($link == $curlink){
echo the_post_thumbnail();
}

?>

<?php endforeach; ?>

<?php wp_reset_postdata() ?>
$_SERVER[‘REQUEST_URI’] — интересный способ получения url на стороне сервера. Изучить подробнее.

Для вывода в woocommerce можем создать функцию:

function insert_slide() {

global $post;
$args = array( 'posts_per_page' => 5, 'post_type' => 'slide' );
$myposts = get_posts( $args );

$curlink = $_SERVER['REQUEST_URI'];

foreach( $myposts as $post ) : setup_postdata($post);

$link = get_post_meta($post->ID, 'slidelink', true); 

if($link == $curlink){
echo the_post_thumbnail();
}

endforeach;

wp_reset_postdata();
}

Привязываем функцию к хукам woocommerce, либо задаем свой собственный хук.

// Вывод слайда
add_action( 'woocommerce_before_shop_loop', 'insert_slide', 5 ); //перед товарами в категории
add_action( 'woocommerce_before_single_product', 'insert_slide', 5 ); //на странице товара

А чтобы слайд выводился с определенным классом, нужно в echo the_post_thumbnail(); добавить следующий параметр

echo the_post_thumbnail(array('class' => 'slide'));

Теперь можно задать определенный стиль слайду:

.attachment-slide {float: left; margin-bottom: 15px;}
Сохранилась проблема отображения слайдера, когда в ротации всего один баннер.

Данной проблемы нет в слайдере slick.

Вывести у слайда alt и title

alt и title как обычно прописываем у изображений в медиабиблиотеке. А выводим их следующим образом:

<?php $image_url = wp_get_attachment_image_url( get_post_thumbnail_id($post->ID), 'full' );
$image_id = pippin_get_image_id($image_url); ?>

<img class="slide-div-pic" 
src="<?php echo $url; ?>" 
alt="<?php echo esc_attr( get_post_meta( $image_id, '_wp_attachment_image_alt', true ) ); ?>"
title="<?php echo get_the_title($image_id); ?>">

И самое главное в functions должна быть прописана эта функция pippin_get_image_id:

function pippin_get_image_id($image_url) {
    global $wpdb;
    $attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_url )); 
        return $attachment[0]; 
}

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Slider v.1

Slider v.1

Реализуем простой в настройке, функциональный слайдер с навигацией и двумя эффектами перехода (затухание и перелистывание). Подключение слайдера Подключаем скрипт (если слайдер нужен на главной странице, то подключаем локально в шаблоне Читать далее »

Incredibly Basic Slider

Incredibly Basic Slider

Один из вариантов реализации простого слайдера. Слайдер для изображений (с текстом не пробовал). Из преимуществ — полнейшая адаптивность. Скрипт <script> jQuery(document).ready(function ($) { timer = setInterval(function () { moveRight(); }, Читать далее »

Простой слайдер jquery

Простой слайдер jquery

Постоянно нахожусь в поиске простого, но эффективного слайдера. Здесь представлен один из вариантов. Скрипт в подвал <script type="text/javascript"> var slideWidth=330; var sliderTimer; $(function(){ $('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth); sliderTimer=setInterval(nextSlide,4000); $('.viewport').hover(function(){ clearInterval(sliderTimer); },function(){ sliderTimer=setInterval(nextSlide,4000); }); Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Slider v.2
Подарок за покупку
Рекомендации для васПодарок за покупкуOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.