概要説明
おすすめやワンポイントアドバイス、補足説明を強調して表示したい際に使うカスタマイズ。ショートコード内にスタイル定義を含めているのでサイトに合わせて調整いただけます。
補足説明など強調した時に活用
functions.php
/*----------------------------------------------------
おすすめなど強調した時に活用
----------------------------------------------------*/
add_shortcode( 'one_point', 'SCFstyleOnePoint' );
function SCFstyleOnePoint( $atts ) {
$atts = shortcode_atts( array(
'title' => '',
'msg' => '',
'color' => '#85db8f',
), $atts );
static $count = 0;
$count++;
$quotes = array( '’', '′' ); // 引用符の変換の残りを消す
// msg は <br> などの安全なタグだけを残す(<script> などは消える)
$msg = wp_kses_post( html_entity_decode( str_replace( $quotes, '', $atts['msg'] ), ENT_QUOTES, 'UTF-8' ) );
// 色は #000000 の形だけ受け付ける
$color = sanitize_hex_color( str_replace( $quotes, '', $atts['color'] ) );
if ( ! $color ) {
$color = '#85db8f';
}
// 見出しは CSS の content に入れるので、引用符・逆スラッシュ・山かっこ・改行を消す
$title = str_replace( array_merge( $quotes, array( '"', '\\', '<', '>', "\r", "\n" ) ), '', wp_strip_all_tags( html_entity_decode( $atts['title'], ENT_QUOTES, 'UTF-8' ) ) );
$class = 'fpoint' . $count;
return '<style>'
. '.' . $class . '{position:relative;border:1px solid ' . $color . ';border-radius:4px;margin:50px auto!important;padding:20px 25px;box-sizing:border-box;}'
. '.' . $class . ':before{content:"' . $title . '";position:absolute;font-weight:bold;background:#fff;color:' . $color . ';line-height:0;letter-spacing:0;font-size:20px;top:-21px;padding:20px 8px 20px 0;}'
. '</style>'
. '<p class="' . $class . '">' . $msg . '</p>';
}
以前のコードは、msg の < を < に戻してからそのまま出していたので、投稿者がショートコードの属性にスクリプトを書けてしまう状態でした。色と見出しも、そのまま style の中に入っていました。msg は安全なタグ(br など)だけを残し、色は #000000 の形だけ、見出しは引用符や山かっこを消す形に直しました(2026/10/18・作業環境で、悪い値を入れてもスクリプトが出ないことを確かめています)。
動作サンプル ( 一部タグも使用可能 )
ショートコード
[one_point title="サンプル1" msg="カラー指定なし"]
カラー指定なし
ショートコード
[one_point title="サンプル2" msg="カラー指定あり" color="#ff0000"]
カラー指定あり
ショートコード
[one_point title="サンプル3" msg="カラー指定あり<br>改行あり" color="#b0cfd2"]
カラー指定あり
改行あり
注意事項 – ダブルクオーテーション「”」に注意
テキスト内にダブルクオーテーションは使えません


