«Режим чтения», как я его определяю, является необязательным минималистским представлением, которое посетители веб-сайта могут использовать для просмотра вашего поста. То, что я собрал, — это ультра-минимализм — это не что иное, как контент: без боковой панели и без рекламы. Он сенсорный и отзывчивый, поэтому у мобильных пользователей не возникнет проблем с его использованием. Я также добавил функцию увеличения и уменьшения размера шрифта.
Итак, что послужило источником вдохновения для этого режима чтения?
У меня недавно был клиент, который потратил небольшое состояние, чтобы настроить всю свою рекламу на боковой панели и в заголовке сайта, только чтобы потом запросить что-то совершенно другое — упрощенный режим чтения. Я подумал, что это странный запрос, учитывая все деньги, потраченные на разработку рекламных блоков, но контраст и сосредоточенность на содержании оказали большое положительное влияние на сайт.
Зачем мне режим чтения?
Прежде всего, люди на самом деле пользуются этим режимом чтения на сайте моего клиента, и пользователи остаются на сайте гораздо дольше, чем те, кто этого не делает, предполагая, что люди, использующие эту функцию, как правило, потребляют намного больше. контент по сравнению со средними пользователями, которые не используют режим чтения.
Во-вторых, доходы от рекламы не снизились — они увеличились . Так как люди дольше оставались на сайте, они приобрели больше доверия и, по-видимому, нажали или ответили на большее количество объявлений, чем раньше.
Кроме того, отслеживание трафика показало, что пользователи режима чтения возвращаются гораздо чаще. Режим чтения добавил им значительную ценность — они предпочитали потреблять контент на этом сайте и возвращались, чтобы получить больше.
Есть плагин для этого сейчас
Звучит слишком хорошо, чтобы быть правдой? Я подслащу сделку еще больше — я сделал бесплатный плагин для режима чтения, который можно найти только здесь, на DesignFestival (пока). В конце концов, вы увидите это в хранилище плагинов на WordPress.org.
Просто скачайте этот файл , загрузите его, используя «Плагины» -> «Добавить новый» в администрировании WordPress, и активируйте его. Вы увидите «Просмотр в режиме чтения» в верхней части всех своих сообщений, но не на своих страницах.
Реквизит, где реквизит должен идти
Прежде чем приступить к изучению того, как настроить этот плагин для своего сайта WordPress, он построен на удивительной работе Джека Мура, который разработал лайтбокс ColorBox jQuery . Итак, ознакомьтесь с его документацией , потому что мой плагин основан на этом и дает вам доступ ко всем его полезным инструментам.
Существует множество документации и поддержки для ColorBox, а также сообщества пользователей. Это было естественное соответствие для режима чтения, так как он поддерживал бы так много функций сверх моих основных потребностей.
Настройка кнопки режима чтения
Дизайн кнопок режима чтения контролируется CSS. В папке плагина перейдите в подпапку CSS и откройте файл colorbox.css. Класс для кнопки — rm-button, и цвета могут быть полностью настроены. Начиная с линии 90:
[sourcecode language = ”css” firstline = ”90 ″]
/ * Кнопка режима чтения * /
.rm-button {
border-top: 1px solid # 000000;
фон: # 4d4d4d;
обивка: 5px 10px;
-webkit-border-radius: 8 пикселей;
-moz-border-radius: 8px;
радиус границы: 8 пикселей;
цвет белый;
размер шрифта: 22 пикселя;
семейство шрифтов: Helvetica, Arial, Sans-Serif;
текстовое оформление: нет;
выравнивания текста: центр;
выравнивание по вертикали: среднее;
ширина: 220px;
макс-ширина: 90%;
}
.rm-button: hover {
border-top-color: #bdbdbd;
фон: #bdbdbd;
цвет: # 171717;
}
.rm-button: active {
пограничный верхний цвет: # 000000;
фон: # 000000;
}
.rm-кнопка a: ссылка, a: посещения {
текст-отделка: нет;
размер шрифта: 22 пикселя;
семейство шрифтов: Helvetica, Arial, Sans-Serif;
текстовое оформление: нет;
выравнивание по вертикали: среднее;
цвет: #fff;
}
[/исходный код]
Обратите внимание, что в строках 104 и 105 вы можете отрегулировать размер кнопки и настроить ее работу в ответ.
Изменение ширины режима чтения
С самим окном режима чтения работать сложнее. Вам нужно будет работать с файлом jquery.colorbox.js JavaScript. (Примечание. Доступна уменьшенная версия jQuery для ColorBox, но редактировать ее гораздо сложнее.)
В файле jquery.colorbox.js, который находится в подпапке «js» плагина, вы можете найти размер окна по умолчанию в строке 13:
[sourcecode language = ”javascript” firstline = ”10 ″ highlight =” 4 ″]
по умолчанию = {
переход: «упругий»,
скорость: 300,
ширина: «85%»,
начальная ширина: «600»,
innerWidth: false,
maxWidth: false,
высота: ложь,
initialHeight: «450»,
innerHeight: false,
maxHeight: false,
scalePhotos: true,
прокрутка: правда,
встроенный: ложь,
HTML: ложь,
iframe: false,
fastIframe: правда,
фото: ложь,
href: ложно,
название: ложь,
rel: false,
непрозрачность: 0,9,
предварительная загрузка: правда,
[/исходный код]
Вы можете использовать пиксели или проценты, просто сохраняйте двойные кавычки.
Настройка кнопок изменения размера текста
Чтобы сделать плагин максимально простым, а режим чтения — максимально функциональным, я использовал текстовые кнопки для управления размером шрифта. Вы можете добавить изображения, отредактировав файл image-sizer.js в строке 7:
[sourcecode language = ”javascript” wraplines = ”true”]
jQuery (документ) .ready (function ($) {
// Устанавливаем это в CSS-селектор элемента, который оборачивает содержимое вашего сообщения.
// например .entry или .entry-content
var selector = ‘.rm-content’;
// HTML-код для ссылки «Просмотреть в режиме чтения».
var html = ‘<p class = «rm-button»> <a href=»#» class=»reading-mode» rel=»nofollow»> Просмотр в режиме чтения </a> </ p> <p class = «rm-sizes»> <a href = «javascript: void (0);» onclick = «resizeText (1)» id = «plustext»> Увеличить текст </a> | <a href = «javascript: void (0);» onclick = «resizeText (-1)» id = «minustext»> Уменьшить текст </a> <p> ‘;
$ (Селектор)
.prepend (HTML)
.find ( ‘чтение-режим’)
.цветная коробка({
innerHeight: «80%»,
innerWidth: «40%»,
встроенный: верно,
href: селектор
});
});
[/исходный код]
Вместо текста поместите любое изображение, которое вы хотите использовать, в папку (или подпапку) с файлом JS и создайте ссылку, как если бы вы использовали:
<img src="#" />Дайте мне знать, что вы думаете о режиме чтения и какие другие функции сделают это еще более ценным для ваших читателей!