Красивый текстовый блок в WordPress

Хотите, чтобы Ваш сайт стал чуточку лучше и статьи получили красивое оформление? Тогда эта заметка для Вас. Мы создадим собственный шорткод (проще говоря – шаблон чего-то), который отобразит в статье красивый текстовый блок. После этого настроим его под дизайн сайта, выполняя все пункты по предложенной инструкции. В результате этих действий мы получим уникальное оформление сайта и не будем нагружать хостинг еще одним плагином.
Цвет, картинка, шрифт и его размер, можно задать индивидуально для каждого шаблона блока. Чтобы данный блок отобразился в нужном мне месте, поместим текст внутри шорткода и выглядит это все так:

[info name="Пример шорткода"]
Вот так можно оформить блок с текстом. Если будете читать далее, то сможете сделать это сами. Притом цвет, картинка, шрифт и его размер, можно задать индивидуально для каждого шаблона блока
[/info]

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




Чтобы сделать текстовый блок своими руками и уникальным дизайном, нам понадобится:

1. текстовый редактор (я рекомендуемую Notepad++);
2. файл functions.php (находится в папке с шаблоном Вашего блога);
3. файл стилей шаблона (обычно style.css, который лежит так же в папке с шаблоном);
4. руки, голова и пятая точка на стуле;
5. воображение.

Список всего необходимого не такой уж большой, поэтому найдете все без труда. Приступаем.

Шаг №1: создаем каркас текстового блока

Чтобы создать каркас (скелет) нам понадобится файл functions.php, который располагается в папке с шаблоном Вашего сайта на ftp. Сделайте его резервную копию на всякий случай, если что-то пойдет не так.

Открываем этот файл текстовым редактором и вставляем представленный код в самый конец файла, перед закрывающим ?> (после него писать ничего нельзя):

// старт текстового блока info
function info_box($atts, $content) {
     if (!isset($atts[name])) {
			$sp_name = 'Внимание';
		} else {
			$sp_name = $atts[name];
		}
     return '<div class="infobox">
	 <div class="infobox-head">'.$sp_name.'</div>
	 <div class="infobox-content">'.$content.'</div></div>';
}
add_shortcode('info', 'info_box');
// конец текстового блока info

Сохранили изменения и закачали на ftp назад с подменой старого файла, т.к. он уже не актуален. После этого обновите свой сайт в браузере и убедитесь что он работает. Если все нормально, значит Вы вставили код в нужно место и не нарушили целостность системы. Если же есть какие то проблемы, то внимательно проверьте место вставки кода и повторите все сначала.

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

Расшифровка написанного

• info_box – это название функции, которое стоит в двух местах (в самом начале и конце кода). Оно может быть произвольным, но делайте понятным для себя. Обязательно на латинице. Допустим, Вы будете делать блок для скачивания чего либо, тогда можно заменить info_box на download-box, либо еще как назвать.
• $sp_name = ‘Важная информация’ – данная конструкция отвечает за текст заголовка формы, который выводится по умолчанию, если Вы ему не назначили другое имя. В моем примере текстового блока в самом начале статьи так же стоит такой текст по умолчанию, но, благодаря коду $sp_name=$atts[name];, у меня есть возможность в каждом конкретном случае называть блок любым именем, как я и сделал выше: “Пример шорткода на mojWP.ru”. Как назначать произвольное имя я расскажу ниже, а теперь Вы можете заменить фразу, выводимую по умолчанию на произвольную.
• div class=”infobox” – здесь Вы можете менять слово infobox на произвольное. Опять же, старайтесь делать запоминающееся, чтобы не запутаться в будущем. Данная конструкция позволит нам в последующем оформить внешний вид текстового блока (рамка, цвет, картинка, выравнивание и размеры).
• div class=”infobox-title” – здесь так же можно менять название класса infobox-title. В данном случае он будет отвечать за оформление заголовка “Пример шорткода на mojWP.ru” (размер, шрифт, цвет, отступ и прочее).
• div class=”infobox-content” – как и в предыдущих двух пунктах меняем на усмотрение название класса. Отвечает данная конструкция за оформление основного контента.
• add_shortcode(‘info’, ‘info_box’) – здесь нам важно слово info, которое стоит сразу же после открывающей скобки. Именно оно будет вызывать всю конструкцию в нужном нам месте. А сама эта строчка регистрирует наш шорткод в системе

На этом с разбором каркаса закончили. Теперь Вы знаете что можно менять, чтобы сделать несколько заготовок. Переходим к следующему шагу – оформлению.

Шаг №2: оформление дизайна текстового блока

Чтобы все оформить красиво, нам понадобится файл стилей Вашего шаблона, который лежит в папке этого самого шаблона и имеет расширение .css. Обычно его так и называют style.css. Делаем его резервную копию на всякий случай и открываем в текстовом редакторе. Далее идем вниз до самого конца и в новую строку вставляем следующий код:

/* оформляем внешний каркас */
.infobox {
 background: #E2F8DE url(images/info.png) no-repeat;
 border: 1px solid #0975B5;
 padding: 3px 5px 3px 30px;
 margin: 10px;
 text-align: justify;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 -o-border-radius: 5px;
 -khtml-border-radius: 5px;
 border-radius: 5px;
}
/* оформляем заголовок формы */
.infobox-head {
 font-size:24px;
 color:#0D7BB8;
 margin: 0 0 5px 0;
}
/* оформляем основной контент */
.infobox-content {
 line-height: 1.3em;
}

Как видите, здесь представлены три блока, которые мы будем оформлять. Именно такие названия указаны в коде из Шаг №1. Поэтому, если что-то меняете там в названии классов, то меняете и в этом коде, чтобы все работало правильно.

Что здесь можем менять:

• background: #E2F8DE url(images/info.png) no-repeat; – задаем фон для всего каркаса: #E2F8DE отвечает за цвет фона; url(images/info.png) отображает картинку, которая у меня представлена в виде лампочки и лежит в папке /images/ с шаблоном, о чем говорит путь images/info.png; no-repeat говорит о том, что лампочка не будет дублироваться и заполнять собой все пространство, а тихонечко постоит в углу. В случае чего можете скопировать мою лампочку и закинуть к себе в шаблон.
• border: 1px solid #0975B5; – отвечает за рамку (бордюр) вокруг формы: 1px – это толщина в пикселях (можете менять по своему усмотрению); solid говорит о том, что рамка будет непрерывной; #0975B5 – это цвет, как и в случае с background мы задаем необходимый нам.
• padding: 3px 5px 3px 30px; – внутренний отступ контента и текста. Здесь цифры в пикселях соответственно обозначают отступ: сверху справа снизу слева. Данная штука позволяет не сливаться тексту с рамкой и сохранять дистанцию. Вы так же сами подстраиваете данный параметр под себя.
• margin: 10px; – это уже внешний отступ. Он обозначает, что вокруг формы ничто не будет ближе, чем 10px, т.е. ничто не “наедет” на выводимый текстовый блок. Хоть здесь стоит один параметр 10px, но он работает так же как и у предыдущего padding. Если у Вас везде одинаковая цифра, то можно ее указать один раз, вместо четырех повторений (сверху справа снизу слева). Поэкспериментируйте.
• text-align: justify; – а вот это позволяет выравнивать текст по всей ширине поля, т.е. не будет “ступеней” строк справа. Если Вам это не нужно, то можете удалить строку.
• -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; – это все вместе отвечает за скругление углов текстового блока. Спрашиваете, почему так много? Ответ очень простой: у нас много браузеров, с которых могут зайти на сайт (FireFox, Chrome, Opera, InternetExplorer, Safari и прочие) и все они имеют разный код обработки. Именно поэтому приходится учитывать эти особенности и добавлять дополнительные строки. Если меняете цифру в одном месте, то необходимо сменить везде, чтобы отображалось одинаково для всех.

Следующий блок infobox-head позволяет настроить оформление заголовка.

• font-size:24px; – размер шрифта в пикселях. Подбирайте под себя, пока не достигните желаемого результата.
• color:#0D7BB8; – цвет шрифта. Сейчас он синего цвета, но меняйте на тот, который будет гармонично смотреться у Вас на сайте.
• margin: 0 0 5px 0; – об этом говорили выше. Здесь он позволяет сделать снизу отступ от основной части текста.

И последний блок infobox-content, который отвечает за внешний вид основного текста (контента). Его можно было вообще не оформлять, а оставить таким, как он выводится по умолчанию на Вашем сайте. Однако следует учитывать, что кто-то может сделать задний фон текстового блока отличного цвета от стандартного по всему сайту, ввиду чего шрифт станет нечитабельным. В этом случае мы всегда можем назначить ему свой цвет:

• line-height: 1.3em; – междустрочный интервал, на случай, если по умолчанию слишком большой или маленький.

В этом же пункте можно применять все параметры, которые описывались чуть выше (цвет, отступ, выравнивание и прочее).

Все на этом. Сохраним файл и пробуем вывести текстовый блок, который только что создали.

Шаг №3: выводим текстовый блок в статье

Чтобы поместить необходимый текст в блок, нам необходимо воспользоваться созданным на первом шаге шорткодом и выглядель будет вот так:

[info]произвольный текст[/info]

 




В этом случае отобразится наш блок со стандартным заголовком “Важная информация” (смотреть Шаг №1). Но мы можем выводить свой заголовок, который будет более уместен в каждой конкретной ситуации. Добавляем параметр name в шорткод:

[info name="Заголовок"]произвольный текст[/info]

Поздравляю Вас! Вы сделали все сами и теперь можете использовать шаблоны текстовых блоков в статьях. Главное не переборщите, чтобы статья не превратилась в сплошные разноцветные формы.

Шаг №4: послесловие

Здесь хотелось бы дать Вам небольшую подсказку, как можно быстро узнать цвет необходимого Вам элемента на сайте или компьютере и получить его код в формате #333444. В этом нам поможет программа FastStone Capture, у которой есть “Пипетка”. Разберитесь и она облегчит Вам работу в качестве блогера и вебмастера.

А теперь ссылка на плагин, который выводит аналогичные блоки Special Text Boxes.

Источник