WordPrssのエディタにCSSを反映しマークアップスタイルを追加する

|

WordPressで記事を投稿する際に、標準で搭載されているエディタは自動でコードを入れてくれたりボタン一つで好きなコードを挿入できたりして便利で使用している人も多いと思います。

エディタをもっと使いやすくするために、実際に投稿される記事と同じCSSが反映されるようエディタースタイルシートを有効化し、それに加えてボタン一つで記事にデザインを追加できるマークアップスタイルを設定してエディタの機能を強化しましょう。

今回は、WordPressのエディタにエディタースタイルシートとマークアップスタイルを追加する方法についてご紹介します。

エディタースタイルシートを使用できるようにする

まずは、エディタースタイルシートを使用できるようにするためにWordPressのテーマの高に新しく『editor-style.css』というテンプレートを作成してください。

『editor-style.css』は、ビジュアルエディターで表示する際のデザインを表示するためのスタイルシートです。テンプレートを作成したらCSSを追加しましょう。

editor-style.cssに記述
@charset "utf-8";
.mceContentBody {

}
p {

}

img {

}

h1 {

}

h2 {

}

上記のソースコードのように、最初に文字コードを指定する『@charset "utf-8";』を記述し、記事のコンテンツ部分に適応されるCSSをstyle.cssからコピーしてください。

なお、記事全体のfont-familyやfont-sizeなどを指定しているbodyタグは『.mceContentBody』をセレクタとして記述します。

また、記事部分の見出しやpタグに全体の設定と分けるためclass指定をしている場合は、class指定のセレクタを必ず削除してください。(kiji h1 → h1 , kiji p → p など)ただし、div classなどセレクタは通常のスタイルシートと同じようにそのままclass属性を使用してCSSを指定しましょう。

function.phpでeditor-style.cssを有効化する

editor-style.cssの作成が完了したら、function.phpでエディタースタイルシートが適応されるようにしましょう。

