Поговоримо про те, як вставити код на сайт, як вставити html код, код лічильника, код стороннього скрипта, в Artisteer. У самій програмі код можна вставити в двох місцях, перше це при створенні нижнього колонтитулу натиснувши кнопку "текст", і друге в самий низ сторінки, при заданні налаштувань експорту вкладка "Description". В останньому все ж таки зручніше вставляти вже після створення шаблону.

Як вставити код лічильника

Здрастуйте, хлопці!

Сьогодні вирішив торкнутися теми, яка ніколи не перестане бути актуальною серед молодих творців сайтів.

Завжди існує потреба налаштовувати сайти після їх створення. Частина налаштувань виконується через редагування файлів встановленого шаблонутеми оформлення. Наприклад, потрібно вставити код, що виводить також записи. Але куди його вставити?

Дуже часто новачки ставлять такі запитання. Також їх хвилюють і інші подібні моменти, вирішення яких по суті є таким самим. До того ж, у своїх майбутніх статтях я часто вдаватимуся до вставки кодів у різні місця шаблону. Тому цей матеріал до речі, як ніколи.

У цій статті я покажу, як вам дуже просто визначити місце у шаблоні WordPress, куди вам необхідно вставити будь-який код. Також розгляну інші важливі моментиякі можуть хвилювати вас на початковому етапі.

Давайте почнемо з верху і розглянемо файли, які вам може доведеться редагувати, якщо ви захочете вставляти коди ручками, а не за допомогою плагінів, адже існує і такий варіант. Його я не вітаю, але все ж таки для самих ледарів я опишу такі плагіни в наступних статтях.

На самому початку даю відео-урок, тому що без нього буде складно зрозуміти матеріал, викладений у текстовому форматінижче.

Тепер поясню все докладно у текстовому форматі.

Файли, які відповідають за виведення кожного типу сторінок

Якщо ви читали багато статей на інших блогах про реалізацію якихось функцій за допомогою кодів (скриптів), то впевнений на всі 100%, що бачили фрази на кшталт:

• Вставляєте цей код у файл, який відповідає за висновок головної сторінки;
• Вставляєте цей код у файл, який відповідає за виведення записів та інші.

Файлів, які можуть знадобитися вставляти коди, багато. Але що це за файли? Все дуже просто.

1. Висновок головної сторінки – index.php;
2. Виведення записів – файл single.php;
3. Виведення сторінок - файл page.php;
4. Виведення архівів та рубрик - archive.php;
5. Виведення підвалу – footer.php;
6. Виведення сторінки пошуку – search.php;
7. Висновок сайдбару – sidebar.php;
8. Файл стилів – style.css;
9. Файл виведення сторінки 404 – 404.php.

Тепер, коли вам будуть говорити, що потрібно вставити код у такий файл, ви знатимете, куди необхідно дивитися.

Залишилося лише відповісти на питання, як визначити потрібне місце в кожному з файлів?

Визначаємо місце вставки коду

Спочатку пройдемося тими місцями, які визначати не потрібно. Вони у всіх будуть однакові незалежно від шаблону.

Перше місце, ідентичне всім шаблонів - область у файлі Header.php. Це відкриває та закриває теги .

Між цими тегами завжди розміщують якісь скрипти, які мають працювати на всіх сторінках сайту. Тобто розмістили між даними тегами скрипт, наприклад, соціальних кнопок і вони працюють на всіх сторінках сайту, де ми зробимо їхній висновок.

Дані теги розміщені у верхній частині файлу Header.php.

Вміст, що знаходиться між ними, у всіх відрізнятиметься, оскільки все залежить від шаблону.

Якщо вам кажуть, що потрібно вставити даний кодміж відкриваючим та закриваючим тегами head, то копіюєте код, шукайте подібну область у своєму файлі шаблону і просто вставляєте його між цими тегами.

Друге місце, яке також ідентичне всім шаблонів, знаходиться у файлі, що відповідає за виведення підвалу - footer.php.

Скрипти можна підключати не тільки, вставивши їх між тегами у файлі Header.php. Можна також підвантажити їх через файл footer.php, тим самим прискоривши завантаження сторінки сайту.

Справа в тому, що коли сторінка починається завантажуватися, вона вантажиться зверху вниз. Якщо всі скрипти будуть розташовані вгорі сторінки, відображення її вмісту сповільниться, оскільки буде потрібно час на завантаження скриптів.

