注目キーワード

WordPressでマーカーを作成プラグインなしのやり方

WordPressでマーカーを作成プラグインなしのやり方
  1. HOME
  2. WordPress
  3. WordPress使い方
  4. WordPressでマーカーを作成プラグインなしのやり方

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」にして、マーカーのデザインとカラーがセレクタ名で判断できるように作成します。このセレクタはマーカー表示のために使用することになります。

 

Advertisement

 

.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に記述します。

 

マーカーの作成について、もっと詳しいCSSの説明が欲しい場合は以下の記事を参考にしてください。

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を記述して作成したマーカーがショートコード化できます。

 

Advertisement

 

ショートコード化したマーカーを使用する場合はショートコードタグを使います。上の記述例の場合、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」です。

 

Advertisement

 

「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をインラインで記述して文章を囲むというやり方も有効です。

WordPress使い方カテゴリの最新記事