Бывают ситуации, когда очень удобно использовать весь потенциал языка программирования PHP в тексте при написании статей. Речь идет о статьях для WordPress.
Все кто пробовал написать какой либо php код в посте, в надежде что он сработает, знают, что WordPress воспринимает такой код как простой текст. Однако иногда бывает удобно запустить, например, какой-нибудь цикл вывода прямо в тексте при написании статьи, ведь контент такой статьи будет обновляться динамически. Другим примером может служить возможность вызывать готовые функции в посте, в случае необходимости или, например, вставить какой-нибудь php файл в текст поста по средствам php функции require():
Require "my_script.php";
В общем, здесь фантазия безгранична и правда в том, что невозможность использования php в тексте статьи в некоторых случаях может стать настоящей проблемой. Как-то давно я столкнулся с такой проблемой, решил её взяв и немного переделав код из какого-то плагина (сейчас уже не вспомню название).
Итак, чтобы реализовать возможность вставлять исполняемые PHP скрипты в текст статьи / поста или статической страницы , нужно добавить в уже, наверное, до боли знакомый нам файл темы functions.php следующий код:
## Исполняемый PHP код в контенте записи WordPress. ## PHP_код ## ## @version: 1.0 if("Исполняемый PHP код в контенте"){ add_filter("the_content", "content_exec_php", 0); function content_exec_php($content){ return preg_replace_callback("/\(.+?)\[\/exec\]/s", "_content_exec_php", $content); } function _content_exec_php($matches){ if(" off" === $matches){ return "\n\n<"."pre>". htmlspecialchars($matches) ."\n\n"; } else { eval("ob_start(); {$matches}; \$exec_php_out = ob_get_clean();"); return $exec_php_out; } } }
После того, как код добавлен станет возможным использовать в статьях конструкцию такого вида:
Php код
Например:
// Комментарий global $wp_version; echo "Текущая версия WP: $wp_version";
Чтобы отключить выполнение кода, можно использовать следующую конструкцию. Она выведет просто код, как если бы мы вставили php код как текст.
Php код
Важно о защите
Нужно помнить, что этой возможностью может воспользоваться кто угодно, а это огромная дыра в защите, потому что если у кого-либо есть доступ к написанию статей, он легко может сделать с сайтом все что захочет.
Чтобы обезопасить себя от возможных пагубных последствий этого хака, можно сделать следующую простую защиту (то что сразу пришло мне в голову): включать исполнение конструкции php код , только в том случае, если, например, у поста есть какое-либо произвольное поле или, скажем, пост написан в 00 минут. Естественно только вы будете знать эту хитрость при которой код будет исполняться и соответственно только вам будет доступна возможность вставить php код в статью.
Прежде чем я покажу готовый код, давайте подробнее рассмотрим, что имеется ввиду в заголовке и когда это лучше применять.
Вывести посты на странице в WordPress — это значит создать шаблон страницы (page template) и забацать туда цикл, .
Для чего нужно такое вытворять? Рассмотрим несколько вариантов:
- представьте, что вам нужно вывести на одной странице записи сразу из нескольких категорий
- а ещё таким образом можно обобщить на одной странице несколько таксономий, несколько меток и прочее
Вообще можно скомбинировать любые условия, используя статью. Параметры, которые описаны для WP_Query также подойдут и для query_posts.
Теперь я думаю порядок действий вам понятен? Создаете шаблон страницы, пихаете наверх query_posts, потом цикл, потом постраничную навигацию…
Кстати о ней. Просто так она не будет работать. Как это исправить?
Пожалуй стоит описать порядок действий более подробно.
- Создать шаблон страницы.
- Использовать с необходимым набором аргументов, при этом не забыв включить в него номер текущей страницы.
- Добавить цикл.
- Добавить функцию постраничной навигации, например wp_pagenavi().
А теперь полностью готовый код:
| /* * Template name: Моя галерея */ $current_page = (get_query_var("paged" ) ) ? get_query_var("paged" ) : 1 ; $params = array ( "posts_per_page" => 7 , // количество постов на странице "post_type" => "artwork" , // тип постов "paged" => $current_page // текущая страница ) ; query_posts($params ) ; $wp_query ->is_archive = true ; $wp_query ->is_home = false ; while (have_posts() ) : the_post() ; /* в тело цикла вставьте HTML одного анонса записи, например: */ endwhile ; wp_pagenavi() ; // функция постраничной навигации |
Это конечно же обобщенный пример, поэтому не забудьте про и , если они у вас используются.
Плагин постраничной навигации WP-PageNavi
В предыдущем примере я использовал функцию wp_pagenavi() . Она отвечает за постраничную навигацию и является составляющей частью плагина WP-PageNavi (русское название: Список страниц ).
- 5.0 out of 5 based on 2 votes
В прошлой статье мы рассмотрели, для нашего блога на WordPress, а здесь рассмотрим, как добавляются посты (заметки) в WordPress.
В WordPress есть два типа контента, это посты или как их еще называют заметки и страницы. Посты это динамический контент который, как правило, постоянно появляется на блоге, в определенных рубриках.
Что касается страниц, то это обычные статические страницы, при помощи которых можно создать например страницу об авторе или о блоге.
Для того чтобы создать пост, пройдите в административной панели WordPress в пункт: «Записи» >> «Добавить новую» .
В результате загрузится текстовый редактор, при помощи инструментов которого вы сможете форматировать текст, подобно тому, как вы это делаете в редакторе MS Word.
1. В поле «Введите заголовок» , укажите название поста.
2. При помощи панели «Загрузить/вставить» , вы сможете загрузить и вставить в ваш пост необходимые изображения и медиа файлы.
3. При помощи вкладок «Визуально» и «HTML» , вы можете переходить к редактированию HTML кода или оставаться работать в визуальной среде.
4. При помощи инструменов панели вы сможете форматировать текст. Нажав на соответствующую иконку, вы откроете дополнительную панель с очень полезными инструментами.
Вначале добавляйте заголовок поста, после того как вы укажете заголовок и установите курсор в текстовое поле редактора, под заголовком автоматически сгенерируется постоянная ссылка, которая будет использоваться для этого поста. Постоянные ссылки мы настраивали в уроке: « ».
Вставляем текст.
Если вы подготавливаете свои тексты в редакторе MS Word, то не копируйте их сразу в окно редактора, используйте инструмент «Вставить из Word».
Для этого скопируйте текст в Word"е, затем перейдите в редактор WordPress и нажмите на иконку «Вставить из Word», после этого вставьте текст в открывшееся окно и нажмите на кнопку «Вставить».
Если же вы вставить текст из Word срарзу в текстовый редактор WordPress, то за текстом скопируете очень много лишнего кода, отвечающего за форматирование текста. В результате, вы увеличите размер вашей страницы, плюс, к присутствию большого количества лишнего кода, не очень хорошо относятся поисковые системы.
Вставляем изображение в текст.
Для того чтобы в текст вставить изображение, установите курсор в то место в тексте, куда необходимо вставить изображение и нажмите на конку «Вставить изображение»:
В результате загрузится окно, в котором будет три вкладки. При помощи вкладки «С компьютера» можно загрузить и вставить какое либо изображение, находящееся на вашем компьютере. При помощи вкладки «С сайта» вы можете указать путь к изображению, которое уже находится, на каком либо сайте и при помощи вкладки «Библиотека файлов» можно вставить любое изображение из медиа библиотеки. В медиа библиотеке хранятся все файлы, которые вы загружали ранее.
В качестве примера, вставим изображение с компьютера. Для этого нажмите на кнопку «Выберите файлы», выберите необходимое изображение и нажмите кнопку «Открыть». В результате произойдет загрузка изображения. После того, как изображение будет закачано, перед вами появится окно, при помощи инструментов которого вы сможете задать определенные атрибуты изображению.
Поле «Заголовок» является обязательным к заполнению. Остальные поля «Текст», «Подпись» и «Описание» можете заполнять по желанию.
В поле «Ссылка» можно задать ссылку, которая будет идти по изображению. По умолчанию ссылка идет на изображение, если нажать на кнопку «Ссылка на запись», то ссылка с картинки будет идти на сам пост, если нажать на кнопку «Нет», то ссылки не будет.
В пункте «Выравнивание» , можно задать расположение изображения на странице.
В пункте «Размер» , можно задать размер изображения.
После указания всех параметров, нажмите на кнопку «Вставить в запись» и изображение будет вставлено.
Вставляем тег "Далее".
Выбираем формат записи.
Начиная с WordPress версии 3. X были введены форматы постов. При помощи форматов, вы можете выбрать определенный вид отображения поста. Эта функция дает возможность разработчикам шаблонов, создавать различные типы записей в зависимости от потребностей. В шаблоне установленном в WordPrees по умолчанию, используется три формата отображения поста:
Форматы постов можно выбрать в панели справа от редактора. Форматы постов доступны только в темах для WordPress версии 3. X. Всего поддерживается 10 форматов постов, их наличие зависит от используемой вами темы. При использовании того или иного формата, тегу
задается соответствующий класс, при помощи которого данному формату поста можно задать определенное оформление, при помощи CSS.Если вы читаете блоги в Интернете, то наверняка замечали, что выглядят они по-разному. Особенно если речь идет об отображении анонсов новых статей. Прочитав сегодняшний пост до конца, вы узнаете о стандартных возможностях публикации на главной, которые предоставляет движок ВордПресс.
Как задать количество постов на главной?
Сделать это можно в настройках админки WordPress. Заходите в нее, затем в левом меню находите «Настройки», «Чтение» и ставить нужное вам количество постов в поле «На страницах блога отображать не более».
Главных недостатков при данном типе вывода материала два:
- Главная страница может стать похожа на бесконечную «простыню».
В глазах поисковиков на вашей главной странице происходит дублирование контента.
Чтобы вывод постов в рубриках стал более юзабельным, рекомендуется заменить опцию the_content на the_excerpt. При этом вы еще и уменьшите степень дублирования контента на блоге. Выполняется данная настройка в файле archive.php.
Используя the_excerpt под заголовком публикации, будет выводиться 55 первых слов вашего поста. Если вас это не устраивает, можно настроить все с помощью functions.php. Открываете данный файл, добавляете парочку новых строк:
function new_excerpt_length($length) {
add_filter(‘excerpt_length’, ‘new_excerpt_length’);
Там, где написано 30, можно поставить нужное число. Оно обозначает число слов, которые будут отображаться на веб-страницах рубрик ВордПресс под заголовками.
functionnew_excerpt_more($more) {
add_filter(‘excerpt_more’, ‘new_excerpt_more’);
Ну а чтобы настроить вывод на главной только заголовков постов, достаточно будет удалить из archive.php или index.php опцию the_excerpt или the_content.
Как сделать главную в WordPress статической (постоянной)?
Решается этот вопрос в четыре простых шага:
Создаете и публикуете статическую страницу, которая будет в полной мере соответствовать вашим требованиям.
Создаете, а затем публикуете пустую страничку. В содержании нет необходимости, а вот название придумайте обязательно (Новости, Блог и так далее).
Заходите в Настройки/Чтение и выбираете статическую страницу вместо «Ваши последние записи». Здесь же нужно будет выбрать недавно созданную страничку под названием «Главная».
Добавляете в основное меню «Блог» либо «Новости», который неизменно приведет к только что созданной страничке с таким названием.
Если вам нужно вставлять куски кода в посты или страницы на сайте на ВордПресс, тогда вам пригодится наш сегодняшний пост. Это может быть полезным, например, когда вы публикуете уроки по программированию и в качестве образца вам нужно вставлять в свои посты небольшие фрагменты кода. Ведь очень часто бывает необходимым показать своим читателям образцы исходного кода на языке PHP, JavaScript, CSS или любом другом языке программирования.
По умолчанию WordPress фильтрует любой необработанный код, добавленный в посты, страницы, виджеты или комментарии. Это делается в целях безопасности, чтобы программный код не был исполняемым. Если вы, например, пишете пост сначала в пакете Word или любом текстовом редакторе, а потом вставляете этот текст в поле редактирования поста в консоли WordPress, движок автоматически конвертирует некоторые символы. Например, символ < в режиме просмотра Текст будет преобразован в < . Т.е., если вы вставляете в Визуальном режиме, например, фрагмент кода, который начинается с
Фактически, тот же результат будет, если вы не вставляете исходный текст, а пишете его напрямую в режиме Визуального редактора. Но, если вы будете писать код прямо в режиме Текст, тогда система опять же в целях безопасности закомментирует ваш код, а некоторые спецсимволы вообще удалит.
Попробуйте, например, написать в режиме Текст:
При переключении в Визуальный режим (или же после публикации поста) вы не увидите желаемого текста Hello, World! поскольку система его скрыла, чтобы он не был исполняемым. Вот тут мы и подошли к проблеме: а как же отображать программный код в постах ВордПресс?
Простой способ отображения кода в WordPress
Самый простой способ добавить код в свои посты – делать обертку программного кода в режиме Текст HTML-тегом
Этот тег предназначен для отображения кода в том виде, в котором он был напечатан, т.е., со всеми пробелами, спецсимволами и тому подобное. Можно было бы, конечно, не использовать этот тег, а писать весь программный код сразу с использованием HTML-сущностей, но это очень сложный подход. Гораздо проще писать нужный код в Визуальном режиме редактирования публикации, а потом переключаться в режим Текст и обрамлять нужный фрагмент тегами........, и при этом все «опасные» символы программирования автоматически преобразуются в HTML-сущности.Например, вышеуказанный код в режиме Текст будет выглядеть так:
Тег
— это идеальный элемент для больших блоков кода, поскольку он позволяет сохранять все пробелы, табуляции и тому подобное.Для небольших блоков кода можно использовать тег HTML5 специально предназначенный для кода —
. В режиме редактирования Текст в ВордПресс для этого есть даже специальный шорткод. При редактировании поста выделите нужный фрагмент и нажмите кнопку code на панели инструментов, и этот фрагмент будет обрамлен тегами.........Тег
— блочный, а тег— инлайновый, т.е., большинство браузеров отображает его как display: inline; и его можно показывать прямо в абзаце, а не с новой строки.Сложный способ отображения кода в WordPress
К сложному способу отображения программного кода я отношу специальные плагины для этого (например, Crayon Syntax Highlighter, Syntax Highlighter Evolved и подобные). Кто-то может возразить, что это наоборот простой способ, но я считаю, что всякие навороченные плагины только все усложняют. Очень часто можно встретить на сайтах ситуацию, когда ранее оформленный код с использованием шорткодов плагина по истечению времени так и отображается в браузере, например:
а должно быть красивое оформление и подсветка синтаксиса. Очень часто такие плагины не совместимы с новыми версиями движка, или же вебмастера часто забывают обновлять их. Или хуже – используют сразу несколько таких плагинов.
Да, такие плагины очень красиво делают подсветку синтаксиса на лету с помощью JavaScript и CSS, но они в основном довольно «тяжелые» для системы, а элементарную подсветку синтаксиса можно сделать без плагинов, с помощью нескольких классов для тегов div , span , code и pre , а также нескольких строк CSS-стилей.
Выбирать вам!
И еще к сложному способу вставки кода в страницы WordPress хочу отнести использование сторонних сервисов. Есть довольно много сайтов, на которых можно писать практически любой код и он будет отображаться так, как и должен. Примеры таких сервисов: CodePen, GitHub Gists и JSFiddle.
Они делают очень красивую подсветку синтаксиса и даже демо-просмотр результата исполнения кода, но сложность их заключается в необходимости использования вставки iframe’ами или же внешними JavaScript-библиотеками. К данному методу я прибегаю только для показа демо результата выполнения кода.
Вывод
Как вы можете видеть, добавление кода на сайт ВордПресс – это не такая уж и сложная задача, но знать основные решения для этого все-таки нужно.
Если у вас есть другие решения добавления кода в посты/страницы WordPress, дайте нам знать в комментариях ниже.
Загрузка...