Наше завдання – показати вміст сторінки, якнайшвидше, як відвідувачам, так і пошуковим системам. У цьому випадку доцільно зробити завантаження скриптів в самому кінці сторінки, щоб спочатку показати вміст, а потім завантажити і все інше.

Щоб реалізувати такий варіант, необхідно відкрити файл footer.php і вставити скрипт перед тегом body, що закривається. Знаходиться він наприкінці вмісту файлу, оскільки він відповідає за закінчення області сторінки.

Як бачимо, всі скрипти я вивів саме в цій галузі, перед закриваючим тегом

(Виділив синьою рамкою). До речі, вивів їх через завантаження з файлів, а не розміщенням самих скриптів в даній області. Після цього я значно прискорив роботу блогу. Як це зробити буде окрема стаття. Чекайте!

Сподіваюся, що коли вам будуть говорити вставити код у ці області, ви без проблем все зробите.

Перейдемо до більш складного питання і постараємося навчитися визначати місця в інших файлах шаблону, в які вставляються різні інші коди. Як правило, до таких кодів належать:

• Виведення подібних записів;
• Виведення форми передплати;
• Виведення соціальних кнопок тощо.

Всі ці речі вставляють після основної частини контенту, тобто після закінчення статті. У кожного різний кодшаблону і, тому, універсальної відповіді на запитання "Де у мене закінчується код виведення статті?"просто ні.

Але можна легко визначити кінець коду, після якого потрібно продати необхідну вам функцію. Частково даний методя вже показував у статті про вибір WordPress шаблон(). Використовував тоді стандартний функціонал інтернет браузера.

Щоб краще зрозуміти всю суть даного методу, рекомендую подивитися відео на початку цього посту. У ньому я показав, як усе відбувається у реальному часі. Ну а зараз постараюся описати якомога зрозуміліше.

Покажу на прикладі браузера Google Chrome. В інших браузерах дана функція також є, то може трохи інакше називатися.

• Google Chrome- Перегляд коду елемента;
• Firefox – дослідити елемент;
• Opera – проінспектувати елемент.

Принцип у 3х браузерах аналогічний. Тепер покажу, як визначається місце виведення будь-якої області у будь-якому шаблоні.

Переходимо до перегляду коду елемента (Google Chrome). Тиснемо правою кнопкою миші по порожній області сторінки.

Після цього внизу сторінки з'являється панель, у якій з'являється весь вихідний кодсторінки, які ми можемо редагувати та дивитися, як буде змінюватися структура та зовнішній виглядшаблон в реальному часі. Але зміни дані не зберігаються. Для цього потрібно редагувати файли шаблону.

Ось як виглядає ця панель.

Стрілка я показав на лупу (збільшувальне скло), натиснувши на яку ми можемо перевіряти структуру шаблону і визначити з яких блоків складається наш шаблон. Цю функціюя називаю інспектором.

Після натискання на інспектор ми можемо водити мишкою по нашій сторінці і бачитимемо, що всі елементи, на які ми наводимо, починають підсвічуватися кольоровим фоном. Наприклад покажу скріншот зі статті про вибір шаблону. Там я навів заголовок запису.

Якщо нам необхідно вставити код після виведення нашої статті, то не важко здогадатися, що потрібно проінспектувати область нашого шаблону і знайти блок, в якому міститься весь вміст статті. Можна шукати як кінець блоку, так і початок. Тобто можна перевіряти шаблон і знизу і зверху.

Але тут одне зауваження . Нам потрібно шукати непросто рядки статті, саме блоки, у яких перебуває сам контент, оскільки у файлах шаблону статей немає. Там є лише код, що виводить контент, і поміщений він у блоки. Саме після блокового тегу, що закриваєі потрібно буде вставляти код.

Отже, що ми робимо? Натискаємо на піктограму лупи і починаємо перевіряти область, в якій знаходиться наша стаття. Потрібно знайти таку частину сторінки, коли підсвічується область усієї статті. Це і буде блок, який виводить контент.

Наприклад я створив нову статтю з маленьким змістом, щоб показати, як підсвітиться даний блок.

Методом тику ви повинні знайти блок, в якому міститься ваш контент. При наведенні ви бачите невелику підказку, в якій показано, як називається даний блок.

