Kama Quicktags: код на сторінках вашого сайту
Перша проблема, з якою я зіткнувся, коли робив цей сайт, це вставка PHP, CSS, HTML або іншого коду в текст посту і звичайно його підсвічування. Незважаючи на те, що я знайомий з WordPress вже більше півроку, коди в пости вставляти не доводилося.
Вставка коду не вимагає особливих зусиль – необхідно всього-на-всього, замінити HTML сутності на спецсимволи (наприклад: це < на < або & на & ), це легко можна зробити за допомогою відомого нам notepad++ , проте постійно перетворювати код дуже незручно, мені хотілося, щоб таке перетворення можна було робити у редакторі WordPress.
Щоб не винаходити велосипеда, я трохи погуглив і знайшов пару претендентів, але як виявилося вони змінюють символи на спецсимволи при перегляді сторінки, тобто. при генерації сторінки знаходять теги <code> </code> або <pre> </pre> і все, що всередині перетворюють. Такий підхід мені відразу не сподобався через зайве навантаження на сервер і тому, що в редакторі я не міг перемикатися у візуальний редактор без пошкодження коду.
Освічені люди скажуть, WordPress сам робить таку заміну, якщо вставити код у візуальний редактор і перейти до НTML редактора або просто зберегти сторінку з візуального редактора і вони мають рацію, але разом із перетворенням WordPress видалить усі зайві прогалини та таби, які необхідні для наочності коду Щоб повністю зберегти структуру коду його потрібно укласти в теги <pre> </pre> , але укласти текст у певні теги, можна тільки з HTML редактора, а якщо вставити код у HTML редактор, то WordPress ніяких перетворень над символами в коді робити не буде, а гірше – він виріже різні теги при переході у візуальний редактор. Ось як все складно. Якщо ви пробували вставляти код, то, напевно, знаєте про що я.
Загалом, єдино правильно було замінити всі HTML символи на спецсимволи в блокноті, вставити код в HTML редактор WordPress і укласти цей код в теги <pre> </pre> .
Також мені не вистачало кнопок для швидкої вставки тегів у HTML редакторі, як мінімум, потрібна була кнопка, для вставки <pre> </pre> .
Quicktags API
WordPress Quicktags API – з версії 3.3. WP дозволяє вставляти кнопки через API – це просто. На цьому способі і заснований мій простенький плагін.
Завантажити плагін
Встановлення:
Завантажте папку з архіву (kama-quicktags) у каталог плагінів (wp-content/plugins);
- Активуйте плагін.
Після активації плагіна у вас у HTML редакторі з’являться різні кнопки, щоб прибрати або додати свої, відкрийте файл kamaquicktags.php і за описом усередині файлу додайте свої:
QTags.addButton( 'ідентифікатор' , 'назва', '<відкриває тег>', '</закриває тег>', 'v', 'опис', позиція(число) );
Наприклад, щоб додати кнопку H3, потрібно вставити такий код:
QTags.addButton('h3','H3','<h3>','</h3>', 'p', '', 999);
Нагадаю, файл плагіна можна відредагувати прямо з адмін-панелі: Плагіни -> Редактор
А як ви вставляєте код у ваші блоги?