mojwp.ru
Назад

Как выделить текст жирным, курсивом и подчеркиванием без стандартных тегов HTML

Опубликовано: 16.07.2013
19
182

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

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

За форматирование текста отвечают стандартные теги HTML:

Внимание! Я выпустил новую тему Romb для ваших статейников и блогов. Максимально быстрая по Google PageSpeed и максимальная оптимизация под SEO.

Я же предлагаю использовать CSS для выделения текста, что будет восприниматься поисковиками вполне адекватно.

Шаг 1. Прописываем параметры CSS

Откройте свой файл стилей (style.css, css.css, screen.css и прочее) и добавьте в самый конец такое:

Здесь мы задали соответствующим классам свой внешний вид. Теперь вы можете в режиме HTML взять нужный отрезок текста, или слово, в тег span с нужным параметров, в результате чего текст примет нужный вид: жирный, курсив или подчеркивание нижнее. Смотрите:

Однако это времязатратно каждый раз вручную прописывать новый тег span с классом. Поэтому предлагаю вариант это автоматизировать.

Шаг 2. Добавляем свои кнопки в панель форматирования текста

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

Как выделить текст жирным, курсивом и подчеркиванием без стандартных тегов HTML

Как видно с картинки, у меня в режиме HTML добавилось 3 новых кнопки. Именно на них я «подвесил» созданные span с нужными классами (strong, italic и underline).

Открываем свой файл functions.php и в самый конец, перед закрывающим ?>, добавляем такой код (позаимствован, но модифицирован мной):

Если ранее ни разу не делали для этого файла UTF-8 без BOM (чтобы русский был буквами, а не иероглифами), то при помощи бесплатной программы Notepad++ сделайте это:

Как выделить текст жирным, курсивом и подчеркиванием без стандартных тегов HTML

Сохранили и закинули все это дело назад на хостинг. Теперь обновите страничку в админке и увидите в режиме HTML новые кнопки, только что созданные.

Послесловие

Код из шага 2 можно использовать для своих шорткодов. Постоянные читатели сайта должны помнить такую статью Красивый текстовый блок без плагина. Можно наделать десяток блоков, под разные нужды, и одинарным нажатием мышки выводить его в статье.

Из похожих статей рекомендую Выводим скрытые кнопки в панели форматирования текста: также добавляем кнопки форматирования текста. К слову, их вы можете заменить способом, описанным в сегодняшней статье.

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

Как выделить текст жирным, курсивом и подчеркиванием без стандартных тегов HTML
Оцени статью

Давай, оцени статью!

Автор:
Виталий
Поделиться
Комментарии:
  • Андрей
    Опубликовано: 17.07.2013 Ответить на сообщение

    Доброе время суток Виталий! отличный хак, а главное удобно станет.
    —-
    Благодарю.

  • smsclub
    Опубликовано: 18.07.2013 Ответить на сообщение

    Спасибо за хак, сейчас как раз разбираюсь с Вордпреcсом. Нашёл на Вашем блоге много полезной инфы.

  • Ярослав
    Опубликовано: 18.07.2013 Ответить на сообщение

    День добрый, Виталий!
    Спасибо за очередную полезность, обязательно у себя на блоге применю Ваши подсказки!

  • Junk
    Опубликовано: 19.07.2013 Ответить на сообщение

    А по-моему это все лишние телодвижения, не выделять все подряд, как дурачек, и все тут.

    • Виталий
      Опубликовано: 20.07.2013 Ответить на сообщение

      На статью нужно смотреть шире: теперь вы знаете, что некоторые теги HTML можно заменить CSS, а также добавить новые кнопки в админку со своим назначением.

  • Андрей
    Опубликовано: 28.07.2013 Ответить на сообщение

    Не знал такой фишки , СП

  • Ирина
    Опубликовано: 09.08.2013 Ответить на сообщение

    Спасибо, как всегда, ценная информация. Возьму на вооружение! 😉

  • Stas Satov
    Опубликовано: 03.12.2013 Ответить на сообщение

    Очень четко и понятно! А главное с примерами, молодец!

  • Максим
    Опубликовано: 23.04.2014 Ответить на сообщение

    Спасибо,как-нибудь попробую сделать,но пришлось сделать подчёркивание другим способом,прописывал в style.css вот это

    В стилях темы для обычной ссылки (a) пропишите
    text-decoration: underline;

    А для ссылки по наведению (a:hover) пропешите:
    text-decoration: none;

  • Денис
    Опубликовано: 22.09.2014 Ответить на сообщение

    Действительно полезно, переделал у себя на блоге 🙂

  • Татьяна
    Опубликовано: 07.11.2014 Ответить на сообщение

    Сергей! Скажите, пожалуйста, а если заменить на это выход?

  • Татьяна
    Опубликовано: 07.11.2014 Ответить на сообщение

    Сергей, я имела в виду если «strong» заменить на «b» — это выход из положения?
    Спасибо.

    • Виталий
      Опубликовано: 08.11.2014 Ответить на сообщение

      Думаю, у вас мало шансов дождаться ответа Сергея…

  • Татьяна
    Опубликовано: 08.11.2014 Ответить на сообщение

    Виталий, у меня видно уже с головой плохо от этих strong)) Я очень извиняюсь…. Спасибо за Ваши полезные статьи!

  • Татьяна
    Опубликовано: 26.08.2015 Ответить на сообщение

    Здравствуйте, Виталий!
    А почему у Вас в коде стоит закрывающий тег ?> в начале, а открывающий <?php в конце??? У меня, кстати, Ваш код не сработал… Может быть из-за этого? Посмотрите, пожалуйста!

  • slimtoday.ru
    Опубликовано: 16.05.2016 Ответить на сообщение

    Применил у себя. Всё получилось. Автору респект! Буду ваще счастлив, если объясните, как вывести свои кнопки не в HTML, а визуальный редактор. Очень нужно!!!

    • Виталий
      Опубликовано: 16.05.2016 Ответить на сообщение

      В визуальный не так просто и придется писать фактически плагин. Кода много. Не каждый из читателей осилит) Не вижу смысла.

  • Тарас
    Опубликовано: 20.05.2016 Ответить на сообщение

    Спасибо за материал. Но, к сожалению, код почему-то не сработал.

  • Дмитрий
    Опубликовано: 16.05.2017 Ответить на сообщение

    У меня вообще сдох сайт после хака, ошибку выдает..

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.