• Главная
  • Карта сайта
Не найдено

Как добавить HTML заголовки к изображениям в WordPress

Опубликовано: 01.09.2018

видео Как добавить HTML заголовки к изображениям в WordPress

Основы HTML5. #12 Блочные и строчные элементы

Сегодня рассмотрим, как просто и эффективно улучшить работу с медиа-контентом на вашем сайте. Для реализации данной функциональности вам даже не надо будет устанавливать плагин, потому что поддержка добавления такого кода есть по умолчанию в самом движке WordPress начиная с версии 3.4.x, где впервые появилась данная опция. Об этом и других изменениях вы можете более подробно почитать в .



А речь идет вот о чем: когда вы добавляете картинку на страницу или в пост WordPress, вы можете сделать для нее отдельный заголовок . Каждое добавленное изображение может сопровождаться собственным заголовком и использовать для форматирования заголовков обычные HTML-теги (конечно, вы можете оставить их пустыми и тогда вообще никаких заголовков не будет).


Оптимизация изображений для сайта - Константин Хмелев

Теги, которые вы можете использовать по умолчанию, будут такими же, как те теги, что вы используете для комментариев. К примеру, можно выделять текст жирным шрифтом при помощи < strong >, курсивом с помощью < em > или зачеркивать с помощью < strike >.


Анимированный заголовок в WordPress с помощью Elementor Pro

Учтите, что WordPress использует светло-серую цветовую стилизацию для фона и темно-серую — для текста (по умолчанию). Эти классы заданы в CSS как .wp-caption и .wp-caption-text . Если вы хотите использовать свои собственные стили, то включите их в CSS вашей темы (обычно для этого надо внести изменения в style.css ).

В нашем случае для темы надо добавить следующий код:

.wp-caption { background: #F1F1F1; line-height: 18px; margin-bottom: 20px; padding: 4px; text-align: center; } .wp-caption-text { color: #888; font-size: 12px; margin: 5px; }

Учтите, что вы всегда можете изменить заголовок , кликнув на картинке в редакторе постов и перейдя к параметру Редактировать .

А вот сам код HTML , который я использую:

<em>This text is italicized.</em> <strong>And this is bold.</strong>

Теперь рассмотрим этот же пример в картинках. Мы просто вставляем картинку в редакторе записи WordPress и указываем подпись .

Вот как выглядит заголовок в редакторе :

А вот так выглядит заголовок на сайте :

Вы можете применять HTML теги к подписям на свое усмотрение и оформлять это все дополнительно с помощью CSS в файле style.css .

Источник:
Новости
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью

rss