Помните, как еще в версии 3.2 WordPress представил возможность писать текст без отвлекающих факторов? Это потрясающая функция, позволяющая забыть обо всем остальном и сосредоточиться на письме. А как насчет читателей?
Если вы пурист и любите использовать свой контент без каких-либо дополнительных блюд в виде рекламы, списков последних сообщений, форм информационных бюллетеней, виджетов социальных сетей и прочего, вы, вероятно, являетесь поклонником Evernote Clearly, Pocket, Reeder или любого другого подобного приложение. Не сказать, что все гарниры плохие, просто то, что иногда игнорировать их и сосредотачиваться только на содержании приятно и получается восхитительный «рекламный ролик».
Итак, насколько сложно добавить на свой сайт WordPress чтение, не отвлекая внимание, и улучшить читательский опыт посетителей? Мертв. Просто.
Вот план игры:
- Найдите способ изолировать заголовок и содержимое сообщения (с помощью функции WordPress add_filter)
- Добавить ссылку переключения для бесплатного чтения (jQuery)
- При нажатии ссылки переключения показывать модальное окно для чтения без отвлекающих факторов (jQuery)
- Модальное содержимое без отвлечения внимания (CSS)
- При нажатии на ссылку закрытия все возвращается в нормальное состояние (jQuery)
Изоляция заголовка и содержания сообщения
Что нам здесь нужно сделать, так это сделать возможным таргетинг на заголовок и контент сообщения в функции jQuery. Поскольку темы используют разные элементы для отображения этих двух, нам нужно использовать функцию add_filter, чтобы обернуть заголовок и контент в div, которые мы могли бы легко настроить :
Теперь у нас есть **#thsp-dfr-title**
и **#thsp-dfr-content**
элементы для работы с, так что давайте епдиеие некоторые JS и CSS файлы:
// Enqueue scripts and styles
add_action('wp_enqueue_scripts', 'thsp_dfr_styles');
function thsp_dfr_styles() {
global $post;
if( is_singular()) {
wp_enqueue_script(
'thsp_dfr',
plugins_url( '/js/distraction-free-reading.js', __FILE__ ),
array( 'jquery' ),
'v1.0'
);
wp_enqueue_style(
'thsp_dfr',
plugins_url( '/css/distraction-free-reading.css', __FILE__ ),
array(),
'v1.0'
);
}
}
Добавление переключателя чтения без отвлекающих факторов
Поскольку чтение без отвлекающих факторов не будет работать с отключенным javascript, мы используем jQuery для добавления переключателя. Это бесполезно для пользователей, не использующих javascript, не нужно бросать им мертвые ссылки.
Добавьте базовый CSS к элементу ссылки, и мы получим следующее:
Переключатель чтения без отвлекающих факторов
Переход в режим чтения без отвлекающих факторов
Все, что нам нужно для этого, уже есть. Ссылка для прикрепления функции щелчка – проверка, два элемента с известными идентификаторами, которые мы можем клонировать – проверка. Итак, сделаем это.
Итак, вот что мы делаем здесь:
1 Добавление двух div прямо перед закрывающим тегом body
2 Клонирование заголовка и содержимого сообщения и добавление их во внутренний div
3 Удаление ссылки переключения
4 Добавление еще одной ссылки, которую мы будем использовать для выхода из режима чтения без отвлекающих факторов.
Щелчок по этой ссылке закрытия удалит модальную и закрытую ссылку и вернет ссылку, которая активирует режим чтения без отвлекающих факторов.
Стилизация содержимого, не отвлекающего внимание
Нам нужен CSS для позиционирования нашей модальной и переключаемой ссылки и придания им базового стиля, так что вот он:
/* 100% width and height element to hide site's regular look */
#thsp-dfr-overlay {
background: #222;
background: rgba(0,0,0,0.9);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 50px 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.admin-bar #thsp-dfr-overlay {
/* Make it look good with admin bar */
padding: 78px 0 50px;
}
/* Distraction free reading content wrapper */
#thsp-dfr-wrapper {
background: #f9f9f9;
width: 45em;
max-width: 90%;
margin: 0 auto;
padding: 2em 3em;
height: 100%;
overflow: scroll;
box-shadow: 0 0 2em rgba(0,0,0,0.8);
-webkit-box-shadow: 0 0 2em rgba(0,0,0,0.8);
-moz-box-shadow: 0 0 2em rgba(0,0,0,0.8);
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
/* Distraction free toggle and close buttons */
#thsp-dfr-toggle,
#thsp-dfr-close {
position: fixed;
bottom: 3px;
right: 3px;
z-index: 999;
display: inline-block;
background: #333;
color: #fff;
padding: 0.5em;
border: 1px solid #fff;
text-decoration: none;
}
Имейте в виду, что при этом будут стилизованы только блоки оверлея и оболочки, но не содержимое внутри них. В теме Twenty Twelve это будет выглядеть примерно так:
Чтение без отвлекающих факторов – нестилевое содержание
Повсюду написано «Да здравствует сброс CSS Эрика Мейера», так что, естественно, вы захотите добавить классный CSS типографики, чтобы он выглядел хорошо. К счастью, создать достаточно конкретные селекторы CSS, которые переопределят CSS по умолчанию для темы, легко, поскольку наш контент для чтения, не отвлекающий внимание, заключен внутри **#thsp-dfr-overlay**
и в **#thsp-dfr-wrapper**
div. После реконструкции (проверьте страницу проекта на Github, чтобы увидеть полный файл CSS), вот что у нас есть:
Чтение без отвлекающих факторов – стилизованный контент
Намного лучше, но вы знаете, что они говорят …
Дайте фронтенд-разработчику немного CSS, и он будет часами настраивать его, позвольте фронтенд-разработчику написать свой собственный CSS, и он все равно будет часами работать над ним.
Так что не стесняйтесь делать так, чтобы модальное содержимое без отвлекающих факторов выглядело так хорошо или плохо, как вам нравится ?
План состоит в том, чтобы превратить эту концепцию в полнофункциональный плагин WordPress, поэтому, если вы хотите присоединиться и внести свой вклад, вот страница проекта на Github.
Источник записи: https://www.wpexplorer.com