В этой статье я покажу вам простой способ добавить «Режим чтения» без отвлекающих факторов в ваш блог.
Обновление (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. Сам элемент перемещается во всплывающее окно, поэтому все его стили будут применяться и к всплывающему окну.
И это все, что нужно сделать. Не много кода, для полезной маленькой функции. Дайте мне знать, что вы думаете. Это хорошая идея, или ее лучше избегать?
Источник записи: https://www.problogdesign.com