Очередной блог фрилансера » html

WordPress. Фильтруем HTML в записях и комментариях

dreamhelg — Wed, 13 Jan 2010 08:03:44 +0000

Я давно уже наблюдаю мучения читателей, которые пытаются оставить примеры html-разметки в комментариях. К сожалению, в прошлом году, долго не находилось времени, для решения этой проблемы. Но сегодня, с радостью хочу объявить о том, что проблема наконец-то решена – теперь вы можете использовать любую html-разметку в комментариях, предварительно заключив ее в теги

, а если вам интересно как это реализовано, то читайте далее.

Описание проблемы
HTML – это структурированный язык разметки, в котором текст заключается внутри тегов с угловыми скобками. Эти тэги сообщает браузеру, каким образом необходимо структурировать/отобразить информацию, содержащуюся между ними. Одни из самых распространенных тегов – это открывающий и закрывающий тег параграфа (, ); они сообщают браузеру, что текст, который находится внутри, является параграфом, в общей структуре документа.

Но что если, вы захотите показать читателям пример html-разметки?

Вы не сможете вывести тэги на экран, просто напечатав их, поскольку браузер решит, что это html-код и не отобразит их. Поэтому, для того чтобы вывести html-код, мы должны использовать специальные угловые скобки. Для вывода таких скобок используется их символьный объект –  специальный код, который выведет нужный символ. Этот код может быть как в форме имени, так и в форме числа, можно использовать то, что больше нравится. Например, прямые кавычки “ можно вывести двумя способами – используя объект-имя " или объект-число ".

Левую угловую скобку можно вывести с помощью < или <. В нашем примере, для вывода угловых скобок, мы будем использовать символьные объекты < и >.

Добавляем HTML-код в текст записи WordPress
Теперь, после того как мы разобрались, как отобразить HTML-код на экране, давайте разберемся как нам это использовать в записях WordPress. На первый взгляд все очень просто – нужно всего лишь заменить левые и правые угловые скобки в их символьные эквиваленты. Это хорошо пока у вас одна-две строчки кода, но что делать, если их значительно больше? Существуют различные плагины для решения этой проблемы, но большинство их них требуют дополнительной разметки в статье.

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

С помощью специального фильтра WordPress, мы сможем нормально отображать примеры html-кода в статьях и комментариях, внутри тегов .

Фильтры WordPress
Из Кодекса:

Фильтры – это функции, через которые WordPress пропускает данные, в определенные моменты исполнения, до того, как с ними будут произведены какие-то действия (такие как добавление в базу данных или отображение в окне браузера).

Итак, мы создадим специальный фильтр, который будет отыскивать контент, находящийся внутри тэгов , и конвертировать код, прежде чем отображать его на экране.

Специальный WordPress HTML фильтр
Вот так выглядит код фильтра:

[php]
)(.*?)
!ise', " '$1' .  stripslashes( str_replace(array('<','>'),array('<','>'),'$2') )  . '' ", $content_text);
    return $content_text;
    }

add_filter('the_content','mish_code_filter', 1, 1);
?>
[/php]

Теперь, давайте разберем код на части. Сначала мы создаем новую функцию, под названием “mish_code_filter”:

[php]
function mish_code_filter($content_text) {
    
    }
[/php]

Далее, мы описываем, что будет делать функция. В нашем примере, мы используем PHP-функцию preg_replace(), которая будет отыскивать текст внутри тэгов …

[php]
$content_text = preg_replace('!()(.*?)!ise',
[/php]

…и заменять их на зашифрованный текст:

[php]
" '$1' .  stripslashes( str_replace(array('<','>'),array('<','>'),'$2') )  . '' ",
[/php]

Вторая часть функции preg_replace(), использует две PHP-функции: stripslashes() и str_replace().

stripslashes() удаляет обратные слэши (\), которые добавляет WordPress, до того как вставляет запись в базу данных. Обычно, WordPress самостоятельно удаляет эти слэши, до того как вывести контент на экран, но поскольку наш фильтр инициализируется до того как данные будут отображены, эта функция обязательна.

str_replace() – ищет угловые скобки и заменяет их на символьные объекты.

$1 и $2 – это значения выражения, где $1 = () и $2 = (.*?).

Последняя часть функции возвращает значение (результат) функции, чтобы мы могли его использовать:

[php]
return $content_text;
[/php]

Теперь, нам нужно внедрить наш фильтр в WordPress, так, чтобы он срабатывал в определенное время. В нашем случае, мы внедрим фильтр, внутрь фильтра «the_content»:

[php]
add_filter('the_content','mish_code_filter', 1, 1);
[/php]

Фильтр “the_content”, как нетрудно догадаться, используется для фильтрации записей, после того, как они получены из базы данных и до того, как они выведены на экран. Поэтому, в нашем случае, мы сообщаем вордпрессу, о том, что наш фильтр (mish_code_filter) нужно использовать совместно с фильтром “the_content”.

Первая единица в годе, говорит WordPress, о том, что фильтр имеет высокий приоритет и должен быть выполнен раньше любых, других фильтров. Вторая единица говорит WordPress, о том, что мы передаем нашему фильтру только 1 параметр.

Установка Фильтра
Откройте ваш файл functions.php (расположен в папке с вашей темой), и вставьте туда следующий код:

[php]
)(.*?)!ise', " '$1' .  stripslashes( str_replace(array('<','>'),array('<','>'),'$2') )  . '' ", $content_text);
    return $content_text;
    }

