wordpressで枠で文字列を囲んで強調するためのショートコードを作る

    >


枠で文字列を装飾したい、強調表示したいなーと思ったこと、あると思います。
いちいち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]

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



お困りですか?この記事で紹介していることをマンツーマンで指導、解説、代行します。まずはお気軽にお問い合わせください。


Close Menu