概要説明
おすすめやワンポイントアドバイス、補足説明を強調して表示したい際に使うカスタマイズ。ショートコード内にスタイル定義を含めているのでサイトに合わせて調整いただけます。
補足説明など強調した時に活用
functions.php
/*----------------------------------------------------
おすすめなど強調した時に活用
----------------------------------------------------*/
add_shortcode( 'one_point', 'SCFstyleOnePoint' );
function SCFstyleOnePoint( $atts ) {
extract( shortcode_atts( array(
'title' => '',
'msg' => '',
'color' => '#85db8f'
), $atts) );
global $f_point_cnt;
if (!isset($f_point_cnt)) {
$f_point_cnt = 1;
} else {
$f_point_cnt++;
}
$msg = str_replace('<', '<',$msg);
$msg = str_replace('’', '', $msg);
$msg = str_replace('′', '', $msg);
$title = str_replace('’', '', $title);
$title = str_replace('′', '', $title);
$color = str_replace('’', '', $color);
$color = str_replace('′', '', $color);
$html =<<<EOS
<style type="text/css">
.fpoint{$f_point_cnt} {
position: relative;
border: 1px solid #eee;
border-radius: 4px;
margin:50px auto!important;
}
.fpoint{$f_point_cnt} {
border-color: {$color}!important;
padding: 20px 25px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.fpoint{$f_point_cnt}:before {
position: absolute;
font-weight: bold;
background: #fff;
color: #555;
line-height: 0;
letter-spacing: 0;
font-size: 20px;
top: -21px;
padding: 20px 8px 20px 0px;
}
.fpoint{$f_point_cnt}:before {
content: "{$title}"!important;
color: {$color}!important;
}
</style>
<p class="fpoint{$f_point_cnt}">{$msg}</p>
EOS;
return $html;
}
動作サンプル ( 一部タグも使用可能 )
ショートコード
[one_point title="サンプル1" msg="カラー指定なし"]
カラー指定なし
ショートコード
[one_point title="サンプル2" msg="カラー指定あり" color="#ff0000"]
カラー指定あり
ショートコード
[one_point title="サンプル3" msg="カラー指定あり<br>改行あり" color="#b0cfd2"]
カラー指定あり
改行あり
注意事項 – ダブルクオーテーション「”」に注意
テキスト内にダブルクオーテーションは使えません