add_filter('the_content','mish_code_filter', 1, 1);
?>
[/php]

Фильтр для Комментариев

Наш фильтр также можно использовать для фильтрации html, в тексте комментариев, для этого понадобятся совсем небольшие изменения. Первое, что нам нужно сделать – это заменить фильтр «the_content», на фильтр «comment_text», который выполняет ту же функцию, только для текста комментариев.

Ну и второе, необязательное изменение – теги

 мы заменим на теги , так как они чаще используются в тексте комментариев. В результате у нас получится вот такой фильтр:

[php]
function mish_code_filter($content_text) {
    $content_text = preg_replace('!()(.*?)!ise', " '$1' .  stripslashes( str_replace(array('<','>'),array('<','>'),'$2') )  . '' ", $content_text);
    return $content_text;
    }

add_filter('comment_text','mish_code_filter', 1, 1);
[/php]

Устанавливается он точно так же, как фильтр контента. Вот и все, можете проверить – наш фильтр работает.

Плагины с похожей функциональностью

	Raw HTML
	WP No Format
	Clean WordPress

Перевод статьи "Adding and Filtering Raw HTML in WordPress Posts", автор Martin

Микроформаты: Что, Почему и Как

dreamhelg — Wed, 09 Dec 2009 13:34:03 +0000

В интернете существует большое количество всевозможных данных. Но я убежден, что большинство полезных данных – например таких как контактная информация о людях или события, на которых необходимо присутствовать – должны храниться в HTML, там, где вы легко сможете получить к ним доступ. С этой задачей, нам помогут справиться Микроформаты.

Что это такое?

Итак, что же такое микроформаты? На домашней странице сайта microformats.org есть такое описание:

Разработанные в первую очередь для людей, а затем для машин, микроформаты – это набор простых, открытых форматов данных, построенные на основе существующих и широко распространенных стандартов.

Неплохое начало, но нам потребуется небольшое разъяснение. Вы можете найти на сайте список определений, но суть заключается в следующем: микроформаты – это набор стандартов для внедрения легко извлекаемых данных на ваши страницы, с использованием современных технологий. Отличная новость в том, что если у вас, предположим, есть контент на сайте, мы можете прямо сейчас пометить его микроформатами. Другая хорошая новость в том, что после прочтения этой статьи, весь процесс займет у вас пару минут.

Для чего?

Зачем же нужны микроформаты? Ну, если вы убеждены в том, что HTML должен быть семантичным, то микроформаты отлично вам подойдут. Или же, я могу привести другие аргументы: как мы уже заметили, идея микроформатов состоит в стандартизации того, как данные будут отмечены на странице, с тем, чтобы в дальнейшем, их легко можно было извлечь. На сегодняшний день существует не так уж и много инструментов, использующих возможности микроформатов, но я думаю ситуация изменится. Использование микроформатов в своей работе, подготовит ваши сайты для будущего, когда микроформаты будут более широко распространены. Опять же, на сайте, вы можете найти список того, что вы можете делать с микроформатами. Также для извлечения микроформатов, существует отличный аддон для Firefox, он называется Operator. Кроме этого, Дэн Веб создал простую JavaScript библиотеку под названием “Sumo”, которая извлекает микроформаты, используя JavaScript. Вы также можете попробовать microformats bookmarklet.

Как их использовать?

Что ж, если вы зашли так далеко, видимо вы и микроформаты просто созданы друг для друга. Так что, давайте сразу рассмотрим первый. Но прежде чем мы начнем, вот общая структура микроформатов, которую мы будем использовать: если они связаны более чем с одним элементом в нашем коде, то используются классы. Если они связаны только с одним элементом, обычно используется атрибут rel. hCalendar hCalendar - это простой способ отмечать события. Начнем с элемента, который объявляет наше событие: [html]

