Site icon Vavik96

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

admin

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

[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 назад с подменой старого файла, т.к. он уже не актуален. После этого обновите свой сайт в браузере и убедитесь что он работает. Если все нормально, значит Вы вставили код в нужно место и не нарушили целостность системы. Если же есть какие то проблемы, то внимательно проверьте место вставки кода и повторите все сначала.

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

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

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

Шаг №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. Поэтому, если что-то меняете там в названии классов, то меняете и в этом коде, чтобы все работало правильно.

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

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

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

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

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

 

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

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

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

 




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

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

 

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

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

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

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

Источник

Exit mobile version