Классы выделения текста служат для графического оформления некоторых блоков текста. В зависимости от смысловой составляющей классы могут быть: информация (info), результат (success), предупреждение (warn), ошибка (error), вопрос (quest).
Важный текст
[info]]Важный текст[[/info]
<p class="notice info"><i class="fa fa-info-circle"></i>Важный текст</p>
Важная информация
<p class="notice success"><i class="fa fa-check-circle"></i> Важная информация</p>
Риторический вопрос
<p class="notice quest"><i class="fa fa-question-circle"></i> Риторический вопрос</p>
Вы забанены
<p class="notice error"><i class="fa fa-times-circle"></i> Вы забанены</p>
Тема прошла модерацию
<p class="notice warn"><i class="fa fa-exclamation-circle"></i> Тема прошла модерацию</p>
Добавление шорткода стиля выделения текста, в functions.php
обычный вывод стиля
function noticewarn( $atts, $content = null ) { return '<p class="notice warn"><i class="fa fa-exclamation-circle"></i>'.$content.'</p>'; } add_shortcode( 'warn', 'noticewarn' );
показывать исполнение шорткода только авторам данного поста
function noticewarn( $atts, $content = null ) { if ( current_user_can( 'publish_posts' ) ) return '<p class="notice warn"><i class="fa fa-exclamation-circle"></i>'.$content.'</p>'; return ''; } add_shortcode( 'warn', 'noticewarn' );
показывать исполнение шорткода только зарегистрированным пользователям
function noticewarn( $atts, $content = null ) { if ( is_user_logged_in() && !is_null( $content ) ) return '<p class="notice warn"><i class="fa fa-exclamation-circle"></i>'.$content.'</p>'; return ''; } add_shortcode( 'warn', 'noticewarn' );
Стили CSS классов выделения текста
/* Классы выделения текста */ .notice { float: left; display: table; padding: 10px 5% 10px 0 !important; border-radius: 6px; width: 100%; position: relative; margin: 10px 0; box-sizing: border-box; } .notice .fa { width: 10%; font-size: 20px; text-align: center; display: table-cell; vertical-align: middle; } .notice p { width: 90%; float: left; } .notice-info { background-color: #CFE3FD; color: #124892; border: 1px solid #63A6F9; } .notice-success { background-color: #D9F59F; color: #266C2B; border: 1px solid #8CE267; } .notice-error { background-color: #FCD9D4; color: #981C0A; border: 1px solid #EC7F6E; } .notice-warn { background-color: #FFEEAA; color: #9C5B00; border: 1px solid #EFBE42; } .notice-quest { background-color: #CECAFD; color: #000279; border: 1px solid #817EFC; } @media (max-width:800px) { .notice {padding: 5%;} .notice .fa {width: 20%; font-size: 14px;} .notice p {width: 80%;} }[site-socialshare]