Шукаємо плагіни для WordPress

Вставка коду з допомогою SyntaxHighlighter

Comment Form Quicktags — розширення функціоналу коментарів

У цій статті я збираюся розповісти вам про чудовому 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 у спеціальні теги з квадратними дужками:

[рһр]тут Ваш фрагмент[/рһр]

або так:

[сode lang=”js”]тут Ваш фрагмент[/сode]

Інші варіанти тегів з асортименту плагіна ви можете подивитися в самому низу сторінки налаштувань. У цих тегів можуть використовуватися спеціальні параметри, значення яких так само наведені в «Параметри».

Які саме мови підтримує плагін 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 і для початку перейменувати його назву вкладки, наприклад, в «Вставка» (у полі «Напис (назва)»).

А ось в полях «Відкриваючий тег» і «Закриваючий тег» прописуєте, наприклад, [рһр] і [/рһр]. Тепер потрібно натиснути на кнопку «Редагувати/Додати», при необхідності перетягніть вкладку мишею на інше місце у формі коментаря і не забути натиснути на кнопку «Оновити» для остаточного збереження налаштувань.

Як написано на сторінці налаштувань, дане розширення підтримує наступні теги:

На їх основі можна створювати нові вкладки над полем для введення тексту коментарів WordPress. Приклад використання цього плагіна WP ви можете побачити у мене в коментарях.

Про Comment Toolbar і Qip Smiles читайте в цій статті.

Удачі вам! До зустрічей на сторінках блогу