Создайте баннер «Разговор» с переворачивающимся текстом в WordPress: часть 1

Слайдеры могут быть спорными - у нас есть клиенты, которые настояли на них независимо от того, улучшают ли они сайт. Но у них есть свое место. Они могут помочь выделить ключевой контент, отобразить изображения на сайте, где важны визуальные элементы, и оживить сайт.

В большинстве случаев вы, вероятно, использовали ползунки для отображения изображений, которые могут или не могут быть связаны с контентом на вашем сайте. Но вы также можете использовать ползунок для отображения текста на вашем сайте.

В этом двух уроках я покажу вам, как создать текстовый слайдер с интересным эффектом: он будет использовать пользовательский тип сообщения, чтобы вставлять один кусок текста за другим в два блока, создавая эффект разговора в верхней части страницы. Это будет наложено на фотографию двух людей, так что эффект в том, что они разговаривают друг с другом.

Что вам понадобится

Для этого вам понадобятся:

• Установка для разработки WordPress
• Редактор кода
• Установлена бесплатная адаптивная тема Responsive

Пример, над которым я буду работать, - это реальный сайт, который я разрабатываю для клиента, который запускает дочернюю тему Responsive темы. Я создам дочернюю с темы Responsive и добавлю к ней свой стиль, а также функции в файле functions.php темы. Вы можете добавить это в свою тему или создать дочернюю тему Responsive, как я.

В этом уроке мы получим слайдер и запустим его с помощью пользовательского типа сообщения. В частности, мы:

• Создадим дочернюю тему для темы Responsive
• Зарегистрируем пользовательский тип сообщения
• Создадим сообщения, используя тип персонализированного сообщения
• Установим и настроим плагин для вывода текстового слайдера
• Добавим наш слайдер в заголовок сайта с помощью хука действия

В следующей части мы добавим CSS к нашей теме, чтобы правильно позиционировать текст, создавая эффект беседы и стилизуя его.

Итак, начнем!

Создание дочерней темы

Сначала давайте создадим дочернюю тему темы Responsive. Я делаю это, потому что я не хочу редактировать саму тему Responsive:  если вы это сделали, вы потеряете свою работу, когда будете обновлять тему. Кроме того, вы можете создать плагин для этого.

В каталоге wp-content / themes создайте новую пустую папку. Я называю мой tutsplus-conversation-banner.

В этой папке создайте файл с именем style.css и добавьте в него следующее:

1

/*

2

Theme Name:     Tutsplus Conversation banner Theme

3

Theme URI:      https://.tutsplus.com/tutorials/create-a-conversation-banner-with-revolving-text-using-a-custom-post-type--cms-25938

4

Description:    Theme for tuts+ tutorial on creating a conversation banner effect. Child theme for the Responsive theme.

5

Author:         Rachel McCollin

6

Author URI:     http://rachelmccollin.co.uk/

7

Template:       responsive

8

Version:        1.0

9

*/

10

11

@import url("../responsive/style.css");

Измените приведенный выше код, чтобы стать автором и добавить свой собственный URI.

Теперь сохраните этот файл и активируйте новую тему.

Добавить пользовательский стиль

Поскольку это реальный сайт, я добавил к нему свой стиль, который находится в таблице стилей дочерней темы. Я не буду подробно останавливаться на этом, так как это выходит за рамки учебника, но вы можете увидеть стиль в комплекте кода с этим уроком.

Вот как выглядит мой сайт перед добавлением слайдера:

Изображение в заголовке имеет место в обе стороны от двух людей, и я буду стилизовать мой слайдер так, чтобы он отображал текст с обеих сторон людей, давая эффект, что они указывают на свои слова.

Регистрация типа сообщения

Следующий шаг - зарегистрировать тип сообщения, называемый quote. В папке вашей дочерней темы создайте новый файл с именем functions.php.

Примечание. Рекомендуется использовать плагин для регистрации типа сообщения, а не для добавления его в файл функций темы. Здесь я использую файл функций, чтобы все было в одном месте, поэтому у вас есть пакет кода для загрузки.

Откройте файл функций и добавьте в него следующий код:

1