[/html] Если у вас предполагается несколько событий, вам нужно обернуть их в div.vcalendar, однако это не обязательно. Есть два обязательных свойства для события: дата начала (dtstart) и описание (summary). Давайте добавим их: [html]

This year, our company holiday dinner will begin at 2009-12-18T17:30.

[/html] Волне читаемо, не так ли? Но не дата! Вы правы, хотя микроформаты написаны в первую очередь для людей, даты – это единственная область, где в первую очередь важно, чтобы компьютер смог ее прочесть. Поэтому, было принято соглашение, записывать дату с помощью тэга abbr, в котором атрибут title будет выступать в роли значения свойства: [html] 5:30pm on Friday, December 18. [/html] Есть и другие, необязательные свойства, которые вы можете добавить, при желании. Например, время окончания события или расположение: [html]

We'll meet in the conference room of the Tower Hotel, which we have reserved until 9:30pm.

[/html] С помощью панели аддона Operator в Firefox, мы можем видеть это событие на нашей странице. Мы можем использовать его несколькими способами: Если я выберу экспорт в Google Calendar, он отлично перенесет в календарь данные, которые мы указали. Если хотите узнать больше о hCalendar, обратитесь к документации. hCard Давайте перейдем к hCard. hCard гораздо сложнее, чем hCalendar, но мы не будет рассматривать все детали. Если в дальнейшем, вы захотите узнать больше, читайте документацию. Снова мы начинаем с основы: [html]

[/html] Для hCard существует только два обязательных свойства: имя (n) и форматированное имя (fn). Обычно это один и тот же элемент. [html]

John Doe

[/html] Не забираясь слишком глубоко, замечу, что этот формат подразумевает что «John» - это имя, а “Doe” – фамилия. Если вы хотите это указать, вы можете использовать классы given-name и family-name: [html] John Doe [/html] Конечно, обычно требуется указать немного больше, чем просто имя. Вы можете добавить псевдоним, фото, адрес электронной почты, день рожденья, url, номер телефона, и почтовый адрес. [html]

JayDee

Personal: johndoe@gmail.com
Work: jdoe@example.com

Home: (416) 123-4567
Work 416-987-6543

January 1, 1980

My Website

123 Main Street

Toronto, Ontario M2W 4R5

Canada

[/html] Есть несколько вещей, на которые стоит обратить внимание:

Все имена классов, который я использовал здесь, являются свойствами hCard.
Некоторые свойства, такие как url или photo, получают свои значения из атрибутов href и src, а не из текста элемента.
Такие свойства как tel и email могут иметь два дочерних свойства: type и value. Если указан только type, value все равно будет подразумеваться (как вы могли заметить во втором адресе электронной почты и номере телефона).

С помощью Оператора, я могу экспортировать эти данные… … и открыть их в Outlook. Видите? Все что мы указывали, здесь! xFolk xFolk – это разрабатываемый микроформат для социальных закладок. Из документации:

Недостаток открытых, совместимых стандартов данных является главной проблемой в использовании сервисов социальных закладок. Открытый стандарт позволит легко собирать данные социальных закладок и на их основе изобретать новые сервисы… Кроме того, открытый стандарт сделает возможным написания кода JavaScript, который будет работать на любых сервисах, как сейчас сделано на del.icio.us.

Чтобы использовать xFolk, оберните каждую закладку контейнером с классом «xfolkentry»: [html]

[/html] Затем, вставьте ссылку и описание, используя классы «taggedLink» и «description», соответственно. [html] Nettuts, the best web development blog on the planet. [/html] Просто, не правда ли? Думаю, это будет весьма полезно для блог ролла или сводки последних новостей. XFN (XHTML Friends Network) XFN - это простой способ отметить человеческие взаимоотношения. С помощью атрибута rel (который является аббревиатурой отношений) в ваших ссылках, вы описываете свои взаимоотношения с владельцем страницы, на которую вы ссылаетесь. У вас могут быть взаимоотношения двух видов: с другими людьми или с самим собой (ссылки на другие ваши страницы). Очень легко описать другие страницы, владельцем которых тоже являетесь вы: [html] My Posterous My Photos My Tweets [/html] Очень просто, да? Достаточно указать rel=”me” и все готово. Отношения с другими людьми чуть более детальные, но совсем не трудные. Существует шесть категорий, которые вы можете использовать: дружеские, физические, профессиональные, географические, семейные, романтические. Я не буду перечислять их все (узнать больше можно по этой ссылке), вот несколько примеров: [html]

