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

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

В качестве обработчика выступает Google Docs. Код не мой и свободно гуляет по сети. Долго говорить не буду — смотрите на результат его работы.

Пример:

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

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

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

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

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

//Просмотр pdf прямо на сайте
function pdf_viewer($attr, $url) {
    return '<iframe
                    src="https://docs.google.com/viewer?url=' . $url . '&embedded=true"
                    style="width:' .$attr['width']. '; height:' .$attr['height']. ';"
                    frameborder="0">Ваш браузер не поддерживает фреймы</iframe>';
}
add_shortcode('pdfview', 'pdf_viewer');

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

[pdfview width=“600px” height=“500px”] /wp-content/uploads/2015/03/testovyy-list-yeksel.xlsx [/pdfview]

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

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

//Просмотр pdf прямо на сайте
function pdf_viewer($attr, $url) {
    return '<iframe
                    src="https://docs.google.com/viewer?url=' . $url . '&embedded=true"
                    style="width: 600px; height: 500px;"
                    frameborder="0">Ваш браузер не поддерживает фреймы</iframe>';
}
add_shortcode('pdfview', 'pdf_viewer');

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

[pdfview] /wp-content/uploads/2015/03/testovyy-list-yeksel.xlsx [/pdfview]

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

QTags.addButton( 'pdf', 'PDF', '[pdfview width="600px" height="500px"]', '[/pdfview]');

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

QTags.addButton( 'pdf', 'PDF', '[pdfview]', '[/pdfview]');

Если же вы не планируете постоянно работать с документами Microsoft Office, а, скажем так, сия акция – разовая, то вам конечно нецелесообразно добавлять в движок шорткод.

Достаточно в редакторе страницы, переключившись в режим “текст” вставить в нужное место другой код. Смотрите мою статью по ссылке, которую я приводил выше.

На этом все. Побольше вам целевого трафика.  Помогла статья? делимся с друзьями!