Добавление отвлекающего чтения в WordPress

Помните, как еще в версии 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