mojwp.ru
Генератор рекламных блоков »
Назад

Просмотр .pdf .xls и .doc файла прямо на сайте

Опубликовано: 14.09.2014
Время на чтение: 3 мин
19
1977

Давеча столкнулся с необходимостью вставить просмотр .pdf файла прямо на сайте под CMS WordPress клиента (Прайс-лист).

Сделать подобное можно при помощи различных плагинов, но я предпочел вариант без плагина и с выводом на сайте через шорткод. В качестве обработчика выступает Google Docs.

Представленный ниже код аналогично позволит вывести и файлы .xls, .doc. Т.е. данное решение универсально.

Код не мой и свободно гуляет по сети. Смотрите на результат его работы.

[pdfview]https://mojwp.ru/wp-content/uploads/2014/09/iphones5S6Plus.pdf[/pdfview]

Если файл не подгрузится, то отобразится соответствующее сообщение и ссылка на "Скачать". Т.е. в любом случае посетитель сайта получит информацию. Не подгрузиться может из-за периодических глюков обработки самим Google, либо при большом объеме файла ваш сервер может отдать ошибку.

Посетитель сможет листать страницы, если их несколько, приближать/удалять, а так же вывести в полноэкранном режиме.

Так или иначе, сделав возможность онлайн просмотра документа вы повысите юзабельность сайта, что скажется на поведенческих факторах. Подобное можно отнести к раскрутке сайта без ссылок: контент + юзабилити.

Переходим к внедрению просмотрщика pdf, xls и doc на ваш сайт. Открываем файл functions.php (лежит в папке с шаблоном на хостинге) и сразу после <?php переходим на новую строку, где вставляем следующий код:

Сейчас мы создали шорткод. Чтобы отобразился файл pdf на сайте, необходимо ссылку на этот файл разместить внутри такого шорткода (вставляете в свою статью или на страницу):

Обратите внимание где указана ссылка на файл. Так же здесь вы можете задать ширину (width) и высоту (height) блока, чтобы гармонично вписать в страницу.

Если высота и ширина у вас будет всегда одного размера, то можно избавить себя от подбора цифр. Модифицируем немного код просмотрщика:

Соответственно, отображать на странице будем уже так:

А теперь немного упростим себе жизнь. Если помните, то раньше уже научились добавлять в панель редактирования статьи свои кнопки. Статья Как выделить текст жирным, курсивом и подчеркиванием без стандартных тегов HTML. Теперь останется внедрить свою кнопку, которая будет выглядеть так:

Либо так, в случае с уже заданными параметрами высоты и ширины:

Соответственно, название шорткода pdfview вы можете заменить на свое в нужных местах кода. Аналогично и в названии ссылки панели форматирования. Это на случай, если вам понадобится отображать .xls или .doc.

На этом все. Побольше вам целевого трафика.

Просмотр .pdf .xls и .doc файла прямо на сайте
5 (100%)
Проголосовало: 2

Давай, оцени статью!

Автор:
Виталий
Поделиться
Похожие записи
Черкани пару строк
  • Артём Черкасов
    Опубликовано: 14.09.2014 Ответить на сообщение

    Прикольно, закину в закладочки, вдруг пригодится =)

  • Андрей
    Опубликовано: 17.09.2014 Ответить на сообщение

    Удобная штука, сделать скан сохранить в PDF и разместить на сайте и получится в некой мере слайдер. Виталий такой вопрос, на каких тематических площадках данное действие больше всего используется Вами или вообще?

    • Виталий
      Опубликовано: 17.09.2014 Ответить на сообщение

      Мной впервые такое было опробовано. В начале статьи писал, что прайс-лист клиента разместил таким образом.
      Ранее обычно прайс просто ссылкой на скачивание был.
      А использовать можно на всех сайтах. Здесь могут быть не только прайсы, но и презентации товара, объектов, либо же услуг.

  • helen
    Опубликовано: 08.10.2014 Ответить на сообщение

    а у меня не получилось. вставила function pdf_viewer и сразу админка ВП перестает загружаться. лог нужно запрашивать, Поэтому не знаю что там. убираю функцию - начинает работать.

    • Виталий
      Опубликовано: 08.10.2014 Ответить на сообщение

      Значит где-то что-то не так вставили. Рабочий пример видите на этой странице.
      Внимательно посмотрите куда вставляете код.

  • helen
    Опубликовано: 08.10.2014 Ответить на сообщение

    Спасибо! получилось! http://petergof.me/?page_id=177 🙂

  • Антон
    Опубликовано: 23.12.2014 Ответить на сообщение

    Благодарю!
    Отличное решение!
    Как раз удалил плагин, который отвечал за эту функцию и не знал, чем заменить.
    Развития вашему полезному сайту!

  • Март
    Опубликовано: 25.02.2015 Ответить на сообщение

    Не в курсе почему екселевский документ в книжкной ориентации отображается здесь как в альбомной?

  • SergCasper
    Опубликовано: 30.03.2015 Ответить на сообщение

    не хочет код вставляться ((

    • Яна
      Опубликовано: 31.03.2015 Ответить на сообщение

      ГУгл докс не работают походу

    • Виталий
      Опубликовано: 31.03.2015 Ответить на сообщение

      Если внимательно прочитаете статью, то сразу после примера есть абзац, в котором сказано об ошибках, возникающих в процессе использования.

      • SergCasper
        Опубликовано: 16.04.2015 Ответить на сообщение

        Посмотрите аналог.сервис: Office Web Viewer.
        Пример и о сервисе у меня в статье:
        http://www.serg-casper.ru/prosmotr-xls-i-doc-faylov-dokumentov-office-pryam/

  • trizna
    Опубликовано: 31.03.2015 Ответить на сообщение

    Не работает.
    Пишет: "Предварительный просмотр недоступен"
    И пустое серое поле iframe.

  • Роман
    Опубликовано: 03.05.2015 Ответить на сообщение

    Здравствуйте! Я вас хочу спросить, как сделать чтобы word-документы открывались на сайте? я нажимаю ссылку она скачивается а не открывается!

    • Виталий
      Опубликовано: 03.05.2015 Ответить на сообщение

      Добрый.
      Вы пробовали способ, описанный в статье.

      • Роман
        Опубликовано: 08.05.2015 Ответить на сообщение

        Да пробовал. Что-то не получается с Word'ом

  • Андрей Зенков
    Опубликовано: 22.04.2016 Ответить на сообщение

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

  • сеошник
    Опубликовано: 23.11.2016 Ответить на сообщение

    реально работает!
    Плагины лишние могут помимо полезных функций создать и дыру в безопасности, а тут так - работает!

  • Каролина
    Опубликовано: 10.12.2016 Ответить на сообщение

    Здравствуйте, Виталий,

    поясните пожалуйста, я никак не могу понять, почему в шорткод надо вставлять адрес своего сайта с указанием папки uploads, если документ находится не на сайте, а в docs.google.com?

    Я хочу, чтобы у меня читался документ в PDF, который находится на Яндекс диске. Какой адрес вставить в код файла в functions.php, мне понятно, а какой - в шорткод, я не могу понять.

    Спасибо.

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.

X
SEO-тема для WordPress сайта
Все заточено под продвижение. Максимально быстрая. Встроен функционал.