WordPress テキストを強調表示する - テキストハイライター（蛍光ペン）プラグイン

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

WordPressが更新され、ブロックエディタにテキストを強調表示する機能が追加されました。 プラグインを使用する代わりに、ブロックエディタのハイライト機能を使用することも可能です。

また、ショートコードを作成してテキストの半分の高さ（または1/3の高さなどの希望の高さで指定）のみを強調表示して蛍光ペン効果を適用することもできます。 この部分については、下の「テキストの半分の高さだけを蛍光ペンで強調表示する」を参照してください。

WordPress ブロックエディタの強調機能

WordPressの基本エディタであるブロックエディタ（Gutenberg エディタ）が更新され、テキストを強調表示する機能が追加されました。

強調表示したいテキストを選択し、 もっと見る アイコン（矢印で表示）をクリックして、 強調を選択します。

テキストと背景色を指定すると、選択したテキストが強調表示されます。

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

インストール方法

• Naver カフェからプラグインファイルをダウンロードして直接インストールするか、以下のコードをコピーしてテーマの関数ファイル（の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] => 文章や語句

プラグインのダウンロード：

プラグインファイル Naver カフェからダウンロードできます。 プラグインで作ったのですが、とてもシンプルな機能を持つプラグインなので、サイトの速度には影響しません。

自分で実装したい場合は、下記の「2023年9月28日更新」部分のコードを チャイルドテーマの関数ファイルに追加してください。

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

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

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

2023年9月28日アップデート：

チャットGPTを使用してコードを改善する過程で重要な部分が欠落しており、コードが正しく機能しませんでした。 これで、コードが正常に動作するように問題になる部分を修正しました。 次のコードをチャイルドテーマの関数ファイルに追加します。 （コードを直接テーマ関数ファイルに追加し、CSSコードを追加するのが難しいと感じた場合 Naver カフェからプラグインインストールファイルをダウンロードしてインストールしてください。）

/*
Plugin Name: Simple Text Highliter Shortcode
Plugin URI: https://www.thewordcracker.com/
Description: A plugin to provide shortcodes for text highlighting and formatting.
Author: WordCracker
Version: 1.5
Author URI: https://www.thewordcracker.com/
*/


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

    // Map shortcode parameters to their respective CSS properties
    $css_map = array(
        'bg' => 'background-color',
        'color' => 'color',
        'padding' => 'padding',
        'size' => 'font-size',
        'left' => 'padding-left',
        'right' => 'padding-right',
        'top' => 'padding-top',
        'bottom' => 'padding-bottom',
        'border' => 'border',
        'bbottom' => 'border-bottom',
        'radius' => 'border-radius',
        'weight' => 'font-weight',
        'height' => 'line-height'
    );

    // Construct the style string based on provided attributes
    $style = '';
    foreach ($atts as $key => $value) {
        if (!empty($value) && isset($css_map[$key])) {
            $style .= "{$css_map[$key]}:" . esc_attr($value) . ";";
        }
    }

    // Return the styled content
    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');

そして、以下の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;
}

テキストの半分の高さだけを蛍光ペンで強調表示する

テキストの半分の高さだけが蛍光ペンで強調表示したい場合 この記事で提示するコードを応用できます。

私は次のショートコードを作成して使用しています。 チャイルドテーマ 内の関数ファイルに追加します。

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

カスタムCSS追加ボックスに次のコードを追加します。 （チャイルドテーマ内のstyle.cssファイルに追加するか、通知パネルの追加のCSSセクションに追加します。）

.yellowhighlightery {
background: linear-gradient(to top, yellow 50%, transparent 50%);
}

50％は下から1/2の高さのみを強調表示します。 1/4の高さを強調表示するには、50％を25％に変更します。

これで、次のショートコードを使用できます。

[highy]텍스트[/highy]

例：

黄色で1/3の高さのみハイライトできるだけ蛍光ペン効果を適用しました。

これを使用して、さまざまな色で強調表示することができます。

例：

サイオンカラーでハイライトされます。

メモ：

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