Как выделить текст жирным, курсивом и подчеркиванием без стандартных тегов 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. Андрей says:
    http://zarobitok.ru/

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

  2. smsclub says:
    http://smsclub.mobi/

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

  3. Ярослав says:
    http://kuhnyaholostyaka.ru

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

  4. Junk says:
    http://junk-nn.ru

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

    • Виталий says:
      http://mojWP.ru/

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

  5. Андрей says:
    http://roulett-system.ru/

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

  6. Ирина says:
    http://batalova62.ru/

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

  7. Stas Satov says:
    http://muhit.kz

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

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

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

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

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

  9. Денис says:
    http://creatorinfo.net/

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

  10. Татьяна says:
    http://www.englishinn.ru

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

  11. Татьяна says:
    http://www.englishinn.ru

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

    • Виталий says:
      http://mojWP.ru/

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

  12. Татьяна says:
    http://www.englishinn.ru

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

  13. Татьяна says:

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

  14. slimtoday.ru says:
    http://slimtoday.ru/

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

    • Виталий says:
      http://mojWP.ru/

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

  15. Тарас says:

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

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

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

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