Классы выделения текста служат для графического оформления некоторых блоков текста. В зависимости от смысловой составляющей классы могут быть: информация (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%;}
}

Поделиться в соц. сетях: