Як виділити текст жирним, курсивом і підкресленням без стандартних тегів html

Номер статті: 204

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

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

За форматування тексту відповідають стандартні теги HTML:

текст - виділення жирним текст - виділення курсивом текст - виділення нижнім підкресленням

Я ж пропоную використовувати CSS для виділення тексту, що буде сприйматися пошуковими системами цілком адекватно.

Крок 1. Прописуємо параметри CSS

Відкрийте свій файл стилів (style.css, css.css, screen.css та інше) і додайте в самий кінець таке:

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

тут буде виділений жирним текст

Однак це времязатратно кожен раз вручну прописувати новий тег span з класом. Тому пропоную варіант це автоматизувати.

Крок 2. Додаємо свої кнопки в панель форматування тексту

Тепер ми додамо нові кнопки в панель форматування тексту в адмінки вашого сайту на WordPress. Виглядати це буде ось так:

Як видно з картинки, у мене в режимі HTML додалося 3 нових кнопки. Саме на них я "підвісив" створені span з потрібними класами (strong, italic і underline).

Відкриваємо свій файл functions.php і в самий кінець, перед закриває?>. додаємо такий код (запозичений, але модифікований мною):

Якщо раніше жодного разу не робили для цього файлу UTF-8 без BOM (щоб українська була буквами, а не ієрогліфами), то за допомогою безкоштовної програми Notepad ++ зробіть це:

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

Післямова

Код з кроку 2 можна використовувати для своїх шорткодов. Постійні Новомосковсктелі сайту повинні пам'ятати таку статтю Гарний текстовий блок без плагіна. Можна наробити десяток блоків, під різні потреби, і одинарним натисканням мишки виводити його в статті.

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

Усе. Креативимо і ділимося результатом.

Надаю послуги по створенню та налагодженню сайтів на WordPress (верстка, натяжка).

Віддячити Z888279575784 R109400923968 або ЯД 41001651742138

Мої контакти. Я в Twitter @mojWP. Дивись на Youtube. Новомосковський RSS блогу.

WP-R.ru Магазин WordPress
Преміальні плагіни і шаблони для CMS WordPress. Прокачай свій сайт. WMSN.ru Рідер RSS-стрічок
Стеж за виходом нових статей на популярних блогах вебмастер / SEO в одному місці.

Як просувати рубрику WordPress - інструкція та практичні поради щодо оптимізації. Для Вебстудіо і розробників - кілька корисних хаков для популяризації вашого бренду. Вся правда про хостинг Beget - мій відгук на його роботу і функціонал виходячи з досвіду. Як заробляти на download-трафив - ділюся своїм багаторічним досвідом і даю підказки.

Мої безкоштовні плагіни

Я використовую і раджу

SEO плагін WordPress

Рекомендую для максимальної настройки свого сайту під SEO-вимоги.

Мій надійний хостинг, перевірений за роки роботи. Рекомендую.