Comment Toolbar добавляем в комментарии WordPress возможность ответа и цитирования
Comment Toolbar — добавляем в комментарии WordPress возможность ответа и цитирования
Как и обещал в статье про SyntaxHighlighter и Comment Form, сегодня продолжим разговор о повышении удобства работы с комментариями WordPress. Этого мы будем добиваться с помощью плагинов Comment Toolbar и Qip Smiles (надеюсь, что свой Gravatar вы не только создали, но и включили их отображение в настройках блога).
С помощью них мы сможем реализовать следующие возможности:
- одним кликом вставлять цитаты в форму для написания комментария
- одним кликом вставлять имя человека, оставившего сообщение в блоге, в форму для написания комментари
- оживить комменты смайликами (с помощью Qip Smiles)
Comment Toolbar — возможность ответа в комментариях
Думаю, что не надо вам доказывать необходимость иметь в комментариях возможность ответа на сообщение. В противном случае, вам вручную придется копировать имя автора сообщения и вставлять его в поле для написания.
Жуть, как неудобно, да и потом, другому пользователю не всегда просто найти именно то сообщение, на который вы отвечали. Намного проще иметь кнопку «Ответ», которая автоматически скопирует имя автора данного сообщения в поле для написания комментария.
Мало того, вместе с именем автора скопируется еще и уникальный адрес этого коммента, который ему присвоит движок Вордпресс. Т.е. в последствии будет достаточно щелкнуть по этому скопированному имени комментатора и вы сразу же переместитесь к тому сообщению, на который и был дан этот ответ.
Очень удобно, на мой взгляд. Но кроме этого Comment Toolbar умеет еще вставлять цитаты. Для этого достаточно выделить фрагмент текста в любом месте открытой страницы WP блога, а затем нажать кнопку «Цитировать» в любом из уже существующих комментариев.
Скачать плагин Comment Toolbar можно тут. Отдельно русификатор скачивать не нужно, т.к. в нем, по умолчанию, уже присутствует русская локализация.
- распакуйте архив comment-toolbar.zip , используя ftp-менеджер подключитесь к вашему сайту и загрузите папку comment-toolbar в каталог с плагинами wp-content/plugins/ на сервере
- войдите в админку блога и выберете из левого меню вкладку «Плагины»- «Inactive»
- найдите строку с плагином и активируйте его
Если при установке плагина у вас возникли какие-либо затруднения, то можете обратиться к материалам приведенной статьи.
В админке Вордпресс выбираем из левого меню «Плагины» -> Comment Toolbar. Обратите внимание, что настройки этого плагина находятся именно в разделе «Плагины», а не «Параметры».
Как видите, на странице настроек все надписи переведены на русский и, думаю, что сложностей возникнуть не должно.
Но, тем не менее, я внесу некоторые пояснения. Первые два поля позволяют задать названия для кнопок ответа и цитирования. В поле «Текст для сообщения о цитировании» вы вводите текст, который будет выводиться после имени комментатора, чей текст вы цитируете, добавляя коммент.
В поле «Символ, разделяющий кнопки или ссылки» вы задаете разделитель для кнопок (показан на предыдущем рисунке). В следующем поле можно задать выделение жирным имени комментатора, которому вы отвечаете или кого цитируете.
Если поставите «Да» в поле «Add a link to his commentary on the name of the commentator», то получите как раз ту возможность, что я описал чуть выше — имя комментатора в вашем сообщении станет ссылкой на тот комментарий, который вы цитировали или на который отвечали.
В поле «Стиль тулбара» вы можете выбрать вид отображения кнопок ответа, цитаты и навигации (в виде кнопок, ссылок или в виде картинок). В следующих двух полях предлагается выбрать положение области с кнопками.
А в последних двух полях вы можете отключить показ кнопок навигации (переход к следующему, предыдущему, последнему и первому комментариям), а так же задать плавную прокрутку при перемещении по комментариям (красиво получается).
Доработка перевода плагина Comment Toolbar для WordPress
Comment Toolbar переведен не совсем полностью. Если вы подведете мышь к кнопкам навигации по комментариям, то увидите всплывающую надпись на английском (Last comment, Next comment и т.д.). Кроме того, у кнопки «Цитата» надписи не будет вовсе, а желательно было бы пояснить пользователям назначение этой кнопки.
Как вы, наверное, знаете, всплывающий текст ссылки задается с помощью атрибута TITLE тега A. Чтобы исправить описанные выше недостатки нужно получить доступ с файла сайта по FTP и открыть на редактирование файл wp-content/plugins/comment-toolbar/cf_comment_toolbar.php .
Найдите с помощью встроенного поиска редактора Notepad ++ следующий код в этом файле:
и замените ее на такую строку:
Текст всплывающей надписи вы можете откорректировать по своему усмотрению. Для перевода английских надписей у кнопок навигации по комментариям, в этом же файле, с помощью встроенного поиска блокнота Notepad, найдите, где встречаются эти английские фразы (Last comment, Next comment и т.д.) и замените их на русские.
Подсветка кода и кнопки форматирования комментариев в WordPress — SyntaxHighlighter и Comment Form
В этой статье я собираюсь рассказать вам о замечательном WP плагине SyntaxHighlighter Evolved, который позволяет удобно, красиво и наглядно реализовать вставку и подсветку кода в текст статьи, а так же мы рассмотрим вопрос повышения функциональности системы комментирования блога на Вордпресс, кроме включения отображения граватаров комментаторов.
При этом будут рассмотрены такие плагины, как Comment Form Quicktags, в этой статье, а так же Comment Toolbar и Qip Smiles в следующей статье этой серии.
Эти плагины позволят нам расширить стандартные возможности комментариев и добавить в них следующие возможности:
- одним кликом вставлять цитаты в форму для их написания
- одним кликом вставлять имя человека, оставившего комментарий для того, чтобы ответить на его вопрос или задать ему свой
- перемещаться по комментам последовательно или сразу же переходить к первому, либо к последнему из них
- посетители вашего WP блога смогут использовать выделение жирным, курсивом и т.п.
- удобно вставлять ссылки в комменты
- вставлять в них код без потерь и в точно таком же виде как и в статьях, т.е. с использованием оформления и подсветки
- оживлять их смайликами
Вставка кода в WordPress с помощью SyntaxHighlighter Evolved
Вы можете посетить сайт автора данного плагина или же скачать его сразу на официальном ресурсе, где все проверяется на вирусы и прочую мутность.
Плагин устанавливается в Вордпресс стандартным способом, а именно:
- распакуйте архив с плагином, используя ftp-менеджер подключитесь к вашему хосту и загрузите папку syntaxhighlighter в папку с WP плагинами wp-content/plugins/ на сервере вашего хостинга
- войдите в админку WordPress и выберете из левого меню вкладку «Плагины», а на ней «Inactive»
- найдите строку с SyntaxHighlighter Evolved и активируйте его
Если при установке возникли какие-либо затруднения, то можете обратиться к материалам статьи про решение возможных проблем при установке плагинов.
Ну вот, WP плагин установлен, теперь можно зайти в админку блога и ознакомиться с его настройками. Для этого выбираем из левого меню «Параметры» -> «SyntaxHighlighter» (если не русифицировали плагин) или «Подсветка синтаксиса» (если русифицировали).
В принципе, даже если ничего не менять в этих настройках, он прекрасно работает, нужно только выделить фрагмент, который требуется подсветить в комментариях или статье Вордпресс, например так:
Но с помощью этой страницы настроек можно много чего поменять и переделать под себя. В поле «Цвета» можно выбрать одну из семи цветовых палитр, которую будет в итоге использовать SyntaxHighlighter для подсветки синтаксиса языков программирования и разметки.
В поле «Разное» можно настроить:
- «Показывать номера строк» — ставьте галочку, если хотите, чтобы слева от строк подсвеченного кода показывалась их нумерация
- «Показывать панель инструментов» — ставьте галочку, если хотите, чтобы при наведении на окно кодом, появлялась панелька с тремя кнопками, позволяющими, во-первых, скопировать чистый фрагмент из всплывающего окна, во-вторых, скопировать его в буфер обмена и, в-третьих, вывести его на печать
- «Автоматически делать URL «кликабельными»» — при установленной галочке можно будет перейти по всем ссылкам, включенным в область с кодом, просто щелкнув по ним мышью. Это будет работать и в комментариях, и в статьях.
- «Сворачивать окно» — при установленной галочке в окне подсвечиваемого кода будет показана только его часть, а для просмотра полного варианта нужно будет щелкнуть по специальной ссылке. Можно активировать эту опцию, если вы планируете вставлять в статьи своего блога большие фрагменты
- “Использовать легкий режим — лучший выбор для однострочного фрагмента — при установленной здесь галочке не будут отображаться номера строк и всплывающая панелька с тремя кнопками.
- «Wrap long lines (disabling this will make a scrollbar show instead)» — если галочка установлена, то длинная строка будет переноситься на следующую строку с показом иконки переноса. В противном случае, в окне с подсветкой кода появится горизонтальная прокрутка
В поле «Номер начальной строки» можно назначить номер первой строки по умолчанию, а в поле «Размер табуляции», соответственно, размер знака табуляции в окне с подсветкой кода. Не забудьте сохранить проведенные изменения настроек плагина SyntaxHighlighter, нажав на кнопку «Сохранить изменения».
Что примечательно, все внесенные изменения после нажатия сохранения тут же отобразятся в админке (в окне под названием «Предпросмотр»). Как вы, наверное, уже поняли из приведенного выше примера использования данного расширения, его применение весьма простое.
Нужно всего лишь заключить код в статье или комментариях WP в специальные теги с квадратными скобками:
Другие варианты тегов из ассортимента плагина вы можете посмотреть в самом низу страницы настроек. У этих тегов могут использоваться специальные параметры, значения которых так же приведены в области «Параметры».
Какие именно языки поддерживает плагин SyntaxHighlighter вы можете увидеть на странице плагина.
Comment Form Quicktags — расширение функционала комментариев в WordPress
Данный WP плагин позволяет добавить кнопки для оформления текста комментария такие как: выделение жирным, курсивом или зачеркиванием, добавление ссылки, выделение кода, вставка цитаты и т.п. Он достаточно легок и прост в настройках. Скачать Comment Form Quicktags можно отсюда.
- распакуйте архив с плагином для Вордпресс comment-form-quicktags.1.2.1.zip , используя ftp клиент подключитесь к вашему сайту и загрузите папку comment-form-quicktags в папку с плагинами для WordPress wp-content/plugins/
- войдите в админку wordpress и выберете вкладку «Плагины»- «Inactive»
- найдите строку с Comment Form Quicktags и активируйте его
Теперь заходим в админку и выбираем из левого меню «Параметры» -> Comment Form Quicktags. На этой странице вы можете настроить, какие именно возможности форматирования текста комментариев будут доступны посетителям вашего блога.
На странице настроек приведено очень доступное описание алгоритма работы с мастером настройки:
- Выберите тэг (вкладку, например, «Вставка кода», как на приведенной выше картинке), чтобы его отредактировать или введите ID (в соответствующее поле «ID»), если хотите добавить новый тег
- Отредактируйте другие поля (в поле «Надпись (название)» вводите желаемое название вкладки)
- Нажмите кнопку «Правка/Добавить»
- Задайте порядок кнопок с тэгами в форме добавления комментария простым их перетаскиванием прямо в окне настройки (очень удобная возможность)
- Нажмите кнопку «Обновить», чтобы сохранить проведенные настройки
Теперь давайте настроим подсветку кода в комментариях WordPress средствами плагина SyntaxHighlighter Evolved. Для этого нужно будет внести изменение в настройку тега (вкладки) «Code».
Щелкаете по вкладке «Code» на странице настроек Comment Form и для начала переименовываете название вкладки, например, в «Вставка» (в поле «Надпись (название)»).
А вот в полях «Открывающий тэг» и «Закрывающий тэг» прописываете, например, [рhp] и [/рhp]. Теперь нужно нажать на кнопку «Правка/Добавить», при необходимости перетащить вкладку мышью на другое место в форме комментария и не забыть нажать на кнопку «Обновить» для окончательного сохранения настроек.
Как написано на странице настроек, данное расширение поддерживает следующие тэги:
На их основе можно создавать новые вкладки над полем для ввода текста комментариев в WordPress. Пример использования этого WP плагина вы можете увидеть у меня в комментариях.
Про Comment Toolbar и Qip Smiles читайте в этой статье.
Comment Toolbar добавляем в комментарии WordPress возможность ответа и цитирования
Здравствуйте уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня в эфире очередной, третий по счету, выпуск Веб-обзоров. В этот раз разговор пойдет про то, где можно найти подходящий фоновый рисунок для своего сайта, а так же протестировать скорость загрузки своего сайта, про новые возможности переводчика Google и сервис, предоставляющий всю информацию о вашем или чужом блоге. Да, еще поделюсь с вами, найденными мною очень красивыми сырными RSS иконками. Приступим.
Где можно найти фон для своего сайта?
Есть много способов найти подходящий фоновый рисунок для своего сайта, блога или форума. Можно набрать соответствующий запрос в Яндексе или в Google и посмотреть, какие фоны предлагают скачать найденные таким образом сайты. Но это очень долгий способ, т.к. вам придется перелопатить большое количество изображений, зачастую вообще не соотвествующих вашему представлению о красивом фоне. Можно пойти другим путем и нарисовать нужный фон в Фотошопе, но опять же не все это умеют.
Мне больше пришлась по душе идея создания нужного вам фона прямо на сайте, с помощью простых инструментов, освоить которые ни у кого не составит труда. Это своеобразные конструкторы фонов для сайта, понятные и доступные практически всем. В своей практике я использую два подобных сайта — ava7patterns и Bgpatterns. Если кто-то знает еще подобные сайты, то буду очень благодарен, если вы напишите об этом в комментариях.
Расскажу про работу по настройке нужного фона на примере сайта Bgpatterns. Когда вы попадаете на главную страницу сайта, то видите две области — верхнюю и нижнюю. В нижней области вы можете посмотреть варианты фона, которые создали другие посетители данного сайта и посчитав их удачными, сохранили для общего обозрения и использования. Верхняя же область сайта, как раз и представляет собой конструктор фонов. Слева расположено окно для тонкой настройки цветовой гаммы, рисунка, текстуры и угла поворота рисунка.
Плагины Comment Toolbar и Qip Smiles — добавляем в комментарии WordPress возможность ответа, цитирования, навигации и вставки смайлов
Как и обещал в статье Плагины SyntaxHighlighter Evolved и Comment Form Quicktags — добавляем подсветку синтаксиса кода в статьи и комментарии WordPress , здесь речь пойдет о повышении удобства работы с комментариями WordPress. Этого мы будем добиваться с помощью плагинов Comment Toolbar и Qip Smiles. Плагин @ Reply в этой статье я решил не рассмотривать, т.к. его функционал (добавление возможности ответа на комментарий) полностью перекрывается плагином Comment Toolbar. С помощью всех этих плагинов мы сможем реализовать следующие возможности:
- одним кликом вставлять цитаты из других комментариев или даже самой статьи в форму для написания комментария (плагин Comment Toolbar)
- одним кликом вставлять имя человека, оставившего комментарий, в форму для написания комментария, для того чтобы ответить на его вопрос или задать ему свой (плагин Comment Toolbar)
- перемещаться по комментариям последовательно или сразу же переходить к первому, либо к последнему комментарию (плагин Comment Toolbar)
- оживить комментарии смайликами (плагин Qip Smiles)
Плагин Comment Toolbar — возможность ответа в комментариях WordPress, вставка цитаты из комментария или статьи, перемещение между комментариями
Думаю, что не надо вам доказывать необходимость иметь в комментарии возможность ответа на него. В противном случае, вам вручную придется копировать имя автора комментария и вставлять его в поле для написания комментария. Жуть как неудобно, да и потом, другому пользователю, читающему эти комментарии, не всегда просто найти именно тот комментарий этого автора, на который вы отвечали (особенно если этот автор оставил много комментариев на данную статью). Намного проще иметь кнопку «Ответ» в каждом комментарии, которая автоматически скопирует имя автора данного комментария в поле для написания комментария.
Плагины SyntaxHighlighter Evolved и Comment Form Quicktags — добавляем подсветку синтаксиса кода в статьи и комментарии WordPress
В этой статье из рубрики Плагины для WordPress я собираюсь рассказать вам о замечательном плагине SyntaxHighlighter Evolved, который позволяет удобно, красиво и наглядно реализовать вставку и подсветку синтаксиса разнообразного кода в текст статьи или комментарии, а так же мы рассмотрим вопрос повышения функциональности системы комментирования блога на WordPress. При этом будут рассмотрены таки плагины как Comment Form Quicktags в этой статье, а так же плагины @ Reply, Comment Toolbar и Qip Smiles в следующей статье этой серии. Эти плагины позволят нам расширить стандартные возможности комментариев и добавить в них следующие возможности:
- одним кликом вставлять цитаты из других комментариев в форму для написания комментария
- одним кликом вставлять имя человека, оставившего комментарий, в форму для написания комментария, для того чтобы ответить на его вопрос или задать ему свой
- перемещаться по комментариям последовательно или сразу же переходить к первому, либо к последнему комментарию
- посетители блога смогут использовать выделение жирным, курсивом и т.п. в тексте комментария
- удобно вставлять ссылки
- вставлять код в комментарии без потерь и в точно таком же виде как и в статьях, т.е. с использованием оформления и подсветки кода при помощи плагина SyntaxHighlighter Evolved
- оживлять комментарии смайликами
Плагин для подсветки синтаксиса кода в WordPress — SyntaxHighlighter Evolved
Как я уже говорил, замечательный плагин. Вы можете посетить сайт автора плагина SyntaxHighlighter Evolved или же скачать его сразу на официальном сайте плагинов WordPress. Для этого плагина существует русификация, которую вы можете скачать по этой ссылке — русификация SyntaxHighlighter Evolved. Правда, это русификация для версии 2.2.1, но она у меня прекрасно работала на версии SyntaxHighlighter Evolved 2.3.3.
HTML для начинающих: создание списков (теги UL, OL и LI), теги акцентирования (H1 -H6, STRONG, EM), теги абзаца P и перевода строки BR
Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. В эфире очередная статья из рубрики HTML, CSS, PHP, MySql – изучение и применение на практике, в которой мы продолжим разговор о тегах HTML. В двух предыдущих статьях, посвященных теме HTML тегов (HTML для начинающих: типы верстки, теги, атрибуты, параметры атрибутов, определение цвета на экране и HTML для начинающих: тег IMG для работы с изображениями, тег «A» для создания ссылок) были рассмотрены основы работы с тегами, их синтаксис и составные части. Во второй статье мы подробно рассмотрели все аспекты работы с тегом IMG, позволяющим вставлять изображение в HTML код, а так же тегом «A», с помощью которого создаются ссылки. В этих двух статьях были освещены следующие вопросы:
Сегодня мы рассмотрим новые теги и их атрибуты, которые вы так же часто будете использовать в своей работе над сайтом. Это теги, позволяющие создавать нумерованные, ненумерованные и встроенные списки (UL, OL, LI), а так же, так называемые, теги акцентирования (H1 -H6, STRONG, EM) и теги выделения абзаца (тег P) и перевода строки (тег BR). Без знания этих тегов очень трудно будет продуктивно работать над дизайном сайта. Эти теги активно используются как при написании и оформлении статей, так и в оформлении шаблона, используемого на сайте. Особое внимание надо уделить тегам акцентирования, т.к. заключенный в них текст имеет для поисковых систем гораздо большее значение, чем остальной текст статьи (Внутренняя оптимизация сайта).
Кнопки «Ответить» и «Цитировать» в комментариях
Приветствую! Как и обещал в прошлый раз сегодня речь пойдет про кнопки «Ответить» и «Цитировать» в конце каждого комментария. Если помните, то недавно я писал про древовидные комментарии. К такому повороту событий я не был готов и получилось так, что сам себе подложил свинью 😀
К счастью, вовремя отредактированный robots.txt исправил ситуацию. Только вчера из индекса Google была удалена последняя страница дублированного контента. В итоге я получил небольшую встряску, которая продолжалась четыре дня.
Древовидную структуру отменил, но дабы не нарушать функциональности комментирования установил плагин Comment Toolbar. Он выводит кнопки «Ответить» и «Цитировать» под каждым комментарием.
Установка достаточно проста и не требует особых знаний. После активации плагина в консоли появится соответствующий раздел Comment Toolbar, в котором есть возможность настроить вывод кнопок цитирования и ответа. Плагин русифицирован, правда не полностью, а частично.
Вообще же хочу сказать, что вебмастер просто обязан знать английский язык, чтобы легко ориентироваться в исходном коде и не только.
Без знаний в наше время — никуда, а кому не под силу освоить язык хотя бы на начальном уровне — пользуйтесь переводчиками. Поэтому не стоит бояться, если плагин не имеет русского языка.
В погоне за русифицированными версиями, которые собирают энтузиасты, можно схватить неприятности, в виде открытых внешних ссылок, вредоносного кода в шаблоне или еще чего похуже. Поэтому скачивайте плагины только с официального репозитория WordPress.
Итак, при переходе в настройки плагина видим следующее:
Обратите внимание на скриншот — в настройках плагина я выбрал в пункте Выравнивание тулбара: по CSS-настройкам, а для кнопок «Ответить» и «Цитировать» задал стиль CSS:
Теперь пару строк о валидности кода плагина, а точнее о противоположном. Исходный код вызывает ошибки… и мне, как любителю «правильного» кода, эта ситуация крайне не нравится. Ну что же, на все найдется решение, если очень захотеть 🙂
Чтобы избежать ошибок валидации нужно в файле cf_comment_toolbar.php в папке установленного плагина найти строчку
и заменить ее на
Т.е. простая замена тега span на div решает проблему. Очень жаль, что разработчики плагинов не заботятся о валидации, в итоге все приходится допиливать вручную.
Добавление кнопки «ответить» без использования плагина
По многочисленным просьбам дополняю статью и привожу пример кнопки ответа на комментарий без плагина. По состоянию на начало 2015 года на блоге я использую именно это простое и наряду с этим эффективное решение, благодаря которому исключается появление дублей replytocom из-за древовидных комментариев.
В файл functions.php необходимо добавить код:
Затем создайте файл скрипта, например, назовите его reply.js и вставьте в него следующее содержимое:
После чего подключите его в заголовке либо в подвале сайта. Дело за малым — настроить внешний вид кнопки с помощью CSS для класса replys . Это может быть полноценная кнопка с фоном и границами или в виде обычной ссылки, как у меня:
При нажатии на кнопку страница прокрутится к форме ответа на комментарий, а в текстовое поле textarea добавится имя пользователя к которому обращаетесь. После имени я сделал добавление запятой и пробела, что соответствует правилам пунктуации в русском языке при обращении.
Ну вот и подошел к концу очередной пост, скоро будет следующий. Подписывайтесь, если не хотите пропустить!
Урок 27 Плагин WP Comment Quicktags Plus: расширяем функциональность комментариев в WordPress
19 апреля 2010 –> |