WordPress ワンポイントメッセージ表示ショートコード

広告WordPress・PHP を学べる本

Amazonのアソシエイトとして、WordPress functions.phpは適格販売により収入を得ています。

概要説明

おすすめやワンポイントアドバイス、補足説明を強調して表示したい際に使うカスタマイズ。ショートコード内にスタイル定義を含めているのでサイトに合わせて調整いただけます。

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 の &lt; を < に戻してからそのまま出していたので、投稿者がショートコードの属性にスクリプトを書けてしまう状態でした。色と見出しも、そのまま 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"]

カラー指定あり
改行あり

注意事項 – ダブルクオーテーション「”」に注意

テキスト内にダブルクオーテーションは使えません

関連機能

  1. アイキャッチ画像の設定機能を追加したい場合

  2. 同じ部品の見出しを場所ごとに変える:get_template_part の 3 つ目の引数 $args の使い方

  3. DBキャッシュ機能を実装 外部データなど任意の情報を一定期間キャッシュさせる

サイドバー

よく使うカスタマイズ

最近の記事

Profile

PAGE TOP