WordPressでマーカーを記事内の文章で使用するのを目的として、プラグインなしでマーカーを作成するやり方を説明します。
マーカー自体の作成はCSSのみで作ることができるので簡単ですが、作成したマーカーをWordPressの記事内で使用するときに、ショートコードでマーカーのHTMLを呼び出せるように作成。
そしてクラシックエディタには投稿画面のツールバーにマーカーボタンを組み込んで、ボタンひとつでマーカーを使えるようにする作成のやり方です。
マーカーをWordPressのstyle.cssに作成
はじめにWordPressの記事内で文章に表示するマーカーのデザインを作成します。プラグインなしでマーカーを実装するので、使用しているWordPressテーマのstyle.cssにマーカーのCSSを記述して作成します。
/*太いマーカー(ブルー)*/
.marker-bold-blue{
background:linear-gradient(transparent 0%, rgb(143, 187, 244) 0%);
}
/*下線マーカー(ピンク)*/
.marker-under-line-pink{
background:linear-gradient(transparent 85%, #f48fb1 85%);
}
WordPressのstyle.cssに記述するマーカーのCSSは、WordPressで使用するマーカーを「太いマーカー(ブルー)」と「下線マーカー(ピンク)」の2種類で作成しています。
そのためCSSのセレクタ名は、太いマーカーを「.marker-bold-blue」に、下線マーカーを「.marker-under-line-pink」にして、マーカーのデザインとカラーがセレクタ名で判断できるように作成します。このセレクタはマーカー表示のために使用することになります。
.marker-bold-blue、.marker-under-line-pinkのそれぞれのセレクタ内には、CSSのbackgroundプロパティを使用します。これによりWordPressで使用するマーカーが背景扱いで作成できます。
backgroundの値はlinear-gradient関数を使います。linear-gradient右横のカッコ内でWordPressで使用するマーカーのカラーを決めることができます。
たとえば太いマーカーの方ならrgb(143, 187, 244)の部分を、下線マーカーのほうなら#f48fb1の部分を好きなカラーに変更してCSSコードをWordPressのstyle.cssに記述します。
WordPressのstyle.cssに作成したマーカーは以下の画像のように表示します。
WordPressのstyle.cssにCSSを記述してマーカーを作成しただけでもWordPressでマーカーを表示することができます。WordPressで記事を書くときの投稿編集画面で「HTML編集」に切り替えてマーカーを表示させます。
まずWordPressの投稿画面の記事でマーカーを使用したい文章を選択します。するとツールバーが表示するので「オプション」項目をクリックします。
次に「オプション」項目をクリックすると「HTMLとして編集」が表示するのでクリックします。
段落に使用されているHTMLのタグを含めた文章が表示しますので、マーカーを使用する文章をspanタグで囲みます。このときspan開始タグにはclass属性を記述してstyle.cssに記述したセレクタ名、今回のセレクタ名ならmarker-bold-blueを記述します。
以下がspan開始タグにclass属性を記述する例です。
<p><span class="marker-bold-blue">WordPressでマーカーを記事内の文章で使用するのを目的</span>として....</p>
作成したマーカーはWordPressでショートコード化
WordPressのstyle.cssにCSSを書いてマーカーを作成した場合、プラグインなしで作成することができますが、実際に記事をかいてるときに毎回spanタグを書くことになってしまうので、将来的にマーカーの使用がめんどくさくなってきます。
少しでもめんどくさくならないように、作成したマーカーはWordPressで「ショートコード化」します。
//ショートコード化(HTMLを文字列で返す)
function line_marker($atts, $content = null){
return '<span class="marker-bold-blue">' . $content . '</span>';
}
add_shortcode('marker-bold-blue', 'line_marker');
上のコードを、マーカーを使用するWordPressテーマのfunctions.phpに記述することで、style.cssにCSSを記述して作成したマーカーがショートコード化できます。
ショートコード化したマーカーを使用する場合はショートコードタグを使います。上の記述例の場合、add_shortcode右横カッコ内のmarker-bold-blueを囲み型のショートコードタグ名にして使用します。使用例は以下です。
[marker-bold-blue]ここにマーカーする文章が入る[/marker-bold-blue]
たとえばWordPressのブロックエディタで文章にマーカーを表示したい場合は、そのまま文章をショートコードタグで囲んで貼り付けるだけです。
WordPressで作成したマーカーのショートコード化は、CSSでマーカーを作成したセレクタが紐付いたclass属性付きのspan要素がreturnで返ってきてマーカーが表示する。みたいな感じの作成となっております。
プラグインなしでマーカーボタンを投稿ツールバーに作成
WordPressに実装するマーカーをstyle.cssでデザインして作成、マーカーの使用が楽になるようにショートコード化をして作成もしたのが、ここまでの説明です。
どちらもプラグインなしのやり方でマーカーを作成しましたが、ショートコードタグでマーカーを使用することすら、めんどくさくなるときが訪れそうです。
そんなときが来ることを先読みして「マーカーボタンを投稿ツールバーに作成しておきます」プラグインなしでビジュアルエディタのツールバーにマーカーボタンを作成です。
マーカーボタンをWordPressのプラグインなしで投稿ツールバーに作成するときは、マーカーを使用するWordPressテーマのfunctions.phpに以下のコードを記述します。
//ビジュアルエディタにマーカーボタン追加
function tiny_style_formats( $settings ) {
$style_formats = array(
array(
'title' => 'マーカー(ブルー)',
'inline' => 'span',
'classes' => 'marker-bold-blue',
'wrapper' => 'true',
),
);
$settings[ 'style_formats '] = json_encode( $style_formats );
return $settings;
}
add_filter( 'tiny_mce_before_init', 'tiny_style_formats' );
//スタイル項目追加と位置
function original_styles_button( $buttons ){
array_splice( $buttons, 1, 0, 'styleselect' );
return $buttons;
}
add_filter('mce_buttons', 'original_styles_button' );
ゴニョゴニョしたPHPコードが書いてありますが、覚えておいたほうが良い部分は、配列(array)のキーのうち「title」「inline」「classes」です。
「title」がマーカーボタンをWordPressの投稿ツールバーに作成したときにボタン名として表示される部分です。
「inline」はマーカーを表示する文章を囲むHTML要素をインラインにするかブロックにするかです。マーカーを文章に使用するのを目的としていますので、キーをinlineに、値はspanにして作成します。
「classes」は「inline」で指定した値のspanタグに付与されるclass属性値です。WordPressのstyle.cssにマーカーのデザインを作成したときのセレクタ、そしてマーカー表示するためのspan開始タグに使用したクラス名を指定します。
記述後にfunctions.phpの編集内容を保存してWordPressの投稿編集画面の投稿ツールバーを確認すると「スタイル」のボタンが追加されています。
スタイルボタンをクリックすることで、配列(array)の「title」に指定した値がマーカーボタン名として表示されれば、プラグインなしでWordPressの投稿ツールバーにマーカーボタンを作成するやり方が成功しています。
function tiny_style_formats( $settings ) {
$style_formats = array(
array(
'title' => 'マーカー(ブルー)',
'inline' => 'span',
'classes' => 'marker-line',
'wrapper' => 'true',
),
array(
'title' => 'マーカーアニメーション(ピンク)',
'inline' => 'span',
'classes' => 'marker-animation-pink',
'wrapper' => 'true',
),
);
$settings[ 'style_formats '] = json_encode( $style_formats );
return $settings;
}
add_filter( 'tiny_mce_before_init', 'tiny_style_formats' );
//スタイル項目追加と位置
function original_styles_button( $buttons ){
array_splice( $buttons, 1, 0, 'styleselect' );
return $buttons;
}
add_filter('mce_buttons', 'original_styles_button' );
複数のマーカーボタンをWordPressの投稿ツールバーに作成するときは、arrayの記述を追加してキーと値を指定します。
WordPressのプラグイン「AddQuicktag」を使用してしまったほうが簡単ですが、プラグインなしで投稿ツールバーにマーカーボタンを作成することで、プラグインの不具合の心配がなくなります。
WordPressに作成したマーカーの表示方法
最後にWordPressに作成したマーカーの表示方法です。
プラグインなしでマーカーボタンを投稿ツールバーに作成したマーカー表示の場合は、マーカーを表示させる文章を選択してから、ビジュアルエディタのツールバーに表示する「スタイル」ボタンをクリック、展開した「マーカーボタン」をクリックすることで、マーカーの表示ができます。
ブロックエディタを使用している場合は、「クラシック」のブロックを使用して投稿ツールバーのスタイルボタンから、作成したマーカーボタンをクリックするとマーカーが表示できます。
マーカーのショートコードも作成していますので、ショートコードタグでも表示することができますし、HTMLのspanタグにマーカーのクラスを付与して文章を囲むことでも、WordPressでマーカー表示ができます。
WordPressのstyle.cssやfunction.phpのファイルを操作してマーカーを作成するのが苦手という場合
<span style="background:linear-gradient(transparent 85%, rgb(143 187 244) 85%);">下線マーカーが表示します</span>
WordPressの投稿画面で記事を書いているときに、記事編集エディターをコードエディターに切り替えてから、マーカーに使うspanタグにCSSをインラインで記述して文章を囲むというやり方も有効です。
