Содержание

9 октября 2014

11 мин.

Верстка писем: инсайды, особенности и тонкости

технический консультант EMAILMATRIX, основатель Pixcraft

Чем верстка писем отличается от верстки веб-страниц

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

По данным компании «ExpertSender Россия» на сентябрь 2014 г., в России распределение пользователей электронной почты по провайдерам выглядит так:

mail.ru (bk.ru, list.ru, inbox.ru) — 54,77 %,
yandex.ru — 20,07 %,
gmail.com — 13,69 %,
rambler.ru — 6,33 %,
yahoo.com — 1,65 %,
outlook.com — 1,37 %.

А из почтовых клиентов (согласно моим наблюдениям) наиболее популярны:

MS Outlook 2003/2007/2010/2013,
Mozilla Thunderbird,
The Bat,
Apple Mail.

Для начала отметим, что

Привычная для веб-страниц блочная верстка не используется в письмах из-за ограниченной поддержки стилей рядом почтовых клиентов и веб-интерфейсов. Для обеспечения корректного отображения письма во всем разнообразии почтовых клиентов и веб-интерфейсов применяется табличный подход.
Режим отключенных изображений по-прежнему важен. Несмотря на то, что в начале 2014 года Gmail стал показывать картинки по умолчанию, большинство почтовых клиентов этого не делает. Есть варианты неотображения картинок и в веб-интерфейсах: Outlook.com показывает письма без картинок, если отправитель не «доверенный» (есть такое понятие), а в Gmail по умолчанию скрыты картинки в письмах, контент которых предназначен только для взрослых. Поэтому необходимо обеспечить приемлемое отображение письма без изображений, используя цвет фона, альтернативный текст для изображений (alt) и т.д.
Размер имеет значение. Веб-интерфейсы Gmail и Yahoo обрезают письмо, размер которого превышает 102 Кб и 100 Кб соответственно, так что старайтесь максимально сократить длину кода.
Отсутствует поддержка стандартных интерактивных средств веб-программирования: JavaScript, Flash, формы. Не включайте данные элементы в код писем, иначе они, скорее всего, даже не дойдут до адресата, так как будут распознаны как спам или потенциально опасные.
Большинство веб-интерфейсов вырезают все стили, указанные между <head> и </head>, в связи с этим все стили следует прописывать как инлайновые в атрибуте style.
Поддержка стилей CSS ограничена, поэтому нельзя использовать сокращенную форму типа border: 1px solid #000000:. Корректный вариант: border-width:1px;border-style:solid;border-color:#000000;. Да, код цвета тоже сокращать нельзя (запись #fff будет некорректна).

Остальное рассмотрим на конкретном примере.

Разработка простого html-шаблона и верстка писем. Общий макет письма.

Ширина письма не должна превышать 700 px (пусть будет 600 px), так как в большинстве веб-интерфейсов тело письма занимает не более 50 % от общей ширины активной области, а появление горизонтального скроллинга сильно ухудшит юзабилити, да и просто впечатление о письме.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title> - </title>
</head>
<body style="padding:0px;margin:0px;">
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr><td align="center" bgcolor="#ffffff">
      
         <table width="600" border="0" cellspacing="0" cellpadding="0">
            <tr><td align="center">
               <!--mail body -->
            </td></tr>
         </table>      
      
      </td></tr>
   </table>
</body>
</html>

Используйте максимально простую структуру таблиц. Сложные таблицы не всегда верно воспроизводит Outlook. Старайтесь избегать объединения ячеек (colspan, rowspan). Лучше использовать вложенные таблицы. И не забывайте указывать параметры align и valign у ячеек.

Значение атрибутов CELLPADDING и CELLSPACING следует установить как «0». Не используйте никаких значений атрибута BORDER, кроме «0», у table, так как не все почтовые клиенты корректно интерпретируют другие значения. Да, согласны, верстка писем — дело не простое.

Вертикальные и горизонтальные отступы

Достаточно сложно создать емейл, в котором интервалы отображались бы адекватно везде, поскольку платформы по-разному работают с вертикальными и горизонтальными отступами. Например, в начале 2013 года Outlook.com (бывший Hotmail) начал вырезать отступы margin из кода емейлов. В результате, для создания в емейле необходимых интервалов по горизонтали приходится использовать свойство отступов (padding). Еще более осложняет ситуацию то, что почтовый клиент Outlook не поддерживает отступы padding, а отступы margin — поддерживает. В связи с этим лучше отказаться от использования как padding, так и margin. Горизонтальный отступ можно сделать с помощью пустой ячейки (в которую поместить символ неразрывного пробела ). Чтобы задать отступ справа и слева, можно создать вложенную таблицу меньших размеров. Вертикальный отступ можно задать следующим образом:

