Stilvolles CSS-Box-Design in WordPress anwenden

Ich denke, es gibt Zeiten, in denen Sie Text mit Rahmen dekorieren oder ihn hervorheben möchten. Da es mühsam ist, jedes Mal CSS und HTML zu schreiben, möchte ich es einfach machen, Rahmen mit Shortcodes zu erstellen.

CSS laden

functions.php

function load_import_css() {
    wp_enqueue_style( "import_style", get_stylesheet_directory_uri()."/css/main.css", false );
}
add_action('wp_enqueue_scripts', 'load_import_css');

Child-Theme’s /css/main.css

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

.isa_info, .isa_success, .isa_warning, .isa_error {
margin: 10px 0px;
padding:12px;

}
.isa_info {
    color: #00529B;
    background-color: #BDE5F8;
}
.isa_success {
    color: #4F8A10;
    background-color: #DFF2BF;
}
.isa_warning {
    color: #9F6000;
    background-color: #FEEFB3;
}
.isa_error {
    color: #D8000C;
    background-color: #FFD2D2;
}
.isa_info i, .isa_success i, .isa_warning i, .isa_error i {
    margin:10px 22px;
    font-size:2em;
    vertical-align:middle;
}

Shortcodes registrieren

functions.php

//
// CSS Message Boxes With CSS3
//

function info($attr){
  return '<div class="isa_info"><i class="fa fa-info-circle"></i>' . $attr[0] . '</div>' ;
}

add_shortcode('info','info') ;

function warn($attr){

  // return '<div class="isa_warning"><i class="fa fa-warning-circle"></i>'. $attr[0] .'</div>' ;
  return '<div class="isa_warning"><i class="fa fa-warning"></i>'. $attr[0] .'</div>' ;
}

add_shortcode('warn','warn') ;

function succ($attr){

  // return '<div class="isa_warning"><i class="fa fa-warning-circle"></i>'. $attr[0] .'</div>' ;
  return '<div class="isa_success"><i class="fa fa-check"></i>'. $attr[0].'</div>'  ;
}

add_shortcode('succ','succ') ;

Überprüfen

Nun, lassen Sie uns überprüfen, ob es korrekt angezeigt wird.

Erstellen Sie einen neuen Artikel und fügen Sie Folgendes ein:

<div class="isa_info"><i class="fa fa-info-circle"></i>Replace this text with your own text.</div>
[info hogehoge]
[warn fuga]
[succ hoge]

Wenn Sie “Artikel in der Vorschau anzeigen”, sollten die Rahmen ordnungsgemäß angezeigt werden.