function.phpに記述
add_editor_style("editor-style.css");
add_editor_style( '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );

通常のエディタースタイルシートを適応させる場合は、上記のソースコードの一行目だけ記述しましょう。記事の中で、FontAwesomeなどの外部のスタイルシートを使用する場合は上記のソースコードの2行目のように『add_editor_style('~');』で反映したいスタイルシートへのパスも記述しておいてください。

function.phpへの関数を追記するとeditor-style.cssがビジュアルエディタで反映されるようになります。

上記の画像のようにビジュアルエディタを確認したときに、editor-style.cssが反映されていればエディタースタイルシートの設定は完了です。

マークアップスタイルを追加する

マークアップスタイルはスタイルを定義しておき、ビジュアルエディタのプルダウンから選ぶだけでスタイルを適応させることができるようになる便利な機能です。

仕組みとしては、予めdivやspanタグにclass属性を付けCSSを設定しておき、ビジュアルエディタのスタイルボタンでそのタグを呼び出しています。

ソースコード上で見ると・・・
スタイルに『div class="sample"』と設定

サンプルテキスト

↓ プルダウンでスタイルを適応

<div class="sample">サンプルテキスト</div>

上記のようにスタイルを適応することで、タグが追加されデザインが適応されます。

マークアップスタイル用の関数を定義する

マークアップスタイルを使用できるようにするために、まずはfunction.phpに関数を設定しましょう。今回は、リンク用の『pagelink』と記事のポイントを強調するための『point』の2つのスタイルをデモとして追加します。

function.phpに記述
function editor_setting($init) {
  $style_formats = array(
        array(
          'title' => 'リンク',
          'block' => 'div',
          'classes'=> 'pagelink'
        ),
        array(
          'title' => 'ポイント',
          'block' => 'div',
          'classes'=> 'point'
        )
  );
$init['style_formats'] = json_encode( $style_formats );
  return $init;
}
add_filter('tiny_mce_before_init', 'editor_setting');

//エディタのスタイルメニューを有効化
function add_stylebuttons( $buttons ){
         array_splice( $buttons, 1, 0, 'styleselect' );
         return $buttons;
}
add_filter( 'mce_buttons_2' , 'add_stylebuttons' );

上記の関数を追加することで『リンク』と『ポイント』という2つのマークアップスタイルが使用できるようになります。

『function editor_setting($init)』の関数で適応させたいスタイルを定義します。スタイルは『array()』で配列で内容を記述してください。

複数のスタイルを追加したいときは、『array(),array()』というようにコンマ区切りで追加していきましょう。

array内の配列は、下記のように連動しています。

title

スタイルの名前を定義します。ここで指定した名前が、ビジュアルエディタのプルダウンに表示されます。

block

スタイルのタグの種類を指定します。ここではブロック要素としてのdivで出力するために『'block' => 'div'』で出力していますが、スタイルをインライン要素でのspanで出力したい場合は『'inline' => 'span'』と記述してください。

classes

スタイルを定義するためのclass属性を指定します。CSSのセレクタとしてもこの値を使用します。

また、ビジュアルエディタでスタイル選択用のタブを使用するために、『add_stylebuttons( $buttons )』という関数でセレクトボタンを有効化しましょう。

function.phpへの記述が完了すると、下記のようにビジュアルエディタにスタイルタブが追加され、定義したスタイルを使用できるようになります。

スタイル用のデザインをCSSで整える

スタイルの定義とボタンの有効化が終わったら、CSSでデザインを整えていきましょう。デザインは、自由に追加しましょう。

デモでは、『リンク』と『ポイント』2つのスタイルに本サイトでも使用している2つのCSSを適応していきます。適応後のデザインとソースは下記の通りです。

リンク

ー ソース ー

<div class="pagelink">
 <a href="https://plusers.net/">サンプルリンク(topページ)</a>
</div>

~ ↓ デザイン適応後の表示 ↓ ~

ポイント

ー ソース ー

<div class="point">
  ここにスタイル内に追加したい文字を記述してください。
</div>

~ ↓ デザイン適応後の表示 ↓ ~

ここにスタイル内に追加したい文字を記述してください。

上記のデザインは、下記のCSSをスタイルシートに記述して反映させています。

style.cssに記述
/*---リンク---*/
.pagelink {
  font-size: .9em;
  position: relative;
  margin: 30px 0;
  padding: 20px;
  border: solid 2px #38e8cd;
  border-radius: 10px;
}

.pagelink:before {
  font-family: 'FontAwesome';
  font-size: 24px;
  line-height: 1;
  position: absolute;
  z-index: 2;
  top: -16px;
  left: 12px;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding-top: 3px;
  content: '\f0c1';
  text-align: center;
  color: #38e8cd;
  background-color: #fff;
}

.pagelink:after {
  font-size: 1.3em;
  font-weight: bold;
  line-height: 1;
  position: absolute;
  z-index: 1;
  top: -14px;
  left: 26px;
  padding: 3px 5px 3px 20px;
  content: 'link';
  background-color: #fff;
}

.pagelink a {
  text-decoration: none;
}

.pagelink a:hover {
  opacity: 0.8;
}

.pagelink a:before {
  font-family: 'FontAwesome';
  font-size: 1.2em;
  padding: 0 10px;
  content: '\f061';
  color: #31c1ab;
}


/*---ポイント---*/
.point {
  font-size: .9em;
  position: relative;
  margin: 40px 0 30px;
  padding: 25px 20px 20px;
  border: solid 3px #1a1cb5;
  border-radius: 10px;
}

.point:before {
  font-family: 'FontAwesome';
  font-size: 24px;
  line-height: 1;
  position: absolute;
  z-index: 2;
  top: -16px;
  left: 12px;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding-top: 3px;
  content: '\f0a4';
  text-align: center;
  color: #1a1cb5;
  background-color: #fff;
}

.point:after {
  font-size: 1.3em;
  font-weight: bold;
  line-height: 1;
  position: absolute;
  z-index: 1;
  top: -14px;
  left: 26px;
  padding: 3px 5px 3px 20px;
  content: 'POINT';
  color: #1a1cb5;
  background-color: #fff;
}

スタイルを適応させたときに表示されるFontAwesomeアイコンや文字は『:before』『:after』などの疑似要素でcontentとして追加し、適応させています。

スタイルのデザインは、あなたのブログのイメージに合うように自由にデザインしましょう。

また、ビジュアルエディタでスタイルを適応したときにデザインを表示させたい場合は、先程のeditor-style.cssにも同じCSSをコピーして追加してください。

定義したスタイルのデザインが完了したら、マークアップスタイルの設定は完了です。いつでもビジュアルエディタから簡単に追加することができるようになります。

テキストエディタにもボタンを追加する

スタイルを適応させるためのコードを出力するボタンは、ビジュアルエディタだけでなくテキストエディタにも出力することができます。

テキストエディタにボタンを追加するためには、function.phpで関数定義しましょう。

function.phpに記述
function add_my_quicktag() {
?>
  <script type="text/javascript">
  //QTags.addButton('ID', 'ボタンのラベル', '開始タグ', '終了タグ');
  QTags.addButton('link','リンク','<div class="pagelink">','</div>');//リンク用
  QTags.addButton('point','ポイント','<div class="point">','</div>');//ポイント
  </script>
<?php
}
add_action('admin_print_footer_scripts','add_my_quicktag');

テキストエディタにボタンを追加する場合は、上記のように『javascript』でボタンを定義します。定義するときに記述する引数は下記の通りです。

QTags.addButton('ID','ボタンに表示するラベル','開始タグ','タグ');

function.phpへの記述が完了すると、下記のようにテキストエディタにボタンが追加されますので設定したタグで囲いたい部分を選択し、ボタンを押すだけでタグが追加されるようになります。

エディタをカスタマイズして作業効率アップ

WoredPressで記事を編集する場合は、エディタの使いやすさが作業効率を大きく分けます。自分に合ったスタイルやボタンを追加して自分の一番使いやすいようにエディタをカスタマイズしましょう。

できるだけ手間を省くことで、執筆作業が大分効率化され楽になりますので是非追加してみてくださいね。

本サイトは、統合・リニューアル中です!

Plusers.netをご覧いただきありがとうございます。

本ブログ『https://plusers.net』は、『https://plusers.jp』と統合しフルリニューアルいたします。

リニューアルに伴い、ブログ記事の内容も新しい設計に見直しリニューアルしていきます。リニューアル完了済の記事は『Plusers.jp』の方に自動でリダイレクトします。

閉じる