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

Simple Text Highlighter Shortcode Plugin for WordPress

テキストを好みの色に蛍光処理をする簡単な WordPress プラグインを作ってみました。 Simple Text Highlighter Shortcode Plugin for WordPressは非常に軽いプラグインでテキストをハイライトするショートコードを提供しています。 (ダウンロードは以下Updatedセクションで可能です。)

インストール方法

  • 下のコードをコピーして、テーマの関数ファイルに貼り付けます。 必ずチャイルドテーマをインストールして作業してください。

使用方法

ショートコード[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.2
Author URI: https://www.thewordcracker.com/
*/

add_shortcode('high', 'highlighter_span_shortcode');
function highlighter_span_shortcode($atts, $content = null) {
extract(shortcode_atts(array('color' => '', 'bg' => 'yellow', 'size' => '', 'padding' => '', 'left' => '', 'right' => '', 'top' => '', 'bottom' => '', 'border' => '', 'bbottom' => '', 'radius' => '', 'weight' => '', 'height' => ''), $atts));
$return = '<span style="';
if (!empty($color)) $return .= 'color:'.$color.';';
if (!empty($bg)) $return .= 'background-color:' .$bg.';';
if (!empty($size)) $return .= 'font-size:'.$size.';';
if (!empty($padding)) $return .= 'padding:'.$padding.';';
if (!empty($left)) $return .= 'padding-left:'.$left.';';
if (!empty($right)) $return .= 'padding-right:'.$right.';';
if (!empty($top)) $return .= 'padding-top:'.$top.';';
if (!empty($bottom)) $return .= 'padding-bottom:'.$bottom.';';
if (!empty($border)) $return .= 'border:'.$border.';';
if (!empty($bbottom)) $return .= 'border-bottom:'.$bbottom.';';
if (!empty($radius)) $return .= 'border-radius:'.$radius.';';
if (!empty($weight)) $return .= 'font-weight:'.$weight.';';
if (!empty($height)) $return .= 'line-height:'.$height.';';
$return .= '">';
return $return . $content . '</span>';
}

function code_formatting($atts, $content = null) {
$return ='<span class="codeformatting" style ="padding: 2px 4px; font-size: .95em; color: #c7254e; background-color: #f9f2f4; border-radius: 4px;">';
return $return . $content . '</span>';
}
add_shortcode('pcode', 'code_formatting');

function keyboard_shortcuts_formatting($atts, $content = null) {
$return ='<span class="keyboardshortcode" style ="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;">';
return $return . $content . '</span>';
}
add_shortcode('kbd', 'keyboard_shortcuts_formatting');

function navytext_formatting($atts, $content = null) {
$return ='<span class="navytext" style ="color: #ffffff; background-color: #006699; font-weight: bold;">';
return $return . $content . '</span>';
}
add_shortcode('navytext', 'navytext_formatting');

メモ:


16のコメント

  1. もしかしたらダウンロードはどのようにしていますか..? Update側zipファイルがアップロードされているのがアンボイネヨ。〓〓

    返信
    • こんにちは?

      ご不便をお掛けします。

      ダウンロード関連のプラグインを削除し、この記事に添付ファイルがあることをまだ確認していませんでした。

      代わりに上記のコードをコピーして使用している WordPress テーマの関数ファイルに貼り付けます。

      コードを入れて見て、もし問題が発生した場合、コードだけが削除できます。

      返信
      • functions.phpに挿入して使用すればよいという言っているの? ^^
        ありがとう!

      • 本当にすいません。私文を作成するときに、特定の段落だけ蛍光に塗りしたい。 適用は、どのような方法にすればいい...? Wordさんの他の投稿も見理解していませんね。〓〓申し訳ありません...

      • あ! [high]の内容[/ high]となりますねありがとうございます!(笑)

      • 本文に[high] ... [/ high]を入力すると、スタイルが適用されるため、やむを得ず{high} ... {/ high}で入力したものです。

        時間になると、ショートコードとして認識しないように[...]を入力する方法を参照する予定です。

        楽しい夜の時間を持って^^

  2. ありがとうございます〜

    Veteran様コメントはスパムとして分類されて今確認しました。

    CSSで直接調整する必要が内容を細かく調整するために個人的なレベルで作成されたプラグインです。

    頻繁に使用するのであればTinyMCEに追加しても良さそうです。

    返信
  3. うれしいです。 と〜プラグインを直接作成して使用ものだ。

    TinyMCEボタンを追加することはいかがでしょうか (WCさんが希望であるかを知らないのに)より快適なんじゃないかと思うようになります。 基本的に省略されたテキストの背景色、上付き、下付き文字等のボタンを使用するには、..

    add_filter( 'mce_buttons_3'、 'my_mce_buttons_3'); function my_mce_buttons_3($ buttons){ $ buttons [] = 'fontsizeselect'; $ buttons [] = 'fontselect'; $ buttons [] = 'backcolor'; //文字の背景色 $ buttons [] = 'superscript'; $ buttons [] = 'subscript'; $ buttons [] = 'styleselect'; // Drop downメニューに return $ buttons; }
    もしかしたらご存知のつもりなら無視してください。^^

    返信
  4. こんにちは。 更新されたバージョンをダウンロード受けようとしたところ、パスワード(simple)が間違っているね。
    教えていただけますがあり連でしょうか?

    返信
    • こんにちは?

      事実あまり反応がなく、個人的にその時その時の更新して使用していました。
      最新バージョンにアップデートしたので参照してください。
      内容も更新されました。
      事実上のプラグインさえあればほとんどのテキスト効果を実現することができます。 HTMLコードを知って使用が容易になります。

      だから、楽しい一日を過ごす。

      返信
      • エゴエゴ。 今度はリンクが切れたね。 確認お願いいたします。

      • 私はテストしてみると、ダウンロードがよくなりますね...よくないと、上記のコードをコピーして、関数ファイルに追加して試してみてください。 手間下さい。

      • 今やり直してみると、ダウンロードがね。 何かしばらくエラーがあったようです。 プラグインも良いですよ。 シンプルなので、さらに良いです。 よく使用します。
        私のブログはxiphiasilver.co-story.netです。 模擬ハッキングに興味のありましたら一度訪れてみてください。 ^^

      • うわすごいものだ。

        ハッキングといえば否定的に聞こえるが、「模擬ハッキング」は、企業システムのセキュリティの問題を把握して改善できるようにする重要な役割をすることを知っているが、私が正しく理解しているかどうか分からないですね。

        サイトをしばらく聞こえた予想通り容易ではない内容を扱うようですね。
        時間になると、よく聞かみましょう。

        ちなみにコメントシステムをDisqusに変更SEOなど多くの面で有益であるとね。 だから私は最近、大規模な(?)の心を食べDisqusに変えたところ、思ったより良いようです。 コメントをDisqusに変えることを一度検討してみてください。

        楽しい週末と休日になってください^^

      • 考えてみると、「中級」のカテゴリーの場合、コピー防止がされていますね。 コメントに書かれたメールアドレスが正しいですか? メールにファイルを直接お送りでしょうか?

コメントを残す