Фоновое изображение в тексте WordPress

html текст на изображении

html текст на изображении в WordPress

Размещаем любой текст!!!
Возможностей для применения данного кода масса!

Стандартные возможности WordPress не позволяют установить фоновое изображение для текста в страницах, записях, отдельных html виджетах сайдбара. Разумеется, можно изменить стили и применить фон для каждого элемента сайта. Можно также установить фон только для отдельных записей, страниц или рубрик используя ID. Однако в этой статье, мы рассмотрим более простой способ.

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

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

<div>
 
<img src="http://site-s-nulya.ru/wp-content/uploads/2014/03/html-tekst-na-izobrazhenii.jpg" alt="html текст на изображении" width="520" height="208" />
 
<h5><em><span style="color: #0000ff;">html</span> текст на изображении в <span style="color: #ff0000;">Wordpress</span></em></h5>
 
<t1><span style="color: #000000;">Размещаем любой текст!!!</span></t1>
 
<t2><span style="color: #000000;">Возможностей для применения данного кода масса!</span></t2>
 
</div>

После того, как вы ввели вышеприведенный код, требуется отредактировать файл style.css вашего шаблона. Для этого перейдите на вкладку "Внешний вид" - "Редактор". В самый конец файла вставьте следующий css код:

.image {
position: relative;
width: 100%; /* for IE 6 */
}
 
h5 {
position: absolute;
top: 40px;
left: 0;
width: 100%;
text-align: center;
}
 
t1 {
position: absolute;
top: 85px;
left: 0;
width: 100%;
text-align: center;
}
 
t2 {
position: absolute;
top: 105px;
left: 0;
width: 100%;
text-align: center;
}

Не забудьте сохранить произведенные изменения. Параметры каждого тестового блока необходимо отредактировать в соответствии с вашими пожеланиями.

Если у вас что-то не получилось, можете писать в комментариях, постараюсь помочь в решении вашей проблемы. Также прошу отписаться тех, кому данные скрипты были полезны!

Вы можете оставить комментарий, или ссылку на Ваш сайт.

4 комментария к записи “Фоновое изображение в тексте WordPress”

  1. Anna:

    Здравствуйте,хочу выразить вам благодарность за интересный пост. Мне кажется, что это и есть творческий подход к ведению сайта. Но у меня возник вопрос.Если я правильно поняла, я могу всю статью ввести в этот фон или это только для оформления отдельной какой-то части статьи?И как им пользоваться? Как я могу это вставить в статью? Вы могли бы более подробно написать об этом.Спасибо. Желаю вам удачи и успеха.Заходите в гости, буду Вам искренне рада.

    P.S.
    И ещё один вопрос не по теме. У меня ПЕРЕСТАЛИ выводиться картинки на главной странице в анонсе. Нажимаю на » читать дальше», перехожу на статью, всё в порядке там.Не подскажете, где искать причину? Вы можете это всё увидеть, посетив мой сайт.Благодарю, извините за беспокойство.

    • Здравствуйте, Анна. Вы правильно поняли, при помощи данного кода Вы можете опубликовать всю статью с любым изображением в качестве фона. Для того, чтобы им воспользоваться, необходимо в редакторе Вашей статьи перейти в режим html. Если есть дополнительные вопросы по данной теме — задавайте.
      Насколько я понял, у Вас ранее выводились миниатюры к записям, если это так и сейчас они по каким-то причинам не выводятся — скорее всего нужно разбираться с файлами вашего шаблона, более подробную информацию могу дать в том случае, если предоставите доступ к админ-панели Вашего сайта.

  2. Очень интересная штука. Но у меня вопрос на засыпку.
    Есть фоторамка с прозрачным фоном в середине — как туда вставить форму ввода? Ввода «Оставить комментарий» Всё как у тебя только
    пустая форма в середине.И так на кождом посту.

  3. maloir:

    А у меня не размещается, уже кучу статьей просмотрел, кучу кодов перепробовал, результат нулевой.

Оставить комментарий

Яндекс.Метрика