Відкрити меню

Як оформити інформаційний текстовий блок в статті без використання плагіна

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

Виділення тексту

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

Як завжди – працювати ми будемо з файлом теми functions.php та з таблицею стилів тієї ж теми style.css (style.php). Для початку – нам необхідно створити основу цього виділення тобто створити такий собі каркас, якому вже пізніше ми надамо бажаний зовнішній вигляд.

Для цього у файлі functions.php, який знаходиться в теці з вашою темою, прописуємо наступне:

Сам файл functions.php знаходиться

Адреса Вашого блогу/wp-content/themes/Ваша тема

Завантажуємо його на ПК, відкриваємо текстовим редактором Notepad++ і в самий кінець, перед тегом ?>, вставляємо вищевказаний код. Повинно вийти ось так:

Змінюємо файл функцій

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

Наступний крок – візуальне оформлення. Тут також все просто, в файл стилів style.css (в мене це style.php) прописуємо наступний стиль:

Аналогічно до першого випадку – копіюємо файл стилів на ПК, вносимо зміни і завантажуємо назад в теку з темою. Все, візуально ми блок оформили.

Тепер для того, щоб “одягнути” певний шматок тексту в цей блок, необхідно просто текст оформити тегами

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

Давайте подивимось, як це виглядає на прикладі:

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

Чудово! Тепер, якщо мені буде потрібно щось підкреслити та виділити, я зможу це зробити без жодного плагіна.

Звичайно, що стиль у файлі style.css (style.php) Ви можете модифікувати на свій смак – дати іншу рамку, фон, розмір та колір заголовка, хто хоча б трішки розбирається в CSS – це дуже просто, стиль дуже простенький.

background: #89C9F2; – колір фону;

border: 1px solid #0975B5; – товщина, стиль та колір рамки;

padding: 7px 10px 7px 10px; – внутрішні відступи від рамки;

Ось основні правила стилів, які можна змінити і надати виділенню свій вигляд. Якщо ви трішки вникнете в CSS – то тут політ для фантазії відкритий. Можна і зображення додати, і повністю згенерувати новий зовнішній вигляд.

Наприклад, якщо Ви до стилю цієї форми додасте:

background: #89C9F2 url(images/uvaga.png) no-repeat;

Тобто до кольору фону добавите ще і зображення без повторення (no-repeat), а саме зображення закинете в теку images, то в кутку рамки буде відображатись знак, який привертатиме увагу.

Звичайно, що при такому варіанті потрібно трішки відступити від краю самої рамки:

padding: 7px 10px 7px 30px;

Приблизно так. Одним словом – фантазуйте, експериментуйте.

Якщо ж Ви не маєте бажання гратися з кодами, то для Вас можу рекомендувати плагін Special Text Boxes, який виконує всі ці завдання автоматично, варто тільки налаштувати. Але … це ще один плагін на блог.

Вирішуйте самі, що Вам простіше – зробити все самостійно чи використовувати плагін.

Бажаю Вам вдало реалізувати задумане, продуктивної роботи та просто гарного дня.

Шануйтеся!

Нічого цікавогоТак собіНормальноДобреЧудово (Голосів: 1, середній: 4,00 з 5)
Loading...
Обговорення: 4 коментарі
  1. Pavlofox сказав:

    Краще кодом реалізовувати. Я колись встановив плагін для виділення тексту, а потім його видалив, то позилишалися в тексті якісь шорткоди. Потім мусів вручну шукати і видаляти.

    Відповіcти
    1. Олег Волощук сказав:

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

      Відповіcти
  2. Мирослав сказав:

    я як влізу в файл function, то все сайт гасне. тепер перед своїм “професійним” втручанням в цей файл-роблю його копію:-)

    Відповіcти
    1. Олег Волощук сказав:

      Мирослав, просто обережніше лізьте та і все, а про копію – цілком нормальне рішення, копії всі роблять 🙂

      Відповіcти

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

© 2017 Блог Олега Волощука · Копіювання матеріалів сайту без дозволу заборонено
Авторство підтверджено Google