テキストハイライター（蛍光ペン）のプラグイン

テキストを好みの色に蛍光処理をする簡単な WordPress プラグインを作ってみました。 Simple Text Highlighter Shortcode Plugin を用意しました WordPressは非常に軽いプラグインでテキストをハイライト（ハイライト）するショートコードを提供します。 ショートコードを追加して、好きなスタイルでテキストを強調表示することもできます。

[この記事はずっと前に書かれていましたが、コードを改善して2023年4月26日に再発行されました。 ]

テキストハイライター（蛍光ペン）のプラグイン

インストール方法

• 以下のコードをコピーしてテーマの関数ファイル（のfunctions.phpに貼り付けます。 必ず チャイルドテーマをインストールして作業します。
• CSSコードは ルックス » カスタマイズ » 追加 CSSに追加するか、チャイルドテーマフォルダ内のスタイルシートファイル（style.cssの）に追加します。

使用方法

ショートコード[high]と[/ high]を使用してテキストをハイライト処理することができます。

例：

• [high]テキスト[/ high] - > 基本的に黄色でハイライトします。
• [high color = "red" bg = "blue"]テキスト[/ high] - > 青でハイライトして、テキストの色を赤に設定します。
• [high bg = "grey" color = "white" size = "20px" left = "5px"]テスト[/ high] - > Background color：grey、Text-color：white、Text-size：20px、Padding-left：5px

サポートされる属性者：

• bg = background-color
• color = text-color
• padding = padding
• size = text-size
• left = padding-left
• right = padding-right
• top = padding-top
• bottom = padding-bottom
• border = border
• bbotom = border-bottom
• radius = border-radius
• weight = font-weight
• height = line-height

非常に単純なショートコードプラグインであるため、すべての環境で問題なく動作します。 問題がある場合コメントにご連絡ください。

アップデート：

属性が追加され、スタイルが指定されたプリセット（Preset）が追加されました。

• 【pcode] wp_redirect（）[/ pcode] => wp_redirect（）
• [kbd] Ctrl + C [/ kbd] => Ctrlキー+ C
• 【navytext]文章や語句[/ navytext] => 文章や語句

プラグインコード

以下のコードをコピーして使用しています WordPress テーマの関数ファイルに追加してください。

/*
Plugin Name: Simple Text Highliter Shortcode
Plugin URI: https://www.thewordcracker.com/
Description:
Author: WordCracker
Version: 1.3
Author URI: https://www.thewordcracker.com/
*/

function highlighter_span_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'color' => '',
        'bg' => 'yellow',
        'size' => '',
        'padding' => '',
        'left' => '',
        'right' => '',
        'top' => '',
        'bottom' => '',
        'border' => '',
        'bbottom' => '',
        'radius' => '',
        'weight' => '',
        'height' => ''
    ), $atts);

    $style = '';
    foreach ($atts as $key => $value) {
        if (!empty($value)) {
            $style .= "{$key}:{$value};";
        }
    }

    return '<span class="highlighter" style="' . $style . '">' . $content . '</span>';
}
add_shortcode('high', 'highlighter_span_shortcode');

function code_formatting($atts, $content = null) {
    return '<span class="codeformatting">' . $content . '</span>';
}
add_shortcode('pcode', 'code_formatting');

function keyboard_shortcuts_formatting($atts, $content = null) {
    return '<span class="keyboardshortcode">' . $content . '</span>';
}
add_shortcode('kbd', 'keyboard_shortcuts_formatting');

function navytext_formatting($atts, $content = null) {
    return '<span class="navytext">' . $content . '</span>';
}
add_shortcode('navytext', 'navytext_formatting');

以下のCSSコードをテーマのスタイルシートファイルに追加するか、 WordPress 管理者ページ » ルックス » カスタマイズ » 追加 CSSに追加してください。

/* 하이라이터 プラグイン */

.highlighter {
    display: inline;
}

.codeformatting {
    padding: 2px 4px;
    font-size: .95em;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}

.keyboardshortcode {
    display: inline-block;
    padding: 3px 5px;
    font-size: .85em;
    line-height: 14px;
    color: #333;
    background-color: #fcfcfc;
    border: 1px solid #ccc;
    border-bottom-width: 2px;
    border-radius: 3px;
    box-shadow: inset 1px -1px 1px #fff, inset -1px 1px 1px #fff;
}

.navytext {
    color: #ffffff;
    background-color: #006699;
    font-weight: bold;
}

既存のコードをチャットGPTを活用して改善しました。 インラインで追加されたCSSコードを分離しました。

2023年4月26日アップデート：

上記のコードは安全ですが、 esc_html() と esc_attr() 関数を追加してコンテンツとスタイルの値をエスケープさせました。 これにより、悪意のあるHTMLやJavaScriptコードの実行可能性を防ぎ、プラグインのセキュリティが向上しました。

/*
Plugin Name: Simple Text Highliter Shortcode
Plugin URI: https://www.thewordcracker.com/
Description:
Author: WordCracker
Version: 1.4
Author URI: https://www.thewordcracker.com/
*/

function highlighter_span_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'color' => '',
        'bg' => 'yellow',
        'size' => '',
        'padding' => '',
        'left' => '',
        'right' => '',
        'top' => '',
        'bottom' => '',
        'border' => '',
        'bbottom' => '',
        'radius' => '',
        'weight' => '',
        'height' => ''
    ), $atts);

    $style = '';
    foreach ($atts as $key => $value) {
        if (!empty($value)) {
            $style .= "{$key}:" . esc_attr($value) . ";";
        }
    }

    return '<span class="highlighter" style="' . $style . '">' . esc_html($content) . '</span>';
}
add_shortcode('high', 'highlighter_span_shortcode');

function code_formatting($atts, $content = null) {
    return '<span class="codeformatting">' . esc_html($content) . '</span>';
}
add_shortcode('pcode', 'code_formatting');

function keyboard_shortcuts_formatting($atts, $content = null) {
    return '<span class="keyboardshortcode">' . esc_html($content) . '</span>';
}
add_shortcode('kbd', 'keyboard_shortcuts_formatting');

function navytext_formatting($atts, $content = null) {
    return '<span class="navytext">' . esc_html($content) . '</span>';
}
add_shortcode('navytext', 'navytext_formatting');

メモ：

• WordPressでカラーテキストボックスを作成する方法
• WordPress 小見出しスタイルを変更する（Avada, Enfold, Newspaper テーマ外）