Как красиво вывести фрейм с примерами работ на блоге копирайтера фрилансера, с видео, онлайн сервисами и другим


Сегодня расскажу о прикольном плагине для WordPress, который позволяет делать красивые и удобные фреймы в записях.

Что такое фрейм и зачем он нужен

Фрейм — это такое окошко на страничке, в которое загружается  другая страничка, с другого сайта или своего, или  файл, все что имеет интернет адрес.

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

WordPress и отображение картинок

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

2017-07-13_124905 Как красиво вывести фрейм с примерами работ на  блоге копирайтера фрилансера, с видео, онлайн сервисами и другим

 

А мы сделаем по другому.  Кликните по миниатюре и  появится фрейм:

 

2017-07-13_124905 Как красиво вывести фрейм с примерами работ на  блоге копирайтера фрилансера, с видео, онлайн сервисами и другим

Он, кстати, «резиновый», адаптируется под экраны.

Классный плагин Easy FancyBox

Ну, давайте по порядку.

  • Нам нужно установить классный плагин Easy FancyBox.
  • Находите его в поиске установке плагинов и активируйте.
  • Затем идем в настройки плагина («Настройки» в …wp-admin/plugins.php).
  • Там ставим галочку в разделе iframe и можно убирать с images, а то он будет каждую картинку на сайте загонять . Мне это не надо, но вы делайте как хотите.

2017-07-24_091258-213x250 Как красиво вывести фрейм с примерами работ на  блоге копирайтера фрилансера, с видео, онлайн сервисами и другим

Также плагин может   выводить во фрейме видео с разных источников и прочие вещи, даже какой-то таинственный  Inline content (погуглил — ни одной ссылки на русском).

Вот собственно и все настройки. Осталось рассказать только про то,  как это реализовать. Для этого надо проставить в каждой ссылке класс fancybox-iframe, то есть вписать в код class=»fancybox-iframe»

Показываю на  примере

Загружаете на сайт картинку при написании поста через кнопочку «Добавить медиафайл».

Потом переходим  в текстовый режим (вверху в правом углу) и находим  код своей картинки. Он выглядит так 2017-07-24_104920 Как красиво вывести фрейм с примерами работ на  блоге копирайтера фрилансера, с видео, онлайн сервисами и другим

и добавляем после «<a» класс  class=»fancybox-iframe» и пробел.

Затем возвращаемся в визуальный режим и нажимаем на картинку.

Появится блок редактирования,  нажимаем на карандашик  и выбираем настройки отображения «Миниатюра» или задаем произвольный размер

Почему бы не задавать настройку отображения в виде миниатюры сразу во время загрузки?

Хотите верьте, хотите нет — у меня не работает  Easy FancyBox в таком случае. Так звезды легли.


DXtnP-g5oa4-167x250 Как красиво вывести фрейм с примерами работ на  блоге копирайтера фрилансера, с видео, онлайн сервисами и другим

Что еще можно придумать с фреймами?

Также можно выводить во фрейме разные полезные сервисы прямо на своем сайте.

Например проверку текстов на уникальность от биржи копирайтинга ТекстРУ.

Сделайте скриншот нужного вам сервиса и поместите  в нужное место поста. Например:

2017-07-24_112352 Как красиво вывести фрейм с примерами работ на  блоге копирайтера фрилансера, с видео, онлайн сервисами и другим

 

Затем идете в редактирование картинки (клик-карандаш) и выбираете в настройке  Ссылка не Медиафайл, а Произвольный URL и там вставляете  ссылку на нужный вам сервис, например https://text.ru/registreac/antiplagiat

Потом так же  как с картинкой входите в текстовый режим редактирования и вставляете  после «<a» наш магический  класс  class=»fancybox-iframe» и пробел.

Ваши пользователи смогут проверить уникальность текста и не уйдут с сайта.
И все благодаря полезному плагину Easy FancyBox!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Отправляя комментарий вы автоматически соглашаетесь с Политикой конфиденциальности