16 марта, 2014 
admin 
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; } |
Не забудьте сохранить произведенные изменения. Параметры каждого тестового блока необходимо отредактировать в соответствии с вашими пожеланиями.
Если у вас что-то не получилось, можете писать в комментариях, постараюсь помочь в решении вашей проблемы. Также прошу отписаться тех, кому данные скрипты были полезны!
Опубликовано в рубрике 
Метки:
Здравствуйте,хочу выразить вам благодарность за интересный пост. Мне кажется, что это и есть творческий подход к ведению сайта. Но у меня возник вопрос.Если я правильно поняла, я могу всю статью ввести в этот фон или это только для оформления отдельной какой-то части статьи?И как им пользоваться? Как я могу это вставить в статью? Вы могли бы более подробно написать об этом.Спасибо. Желаю вам удачи и успеха.Заходите в гости, буду Вам искренне рада.
P.S.
И ещё один вопрос не по теме. У меня ПЕРЕСТАЛИ выводиться картинки на главной странице в анонсе. Нажимаю на » читать дальше», перехожу на статью, всё в порядке там.Не подскажете, где искать причину? Вы можете это всё увидеть, посетив мой сайт.Благодарю, извините за беспокойство.
Здравствуйте, Анна. Вы правильно поняли, при помощи данного кода Вы можете опубликовать всю статью с любым изображением в качестве фона. Для того, чтобы им воспользоваться, необходимо в редакторе Вашей статьи перейти в режим html. Если есть дополнительные вопросы по данной теме — задавайте.
Насколько я понял, у Вас ранее выводились миниатюры к записям, если это так и сейчас они по каким-то причинам не выводятся — скорее всего нужно разбираться с файлами вашего шаблона, более подробную информацию могу дать в том случае, если предоставите доступ к админ-панели Вашего сайта.
Очень интересная штука. Но у меня вопрос на засыпку.
Есть фоторамка с прозрачным фоном в середине — как туда вставить форму ввода? Ввода «Оставить комментарий» Всё как у тебя только
пустая форма в середине.И так на кождом посту.
А у меня не размещается, уже кучу статьей просмотрел, кучу кодов перепробовал, результат нулевой.