Одним из важных моментов в написании статьи является ее визуальное оформление. Это необходимо для удобного чтения, и в целом восприятия подачи материала. Допустим, когда в предложении нужно сделать акцент на главные слова, то они выделяются жирным шрифтом или подчеркиванием. Но когда нужно акцентировать целый абзац, простое выделение уже не столь приемлемое решение. Будет лучшим вариантом оформить текст определенным стилем в зависимости от его степени оповещения.
На WordPress’e есть несколько плагинов, с помощью которых можно реализовать подобное выделение текста. Они больше подходят тем, кто совсем плохо разбирается в CSS, и плохо знаком с платформой. Почему? Потому что это очень легко делается без плагина своими силами. По сути, такое оповещение, или как еще их можно назвать «заметки» состоят из одних стилей CSS. А для полного удобства добавляются кнопки в HTML редактор WordPress, чтобы каждый раз не утруждать себя в написании HTML разметки.
В создании заметок я хотел обойтись только одними средствами CSS, включая и иконок. Но тогда не обошлось бы без подключения шрифта Font Awesome. Поэтому пришлось ограничиться и воспользоваться графическими иконками, которые можно скачать в конце статьи так же, как и исходник в формате AI (Illustrator).
Установка
Первым делом пропишем сразу стили оформления внешнего вида. Нужно открыть файл style.css, он находится внутри вашей текущей темы. Затем в самом низу добавляем следующий код:
/*стили заметок*/
.shortcodestyle {
font: 14px arial;
line-height: 1.4;
padding: 15px 15px 15px 75px;
word-wrap: break-word;
border-radius: 2px;
clear: both;
margin: 10px auto;
max-width: 660px;
position: relative;
text-decoration:none;
}
/*Внимание*/
.warning {
background: #fff2b8 url("images/warning.png") no-repeat scroll 15px 50%;
border-bottom: 2px solid #EAD18C;
color: #4F2012;
}
.warning a {
color: #D15225;
}
/*Информация*/
.info {
background: #bae5f8 url("images/info.png") no-repeat scroll 15px 50%;
border-bottom: 2px solid #9BBFC4;
color: #0F2B33;
}
.info a {
color: #216CAF;
}
/*Важно*/
.important {
background: #ffcaca url("images/important.png") no-repeat scroll 15px 50%;
border-bottom: 2px solid #f4a9a9;
color: #330D0D;
}
.important a {
color: #ff3a37;
}
/*Совет*/
.advice {
background: #ccfacc url("images/advice.png") no-repeat scroll 15px 50%;
border-bottom: 2px solid #b1dbb1;
color: #0b280b;
}
.advice a {
color: #5E9800;
}
/*Нейтральность*/
.neutrality {
background: #f5f5f5 url("images/neutrality.png") no-repeat scroll 15px 50%;
border-bottom: 2px solid #dfdfdf;
color: #222;
}
.neutrality a {
color: #5587c4;
}
Вторым делом добавим в HTML редактор свои кнопки. Открываем файл functions.php и в конце перед знаком ?> помещаем вот такой код:
//Кнопки в редактор
if( !function_exists('my_buttons') ){
function my_buttons()
{ ?>
<script type="text/javascript">
QTags.addButton( 'warning', 'Внимание', '<div class="warning shortcodestyle">', '</div>' );
QTags.addButton( 'info', 'Инфо', '<div class="info shortcodestyle">', '</div>' );
QTags.addButton( 'important', 'Важно', '<div class="important shortcodestyle">', '</div>' );
QTags.addButton( 'advice', 'Совет', '<div class="advice shortcodestyle">', '</div>' );
QTags.addButton( 'neutrality', 'Нейтрал', '<div class="neutrality shortcodestyle">', '</div>' );
</script>
<?php }
add_action('admin_print_footer_scripts', 'my_buttons');
}
Здравствуйте, спасибо за статью. Меня интересует с помощью какого кода вывести эти блоки в страницу сайта, тоесть в статью?
Здравствуйте! Если вы хотите прописывать их вручную, то во второй части кода видно какие классы отвечают, пример,
<div class="warning shortcodestyle"></div>. А вообще, после установки всего кода в нужные файлы, появятся кнопки в HTML-редакторе статьи, где вам нужно будет лишь на нее нажать, чтобы добавить нужный класс.WordSmall, Понятно, спасибо за ответ!
Сделал все как положено, но кнопки в редакторе не появились. В чем может быть проблема?
Александр, Кнопки должны были появиться. Посмотрите по внимательнее. В редакторе есть два режима: Визуально, Текст. Кнопки будут видны в режиме «Текст».
WordSmall, Ага все появились, еще раз спасибо
Александр, Не за что! Рад был помочь
Спасибо за статью!
А куда залить иконки?
sveta, здравствуйте! Внутри вашей темы должна быть папка «images» или «img» , можете залить сюда. Только обращайте внимание, чтобы здесь
background: #fff2b8 url("images/warning.png") no-repeat scroll 15px 50%;был указан правильный путь к картинке.WordSmall, Спасибо!
Спасибо за полезный материал! Прекрасная замена плагину. Уже внедрил в шаблон. При первой же возможности опробую в статье.
А можно для тех, у кого подключен скрипт FA дополнить статью соответствующими стилями?
Спасибо на добромм слове) Можно, почему нет. У меня пока нет на это время, но со временем дополню.
Вадим, покажу на примере одного блока, а там просто продублируйте и изменете классы, ну и стили, есле нужно.
.info { background: #bae5f8; border-bottom: 2px solid #9BBFC4; color: #0F2B33; } .info::before { width: 50px; position: absolute; content: "\f00d"; font-family: 'FontAwesome'; font-size: 40px; left: 13px; top: 50%; display: inline-block; line-height: 48px; height: 50px; border-radius: 50%; background: #fff; text-align: center; color: #002b3e; margin-top: -0.625em; }Добрый день. Вставил код, но выдает синтаксическая ошибка
Здравствуйте. В коде ошибок нет. Смотрите, в правильное место ли вставили.
Спасибо большое за шикарную реализацию такого полезного функционала. Если бы эти блоки можно было ещё в визуальном режиме делать — было бы вообще круто. Но ваше решение — великолепно. Несколько строк — и всё )
Удачи!
Спасибо на добром слове) Рад, что этот материал оказался для вас полезным.