[/html] В первой ссылке, вы можете сообщить, с помощью атрибута rel, что-то вроде «Я встречал владельца страницы, ставлю ссылку на его страницу, и я его друг». Следующее, это моя (гипотетическая) жена, которой посчастливилось быть моей супругой и возлюбленной. Я также встречал парня по соседству, но он просто знакомый и сосед. И наконец, хотя мой (снова гипотетический) коллега является другом, обратите внимание, что я никогда не встречался с ним, это можно определить как виртуальные взаимоотношения. Я хотел бы заметить, что вы не должны использовать XFN, когда просто ставите ссылки на статью в блоге и прочее. Используйте XFN, когда вы хотите указать непосредственно на человека, когда текстом ссылки является его имя, а ссылка ведет на домашнюю страницу. VoteLinks VoteLinks – это интересная идея: когда вы ставите ссылку на статью, продукт, на все что угодно, добавляйте атрибут rev. Rev? Rev – это противник rel; в то время как rel описывает как страница на которую ведет ссылка связана с текущей страницей, rev определяет отношение текущей страницы к той, на которую идет ссылка. С помощью VoteLinks, вы можете сделать свою страницу как голосующую за материал, который доступен по ссылке. Голосовать можно за, против, или воздержатся. Например: [html]

Check our this great blog post by Collis on the netsetter

I got terrible service at the Five Seasons Grill last night

What do I think of his site redesign?

[/html] Насколько это полезно? Ну, представьте если Google (или любой другой поисковик) будет учитывать VoteLinks при выдаче результатов поиска. Сейчас, их система (правда, в общих чертах) выдает то количество ссылок, которое видит поисковик. Но что если за большинство этих ссылок являются голосами пользователей против продукта или страницы? Или как насчет сайта, который будет сканировать веб, в поисках VoteLinks, и выдавать вам список наиболее популярных страниц? Конечно это обширное поле для спекуляции, но возможно это будет интересно. Проблема в том, что для того чтобы получить какой-то эффект, использовать VoteLinks придется очень многим людям. Geo Geo очень простой, у него есть только два свойства: latitude и longitude. [html]

Apple : (37.33171397409807 -122.03051626682281)

Envato : -37° 48' 45.1008" 144° 58' 8.6736".

[/html] Как мы уже говорили ранее, вы можете использовать элемент abbr для маскировки настоящих значений. И конечно же, Оператор распознает их. rel-license Если вы разрабатываете что-то для публичного использования, вы, скорее всего, знаете, что в проект необходимо включить лицензию. Вы можете назначить атрибут rel со значением «license» для ссылки на лицензионную документацию. [html] cc by 2.0 [/html] В чем смысл? В том, что Yahoo Creative Commons Search и Google Usage Right's Search, оба уже используют атрибут rel=”license” в своих алгоритмах. rel-tag Это очень интересный микроформат, потому что каждый блоггер назначает тэги своим статьям. Для того, чтобы использовать этот микроформат, просто добавьте rel=”tag” к вашей тэговой ссылке, и все готово. Теперь, с помощью нашей панели Оператора, мы можем видеть контент других сайтов, с такими же тэгами. Важно понимать, что имя тэга берется из атрибута href, а не из текста ссылки. Так что в следующем примере… [html] Client-Side Scripting [/html] … тэгом будет «JavaScript» а не «client-side scripting». Nettuts использует этот микроформат, но вы конечно об этом знаете, если используете Оператор. rel-nofollow Другой простой, но эффективный тэг – это атрибут rel=”nofollow” к ссылке. Он используется для того, чтобы выбранная ссылка не участвовала в ранжировании страниц в поисковых системах. И конечно такие поисковые системы как Google, Yahoo и Bing, активно используют этот микроформат. Он идеален для ссылок в комментариях к блогу, поскольку с этим атрибутом сторонние ссылки не будут оказывать влияния на ваш сайт, а также раздавать рейтинг своим владельцам.

Итак, что вы собираетесь делать?

Сегодня, мы вкратце рассмотрели некоторые полезные микроформаты, но вопрос в том, стоят ли они вашего времени? Не стоят, пока вы не начнете их использовать! Микроформаты разработаны для более удобного получения данных со страницы, но пока они не будут широко использоваться, инструментов для их использования, тоже будет мало. Несмотря на то, что многие из них могут показаться бессмысленными сейчас, надеюсь, через несколько лет они будут использоваться повсеместно. Будете ли вы использовать микроформаты в своих сайтах? Перевод статьи "Microformats: What, Why, and How", автор Andrew Burgess