Карусель последних сообщений на вашем блоге — отличный способ сделать его более интерактивным для ваших посетителей.
Недавно у меня был клиент, попросивший меня сделать последние сообщения карусели для их сайта. Я сказал да, конечно, думая, что должен быть какой-то плагин, который я могу найти, чтобы сделать это очень быстро. Мальчик был я не прав. Я потратил много времени, пытаясь найти его, а те, что я нашел, не делали то, что я хотел. Я подумал, что все это время тратится, я просто сделаю один сам. Просто должен найти хороший базовый код. Вот тогда я и наткнулся на carouFredSel . Вот ссылка: http://caroufredsel.frebsite.nl/ . Мне понравились их примеры, и хотя он все еще не делал все, что хотел, как, например, показывать подпись под изображением, функциональность была именно тем, что мне было нужно. Короче говоря, вот подробности.
Шаг 1 Загрузите carouFredSel
Хорошо, давайте начнем с перехода на http://caroufredsel.frebsite.nl/, загрузки кода карусели и копирования файла jquery.carouFredSel-5.5.0-pack.js в папку с темой WordPress.
Шаг 2 Отредактируйте ваш файл functions.php
Затем откройте ваш файл functions.php и добавьте немного кода:
|
1
2
3
|
if ( function_exists( ‘add_image_size’ ) ) {
add_image_size( ‘sliderimg’, 200, 150, true );
}
|
Обязательно замените 200 и 150 вашими собственными размерами. Сохраните его и загрузите файл. После того, как вы загрузите его, в боковой панели вашего сообщения вы увидите новую опцию под названием « Featured Image ». Вы можете загрузить любое изображение, которое вы хотите использовать здесь, и это будет изображение, которое будет отображаться в карусели. Также обратите внимание, что мы называем это « sliderimg ». Я скажу тебе почему скоро.
Шаг 3 Инициализация carouFredSel и многое другое для вашего файла functions.php
Создайте новый файл JavaScript с именем wptuts-caroufredsel.js и поместите в него следующий код, а затем скопируйте его в папку тем WordPress:
|
1
2
3
4
5
6
7
8
|
jQuery(function($) {
$(‘#foo2’).carouFredSel({
prev: ‘#prev2’,
next: ‘#next2’,
auto: false,
items: 3,
});
});
|
Вот кое-что еще, чтобы принять к сведению на потом. #foo2 — это будет идентификатор карусели, которую мы будем использовать. Нам это нужно, чтобы мы могли стилизовать его в CSS. Также обратите внимание на #prev2 и #next2 для оформления предыдущей и следующей кнопок, и, наконец, номер 3 — это количество элементов, которые вы хотите показать одновременно. В этом случае это 3 .
Теперь снова откройте файл functions.php и добавьте следующий код для загрузки файлов JavaScript:
|
1
2
3
4
5
6
7
8
|
function wptuts_load_caroufredsel() {
// Enqueue carouFredSel, note that we specify ‘jquery’ as a dependency, and we set ‘true’ for loading in the footer:
wp_register_script( ‘caroufredsel’, get_template_directory_uri() . ‘/js/jquery.carouFredSel-5.5.0-packed.js’, array( ‘jquery’ ), ‘5.5.0’, true );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( ‘wptuts-caroufredsel’, get_template_directory_uri() . ‘/js/wptuts-caroufredsel.js’, array( ‘caroufredsel’ ), », true );
}
add_action( ‘wp_enqueue_scripts’, ‘wptuts_load_caroufredsel’ );
|
Обязательно измените пути к вашим файлам JavaScript.
Шаг 4 Отредактируйте шаблон страницы
Теперь давайте откроем шаблон страницы, в котором вы хотите, чтобы карусель была показана. Как только вы откроете ее там, где вы хотите, чтобы карусель была отображена, вставьте этот код ниже:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
<div class=»list_carousel»>
<ul id=»foo2″>
<?php
$carouselPosts = new WP_Query();
$carouselPosts->query(‘showposts=12’);
?>
<?php while ($carouselPosts->have_posts()) : $carouselPosts->the_post();
<li>
<a href=»<?php the_permalink() ?>» title=»<?php the_title(); ?>»><?php echo get_the_post_thumbnail($id, ‘sliderimg’);
<div class=»slidertitle»><a href=»<?php the_permalink() ?>» rel=»bookmark» title=»Permanent Link to <?php the_title_attribute(); ?>»><?php the_title();
</li>
<?php endwhile;
</ul>
<div class=»clearfix»></div>
<a class=»prev» id=»prev2″ href=»#»><span>prev
<a class=»next» id=»next2″ href=»#»><span>next
</div>
|
Теперь позвольте мне объяснить, прежде чем сойти с ума. Первая часть блока кода — это имя класса (для стилизации, конечно), я называю его list_carousel . Далее вы увидите тот идентификатор #foo2 я говорил ранее. Далее идет запрос на посты:
|
1
|
<?php query_posts(‘showposts=12’);
|
Я говорю, чтобы вытащить последние 12 сообщений. Таким образом, так как я сказал ранее, чтобы показывать 3 за раз, он может показывать 4 набора по 3 поста. Но допустим, вы хотите быть немного более конкретным и показывать только сообщения определенной категории. Тогда вы бы использовали этот код вместо кода showposts выше:
|
1
|
<?php query_posts(‘category_name=slider&showposts=12’);
|
Как насчет тегов вы говорите? Ну вот и все
|
1
|
<?php query_posts(‘tag=featured&showposts=12&offset=0&order=ASC’);
|
Измените « featured » на любой тег, который вы хотите использовать. Я также звоню 12 постам и перечисляю их в порядке возрастания.
Смущены еще? Надеюсь нет. Хорошо, затем в главном блоке кода выше я вытаскиваю « sliderimg » sliderimg изображение поста, а также делаю его ссылкой на реальный пост, поэтому, конечно, когда люди нажимают на изображение, они попадают в пост. сам.
|
1
|
<a href=»<?php the_permalink() ?>» title=»<?php the_title(); ?>»><?php echo get_the_post_thumbnail($id, ‘sliderimg’);
|
В случае моего клиента они не только хотели отобразить изображение в карусели, они также хотели отобразить заголовок самого сообщения. Итак, под изображением мы отображаем заголовок поста, делаем его также ссылкой на пост и назначаем ему класс с именем « slidertitle », чтобы мы могли его slidertitle .
|
1
|
<div class=»slidertitle»><a href=»<?php the_permalink() ?>» rel=»bookmark» title=»Permanent Link to <?php the_title_attribute(); ?>»><?php the_title();
|
* phew * Хорошо, в самом низу находятся предыдущие и следующие кнопки с id prev2 и next2 которые мы указали в коде JavaScript ранее.
|
1
2
|
<a class=»prev» id=»prev2″ href=»#»><span>prev
<a class=»next» id=»next2″ href=»#»><span>next
|
Теперь это все объяснимо, давайте двигаться дальше!
Шаг 5 Разработайте его с помощью CSS
Теперь у нас все работает, но это не похоже на то, что мы хотим … поэтому откройте ваш файл style.css и вставьте этот код, и я объясню следующее:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
.list_carousel {
height: 175px;
margin: 0 auto;
overflow: hidden;
width: 660px;
}
.list_carousel ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
.list_carousel li {
font-size: 14px;
color: #333;
width: 200px;
padding: 0;
margin: 2px;
display: block;
float: left;
}
.list_carousel.responsive {
width: auto;
margin-left: 0;
}
.list_carousel .clearfix {
float: none;
clear: both;
}
.list_carousel a.prev {
background: url(«next-arrow-left.png») no-repeat scroll 0 0 transparent;
display: block;
height: 150px;
position: relative;
top: -174px;
width: 50px;
}
.list_carousel a.next {
background: url(«next-arrow-right.png») no-repeat scroll 0 0 transparent;
display: block;
height: 150px;
position: relative;
left: 635px !important;
top: -324px;
width: 50px;
}
.list_carousel a.prev {
}
.list_carousel a.next {
right: -29px;
}
.list_carousel a.prev.disabled, a.next.disabled {
cursor: default;
}
.list_carousel a.prev span, a.next span {
display: none;
}
#foo2 {
left: 20px;
margin: 0 2px;
position: relative;
}
|
Да, это большой блок кода. Ха-ха! Извини, я многое хотел с этим сделать, как ты видишь. Позвольте мне попытаться сделать это как можно безболезненнее Если вы хотите настроить ширину, измените 660px и 175px на желаемую ширину и высоту для карусели. Также с .list_carousel li вы можете изменить цвета заголовка поста и ширину каждого элемента. .list_carousel a.prev и .list_carousel a.next — это место, где отображаются предыдущие и следующие изображения стрелок. Это было просто, как мне нужно, чтобы это выглядело, конечно. Стиль зависит от вас.
Вот скриншот готового продукта
А также ссылка на живую версию: http://www.kstudiofx.com/carousel-tutorial
[Update:] В этом руководстве изначально использовалась query_posts() , что является плохой практикой в этом контексте (как отметил Чип Беннетт в комментариях). Мы обновили код, чтобы более правильно использовать WP_Query() .