Статьи

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

Помните, как еще в версии 3.2 WordPress представил возможность писать текст без отвлекающих факторов? Это потрясающая функция, позволяющая забыть обо всем остальном и сосредоточиться на письме. А как насчет читателей?

Если вы пурист и любите использовать свой контент без каких-либо дополнительных блюд в виде рекламы, списков последних сообщений, форм информационных бюллетеней, виджетов социальных сетей и прочего, вы, вероятно, являетесь поклонником Evernote Clearly, Pocket, Reeder или любого другого подобного приложение. Не сказать, что все гарниры плохие, просто то, что иногда игнорировать их и сосредотачиваться только на содержании приятно и получается восхитительный «рекламный ролик».

Итак, насколько сложно добавить на свой сайт WordPress чтение, не отвлекая внимание, и улучшить читательский опыт посетителей? Мертв. Просто.

Вот план игры:

  • Найдите способ изолировать заголовок и содержимое сообщения (с помощью функции WordPress add_filter)
  • Добавить ссылку переключения для бесплатного чтения (jQuery)
  • При нажатии ссылки переключения показывать модальное окно для чтения без отвлекающих факторов (jQuery)
  • Модальное содержимое без отвлечения внимания (CSS)
  • При нажатии на ссылку закрытия все возвращается в нормальное состояние (jQuery)

Изоляция заголовка и содержания сообщения

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

add_filter( 'the_title', 'thsp_dfr_title', 1 );
function thsp_dfr_title( $title) {
    global $post;
    
    if( is_singular() && $title == $post->post_title && in_the_loop()) {
        return '<h1 id="thsp-dfr-title">'. $title. '</h1>';
    }
    return $title;
}

add_filter( 'the_content', 'thsp_dfr_content', 1 );
function thsp_dfr_content( $content) {
    global $post;
    
    if( is_singular()) {
        
        return '<div id="thsp-dfr-content">'. "n". "n". $content. '</div>';
    }
    return $content;
}

Теперь у нас есть **#thsp-dfr-title**и **#thsp-dfr-content**элементы для работы с, так что давайте епдиеие некоторые JS и CSS файлы:

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, не нужно бросать им мертвые ссылки.

// Add distraction free reading toggler
$('body').append('<a id="thsp-dfr-toggle" href="https://techblog.sdstudio.top/dobavlenie-otvlekajushhego-chtenija-v-wordpress/#">Distraction free reading</a>');

Добавьте базовый CSS к элементу ссылки, и мы получим следующее:

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

Переключатель чтения без отвлекающих факторов

Переход в режим чтения без отвлекающих факторов

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

$('#thsp-dfr-toggle').click(function(){   
    
    $('body').append('<div id="thsp-dfr-overlay"><div id="thsp-dfr-wrapper"></div></div>');
    
    $('#thsp-dfr-title').clone().attr('id', 'thsp-dfr-title-cloned').appendTo('#thsp-dfr-wrapper');
    
    $('#thsp-dfr-content').clone().attr('id', 'thsp-dfr-content-cloned').appendTo('#thsp-dfr-wrapper');
    
    $('body').append('<a id="thsp-dfr-close" href="https://techblog.sdstudio.top/dobavlenie-otvlekajushhego-chtenija-v-wordpress/#">Close</a>');
    
    $(this).hide();
    return false;
});

$('#thsp-dfr-close').live('click', function(){  
    
    $('#thsp-dfr-overlay').remove();
    
    $('#thsp-dfr-toggle').show();
    
    $(this).hide();
    return false;
});

Итак, вот что мы делаем здесь:

1 Добавление двух div прямо перед закрывающим тегом body
2 Клонирование заголовка и содержимого сообщения и добавление их во внутренний div
3 Удаление ссылки переключения
4 Добавление еще одной ссылки, которую мы будем использовать для выхода из режима чтения без отвлекающих факторов.

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

Стилизация содержимого, не отвлекающего внимание

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

#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 {
    
    padding: 78px 0 50px;
}

#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;
}

#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 это будет выглядеть примерно так:

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

Чтение без отвлекающих факторов – нестилевое содержание

Повсюду написано «Да здравствует сброс CSS Эрика Мейера», так что, естественно, вы захотите добавить классный CSS типографики, чтобы он выглядел хорошо. К счастью, создать достаточно конкретные селекторы CSS, которые переопределят CSS по умолчанию для темы, легко, поскольку наш контент для чтения, не отвлекающий внимание, заключен внутри **#thsp-dfr-overlay**и в **#thsp-dfr-wrapper**div. После реконструкции (проверьте страницу проекта на Github, чтобы увидеть полный файл CSS), вот что у нас есть:

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

Чтение без отвлекающих факторов – стилизованный контент

Намного лучше, но вы знаете, что они говорят …

Дайте фронтенд-разработчику немного CSS, и он будет часами настраивать его, позвольте фронтенд-разработчику написать свой собственный CSS, и он все равно будет часами работать над ним.

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

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

Кнопка «Наверх»