Коли намацаєте таку частину шаблону, тиснете на кнопку мишки і дана частинастає активною. На панелі перегляду коду елемента автоматично виділиться рядок коду з цим блоком.

Як бачимо, даний блок має таку саму назву, як і у підказці при наведенні.

Коли ми знаємо назву блоку, в якому виводиться основна частина статті, ми можемо піти у необхідний файл та вставити після цього блоку потрібний нам код. Наприклад візьмемо файл виведення запису (single.php).

Відкриваю його в редакторі Notepad і шукаю в коді рядок, який починається так само, як в панелі перегляду коду елемента.

У редакторі Notepad дуже зручно працювати, оскільки при натисканні на тег блоку, що відкриває, виділяється і закриває (показав на зображенні вище). Тег, що закриває, говорить про те, що це кінець виведення вмісту. Саме після нього ми можемо вставити наші соціальні кнопки, схожі записи та інші функції.

Я таки вставив там соціальні кнопки разом із формою передплати на оновлення.

На сторінках вони так і відображаються.

Аналогічно відбувається вставка та інші файли шаблону (сторінки, рубрики, архіви...).

Без практики цей метод вставки навряд чи освоїш за текстом та зображеннями. Тому, беріть та спробуйте. Впевнений, що все вийде. Також на допомогу відео на початку статті.

Для визначення місця у файлі шаблону для подальшої вставки в нього потрібного колись, розібралися.

Залишився останній момент, який варто освятити у цьому пункті.

Є багато налаштувань, які потребують втручання у файл шаблону functions.php. Але як вставляти в нього коди, також потрібно розуміти.

Як правило, на всіх блогах пишуть, що вставку потрібно робити в кінець файлу перед закриваючим тегом?>.

Але, як бути, якщо цього тега немає у файлі? Ось, наприклад, у мене його таки немає. Як бути в такій ситуації? Відсутність тега, що закриває, не означає, що файл некоректний. Адже блог працює. Отже все ОК.

В даному випадку я пропоную вчинити зворотним чином - вставити в код на початок файлу перед відкривають тегом. Дивіться зображення нижче.

Червоним кольором виділено тег, що відкриває, а синім-код, який був вставлений.

Це один варіант. Також можна вставляти код у кінці файлу, але перед останнім кодом. У цьому випадку вам хоч трохи потрібно розуміти, де починається останній кодщоб не обрізати його.

От і все. Якщо раптом у вас така ж ситуація з відсутністю тега, що закриває, у файлі funsctions.php, то будете знати, як діяти.

Визначення стилів оформлення у шаблоні

Також ми можемо переглядати стилі оформлення для елементів сторінок і змінювати їх, а також додавати свої. У цьому допомагає той самий інспектор елемента.

Коли знаходимо потрібний елемент та клацаємо на нього, у правій області панелі перегляду коду відображаються стилі оформлення для вибраного блоку (елемента). Покажу стилі того ж блоку статті, розглянутого вище.

Якщо ми хочемо в реальному часі відредагувати ці стилі і подивитися, який вигляд матиме той чи інший елемент, можна міняти їх у даній панелі. Просто тиснете на значення потрібних стилів і змінюєте їх.

Але зміни будуть дійсні лише до 1-го оновлення сторінки. Щоб застосувати ці стилі, потрібно внести їх у файл стилів шаблону. На одному з зображень вище я показав синій рамкою область, яка показує ім'я файлу, в якому дані стилі прописані, а також точну сходинку, з якої вони починаються.

Тому відкриваємо файл стилів style.css і шукаємо рядок 890 в моєму випадку.

Тут можете їх відредагувати. Зберігаєте файл та закачуєте на хостинг.

Зауважу, що редагування всіх файлів я роблю саме у себе на комп'ютері. У цьому випадку користуюсь зовнішніми програмами, що дає можливість скасовувати будь-які зміни при виникненні якихось косяків. Те саме стосується і різних експериментів з кодами та скриптами - все на .

Рекомендую вам також виконувати подібне редагування будь-яких файлів у себе на комп'ютері. Для цього вам потрібно спочатку завантажити файли до себе на комп'ютер зі свого хостингу, використовуючи ftp клієнт. Про це я писав у . А потім просто відкривати файли будь-яким зручним для вас редактором, який зможе відкрити їх. Я використовую для цього Notepad.

