Як вставити код в статтю без плагіна
Привіт, шановні друзі. Сьогодні в продовження теми прискорення швидкості завантаження блогу, поговоримо, про можливість заміни плагінів «легкими» скриптами. Скрипти на відміну від полігонів надають значно менше навантаження на сервер, а отже і швидкість завантаження сайту буде вище. На сьогоднішній день плагінів досить багато і вони здатні вирішити багато завдань блогерів. Але найчастіше, ці плагіни можна замінити роботою більш швидких скриптів. А часом і зовсім відключити непотрібні плагіни. І чим менше сторонніх плагінів - тим вище швидкість завантаження сайту або блогу.
Результат тесту, навіть на сторінку не помістився. Зрозуміло, підсвічування коду дуже красива, але якщо розібратися, то не в підсвічуванні справу. За великим рахунком важлива працездатність коду. А якщо код просто вставити, то велика ймовірність його непрацездатності.
І сьогодні я розповім вам, як замінити плагін SyntaxHighlighter звичайним кодом, та ще й вставити кнопку в панель редагування вашого блогу.
Як ввести код в статті без плагіна
Приклад вставки коду
Але такий код буде слабо виділятися в основній масі тексту вашої статті. І тому можна внести кілька стилів, скажімо, колір фону, шрифту, рамку і так далі. Так Ваш код буде найбільш наочно представлений у вигляді прикладу.
Як змінити вид відображуваного коду
Зробити це досить просто.
Ви можете привласнити тегу
клас, наприклад, class = "cod" і задати потрібні стилі у файлі style.css.Ви можете безпосередньо при вставці коду задавати і стилі. Виглядати це буде приблизно так:
І в першому і другому прикладі, якщо вставлений код вилізе за межі статті, слід додати властивість overflow: auto; що дозволить управляти блоковим елементом.
Ці способи всім хороші, але хотілося б як то простіше. Загалом, знову лінь - двигун прогресу змушує придумати щось, що полегшить цей процес.
Як додати кнопку «Вставка коду» в панель редагування WordPress
А полегшить цей процес проста кнопка в панелі редагування WordPress. І виглядає вона ось так.
Якщо ви захочете поставити таку кнопку собі, то Вам буде потрібно кілька хвилин часу і кілька файлів від мене. Отже, приступимо.
Скачайте з мого Яндекс.Діск архів з потрібними файлами. Завантажити архів.
Розпакуйте архів. У вас буде папка code з трьома файлами. Цю папку потрібно скопіювати на ваш сервер в папку вашої теми:
Ось і все готово. Можна користуватися кнопкою, і вставляти приклади коду в статті. І при цьому, абсолютно не навантажуючи сервер.
Як користуватися кнопкою «Вставка коду»
Вставте потрібний код в статтю - виділіть цей код - натисніть кнопку «Вставка коду» - під спливаюче вікно введіть будь-яке значення.
Дуже проста схема відображення коду на сторінках вашого блогу. Уже вставлений код, ви можете редагувати, не вдаючись до повторного натискання на кнопку. До речі, може вийде дуже оригінально.
Вчора пару годин, а також сьогодні кілька годин бився над вирішенням проблеми - без плагіна не відображалися деякі коди. Все-таки зрозумів чому так відбувалося. Зараз на моєму сайті плагін відключений.
Василь, спасибі за оцінку. Для мене дійсно дуже важлива думка моїх Новомосковсктелей, особливо якщо я зміг допомогти. А ось теж уже кілька днів поспіль потихеньку переробляю свої статті на відображення коду без плагіна. У мене хоч і не великий але є код в кожній другій статті. Але вже залишилося зовсім чуть чуть. 🙂
Максим, у мене виникли такі питання:
1. У себе на сайті я зробив «Варіант 2». Чи повинна в цьому випадку, бути встановлена папка code, і вставлений код в файл functions? Я все одно, всі коди вставив вручну, кнопка мені не потрібна. Та й не виходило вставляти за допомогою кнопки, чомусь змінювалося форматування у деяких кодів. Код та папку на сайт я завантажив раніше.
2. У деяких кодах мені потрібна прокрутка, коди не поміщаються. Зараз вони займають наступний рядок. Я пробував вставляти overflow, але нічого не виходить. Та й не знаю куди потрібно це вставляти. Як це можна зробити?Василь, якщо кнопка не потрібна, і використовувати «Варіант2», то можна не завантажувати папку і нічого не прописувати в файл function.php. Все буде працювати.
Для того щоб з'явилася смуга прокрутки, в стилі потрібно додати атрибут overflow: auto;
Виглядати код буде так:
«Ваш код»Я робив так, але все одно смуга прокрутки не виникає.
Рядки переносяться, якщо не вміщаються по ширині, а коли я скопіював код, то в блокноті код відображається правильно без переносів.Ще одне питання - а як поміняти колір коду? На моєму сайті, в даний момент, краще б виглядав чорний колір. Я пробував міняти кольори, але нічого не змінювалося, можливо міняв не там. Якщо це color, то яким виразом потрібно буде вивести чорний колір?
Якщо смуга прокручування з'являється при вставці overflow: auto ;, слід «auto» змінити, скажімо на значення в 5px - це властивість блокового об'єкта вкаже відступ від коду в 5 пікселів і відповідно у взаємодії із загальним кодом шаблону, весь код в цьому блоці повинен буде вміститься в блок контенту і з'явиться смуга прокрутки. Але може бути, що це властивість успадковується від більш старшого блоку і тому не працює. Тоді необхідно інше рішення. Для того щоб це дізнатися, подивіться код елемента через праву кнопку мишки в панелі вебмастера. Варто звернути увагу на стилі і, то як вони працюють.
Що стосується кольору, то просто з стилів потрібно прибрати color: # 167dec; і колір буде чорний. Успіхів!Колір зробив чорним, а ось прокрутка не виходить. У стилях нічого не розумію.
Може бути нічого і не потрібно робити. Після копіювання код в відображається так, як і повинен відображатися за своїм форматування. Тому, проблем бути не повинно.Якщо код після вставки не змінює свого форматування, то і проблем не буде. Василь, зараз я подивився Ваші стилі, все так і є властивість overflow: auto; успадковується від тега pre в файлі style.css на 280 рядку. Тому у Вас все працює так як треба. Якщо Вам потрібна вертикальна прокрутка, щоб скоротити місце під код в статті, то просто, коли вставляєте запропонований мною код додайте параметр висоти вікна height: 200px;
Цей параметр можна замість color вставити і у Вас з'явиться вертикальна прокрутка.Спасибі, тепер буду знати, що плагіни для виведення коду сильно навантажують сайт.
Постараюся їх замінити, хоча адже зовсім недавно його додав і всі пости редагував ...Привіт, Микола. Я теж все статті перевіряв і редагував і під плагін і після того як забрав його. Удачі Вам у цій справі.
