Урок номер 11
Дополнение 2 - добавляем дополнительные поля в новости

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

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

Заходим в админцентр http://site.ru/admin.php, в самом верху в меню выбираем "Другие разделы"далее ищем секцию "Настройки скрипта" и там выбираем "Дополнительные поля новостей". Там жмем добавить поле, и добавляем поле с такими параметрами:

Название поля - source
Описание поля - Источник информации
Категория - Все
Тип поля - одна строка
Значение по умолчанию - !ничего там не пишем!

И чуть ниже ставим галочку напротив "Использовать при желании (можно оставить поле пуcтым)". Готово.

Файлы которые подлежат изменению - addnews.tpl, fullstory.tpl, shortstory.tpl (для понимания кода файлов смотрим уроки 2 и 6)

В файл addnews.tpl код добавляется автоматом, поле будет выведено в самом низу, за вывод поля отвечает тег {xfields}, вот часть кода из этого файла (по сути таблица в которой находится сам редактор и опции)

Код 1:

<table width="100%" class="slink">
<tr>
<td nowrap="nowrap" width="130">Введите заголовок:</td>
<td width="100%"><input type="text" name="title" value="{title}" maxlength="150" style="width:223px; height:18px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
</tr>
[urltag]
<tr>
<td nowrap="nowrap" >URL статьи:</td>
<td><input type="text" name="alt_name" value="{alt-name}" maxlength="150" style="width:223px; height:18px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
</tr>
[/urltag]
<tr>
<td>Категория:</td>
<td>{category}</td>
</tr>
[not-wysywyg]<tr>
<td>Коды:</td>
<td>{bbcode}</td>
</tr>[/not-wysywyg]
<tr>
<td>Краткое содержание:</td>
<td>[not-wysywyg]<textarea name="short_story" id="short_story" onclick=setFieldName(this.name) style="width:499px; height:160px; font-family:verdana; font-size:11px; border:1px solid #E0E0E0 ">{short-story}</textarea>[/not-wysywyg]{shortarea}</td>
</tr>
<tr>
<td>Полная новость:<br>(необязательно)</td>
<td>[not-wysywyg]<textarea name="full_story" id="full_story" onclick=setFieldName(this.name) style="width:499px; height:200px; font-family:verdana; font-size:11px; border:1px solid #E0E0E0 ">{full-story}</textarea>[/not-wysywyg]{fullarea}</td>
</tr>
{xfields}
<tr>
<td> </td>
<td>{admintag}</td>
</tr>
<tr>
<td> </td>
<td><input class="bbcodes" type="submit" name="add" value="отправить">  
<input class="bbcodes" type="button" name="nview" onClick="preview()" value="просмотр"><br /><br /></td>
</tr>
</table>

Поле по умочанию добавляется в самый низ, но вы можете тег {xfields} перенести в любое место вашей таблицы - где он будет стоять там и будет выведено поле. Например вы можете поставить тег после поля "URL статьи:" или перед. Я оставил внизу поскольку меня такое расположение устраивает вполне.

Скриншот:

Так, с этим разобрались, теперь нам необходимо сделать так что бы если поле заполнено оно отображалось пользователям в краткой и полной новости (fullstory.tpl, shortstory.tpl).

Для того что бы добавить вывод значения этого поля в новость существуют теги (описание из хелпа к движку)

[xfgiven_x] [xfvalue_x] [/xfgiven_x] -Выводится дополнительное поле "x", если поле не пустое

[xfvalue_x] - Значение дополнительного поля "x", где "x" название дополнительного поля

название нашего поля source, заменяем X на source в итоге получим такой код:

Код 2:

[xfgiven_source] [xfvalue_source] [/xfgiven_source]

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

Вот готовый код:

shortstory.tpl

Код 3:

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="12" height="34" valign="top"><div align="left"><img src="{THEME}/pics/newsl.gif" width="11" height="8" /></div></td>
<td width="24" class="newsbg" valign="top"><img src="{THEME}/pics/news.png" width="24" height="24" alt="" border="0"/></td>
<td width="100%" class="newsbgt" valign="top">{title}</td>
<td width="13" valign="top"><div align="right"><img src="{THEME}/pics/newsr.gif" width="12" height="8" /></div></td>
</tr>
<tr>
<td height="34" colspan="4"><table width="100%" border="0" align="center">
<tr>
<td width="50%"><div align="left">{rating}</div><div class="news">
<font color="red"><b>Источник: </font><font color="blue">[xfgiven_source][xfvalue_source][/xfgiven_source]</b></font></div></td>
<td width="50%" class="category"><div align="right"><span class="news">Категория - [{approve}{link-category}]</span></div></td>
</tr>
</table></td>
</tr>
</table>
<br />
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" class="news" valign="top">{short-story}<br></td>
</tr>
<tr>
<td colspan="3" class="newsf" align="right">[edit]<img src="{THEME}/pics/edit.gif" title = "Редактировать новость" border="0">[/edit] {favorites} Просмотров: {views} автор: <b>{author}</b> {date} [com-link]Комментарии ({comments-num})[/com-link] [full-link]Подробнее[/full-link]
</td>
</tr>
<tr>
<td width="12" height="13" valign="top"><img src="{THEME}/pics/newsfl.gif" width="12" height="8" /></td>
<td width="100%" class="newsfbg">&nbsp;</td>
<td width="11" valign="top"><img src="{THEME}/pics/newsfr.gif" width="11" height="8" /></td>
</tr>
</table>

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