На цьому стаття добігла кінця. Ось такий складний процес визначення місця, куди потрібно вставити якийсь код чи скрипт. На перший погляд, ця процедура може здатися складною. Але все просто. Кілька разів спробуєте і вже подібних питань ставити не будете.

Звичайно ж можна робити вставку кодів та скриптів на свій блог за допомогою спеціальних плагінів, які я розгляну обов'язково в наступних статтях. Але, щоб уникнути їх використання, можна робити такі дії і без них, що я й рекомендую. Цим ви позбавитеся від зайвого навантаження на сайт, тим самим прискоривши його та зробивши зручніше для користування вашими відвідувачами.

Всі друзі. На цьому закінчую. Чекаю на ваші запитання в коментарях. У всьому розберемося. До зустрічі у нових матеріалах.

З повагою, Костянтин Хмєлєв.

Звісно, ​​не всім потрібна ця інформація, а лише тим, хто на своїх сторінках ділиться з читачами своїми напрацюваннями в колупанні коду (читай кишках сайту) та якимись його модернізаціями через… ну ви зрозуміли Через втручання у «генетику»! А ви про що подумали?

Забігаючи вперед, поки не приступив до основної розповіді, можу повідомити, що колупатися буду і далі, про що писатиму і що, ймовірно, може вам стати в нагоді, якщо у вас теж є свій ресурс для клавіатурної творчості в Мережі. А тому рекомендую стежити за виходом нових статей, щоб не пролунати пропустити вихід свіжачка. Особливо якщо ви це досі ще це не зробили, цікаво чому?

А тепер, дорогі мої прекрасні, починається воно – оповідання.

Може виникнути резонне питання, а позику взагалі треба морочитися з приводу вставки коду? Навіщо треба робити якесь підсвічування коду і чому не можна його просто вставити, як текст, наприклад?

А все просто - якщо спробувати вставити код просто так, то він замість відображення, іноді почне виконуватися і витворяти всі ті функції, для яких призначався, причому прямо там, куди ви його вставите. Від усіх цих «принад» сайт може «попливти», його може «скрючити», а сама стаття перетворитися на незрозуміло, що й посередині щось – некрасиво! Та й сам код у «голому» вигляді, не дуже читабельне «видовище», що для непідготовленого погляду може представляти незручну субстанцію, від якої у того, хто дивиться, може навіть розвинутися небажання щось розуміти і вникати в суть того, що відбувається. Коротше, не воно! Так ви і самі можете переконатися, якщо подивитися, наприклад, на вигляд картинки в коді:

Ось щоб було «воно», є кілька варіантів, а конкретніше 3. Постараюся описати все, як і обіцяв спочатку, а ви самі вирішите, який вам буде зручніше і приємніше для реалізації і сприйняття.

Як вставити html код у тіло статті красиво та правильно.

Варіант №1 – підсвічування коду через плагін WP-Syntax.

Точніше сказати, цей варіант реалізується через зв'язок двох плагінів – для зручності роботи. Перша частина зв'язки так і називається: WP-Syntax і виконує основну функцію. А друга частина – це сервісна і називається WP-Syntax Button, яка реалізує роботу через натискання кнопки, яку цю кнопку і додає до вас на панель приладів редактора wordpress. Завантажуєте обидві частини цієї зв'язки або через пошук в адмінці блогу за назвою, або зі сторінок репозитарію движка. Сторінка репозитарію для WP-Syntax тут . А сторінка для WP-Syntax Button. Ми ж не в маршрутці, правда?

Установка стандартна – знайшли, завантажили, активували. Зверніть увагу, що плагін-кнопка (Button) не оновлювався вже більше двох років і немає даних про його сумісність з новою версією WordPress, що може вас насторожити. Якщо ви стурбовані цією обставиною, то можете кнопку не завантажувати і обійтися тільки першою частиною зв'язки - так теж працюватиме, тільки зручніше. Від себе скажу, що користуюся повним набором і все працює.

Якщо ви встановите все, то на панелі редактора з'явиться нова кнопочка «Code».

Щоб вставити код через цей плагін, треба спочатку вставити його у візуальному (звичайному, де набираєте текст) режимі, виділити мишкою, а потім натиснути кнопку «Code» і з списку вибрати мову, яка відповідає вашому коду. Заодно можна задати нумерацію рядків, вказавши номер першого в Line Number. Після вибору натисніть Insert.

