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

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

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

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

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

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

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

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

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

//Просмотр pdf прямо на сайте
function pdf_viewer($attr, $url) {
    return '';
}
add_shortcode('pdfview', 'pdf_viewer');

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

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

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

//Просмотр pdf прямо на сайте
function pdf_viewer($attr, $url) {
    return '';
}
add_shortcode('pdfview', 'pdf_viewer');

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

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

QTags.addButton( 'pdf', 'PDF', '');

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

QTags.addButton( 'pdf', 'PDF', '');

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

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