Если вы посещали статьи на Medium, вы знаете его чистые, читаемые строки. Статьи загружаются быстро и легко читаются на телефонах, планшетах и компьютерах. Вот пример из одной из моих средних статей, « Светлый свет в Интернете» :
В этом уроке я расскажу вам, как выбрать темы и плагины, чтобы превратить ваш сайт WordPress в среду среднего уровня. Мы также сосредоточимся на функциональности. Я расскажу вам о плагинах, показывающих время чтения, и о том, как вы можете позволить пользователю выбирать текст и комментировать комментарии или делиться им с Twitter.
Вот пример представления ожидаемого времени чтения Medium :
Вот пример возможности выбора, комментирования и обмена Medium:
Вот пример встроенных комментариев в другой из моих статей Medium:
Начиная с нуля
Если вы хотите создать совершенно новый сайт, вы можете следовать моему наглядному руководству по установке WordPress здесь . Вы также можете быть заинтересованы в блог-платформе Ghost с открытым исходным кодом, которую я представил ранее в этом году на Tuts +. Для этого примера я собираюсь перенести сайт Ghost, который я создал в предыдущем выпуске, на среду WordPress, похожую на Medium.
Вот как выглядела моя предыдущая домашняя страница Ghost с использованием темы, похожей на Medium, под названием Ghostium :
Если вы хотите адаптировать свой существующий сайт, просто следуйте, как мы исследуем темы и плагины, похожие на Medium.
Темы, которые напоминают средний
Для этого урока я собираюсь установить Readme «Тема WordPress для чтения», доступную в Theme Forest, сетевой компании Tuts +, за 48 долларов (это был мой выбор, а не Tuts +).
Если вы готовы платить за тему, вы также можете проверить эти три:
- WPMedium $ 47
- Array’s Medium $ 69
- Aesop Story Engine ( пример ) ( плагин ) (бесплатный плагин, платные дополнения). Я планирую написать учебник Tuts + по Aesop в будущем. Посмотрите мою страницу инструктора или следите за обновлениями в Твиттере @reifman .
Есть также множество отличных бесплатных тем WordPress в стиле Medium. Вот несколько отличных обзоров:
- 13 бесплатных тем для WordPress со средним содержанием (WPMU)
- 9 Тем WordPress в Среднем Стиле (WP Superstar)
- Топ 11 тем WordPress, похожих на Medium (исходная цифра)
Из них вы могли бы начать с проверки Fastr Канишк Кунал . Здесь он проводит демо . Вот скриншот Fastr:
Если вы найдете бесплатную тему, которая вам нравится, пожалуйста, опубликуйте свой опыт в комментариях ниже, чтобы другие читатели могли извлечь из этого пользу.
Установка и настройка Readme
Вы можете купить тему Readme на ThemeForest , а затем загрузить архив WordPress .zip с сайта.
Посетите панель управления WordPress и выберите « Внешний вид»> «Темы»> «Добавить новый»> «Загрузить» .
Как и с любой темой WordPress, существует множество конфигураций для конкретного сайта и пользовательского интерфейса для темы. По мере того как они идут, Readme относительно чист. Он имеет простой диалог с вкладками для большинства настроек:
Он также предлагает множество хороших макетов, таких как опция Masonry:
Вы можете проверить, как я настроил свой готовый сайт на breakups.io . Это мой макет обложки:
Вот страница истории:
Мне нравится, как это получилось. Если бы у меня было больше контента, я мог бы выбрать макет Masonry.
Средне-подобные плагины
Теперь давайте перейдем к средне-подобным плагинам: выберите Text and Share, время чтения и встроенные комментарии.
Выберите текст и поделиться
Бесплатный плагин Selection Sharer от Hans van Gent позволяет вам добавлять выделение текста, а также рассылку по электронной почте и Twitter на ваш сайт. Он прост в установке и отлично работает для меня из коробки.
Вот как это выглядит на моем сайте, когда вы выбираете текст и делитесь им. Вы также можете попробовать :
Я был впечатлен тем, как хорошо это работает без какой-либо конфигурации. Альтернативой является бесплатный плагин Quotable, который предлагает выбор и твит.
Я немного беспокоюсь об обнаруживаемости этой функции, но каждый раз, когда кто-то идет копировать текст, он обнаруживает это.
Время чтения
Как видно из изображений выше, тема Readme обеспечивает встроенное время чтения. Тем не менее, есть варианты плагинов, если вы выбираете другую тему.
Бесплатный плагин Reading Time отображает время для чтения и индикатор выполнения в сообщении.
Есть также несколько открытых библиотек Jquery, которые делают то же самое, если вы хотите интегрировать свои собственные. например, время чтения Майкла Линча .
Встроенные комментарии
Извините, что разочаровал, но оказывается, что вы не можете легко сделать все, что делает Medium. Встроенные комментарии сложно воссоздать, так как они опираются на большую поддержку тем. WP Tavern более подробно исследовал эту тему . Они остановились на бесплатном плагине Inline Comments . Но ни одно из решений, на которые они смотрели, не обеспечило удобство работы.
В конце концов, я решил остаться со своим любимым, бесплатным плагином Disqus , хотя в настоящее время он не предоставляет встроенных возможностей.
Предлагаемые чтения
Теперь давайте сделаем шаг за пределы Medium и добавим что-нибудь классное, что хорошо подходит The New York Times: плагин для следующего чтения. Бесплатный плагин UpPrev отображает промо- акцию к предыдущему, следующему или случайному сообщению на вашем сайте:
Поскольку личные блоги часто имеют высокий показатель отказов, например, читатели щелкают по ссылке после прочтения одной статьи, upPrev может помочь удержать людей на сайте. Несмотря на то, что я использую виджеты для недавних и популярных предметов, мне нравится концепция использования анимированного эстакады для рекламы конкретного произведения.
UpPrev имеет простой диалог настроек плагинов и работает легко для меня:
Вы можете выбрать, как upPrev выбирает контент для представления, например, предыдущий, случайный или связанный, с плагином « Еще одна связанная публикация» (YARPP) :
Вот как это выглядит при прокрутке вниз до страницы на breakups.io :
В заключение
Я надеюсь, вам понравился этот пост. Medium и WordPress являются захватывающими платформами, и это здорово, когда мы можем брать вещи, которые нам нравятся, из одной и реализовывать их в другой. Также интересно, когда вы находите такие вещи, как встроенные комментарии, которые все еще трудно сделать в WordPress. Medium очень хорошо справляется, и команда WordPress готова для этого.
Пожалуйста, не стесняйтесь размещать исправления, вопросы или комментарии ниже. Я стараюсь участвовать в дискуссиях. Я был бы особенно заинтересован в вашем опыте с темами и / или альтернативными плагинами. Вы также можете связаться со мной в Twitter @reifman или написать мне напрямую. Если вам понравился этот учебник, пожалуйста, посетите мою страницу инструктора, чтобы увидеть мои коллекции других учебников.