WordpressでおしゃれなボックスデザインのCSSを実装する

枠で文字列を装飾したい、強調表示したいなーと思ったこと、あると思います。いちいちCSSとHTMLを書くのも億劫なので、ショートコードで簡単に枠が作れるようにしたいと思います。

CSSを読み込む

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');

子テーマの/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;
}

ショートコードを登録する

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') ;

検証する

さて、無事表示されるか確認してみましょう。

新しい記事を作成し、以下を貼り付けてください。

<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]

"記事をプレビュー"すると、きちんと枠が表示されているはずです。