Доктор Лексиум
Главная » Блог » Как усовершенствовать тему WordPress
https://www.lexium.ru/2012/11/kak-usovershenstvovat-temu-wordpress/

Как усовершенствовать тему WordPress

Давно хотел сделать такие хитрые текстовые блоки, чтобы посты были нагляднее: цитата, на заметку, внимание.

Вот, что из этого получилось.

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

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

Я не дизайнер, но то, что получилось, мне нравится.

Секрет фокуса

Вам наверное интересно, как же это делается?

Если вы совсем не владеете версткой, то проще всего попросить спеца (вроде меня). Так вы не угробите сайт.

Если владеете, то будем править два файла темы: style.css и functions.php

Весь фокус в том, что нам нужно обрамить нужный текст тэгами DIV с соответствующими классами. Затем этим классам задать стили в файле стилей.

В начале нужного абзаца ставим открывающий шоткод, в конце — закрывающий. Их скрипт сайта и заменит на тэги.

Вот так.

[citata]Цитата[/citata]
[zam]На заметку[/zam]
[warn]Обратите внимание[/warn]

Еще, в моем случае, понадобятся маленькие картинки.

Приступим

Начнем с картинок (если они будут использоваться). Добудем (нарисуем) их заранее, а так же продумаем дизайн блоков. Для себя я выбрал блоки с закругленными краями, рамкой, заливкой и разными шрифтами.

Затем пишем тестовый пост и расставляем шоткоды.

После этого лезем в functions.php через опцию «Внешний вид»->»Редактор». Добавляем туда такую функцию.

/* =========== Мои шоткоды ============= */
add_shortcode("citata", "code_citata");
function code_citata($atts, $content=""){
	return '<!--noindex--><div class="citata">'.$content.'</div><!--/noindex-->';
}

add_shortcode("zam", "code_zam");
function code_zam($atts, $content=""){
	return '<div class="zam">'.$content.'</div>';
}

add_shortcode("warn", "code_warn");
function code_warn($atts, $content=""){
	return '<div class="warn">'.$content.'</div>';
}
/* ==============  =============== */

Теперь переходим в файл стилей style.css и задаем блокам с классами citata, zam и warn, нужный внешний вид.

Всё сохраняем, смотрим. Если что-то не нравится, лезем в стили и исправляем.

Вот так это работает.

Разумеется, по аналогии, можно насоздавать целую кучу подобных блоков на все случаи жизни. Главное потом не забыть шоткоды.)) Так что действуйте, экспериментируйте, улучшайте тему вашего сайта на WordPress.

А с вами был доктор Лексиум.
До новых встреч в глобальной сети!)

Напишите комментарий