TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

39

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

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

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

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

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

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

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

// Wrap post title in a div add_filter( 'the_title', 'thsp_dfr_title', 1 ); function thsp_dfr_title( $title) { global $post; // We only want to do this for the post in main loop in single post view if( is_singular() && $title == $post->post_title && in_the_loop()) { return '<h1 id="thsp-dfr-title">'. $title. '</h1>'; } return $title; } // Wrap post content in a div add_filter( 'the_content', 'thsp_dfr_content', 1 ); function thsp_dfr_content( $content) { global $post; // Again, only do this in single post view if( is_singular()) { /* * New lines are necessary so WordPress wpautop would * create the first paragraph */ return '<div id="thsp-dfr-content">'. "n". "n". $content. '</div>'; } return $content; }

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

// Add distraction free reading toggler $('body').append('<a id="thsp-dfr-toggle" href="#">Distraction free reading</a>');

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

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

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

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

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

// Clicking toggle link $('#thsp-dfr-toggle').click(function(){ // Add distraction free modal $('body').append('<div id="thsp-dfr-overlay"><div id="thsp-dfr-wrapper"></div></div>'); // Add post title to distraction free modal $('#thsp-dfr-title').clone().attr('id', 'thsp-dfr-title-cloned').appendTo('#thsp-dfr-wrapper'); // Add post content to distraction free modal $('#thsp-dfr-content').clone().attr('id', 'thsp-dfr-content-cloned').appendTo('#thsp-dfr-wrapper'); // Add close link to distraction free modal $('body').append('<a id="thsp-dfr-close" href="#">Close</a>'); // Hide show modal link $(this).hide(); return false; }); // Clicking close link $('#thsp-dfr-close').live('click', function(){ // Remove modal $('#thsp-dfr-overlay').remove(); // Show distraction free toggle again $('#thsp-dfr-toggle').show(); // Hide close modal link $(this).hide(); return false; });

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

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

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

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

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

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

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

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

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

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

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

Источник записи: https://www.wpexplorer.com

Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. ПринимаюПодробнее