function tutsplus_create_post_type() {

2

    $labels = array( 

3

  	'name' => __( 'Quotes' ),

4

		'singular_name' => __( 'Quote' ),

5

		'add_new' => __( 'New Quote' ),

6

		'add_new_item' => __( 'Add New Quote' ),

7

		'edit_item' => __( 'Edit Quote' ),

8

		'new_item' => __( 'New Quote' ),

9

		'view_item' => __( 'View Quote' ),

10

		'search_items' => __( 'Search Quotes' ),

11

		'not_found' =>  __( 'No Quotes Found' ),

12

		'not_found_in_trash' => __( 'No Quotes found in Trash' ),

13

	);

14

	$args = array(

15

		'labels' => $labels,

16

		'has_archive' => false,

17

		'public' => true,

18

		'hierarchical' => false,

19

		'supports' => array(

20

			'title', 

21

			'editor', 

22

			'excerpt', 

23

			'custom-fields', 

24

			'thumbnail',

25

			'page-attributes',

26

			'author'

27

		),

28

	);

29

	register_post_type( 'quote', $args );

30

} 

31

add_action( 'init', 'tutsplus_create_post_type' );

Это регистрирует новый тип сообщения, называемый quote.

Вы можете увидеть новый тип сообщения на моем сайте, добавив некоторые цитаты, которые я добавил:

Обратите внимание, что это просто фиктивные кавычки. Тот факт, что я использовал пользовательский тип сообщения, позволяет клиенту легко добавлять свои собственные кавычки после запуска сайта. У каждого из них есть только заголовок сообщения и нет содержания, потому что если бы существовал пост-контент, в плагине отображались оба.

Установка и настройка плагина для слайдера

Следующим шагом будет установка и настройка плагина-слайдера. Я использую плагин Smooth Slider, который позволяет вам выбирать, какие сообщения будут добавлены в ползунок, и вручную изменить порядок сообщений на экране настроек слайдера.

Перейдите в Smooth Slider> Settings и настройте его следующим образом:

• Default title text: оставьте это поле пустым.
• Thumbnail image: снимите все флажки для этого.
• Slider content - Pick content from: выберите «Content».

Я добавляю стиль в таблицу стилей, потому что я хочу использовать шрифты Google, поэтому я не слишком беспокоюсь о настройках шрифтов, но вы можете настроить их на экране настроек.

Настройка слайдеров

Следующим шагом будет добавление слайдеров и заполнение их сообщениями.

Создание слайдеров

Нам нужно добавить два слайдера: по одному для каждого из двух человек. Перейдите в раздел Smooth Slider > Sliders и нажмите Create New Slider. Я назвал мои два ползунка «Хайде» и «Иэн», потому что это имена людей.

Добавление сообщений в слайдеры

Вы добавляете сообщения в слайдер со страницы редактирования сообщения. Откройте одно из ваших сообщений и прокрутите вниз, чтобы увидеть возможность добавить его в слайдер:

Выберите слайдер, в который вы хотите добавить сообщение, и сохраните его. Повторите это для каждого поста, добавив его к соответствующему слайдеру.

Порядок сообщений в слайдере

Вы можете вручную изменить порядок, в котором сообщения будут отображаться слайдером. Перейдите в Smooth Slider> Слайдеры и выберите слайдер, с которым хотите работать. Вот мой слайдер «Хайде»:

Прокрутите вниз, чтобы перетащить сообщения в правильном порядке:

Когда вы это сделаете, сохраните слайдер.

Добавьте слайдеры в заголовок страницы.

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

Отзывная тема дает нам хук под названием responsive_in_header, который позволяет вам добавлять код в заголовок страницы. Это будет отображаться над изображением, но в заголовке: мы добавим CSS, чтобы правильно позиционировать слайдеры в следующей части этого учебника из двух частей.

Откройте файл functions.php вашей темы и добавьте эту функцию:

1

function tutsplus_slider() { ?>

2

3

		<div class="tutsplus-sliders">

4

5

			<?php echo do_shortcode( '[smoothslider id="3"]' ); ?>

6

			<?php echo do_shortcode( '[smoothslider id="4"]' ); ?>

7

8

		</div>

9

10

<?php }

11

add_action( 'responsive_in_header', 'tutsplus_slider' );

Это создает div с классом tutsplus-sliders, который мы будем использовать для позиционирования позже, и использует короткие коды для вывода двух слайдеров.

Сохраните файл функциями.

Теперь сайт выглядит так:

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

В следующей части мы продолжим исправлять это. Мы добавим CSS для позиционирования двух слайдеров, а также для стилизации. Мы зарегистрируем шрифт Google, который будет использоваться для цитат.

Резюме

Слайдеры не только для изображений: вы можете использовать их для отображения текста. В этом уроке вы узнали, как настроить два слайдера с использованием пользовательского типа сообщения. Затем мы добавим стиль, чтобы текст выглядел как надо.