<!-- padding --><div style="height: 10px; line-height:10px; font-size:8px;">&nbsp;</div>

Или же используя border цвета фона.

Outlook 2013 имеет еще одну интересную особенность: при создании ячейки (<td>) меньше 19 пикселей в высоту он растянется до 19 пикселей. Во избежание этого, вы можете добавить параметр line-height при описании стиля ячейки.

Текст и ссылки

Оформление текста следует производить сразу двумя тегами — font и span. Для родительской ячейки указать line-height (это принципиально для Outlook 2013 и большинства веб-интерфейсов). Стоит отметить, что Outlook.com игнорирует параметр line-height, указанный у ячейки (<td>), так что следует указать его также и у span.

При верстке писем следует использовать стандартные шрифты (Arial, Verdana, Tahoma, Times New Roman и т.д.). Специальные текстовые символы всегда должны применяться с использованием соответствующих кодов спецсимволов, чтобы получатели могли видеть адекватно отображенный текст на любой платформе.

«Пример» - &laquo;Пример&raquo;

Итак, учитывая все вышеуказанные рекомендации, оформление текста будет выглядеть следующим образом:

<font face="Tahoma, Arial, Helvetica, sans-serif" size="2" color="#000000" style="font-size:12px;">
<span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; color:#000000; line-height: 14px;">
	Текст
</span></font>

У ссылок необходимо указывать атрибут target="_blank", чтобы избежать возможных проблем с открытием страницы в текущем окне.

<a href="#" target="_blank" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; color: #000000;text-decoration:none;">
<font face="Tahoma, Arial, Helvetica, sans-serif" style="font-size:14px;" size="3" color="#000000">
	Ссылка
</font></a>

Часто необходимо, чтобы, например, предлог не был оторван от слова. Чтобы это гарантировать, используйте символ неразрывного пробела:

Только в nbsp;этом году!

А если необходимо перенести слово, воспользуйтесь символом . Это бывает полезно, например, для длинных ссылок, которые могут «разрывать» шаблон. Про ссылки следует сказать вот еще что: некоторые веб-интерфейсы и почтовые клиенты (особенно мобильные), если находят нечто похожее на номер телефона, заменяют его ссылкой, при этом используются цвета по умолчанию. Чтобы этого избежать, есть два варианта: либо сделать так, чтобы номер не распознавался как номер телефона, либо сразу сделать его ссылкой или прописать стиль отображения ссылок для этого блока. В первом случае, необходимо разделить отдельные части, используя <span>.

+7<span>987<span><span>654<span><span>32<span><span>10<span>

Во втором случае необходимо прописать ссылку вида: href="tel:79876543210".

Аналогично первому варианту можно избежать замены адресов в веб-интерфейсе Yandex.

Изображения и фон

Многие почтовые клиенты по умолчанию не загружают изображения, поэтому, если оно несет в себе какую-то смысловую нагрузку (помимо эстетической), необходимо указать атрибут alt (атрибут alt в любом случае должен присутствовать, но он может быть и пустым alt=""). А чтобы оформление альтернативного текста соответствовало дизайну и лучше читалось, изображение можно обернуть как текстовый фрагмент, рассмотренный ранее.

У изображений необходимо всегда указывать значение высоты и ширины. Чтобы избежать проблем отображения изображений в ряде веб-интерфейсов (в том числе Gmail), они должны быть представлены как блочные элементы:

<img src="images/image.png" width="150" height="30" style="display:block;">

Еще стоит помнить про особенность Outlook 2013 — если высота изображения не превышает 19 px, то у родительской ячейки необходимо указать стилевой параметр line-height со значением, равным высоте изображения.

Не все емейл-клиенты поддерживают фоновые изображения (особенно это касается Outlook), поэтому их нужно использовать с осторожностью или избегать вовсе. Не забудьте указать подходящее значение фонового цвета BGCOLOR, чтобы текст, наложенный на изображение в определенном разделе, был виден даже тем пользователям, у кого фоновые изображения не отображаются и/или все изображения отключены. Фоновое изображение, указанное у body, будет отображено в том числе и в Outlook, но значительно повышается шанс попадания такого письма в спам. Для отображения фона в Outlook 2007-2013 используйте следующую структуру:

