Как добавить «Режим чтения» в ваши сообщения на блоге

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

Обновление (1 марта 2018 г.) : я перевел демонстрационный сайт в автономный режим, но добавил скриншоты конечного результата. Сама ссылка выглядит следующим образом:

При щелчке это загружает модальное, например, так:

Цель добавления такой функции – дать посетителю возможность удалить весь беспорядок на вашем сайте и сосредоточиться исключительно на самой публикации.

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

Этот скрипт также доступен как бесплатный плагин на Github (прямая ссылка для скачивания). Конфигурация не требуется, просто загрузите и нажмите активировать. Или не стесняйтесь раскошелиться и улучшить его.

Метод

Трюк прост. Мы будем использовать удивительный плагин Colorbox от Jack Moore для jQuery, чтобы «выскочить» из поста и затемнить остальную часть страницы, когда это необходимо.

Все, что нам нужно сделать, это установить некоторые параметры для плагина и вставить нашу ссылку. Мы создадим ссылку с помощью JavaScript, чтобы она не отображалась поисковыми системами или программами чтения RSS как часть содержания вашего сообщения.

1 – Получить файлы

Первый шаг – загрузить последние файлы Colorbox отсюда. Когда вы откроете папку zip, вы получите структуру папок, подобную этой:

5 примеров папок содержат различные стили, которые вы можете использовать для всплывающего окна Colorbox. Загрузите файл index.html в каждой папке и щелкните ссылку, чтобы посмотреть, как он выглядит.

• Скопируйте файл jquery.colorbox-min.js из папки ‘ colorbox ‘ в папку / js / вашей темы (создайте ее, если она не существует).
• Выберите один из примеров стилей и скопируйте файл colorbox.css в каталог вашей темы.
• В той же папке примера скопируйте все файлы / images / в каталог с изображениями вашей темы.

В качестве обозначения; Вы можете вместо этого создать каталог ‘colorbox’ в каталоге своей темы и поместить все эти файлы туда. Это то, что я бы сделал лично, но в этом уроке я следую за тем, как организуется стандартная тема TwentyEleven.

2 – Очередь файлов

Теперь у вас есть все файлы, необходимые для сценария. Следующий шаг – загрузить их на свою страницу. Для этого откройте файл functions.php вашей темы (создайте файл с таким именем, если его не существует) и вставьте следующее перед закрывающим тегом?>:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

/**
 * Queue Reading Mode scripts and styles.
 */
function pbd_rm_scripts() {
    if(is_single() ) :
        wp_enqueue_script(
            'colorbox',
            get_bloginfo('template_directory') . '/js/jquery.colorbox-min.js',
            array('jquery'),
            '1.3.19',
            true
        );
 
        wp_enqueue_script(
            'pbd-reading-mode',
            get_bloginfo('template_directory') . '/js/pbd-reading-mode.js',
            array('jquery', 'colorbox'),
            '0.1',
            true
        );
 
        wp_enqueue_style(
            'colorbox',
            get_bloginfo('template_directory') . '/colorbox.css',
            array(),
            '1.3.19'
        );
    endif;
}
add_action('wp_enqueue_scripts', 'pbd_rm_scripts');

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

3 – Оберните ваш пост в Div

Чтобы Colorbox знал, что считается вашим постом, нам нужен один элемент, содержащий этот пост, и ничего больше. Некоторые темы уже будут иметь это, но имена классов варьируются от темы к теме. Чтобы упростить ситуацию, мы собираемся использовать фильтр WordPress, чтобы добавить наш собственный div вокруг the_content.

Продолжая в functions.php, вставьте следующее:

1
2
3
4
5
6
7
8
9
10
11

/**
 * On single posts, it wraps the content in div.
 */
function pbd_rm_content_filter($content) {
    if(is_single() ) {
        $content = '<div class="rm-content">'. $content .'</div>';
    }
 
    return $content;
}
add_filter('the_content', 'pbd_rm_content_filter');

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

4 – Создать ссылку

Когда все готово, вы готовы установить ссылку «Режим чтения». В каталоге / js / вашей темы создайте новый файл с именем ‘pbd-reading-mode.js’ и вставьте в него следующее:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

jQuery(document).ready(function($) {
    // Set this to the CSS selector of the element that wraps your post content.
    // e.g. .entry or .entry-content
    var selector = '.rm-content';
 
    // The HTML for your "View This in Reading Mode" link.
    var html = '<p class="rm-button">View this post in <a href="#" class="reading-mode" rel="nofollow">Reading Mode</a>.</p>';
 
    $(selector)
        .prepend(html)
        .find('.reading-mode')
        .colorbox({
            innerHeight: "80%",
            innerWidth: 700,
            inline: true,
            href: selector
        });
});

В строке 4 вы можете установить селектор для элемента, который упаковывает сообщение (нет необходимости, если вы использовали фильтр из шага 3), а в строке 7 вы можете настроить HTML-код для ссылки «Режим чтения».

Строка 10 добавляет этот HTML к нашему элементу переноса контента (т. Е. Создает ссылку). В строке 12 мы запускаем Colorbox с параметрами для его размера и указываем его содержимое в качестве элемента упаковки. Вы можете прочитать больше о возможных вариантах здесь на сайте Colorbox.

5 – Стиль

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

Последний шаг – добавить немного CSS, чтобы сделать это всплывающее окно максимально четким. Не стесняйтесь экспериментировать с этим, но вот что я использовал:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

/**
 * Reading Mode
 */
#cboxLoadedContent > div {
    text-align: left;
    padding: 20px;
    font: 16px/24px Georgia, serif;
    width: 90%;
}
 
#cboxLoadedContent > div .rm-button {
    display: none;
}
 
#cboxLoadedContent > div p {
    margin-bottom: 24px;
}
 
#cboxLoadedContent > div h2 {
    font-size: 22px;
    margin-bottom: 24px;
}
 
#cboxLoadedContent > div h3 {
    font-size: 18px;
    margin-bottom: 24px;
}
 
#cboxLoadedContent > div h4 {
    font-size: 16px;
    margin-bottom: 24px;
}

Некоторые примечания по CSS:

• Я использую #cboxLoadedContent> div, чтобы соответствовать элементу обтекания содержимого. Это должно сделать его немного более гибким, чем указание имени класса CSS.
• Строка 11 используется для предотвращения появления ссылки «Режим чтения» во всплывающем окне.
• Если вы хотите использовать существующие стили постов вашей темы, вы можете пропустить фильтр и вместо этого указать такой элемент, как .entry-content в JavaScript. Сам элемент перемещается во всплывающее окно, поэтому все его стили будут применяться и к всплывающему окну.

И это все, что нужно сделать. Не много кода, для полезной маленькой функции. Дайте мне знать, что вы думаете. Это хорошая идея, или ее лучше избегать?