При цьому, після збереження/оновлення поста/сторінки ви побачите приблизно таку картинку з вашим, красиво вставленим кодом картинки, наприклад:

Якщо ви не встановили частину WP-Syntax Button, то для вставки коду вам доведеться використовувати таку комбінацію коду:

Сюди вписуєте ваш код

Де Language – це мова вашого коду. Цю комбінацію треба вставити в HTML-редакторі, а всередину вписати ваш код. Список мов, що підтримуються, є на цій сторінці плагіна. Варіант такої вставки коду не дуже зручний, але комусь може знадобитися. В результаті буде приблизно таке:

Варіант № 2 – підсвічування синтаксису через плагін SyntaxHighlighter Evolved, Назва якого саме так і перекладається. Завантажити можна через пошук за назвою в адмінці блогу, або з цієї сторінки плагіна. Встановлення стандартне. Цей плагін працює, як і попередній, але у менш зручному варіанті.

Після встановлення у вас з'явиться пункт меню Установки > SyntaxHighlighter, де будуть усі налаштування. Так, забув сказати, що плагін англомовний та нерусифікований – недолік. Якщо щось буде незрозумілим, то використовуйте переклад сторінки.

Налаштування плагіна можна залишити за замовчуванням – вони є працездатними. А можете виставити значення як на картинці з прикладом моїх налаштувань:

Якщо заплутаєтесь, то в налаштуваннях є кнопка Reset to Defaults – скидання налаштувань на початкові. А також внизу сторінки, під кнопками, є перегляд відображення коду - можете сміливо погратися і вибрати свій варіант налаштувань і виведення коду. Є список підтримуваних мов і більше докладний описйого налаштувань - там все російською, розберетеся.

Щоб вставити html або php коду запис сайту з цим плагіном, треба застосувати одну з конструкцій з прикладу в сторінці налаштувань плагіна (в самому низу):

При написанні посту, перемикаєтеся в HTML-редактор, вибираєте потрібний параметр мови з прикладу, вставляєте його, а всередину вставляєте ваш код. Вийде приблизно так:

Сюди вписуєте вашу довжину.

Варіант № 3 – вставити html чи php код без плагіна.

Щоб обійтися без плагіна і вставити html код у тіло блогу треба укласти його в наступний код:

ВСТАВИТИ СЮДИ ВАШ КІД

Де, height і width – відповідно висота і ширина поля, що виводиться з кодом у писклелях, color – колір. Колір можете підібрати за допомогою піпетки в , про яку я вже писав. Ширину та висоту можна підібрати під параметри вашого сайту. На виході вийде приблизно таке:

На вигляд та функціональність це, звичайно, менш симпатично, зате не вантажить блог зайвими плагінами, хоча я сам цим способом і не користуюсь. Навів його для різноманітності.

Думаю, тепер визначтеся, як вставити html код красиво у блог.

На цьому закінчуватиму розмовляти. Сподіваюся, користь вам сьогодні завдав Дякую, що дочитали.

Трохи позитиву:

Натискання на соціальні кнопочки та коментарі вітаються!

Пройдися кнопками, розкажи про статтю друзям - це до грошей!

Іноді потрібно вставити якусь інформацію в статтю типу банер або якоїсь форми. Ці речі являють собою html код. Щоб вставити html коду статтю чи сторінку, жодних особливих знань не треба. Робиться це дуже просто. Ви вже знаєте, що html код – це просто текст. Під час створення статті або сторінки вибираємо режим Текст. Потім вставляємо потрібний код. Зберігаємо. І все готово!

Є ще спосіб, він дозволяє вставити будь-який Html кодна будь-яку веб-сторінку.

Це тег . Принцип такий Спершу , потім Ваш код, потім. Наводжу приклад Ваш Html кодДе

• style відповідає за стиль, розміри, колір тексту всередині тега,
• margin: 10px; розмір відступу,
• width: 300px; розмір ширини,
• height: 120px; Розмір висоти.

P.S. Невелике тренування мозку

Три жаби сиділи на березі ставка. Одна з них вирішила стрибнути у ставок. Скільки жаб лишилося на березі?

Можливо, вам це буде цікаво:

• Як підключити розсилку до сайту