inforedesign

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

1. файл
Скачиваем файл js-quicktags (клик правой клавишей и выбираем Save as…).
Закачиваем этот файл в папку с темой (у меня, например, если вы заметили, это wp-content/themes/default/).
Если ваш блог поддерживает переключение нескольких тем, то наверное надо положить файл во все папки тем. В общем, экспериментируйте…
Но далее мы будем говорить про установку плагина в одной теме.

2. Подключение
В файле темы header.php сразу после строчки подключения стилей подключаем этот java-скрипт:

<link rel="stylesheet" href="<?php bloginfo(’stylesheet_url’); ?>" type="text/css" media="screen" />
<script src="<?php bloginfo(’template_directory’); ?>/js_quicktags.js" type="text/javascript"></script>

Теперь в файле комментариев comments.php находим в коде textarea для текста комментария и перед и после нее вставляем следующее:

<script type="text/javascript">edToolbar();</script>
<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea>
<script type="text/javascript">var edCanvas = document.getElementById(’comment’);</script>


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

3. Настройка внешнего вида
Теперь открываем style.css и начинаем настраивать внешний вид.
Пишем следующее:


#ed_toolbar {background: #FFF;} /*это контейнер для панели. если оформление блога требует, то можно всячески настраивать и контейнер*/
#commentform input.ed_button {
display:block; /*на всякий случай*/
width:auto; /*убиваем ширину, заложенную выше, и-за чего у нас кнопки были шире, чем надо*/
float:left; /*прибиваем влево. теперь все кнопки должны стать в один ряд, и быть нормальной разной ширины*/
font-size:9px; border: 1px solid #FFF;background: #EAEAEA; margin-right:3px; /*непосредственно настройка внешнего вида кнопок*/
}

Можно прописать стили для каждой конкретной кнопки. Например:

#ed_bold {background: #F00; color:#FFF; font-style:italic}

сделает кнопку Bold белым курсивом на красном фоне, тогда как остальные кнопки будут «нормальными». ID-шники кнопок можно посмотреть в js-файле.

Единственная неприятность заключается в том, что js-console FireFox показывает, что возникает какая-то ошибка при работе скрипта. Но он работает, поэтому я с ней не разбирался.

Вот и все. Удачи и приятных форматированных комментариев вам!

english version
The panel of comments text extended formatting.

Step by step description of setup of the panel of comments text extended formatting.

Download js-quicktags file (by means of context menu point “Save as…” initiated by mouse right button click).
Save this file to the folder with theme (e.g. wp-content/themes/default/).

In the theme file “header.php” after stylesheet including line connect this java-script:

<link rel="stylesheet" href="<?php bloginfo(’stylesheet_url’); ?>" type="text/css" media="screen" />
<script src="<?php bloginfo(’template_directory’); ?>/js_quicktags.js" type="text/javascript"></script>

Now in the comment file “comments.php” in the code find “textarea” for comment text and paste following part before and after it:

<script type="text/javascript">edToolbar();</script>
<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea>
<script type="text/javascript">var edCanvas = document.getElementById(’comment’);</script>


Now open style.css and start setting the appearance.
Write following:

#ed_toolbar {background: #FFF;} /*this is panel container. If blog setting requires that, then the container can be set*/
#commentform input.ed_button {
display:block; /*just in case*/
width:auto; /*delete width parameters given above, which made the buttons wider then we needed*/
float:left; /*align left . now all buttons displayed in one row and have different width, */
font-size:9px; border: 1px solid #FFF;background: #EAEAEA; margin-right:3px; /*the appearance of the buttons themselves*/
}

It is possible to set styles for each button. For ex:
#ed_bold {background: #F00; color:#FFF; font-style:italic}
It will make button “Bold”look following : white italic letters on red background and all other buttons will stay as they are. IDs of the buttons can be viewed in js-file.

Enjoy nice comments!

Суббота, апрель 30, 2005 / trackback link