Advertisement
  1. Code
  2. WordPress

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

Scroll to top
Read Time: 5 min
This post is part of a series called Create a 'Conversation' Banner With Revolving Text Using a Custom Post Type.
Create a 'Conversation' Banner With Revolving Text in WordPress: Part 1

() translation by (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

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

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

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

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

  • Установка для разработки WordPress
  • Редактор кода
  • Установлена бесплатная тема Responsive
  • Дочерняя тема для Responsive из предыдущей части

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

Текущие слайдеры

Вот как выглядит сайт:

the starting site - sliders taking up too much space above the imagethe starting site - sliders taking up too much space above the imagethe starting site - sliders taking up too much space above the image

Ползунки есть, но они находятся не в том месте, и им нужен стиль.

Итак, в этом уроке мы сделаем следующее:

  • Добавим позиционирование слайдеров, чтобы разместить их рядом с соответствующим динамиком.
  • Зарегистрируем шрифт, используя Google Fonts, и добавим его в текст.
  • Добавить кавычки вокруг текста.
  • Добавить медиа-запрос, чтобы исправить ошибки макета на меньших экранах.

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

Установите ползунки

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

Добавить абсолютное позиционирование

Откройте файл style.css вашей дочерней темы и добавьте следующее:

1
.tutsplus-sliders {
2
    position: relative;
3
  max-width: 1000px;
4
	margin: 0px auto;
5
}
6
.smooth_slider {
7
	position: absolute;
8
}

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

Теперь ползунки над изображением:

sliders over the image superimposed above each othersliders over the image superimposed above each othersliders over the image superimposed above each other

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

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

Плагин Smooth Slider дает каждому слайдеру уникальный идентификатор в разметке. Ползунок «Heide» имеет идентификатор #smooth_slider_3, а ползунок «Iain» имеет идентификатор #smooth_slider_4. Мы можем настроить таргетинг на положение каждого слайдера правильно.

Добавьте это в таблицу стилей:

1
#smooth_slider_3 {
2
    top: 70px;
3
	right: 90px;
4
	text-align: right;
5
	width: 250px;
6
}
7
#smooth_slider_4 {
8
	top: 10px;
9
	left: 90px;
10
	width: 250px;
11
}

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

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

sliders positioned next to people in the imagesliders positioned next to people in the imagesliders positioned next to people in the image

Это выглядит лучше. Теперь добавим стиль.

Стиль текста

Я хочу изменить шрифт и добавить кавычки вокруг текста.

Изменение шрифта и размера шрифта

Для начала зарегистрируем шрифт, используя Google Fonts. Вернитесь в файл functions.php вашей темы и добавьте следующее:

1
function tutsplus_add_google_fonts() {
2
    wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Droid+Serif');
3
	wp_enqueue_style( 'googleFonts');
4
}
5
add_action( 'wp_enqueue_scripts', 'tutsplus_add_google_fonts' );

Примечание. В исходном коде есть два шрифта, находящихся в очереди, потому что я использовал другой шрифт Google в другом месте на сайте, но не для ползунков.

Сохраните файл функций и вернитесь к таблице стилей. Добавьте это:

1
.smooth_slider h2 {
2
    font-size: 19px !important;
3
	font-family: 'Droid Serif', serif  !important; 
4
	color: #666633 !important;
5
	line-height: 26px !important;
6
}

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

Наш шрифт теперь выглядит намного лучше:

image with text next to it and correct style appliedimage with text next to it and correct style appliedimage with text next to it and correct style applied

Добавить метки кавычек

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

Добавьте в таблицу стилей следующее:

1
.smooth_slider h2::before {
2
  content: open-quote;
3
}
4
.smooth_slider h2::after {
5
  content: close-quote;
6
}

Это будет заключать наши элементы h2 в двойные кавычки.

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

Теперь сохраните таблицу стилей и проверьте сайт:

quotation marks added around text in slidersquotation marks added around text in slidersquotation marks added around text in sliders

Фантастика! Теперь у меня есть текст в нужном месте с кавычками. Мой клиент теперь может добавить столько котировок, сколько они хотят, назначить их соответствующим ползункам, и разговор продолжится.

Добавление медиа-запроса

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

Сначала я проверю точку, в которой разворачивается макет: ширина около 900 px. Поэтому мне нужно добавить медиа-запрос к целевым экранам шириной менее 900 пикселей.

В нижней части таблицы стилей добавьте медиа-запрос:

1
@media screen and (max-width: 900px) {
2
    .tutsplus-sliders {
3
		display: none;
4
	}
5
}

Теперь слайдеры исчезают на меньших экранах:

no sliders on smaller screensno sliders on smaller screensno sliders on smaller screens

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

Резюме

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

В этом учебном пособии вы узнали, как создать этот эффект:

  • Регистрация типа сообщения
  • Установка плагина-слайдера и назначение ему записей
  • Отображение ползунков в заголовке с помощью функции, подключенной к хуку действия, предоставленному темой
  • Позиционирование текста рядом с двумя динамиками
  • Стилизация текста и добавление речевых меток вокруг него
  • Удаление текста на меньших экранах с использованием медиа-запроса

Вы можете использовать этот метод для создания всплывающего текста в любом месте на ваших страницах - проявите творческий подход!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.