<table width="120" border="0" cellspacing="0" cellpadding="0">
<tr><td bgcolor="#7bceeb" height="120" background="image.jpg" style="background-image:url(image.jpg);">

  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:120px;height:120px;">
    <v:fill type="tile" src="image.jpg" color="#7bceeb" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div>
   <table width="120" border="0" cellspacing="0" cellpadding="0">
      <tr><td height="120">
          содержимое блока с фоновым изображением. 
      </td></tr>
   </table>
  </div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
  
</td></tr>
</table>

Еще одно важное замечание: Outlook 2007/2010/2013 использует текстовый движок для обработки html-писем (по сути — MS Word), поэтому в случае «длинных» таблиц в этих почтовиках могут появляться разрывы страниц (они выглядят как белое пространство, разрывающее таблицу). Чтобы избежать их появления, старайтесь, чтобы таблицы не превышали 1800 px в высоту.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title> - </title>
</head>

<body style="padding:0px;margin:0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" bgcolor="#282f37">

<table border="0" cellspacing="0" cellpadding="0" width="600" style="min-width:600px;">
   <!--preheader -->
   <tr><td>
   <!-- padding --><div style="height: 12px; line-height:12px; font-size:10px;">&nbsp;</div>
   <table width="600" border="0" cellspacing="0" cellpadding="0">
      <tr><td width="400" align="left" valign="middle" style="line-height:15px;">
         <font face="Tahoma, Arial, Helvetica, sans-serif" size="2" color="#ffffff" style="font-size:13px;">
         <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; color:#ffffff;line-height:15px;">
            Ваш экземпляр &laquo;Programmatic: теория с примерами&raquo;
         </span></font>
      </td><td align="right" valign="middle" style="line-height:15px;">
         <a href="#" target="_blank" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; color: #ffffff;text-decoration:underline;line-height:15px;">
         <font face="Tahoma, Arial, Helvetica, sans-serif" style="font-size:13px;" size="2" color="#ffffff">
            Отписаться
         </font></a>
      </td></tr>
   </table>
   <!-- padding --><div style="height: 8px; line-height:8px; font-size:6px;">&nbsp;</div>
   </td></tr>
   <!--preheader END-->
   <!--header -->
   <tr><td align="center" bgcolor="#ffffff" style="border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#282f37;">
   <!-- padding --><div style="height: 12px; line-height:12px; font-size:10px;">&nbsp;</div>
   <table width="540" border="0" cellspacing="0" cellpadding="0">
      <tr><td   width="210" align="left" valign="top">
         <!-- padding --><div style="height: 15px; line-height:15px; font-size:13px;">&nbsp;</div>
         <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 18px;"  >
         <font face="Arial, Helvetica, sans-serif; font-size: 18px;" size="4" color="#596167">
         <img src="img/logo.png" width="210" height="45" alt="iAge" border="0" style="display: block;" /></font></a>
         <!-- padding --><div style="height: 10px; line-height:10px; font-size:8px;">&nbsp;</div>
      </td>
      <td align="right" valign="top">
         <table width="100%" border="0" cellspacing="0" cellpadding="0" >
            <tr><td align="right" height="33" valign="top" style="line-height:14px;">
               <font face="Tahoma, Arial, Helvetica, sans-serif" size="2" color="#282f37" style="font-size:12px;">
               <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; color:#282f37;line-height:14px;">
                  <a href="#" target="_blank" style="color:#282f37;"><font color="#282f37">О компании</font></a>
                  &nbsp;&nbsp;
                  <a href="#" target="_blank" style="color:#282f37;"><font color="#282f37">События</font></a>
                  &nbsp;&nbsp;
                  <a href="#" target="_blank" style="color:#282f37;"><font color="#282f37">Проекты</font></a>
               </span></font>
            </td></tr>
            <tr><td align="right">
               <!--social -->
               <div style="width:208px;">
               <table border="0" cellspacing="0" cellpadding="0">
                  <tr><td width="43" align="left" style="line-height:36px;">
                     <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"  >
                     <font face="Arial, Helvetica, sans-serif" size="2" color="#596167">
                     <img src="img/soc1.png" width="36" height="36" alt="f" border="0" style="display: block;" /></font></a>
                  </td><td width="43" align="left" style="line-height:36px;">
                     <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;" >
                     <font face="Arial, Helvetica, sans-serif" size="2" color="#596167">
                     <img src="img/soc2.png" width="36" height="36" alt="t" border="0" style="display: block;" /></font></a>
                  </td><td width="43" align="left" style="line-height:36px;">
                     <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"  >
                     <font face="Arial, Helvetica, sans-serif" size="2" color="#596167">
                     <img src="img/soc3.png" width="36" height="36" alt="vk" border="0" style="display: block;" /></font></a>
                  </td><td width="43" align="left" style="line-height:36px;">
                     <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"  >
                     <font face="Arial, Helvetica, sans-serif" size="2" color="#596167">
                     <img src="img/soc4.png" width="36" height="36" alt="in" border="0" style="display: block;" /></font></a>
                  </td><td width="36" align="left" style="line-height:36px;">
                     <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"  >
                     <font face="Arial, Helvetica, sans-serif" size="2" color="#596167">
                     <img src="img/soc5.png" width="36" height="36" alt="s" border="0" style="display: block;" /></font></a>
                  </td></tr>
               </table>
               </div>
               <!--social END-->
            </td></tr>
         </table>
      </td></tr>
   </table>
   <!-- padding --><div style="height: 12px; line-height:12px; font-size:10px;">&nbsp;</div>
   </td></tr>
   <!--header END-->
   <!--content -->
   <tr><td align="center" bgcolor="#ffffff" style="border-top-width:1px;border-top-style:solid;border-top-color:#ffffff;">
      <!--sep -->
      <table width="600" border="0" cellspacing="0" cellpadding="0">
         <tr><td height="14" bgcolor="#f27071" style="height:14px;line-height:14px;font-size:10px;">&nbsp;</td></tr>
      </table>
      <!--sep END-->
      
      <table width="490" border="0" cellspacing="0" cellpadding="0">
         <tr><td align="left">
            <!-- padding --><div style="height: 45px; line-height:45px; font-size:40px;">&nbsp;</div>
            <!--hello -->
            <div style="line-height:24px;">
               <font face="Tahoma, Arial, Helvetica, sans-serif" size="3" color="#282f37" style="font-size:16px;">
               <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 16px; color:#282f37;">
                  <strong>Добрый день!</strong><br /><br />
                  Ваш экземпляр <strong>&laquo;Programmatic: теория с примерами&raquo;</strong> в PDF-формате доступен для скачивания.
               </span></font>
            </div>
            <!--hello END-->
            <!-- padding --><div style="height: 25px; line-height:25px; font-size:23px;">&nbsp;</div>
            
            <table width="490" border="0" cellspacing="0" cellpadding="0">
               <tr><td width="210" align="left" valign="top"><img src="img/ico1.png" width="180" height="180" alt="" border="0" style="display: block;" /></td>
               <td align="left" valign="middle" style="line-height:24px;">
                  <font face="Tahoma, Arial, Helvetica, sans-serif" size="3" color="#282f37" style="font-size:16px;">
                  <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 16px; color:#282f37;line-height:24px;">
                     Персональная для каждого пользователя коммуникация, программируемый маркетинг, процесс настройки кампании и другие трюки.
                  </span></font>
                  <!-- padding --><div style="height: 26px; line-height:26px; font-size:23px;">&nbsp;</div>
                  <!--Button Begin-->
                  <table border="0" cellspacing="0" cellpadding="0">
                     <tr><td align="center" width="217" height="39" bgcolor="#f27071" style="line-height: 39px;">
                        <a href="#" target="_blank" style="color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 16px;text-decoration:none;" >
                        <font face="Arial, Helvetica, sans-serif" size="3" color="#ffffff">
                        <img src="img/button.png" width="217" height="39" alt="Получить PDF" border="0" style="display: block;" /></font></a>
                     </td></tr>
                  </table>
                  <!--Button End-->
               </td></tr>
            </table>         
            <!-- padding --><div style="height: 50px; line-height:50px; font-size:45px;">&nbsp;</div>   
         </td></tr>
      </table>
      
      <!--sep -->
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
         <tr><td height="10" style="line-height:10px;font-size:8px;border-top-width:2px;border-top-style:solid;border-top-color:#282f37;">&nbsp;</td></tr>
      </table>
      <!--sep END-->
      <!-- padding --><div style="height: 30px; line-height:30px; font-size:28px;">&nbsp;</div>   

      <table width="490" border="0" cellspacing="0" cellpadding="0">
         <tr><td align="left" valign="middle" style="line-height:24px;">
            <font face="Tahoma, Arial, Helvetica, sans-serif" size="3" color="#282f37" style="font-size:16px;">
            <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 16px; color:#282f37;line-height:24px;">
               Спасибо за проявленный интерес к нашей компании!<br /><br />
               Хотите быть в курсе последних событий компании iAGE, получать от нас интересные материалы, статьи и презентации?<br />
               Подпишитесь на нашу рассылку! 
            </span></font>
            <!-- padding --><div style="height: 26px; line-height:26px; font-size:23px;">&nbsp;</div>
            <!--Button Begin-->
            <table border="0" cellspacing="0" cellpadding="0">
               <tr><td align="center" width="217" height="39" bgcolor="#f27071" style="line-height: 39px;">
                  <a href="#" target="_blank" style="color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 16px;text-decoration:none;" >
                  <font face="Arial, Helvetica, sans-serif" size="3" color="#ffffff">
                  <img src="img/button1.png" width="217" height="39" alt="Да, я с вами!" border="0" style="display: block;" /></font></a>
               </td></tr>
            </table>
            <!--Button End-->
         </td><td width="210" align="right" valign="top"><img src="img/ico2.jpg" width="180" height="180" alt="" border="0" style="display: block;" /></td></tr>
      </table>   
      <!-- padding --><div style="height: 30px; line-height:30px; font-size:28px;">&nbsp;</div>   

   </td></tr>
   <!--content END-->
   <!--footer -->
   <tr><td align="center" bgcolor="#282f37">
      <!-- padding --><div style="height: 30px; line-height:30px; font-size:28px;">&nbsp;</div>   
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
         <tr><td width="340" align="left" valign="top" style="line-height:15px;">
            <font face="Tahoma, Arial, Helvetica, sans-serif" size="2" color="#929ca8" style="font-size:13px;">
            <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; color:#929ca8;line-height:15px;">
               &copy; ООО &laquo;АйЭйдж&raquo; 2003 - 2014 All rights reserved.<br />
               <a href="http://www.iage.net" target="_blank" style="color:#929ca8;text-decoration:none;"><font color="#929ca8">www.iage.net</font></a><br /><br />
               127051, Москва, ул. Трубная, д. 21,<br />
               тел. +7(495) 649-4219 390037<br /><br />
               г. Рязань, ул. Советской армии, д. 19, корп.2, тел. +7(4912) 901-002
            </span></font>
         </td><td align="right" valign="top">
            <!--social -->
            <table border="0" cellspacing="0" cellpadding="0">
               <tr><td width="43" align="left" style="line-height:36px;">
                  <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"  >
                  <font face="Arial, Helvetica, sans-serif" size="2" color="#596167">
                  <img src="img/soc6.png" width="36" height="36" alt="f" border="0" style="display: block;" /></font></a>
               </td><td width="43" align="left" style="line-height:36px;">
                  <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"  >
                  <font face="Arial, Helvetica, sans-serif" size="2" color="#596167">
                  <img src="img/soc7.png" width="36" height="36" alt="t" border="0" style="display: block;" /></font></a>
               </td><td width="43" align="left" style="line-height:36px;">
                  <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"  >
                  <font face="Arial, Helvetica, sans-serif" size="2" color="#596167">
                  <img src="img/soc8.png" width="36" height="36" alt="vk" border="0" style="display: block;" /></font></a>
               </td><td width="43" align="left" style="line-height:36px;">
                  <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"  >
                  <font face="Arial, Helvetica, sans-serif" size="2" color="#596167">
                  <img src="img/soc9.png" width="36" height="36" alt="in" border="0" style="display: block;" /></font></a>
               </td><td width="36" align="left" style="line-height:36px;">
                  <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"  >
                  <font face="Arial, Helvetica, sans-serif" size="2" color="#596167">
                  <img src="img/soc10.png" width="36" height="36" alt="s" border="0" style="display: block;" /></font></a>
               </td></tr>
            </table>
            <!--social END-->
         </td></tr>
      </table>
      <!-- padding --><div style="height: 30px; line-height:30px; font-size:28px;">&nbsp;</div>   
   </td></tr>
   <!--footer END-->
</table>

</td></tr>
</table>
         
</body>
</html>

Array
(
    [0] => WP_Term Object
        (
            [term_id] => 1425
            [name] => Статьи
            [slug] => articles
            [term_group] => 0
            [term_taxonomy_id] => 1907
            [taxonomy] => category
            [description] => 
            [parent] => 0
            [count] => 688
            [filter] => raw
            [cat_ID] => 1425
            [category_count] => 688
            [category_description] => 
            [cat_name] => Статьи
            [category_nicename] => articles
            [category_parent] => 0
        )

)

Поделиться статьёй