amp-web-push-widget button.amp-subscribe { display: inline-flex; align-items: center; border-radius: 5px; border: 0; box-sizing: border-box; margin: 0; padding: 10px 15px; cursor: pointer; outline: none; font-size: 15px; font-weight: 500; background: #4A90E2; margin-top: 7px; color: white; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .amp-logo amp-img{width:190px} .amp-menu input{display:none;}.amp-menu li.menu-item-has-children ul{display:none;}.amp-menu li{position:relative;display:block;}.amp-menu > li a{display:block;} /* Inline styles */ h2.acss2f015{text-align:center;}iframe.acsse8910{border:none;height:500px;max-width:100%;} .icon-widgets:before {content: "\e1bd";}.icon-search:before {content: "\e8b6";}.icon-shopping-cart:after {content: "\e8cc";}

Как разместить в статье сайта PDF файл

При создании сайта возникает необходимость разместить в статье PDF файл, или конвертировать PDF в HTML с открытием на отдельной странице браузера. Рассмотрим 2 варианта.

Урок 1.

Сейчас мы с Вами научимся создавать на сайте PDF презентацию, PDF инструкцию или  документ Excel для прочтения на сайте в режиме онлайн  или с выводом на отдельную страницу в браузере.

При просмотре документов на сайте мы сохраним вес сайта и увеличим время просмотра Вашей страницы.

Я сейчас переведу в один клик главную страницу сайта http://wpuroki.ru/  в PDF файл и с этим файлом будем работать.

Нам понадобится плагин  google doc embedder.

Устанавливаем и настраиваем плагин  google doc embedder.

Заходим в консоль сайта,  плагины,  добавить новый. В графу «поиск» вписываем плагин и жмем кнопку «поиск плагинов»

 

Смотрим на рисунке плагин, он первым выпал, жмем кнопку “установить”, затем кнопку “активировать”.

В настройках находим  установленный плагин, он называется  «GDEнастройки».

Откройте, посмотрите плагин. Здесь всё оставляем по умолчанию. В дальнейшем Вы сами, возможно, что-нибудь измените.

Загружаем PDF файл и настраиваем для просмотра

Открываем Медиафайлы, добавить новый. Загружаем файл PDF  и нажимает кнопку «изменить»

Открылось окно изменения медиафайла. Здесь заполняем то, что нам необходимо – описание и инструменты SEO как для статьи.  Автора, если нужно, укажите.

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

Открываем  записи-добавить новую или свою статью, в которой будем размещать  наш PDFфайл.

У нас в редакции статьи появилась новая кнопка нашего плагина GDE, смотрим как она выглядит.

 

Жмем кнопку GDE в формате HTML, открывается начало нашего кода, который мы сейчас сгенерируем.

Дальше к открытым кавычкам копируем ссылку нашего файла PDF, и ещё раз жмем на GDE.

Всё! мы сгенерировали код, который можем разместить в любом месте нашей статьи.

Смотрим, что получилось. Наш PDF файл как Вы помните в начале урока в один клик был создан из главной страницы сайта WPuroki.ru. Теперь мы видим его встроенным в страницу нашего Урока.

Скачать (PDF, 528KB)

В следующем уроке мы с Вами выведем наш PDFфайл в браузер на отдельную страницу.

Для развития Вашего сайта впишитесь в наш тренинг.

Полезной информацией делитесь с друзьями.

Адель Гадельшин

View Comments

  • да не задумывалась об этом, пока не увидела статью. Надо будет воспользоваться

  • Просто здорово рассказано и показано, но решил не рисковать, вдруг чего "натыкаю", поскольку интерфейс немного разнится тем, что в видео. Да к томуЖе ещё и не знаю, какоё PDF файл мне сейчас нужен.

Recent Posts

Что такое отказы на сайте, почему они происходят, как их уменьшить

Отказы на сайте - это процент посетителей, которые покидают сайт после просмотра только одной страницы.…

8 месяцев ago

Как сделать запуск инфопродукта

Инфопродукт - это любой продукт, который содержит информацию, полезную для потенциальных клиентов. Это может быть…

8 месяцев ago

Как вебмастеру юридически обезопасить себя

Ведение сайта - это не только подержание его работоспособности и наполнение контентом. В последние годы…

8 месяцев ago

Папки WordPress: значение папок /wp-admin, /wp-includes и /wp-content

WordPress - это популярная система управления контентом (CMS), которая позволяет создавать и управлять веб-сайтами различной…

8 месяцев ago

Что такое сертификат Let’s Encrypt и стоит ли его устанавливать

Сертификат Let’s Encrypt - это бесплатный и открытый сертификат SSL/TLS, который позволяет защитить веб-сайт от…

9 месяцев ago

Защита WordPress от вирусов

WordPress - это одна из самых популярных систем управления контентом в мире, которая используется миллионами…

9 месяцев ago