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

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

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

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

<strong>текст</strong> - выделение жирным
<i>текст</i> - выделение курсивом
<u>текст</u> - выделение нижним подчеркиванием

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

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

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

.strong {font-weight:bold;}
.italic {font-style:italic;}
.underline{text-decoration:underline;}

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

<span class="strong">здесь будет выделенный жирным текст</span>

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

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

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

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

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

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

/*свои кнопки форматирования текста*/
add_action('admin_footer', 'eg_quicktags');
function eg_quicktags() {
?>	
<script type="text/javascript" charset="utf-8">
  jQuery(document).ready(function(){
  if(typeof(QTags) !== 'undefined') {
  QTags.addButton( 'zhirny', 'Жирный', '<span class="strong">', '</span>');
  QTags.addButton( 'italic', 'Курсив', '<span class="italic">', '</span>');
  QTags.addButton( 'underline', 'Подчеркивание', '<span class="underline">', '</span>');
            }
        });
</script>
	<?php
}

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

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

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

Послесловие

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

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

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

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

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

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 18 комментариев
  1. Андрей (129 комм.) says:
    http://zarobitok.ru/

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

  2. smsclub (1 комм.) says:
    http://smsclub.mobi/

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

  3. Ярослав (6 комм.) says:
    http://kuhnyaholostyaka.ru

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

  4. Junk (14 комм.) says:
    http://junk-nn.ru

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

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

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

  5. Андрей (1 комм.) says:
    http://roulett-system.ru/

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

  6. Ирина (5 комм.) says:
    http://batalova62.ru/

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

  7. Stas Satov (1 комм.) says:
    http://muhit.kz

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

  8. Максим (1 комм.) says:
    http://sudak-turizm.net/

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

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

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

  9. Денис (2 комм.) says:
    http://creatorinfo.net/

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

  10. Татьяна (8 комм.) says:
    http://www.englishinn.ru

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

  11. Татьяна (8 комм.) says:
    http://www.englishinn.ru

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

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

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

  12. Татьяна (8 комм.) says:
    http://www.englishinn.ru

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

  13. Татьяна (1 комм.) says:

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

  14. slimtoday.ru (1 комм.) says:
    http://slimtoday.ru/

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

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

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

  15. Тарас (1 комм.) says:

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

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 14.13MB | MySQL:82 | 0,512sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html