fullstory.tpl

Код 4:

{poll}
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="12" valign="top"><div align="left"><img src="{THEME}/pics/newsl.gif" width="11" height="8" /></div></td>
<td width="24" class="newsbg" valign="top"><img src="{THEME}/pics/news.png" width="24" height="24" alt="" border="0"/></td>
<td width="100%" class="newsbgt" valign="top">{title}</td>
<td width="13" valign="top"><div align="right"><img src="{THEME}/pics/newsr.gif" width="12" height="8" /></div></td>
</tr>
<tr>
<td colspan="4">
<table width="100%" border="0" align="center">
<tr>
<td width="50%" class="news"><br><div align="left">{rating}</div><br<br><div class="news">
<font color="red"><b>Источник: </font><font color="blue">[xfgiven_source][xfvalue_source][/xfgiven_source]</b></font></div></td>
<td width="50%" class="category"><br><div align="right">{link-category}</div></td>
</tr>
</table></td>
</tr>
</table>
<br />
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" valign="top" class="news">{full-story}<br></td>
</tr>
<tr>
<td colspan="3" valign="top" class="news"><center>{pages}<center><br></td>
</tr>
<tr>
<td colspan="3" valign="top" class="news"><span class="copy">[group=5]</span>
<div style="background-color: lightyellow; border-width:1; border-color:rgb(190,190,190); border-style:dotted; padding:5px;">Уважаемый посетитель вы вошли на сайт как незарегистрированный пользователь. Мы рекомендуем вам зарегистрироваться либо войти на сайт под своим именем.</div>[/group]<br/>Другие новости по теме:<br/><br/>{related-news}<br/><br/>
<span class="slink">Просмотрено: {views} раз</span><br></td>
</tr>
<tr>
<td colspan="3" class="newsf" align="right">[edit]<img src="{THEME}/pics/edit.gif" title = "Редактировать новость" border="0">[/edit] {favorites} [print-link]<img src="{THEME}/pics/print.gif" alt="Напечатать новость" border=0 width="16" height="16">[/print-link] Просмотров: {views} автор: <b>{author}</b> {date} [com-link]Комментарии ({comments-num})[/com-link]</td>
</tr>
<tr>
<td width="12" valign="top"><img src="{THEME}/pics/newsfl.gif" width="12" height="8" /></td>
<td width="100%" class="newsfbg">&nbsp;</td>
<td width="11" valign="top"><img src="{THEME}/pics/newsfr.gif" width="11" height="8" /></td>
</tr>
</table> <br>

Все вывод полей добавлен. Одно НО. Поле выводится если оно заполнено, а вот надпись Источник - будет видна всегда, поскольку она вставлена в шаблон. Этого можно избежать следующим образом (за подсказку спасибо пользователю офф.форума Akela):

<div class="news">
[xfgiven_source]<font color="red"><b>Источник:</font><font color="blue">[xfvalue_source]</font></b></font>[/xfgiven_source]</div>

Как мы видим код такой же, но слово источник помещено внутрь тега [xfgiven_source][/xfgiven_source], в таком случае если поле не будет заполнено то ни надпись Источник ни данные из поля выведены не будут, елси же поле заполнено то вы видите то, что показано на скриншотах ниже.

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

Скриншоты:

shortstory.tpl

fullstory.tpl

Теперь попробуем вставить графическую кнопку.

Рекомендация от разработчика CMS:

!При использовании картинки в дополнительном поле НАСТОЯТЕЛЬНО рекомендуется включить в админпанели, в настройках безопасности, режим безопасных полей. В противном случае возможен выход за пределы ссылки и проведение XSS атаки!

Код будет выглядеть вот так:

Код 5:

[xfgiven_source]<a href="[xfvalue_source]"><img src="{THEME}/pics/sbutt.png" border="0"></a>[/xfgiven_source]

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

Этот код необходимо добавить в шаблоны краткой и полной новости.

Допустим если вы в дополнительном поле в качестве источника укажете http://monsterteam.ws, то этот код будет выполняться вот так:

[xfgiven_source]<a href="http://monsterteam.ws"><img src="{THEME}/pics/sbutt.png" border="0"></a>[/xfgiven_source]

Если поле заполнено то будет отображена кнопка-ссылка, сама ссылка, адрес, это значение которое будет введено в дополнительное поле при добавлении новости, если нет - то кнопка выведена не будет.

Скриншот:

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

PS - добавлять вы можете любое количество полей включая многострочные поля.

© 2007 Egiptyanin