Метод вставки html-коду трохи відрізняється в залежності від того, куди саме вам його потрібно вставити. Відповідно до цього, розглянемо різні варіанти.
Щоб вставити html-код на сайт, а зокрема текст статті на одній зі сторінок сайту, зайдіть в адміністративну панель, виберіть і відкрийте для редагування потрібну статтю. Далі режим візуального редактора необхідно змінити режим редагування. Під час роботи з CMS-системою для зміни режиму просто натисніть . Потім скопіюйте та вставте у заплановане місце html-код.
Часто після вставки хочеться трохи відформатувати код, наприклад задати обтікання коду текстом з іншого боку. Існує простий спосіб, що використовує CSS-властивості.
Використовуючи тег
Щоб при збереженні статті візуальний редактор не вирізав зміни, що не є, на його думку, html-кодом, при вставці коду краще відключити. Вирізання редактором змін створено для запобігання загрозі можливих шкідливих кодів.
Як вимкнути візуальний редактор?
В адміністративній панелі клацніть "Сайт" - "Загальні налаштування" - "Сайт" і в рядку "Візуальний редактор" виберіть "No Editor". Тепер редагування та вставку HTML-коду можливо буде зробити в режимі HTML-коду. Після вставлення коду та збереження змін візуальний редактор можна знову ввімкнути.
Якщо ви захочете повторно відредагувати статтю, html-код необхідно також вставити повторно. Іноді потрібно, щоб html-код відображався на кожній сторінці сайту. Вставка html-коду таким чином, щоб він відображався на кожній сторінці сайту.
Для вирішення цього завдання увійдіть за допомогою блокнота або іншого редактора до головного файлу сайту (за замовчуванням це index.php або index.html). У відкритому файлі виберіть місце для вставлення коду. Для зручності ви можете задати фразу в пошуку, розташовану там, куди вам потрібно вставити код, так ви швидше його знайдете. Потім скопіюйте код та вставте у бажане місце. При необхідності код можна відформатувати таким же способом, як описано для форматування коду в статті.
Причому, я одразу хотів би пояснити, що код ми вставлятимемо в саму статтю, так, щоб його наші читачі могли копіювати, не витрачаючи час на набір самого тексту. Тим самим ми будемо підвищувати зручність свого ресурсу - це раз. Та й виглядатимуть статті більш професійно та закінчено – це дві.
Також хотілося б відзначити, що інформація в даній статті буде корисна людям, які або як ми розповідають, як робити різноманітні доповнення на сайті, або користувачам, які просто люблять ділитися корисною інформацією. І не важливо, що ця інформація - код 🙂 До речі, розкрию невеликий секрет, на даному проекті ми виводимо його за допомогою плагіна Wp-Syntex
Ви запитаєте: "Чому ми використовуємо саме його?" Відповідь проста - на смак і колір товаришів немає. Жарт. Насправді, ми вибрали цей плагін, тому що він простий у використанні, він чудово надає візуальну стилістику різноманітних мов програмування (css, html, java, javascript, perl, sql і т.д.), та й не сильно навантажує наш сервер.
Ну раз я проговорився на рахунок Wp-Syntex, то давайте на його прикладі ми покажемо, як вставляти код у статті на WordPress.
Для початку вам потрібно встановити цей плагін. Про те, як це зробити ми розповідали у статті про . Тому описувати цю дію я тут не стану.
В результаті у вас буде виводитися таке:
Код, який ви хочете, щоб виводився
Також замість php в даному коді ви можете вставити іншу мову програмування, наприклад, css або java. При цьому стилістика оформлення зовнішнього вигляду змінюватиметься.
Додаткові функції Wp-Syntex
Якщо в тег «pre», що відкривається, ви додасте атрибут line, тобто код, який ви повинні вставити, буде починатися так:
Код, який ви хочете, щоб виводився
Сподіваюся, ви помітили різницю?
Є ще один невеликий атрибут, який може знадобитися вам це escaped. Він дозволяє перетворювати html-коди символів безпосередньо на самі символи. Наприклад, ">" він перетворює на «>». Для того, щоб запрацювала дана функція, в тег «pre», що відкривається, вставте наступний атрибут:
| escaped="true" |
Відповідно тег починатиметься так:
| < pre lang= "php" line= "1" escaped= "true" > |
Також на просторах інтернету я знаходив інформацію, що можна встановити ще один плагін (WP-Syntax Button), який працює у зв'язці з нашим плагіном і додає редактор WP кнопку вставки коду. Я не полінувався і вирішив протестувати його.
Відразу ж при установці його мене насторожило те, що він досить давно не оновлювався і не тестувався з нашою версією Вордпреса. Ну що я можу сказати, побоювання мої справдилися.
Після активації WP-Syntax Button я вирішив одну з наших статей спробував вставити java скрипт. Зробив все, як і було зазначено в горі інструкціях і рекомендаціях. Вставив скрипт у статтю, виділив його та натиснув кнопку «code».
Після чого вказав мову програмування та номер рядка, з якого має початися виведення скрипту.
Можливо, ви запитаєте, навіщо ж я написав про цей експеримент у цій статті? Цим я хотів сказати, що коли ви шукаєте якусь інформацію в інтернеті, звертайте увагу на дату публікації. Адже існує дуже велика ймовірність того, що інформація в старій статті була актуальна кілька років тому, а зараз вона просто не працює, а її застосування або впровадження може призвести до вразливості вашого проекту.
На нашому блозі я намагаюся підтримувати весь матеріал в актуальному стані, постійно стежу за оновленнями та за необхідності вношу корективи до вже написаних статей.
Якщо ви хочете отримувати актуальну інформацію до себе на електронну пошту, рекомендую .
Відео «Як вставити HTML код у статтю»
Друзі, якщо хтось вважає за краще подивитися, як це робиться, то для вас я записав відео. І нагадую, що у нас також є youtube-канал, на який ви також можете передплатити.
Статті на тему:
Ну що, сподіваюся, стаття вийшла не складною, і мені докладно вдалося розповісти вам про те, як можна вставити html код на сайт без зайвих проблем.
Не нехтуйте естетичним виглядом вашого блогу. Адже наш читач як і в житті, зустрічає по одязі, а проводжає з розуму.
На цьому все в мене!
Бувай!
З повагою, Калмиков Антон
Здрастуйте, шановні друзі. Сьогодні впродовж теми прискорення швидкості завантаження блогу, поговоримо, про можливість заміни плагінів «легкими» скриптами. Скрипти на відміну від плагінів надають значно менше навантаження на сервер, а відтак і швидкість завантаження сайту буде вищою. На сьогоднішній день плагінів досить багато, і вони здатні вирішити багато завдань блогерів. Але найчастіше, ці плагіни можна замінити роботою швидших скриптів. А часом і зовсім відключити непотрібні плагіни. І чим менше сторонніх плагінів – тим вища швидкість завантаження сайту чи блогу.
Якщо провести аналіз швидкості завантаження сайту, можна побачити які з плагінів гальмують швидкість завантаження Вашого сайту. Які послуги використовувати для перевірки я писав. У моєму випадку, найбільше гальмо - це плагін що дозволяють виводити приклади вихідного коду в статтях, з підсвічуванням синтаксису цього самого коду. Називається цей плагін SyntaxHighlighter.
Результат тесту навіть на сторінку не помістився. Зрозуміло, підсвічування коду дуже гарне, але якщо розібратися, то не в підсвічуванні справа. За великим рахунком, важлива працездатність коду. А якщо код просто вставити, то велика ймовірність його непрацездатності.
І сьогодні я розповім вам, як замінити плагін SyntaxHighlighter звичайним кодом та ще й вставити кнопку в панель редагування вашого блогу.
Як ввести код у статті без плагіна
Відомо, що в WordPress, для того, щоб вивести приклад вихідного коду в статті, достатньо при наборі статті з візуального редактора перейти в тестовий і укласти потрібний код у теги
Ваш код
Але такий код буде слабко виділятися в більшості тексту вашої статті. І тому можна внести кілька стилів, скажімо, колір тла, шрифту, рамку тощо. Так, Ваш код буде найбільш наочно представлений у вигляді прикладу.
Як змінити вигляд коду, що відображається
Зробити це досить легко.
Варіант 1
Ви можете присвоїти тегу
Клас, наприклад, class="cod" і задати необхідні стилі у файлі style.css..cod ( width: auto ; background-color: whitesmoke ; border: 1px solid #C7C3C3 ; border-radius: 5px ; color: #167dec ; )Варіант 2
Ви можете безпосередньо вставляти код задавати і стилі. Виглядатиме це приблизно так:
Ваш кодІ на першому і другому прикладі, якщо вставлений код вилізе межі статті, слід додати властивість overflow: auto; що дозволить керувати блоковим елементом.
Ці способи всім хороші, але хотілося б якось простіше. Загалом, знову ліньки – двигун прогресу змушує придумати щось, що полегшить цей процес.
Як додати кнопку "Вставка коду" в панель редагування WordPress
А полегшить цей процес проста кнопка на панелі редагування WordPress. І виглядає вона так.
Якщо ви захочете поставити таку кнопку собі, то Вам знадобиться кілька хвилин часу та кілька файлів від мене. Отже, почнемо.
Здрастуйте, шановні читачі!
Поговоримо про програмний код на сайті. Нерідко у веб-майстра виникає необхідність на одну або кілька сторінок сайту вставити код. WordPress дозволяє використовувати php, java, html, css тощо. код двома способами: як виконувані команди, що інтерпретуються движком сайту, і у вигляді доступного для читання та копіювання тексту. У цій статті розглянемо приклади того, як вставити код у сторінку WordPress, щоб він відображався коректно та красиво для відвідувачів.
Код у вигляді тексту: навіщо це потрібно
Потреба у виведенні програмного коду WordPress поширеної не назвеш. Можна з упевненістю сказати, що у власників медичних, будівельних чи кулінарних блогів подібне питання навряд чи виникне. Чого не скажеш про авторів проектів, присвячених таким темам як створення та , веб-дизайн та програмування, розробка додатків тощо.
Необхідність публікації окремих рядків коду часом не обмежується простим додаванням потрібного фрагмента на сайт. Супутнє цьому бажання «зробити красиво» упирається у використання підсвічування синтаксису коду та ті чи інші способи реалізації. Підсвічування коду на сайті здатне істотно полегшити сприйняття даних відвідувачами, які звикли до використання просунутих редакторів як .
Якщо просто вставити код у статтю, WordPress інтерпретує його та спотворить під час публікації. Тому подібний тип даних завжди повинен оброблятися. Вирішити це завдання можна у різний спосіб: прописуванням необхідних тегів на сторінці вручну, використовуючи вбудовану в редактор WordPress кнопку і за допомогою різних плагінів.
Як додати код до статті без плагіна
WordPress пропонує для вирішення цього завдання адміністратору сайту власний інструмент, що є частиною системи управління контентом.
Блок, що додається у візуальному редакторі контенту, що складається з одного і декількох рядків коду, WordPress при переході в текстовий режим замінює в тегах всі символи< и >символами < і >
Щоб показати CMS, що певний фрагмент коду повинен виводитися на сторінці «як є», його в текстовому редакторі WordPress необхідно виділити та «обернути» тегом
за допомогою кнопки на панелі інструментів:Виглядати на сторінці це буде приблизно так:
| Найменування 1 | Найменування 2 |
|---|---|
| Значення 1 | Значення 2 |
Щоб вставити код у сторінку WordPress із заданими відступами, при переході з візуального редактора контенту до текстового можна використовувати тег html
Зберігає всі додаткові прогалини, що служать формування відступів. Вміст елементівІза промовчанням відображається браузерами моноширинним шрифтом.Приклад того, як WordPress вставити html-код на сторінку без плагінів за допомогою тега
Найменування 1 Найменування 2 Значення 1 Значення 2 До тега
Застосовні універсальні атрибути, зокрема атрибут style, використовуваний визначення елемента за допомогою CSS. У наведеному нижче прикладі показано, як значення атрибуту styleзадаються колір тексту, що виводиться, колір фону блоку, товщина, колір і радіус закруглення межі блоку:
Можливості форматування блоків, що виводяться на сторінці, за допомогою атрибутів досить широкі, але не безмежні. Використання розглянутих тегів виправдане, коли на сторінку додаються як приклади одиночні рядки або невеликі фрагменти коду. Про гарне оформлення в цьому випадку говорити не доводиться, результат вставки буде мінімалістичним, але багатьом достатньо і цього.
Складне форматування, що дозволяє реалізувати підсвічування синтаксису - результат роботи плагінів, про які йтиметься нижче.
Плагіни вставки коду для WordPress
Пропонуємо на вибір кілька плагінів з офіційного репозиторію WordPress, що дозволяють виводити будь-який код (php, java, html, css) красиво: рядково і з відповідним підсвічуванням елементів.
SyntaxHighlighter Evolved
Поширений плагін для вставки коду в WordPress, просунутий і потужний, на сторінці налаштувань якого можна застосувати одну з семи тем оформлення і, при необхідності, вибрати відображення нумерації рядків і панелі інструментів, зробити клікабельними URL згорнути поле коду, виставити автоматичне перенесення довгих рядків і і т.д. Тут же є візуальний перегляд висновку, є розшифровка використовуваних атрибутів.
У плагіні SyntaxHighlighter Evolvedпередбачено все, що може будь-коли знадобитися. Вставити код у статтю WordPress за його допомогою дуже просто, для цього необхідно в налаштуваннях дозволити плагіну обробляти тег
Або використати відповідні шорткоди:Приклад приклад приклад
WP-Syntax
Ще один плагін, який довгий час заслужено користувався визнанням у вебмайстрів. Нині статистика офіційного репозиторію показує понад 10 тисяч активних установок. На жаль, плагін не оновлювався вже рік, проте продовжує справно виконувати заявлені функції.
WP-Syntaxне має власної сторінки налаштувань. Цей плагін WordPress для редагування коду, точніше, для його вставки та зміни виду підсвічування синтаксису використовує тег
З атрибутом вибору мови:
прикладприкладприкладСписок мов, що підтримуються, наводиться на сторінці плагіна.
Атрибут lineу тегу служить для відображення нумерації рядків, його значення відповідає номеру рядка, з якого починається відлік. Якщо код містить HTML-об'єкти, рекомендується використовувати атрибут escapedзі значенням trueяк опція:
прикладПриклад виведення та підсвічування CSS-коду за допомогою плагіна:
1 2 3 4 5 6 7 8 .block ( border : 2px #8E0505 ; color : #2D0000 ; /*колір тексту*/ padding : 2px ; /*внутрішні відступи*/ text-align: left; /*вирівнювання тексту*/ font-family: arial; font-size: 14px; ) Block ( border: 2px #8E0505; color: #2D0000; /*колір тексту*/ padding: 2px; /*внутрішні відступи*/ text-align: left; /*вирівнювання тексту*/ font-family: arial; font-size : 14px; )
При перемиканні з html-редактора у візуальний режим тег WordPress інтерпретує тег
І код не відображається правильно. Тому при редагуванні статей із вставками блоків коду необхідно використовувати редактор контенту як html.Code Prettify
Легкий плагін без налаштувань, що дозволяє вставити код на сайті WordPress з використанням автоматичного підсвічування без необхідності вказувати мову. Реалізує підсвічування для тегів
Іна сторінці. Просте рішення на основі модуля Google Code Prettify libraryдля тих, хто не хоче вникати особливо форматування синтаксису блоків, що виводяться на сайті, з програмним кодом.Висновок
Розглянуті у статті рішення на основі плагінів – лише мала частина того, що пропонує сховище плагінів WordPress. Перейшовши за посиланнями меню консолі «Плагіни — Додати новий»на сторінку пошуку, за ключовими словами Highlightі Syntaxможна виявити ще кілька десятків аналогічних плагінів, що дозволяють красиво оформити програмний код. Важливо розуміти, наскільки доречним і необхідним буде такий плагін на сайті. Можливо, саме у вашому випадку вставити код у сторінку WordPress буде простіше вручну у текстовому редакторі, скориставшись тегами
І. Складання
