Сделать подобное можно при помощи различных плагинов, но я предпочел вариант без плагина и с выводом на сайте через шорткод.
В качестве обработчика выступает 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, а, скажем так, сия акция – разовая, то вам конечно нецелесообразно добавлять в движок шорткод.
Достаточно в редакторе страницы, переключившись в режим “текст” вставить в нужное место другой код. Смотрите мою статью по ссылке, которую я приводил выше.
На этом все. Побольше вам целевого трафика. Помогла статья? делимся с друзьями!