公開日:2017年9月5日PlusersWordPressで記事を投稿する際に、標準で搭載されているエディタは自動でコードを入れてくれたりボタン一つで好きなコードを挿入できたりして便利で使用している人も多いと思います。エディタをもっと使いやすくするために、実際に投稿される記事と同じCSSが反映されるようエディタースタイルシートを有効化し、それに加えてボタン一つで記事にデザインを追加できるマークアップスタイルを設定してエディタの機能を強化しましょう。今回は、WordPressのエディタにエディタースタイルシートとマークアップスタイルを追加する方法についてご紹介します。CONTENTSエディタースタイルシートを使用できるようにするfunction.phpでeditor-style.cssを有効化するマークアップスタイルを追加するマークアップスタイル用の関数を定義するスタイル用のデザインをCSSで整えるエディタをカスタマイズして作業効率アップエディタースタイルシートを使用できるようにするまずは、エディタースタイルシートを使用できるようにするためにWordPressのテーマの高に新しく『editor-style.css』というテンプレートを作成してください。『editor-style.css』は、ビジュアルエディターで表示する際のデザインを表示するためのスタイルシートです。テンプレートを作成したらCSSを追加しましょう。"utf-8";』を記述し、記事のコンテンツ部分に適応されるCSSをstyle.cssからコピーしてください。記事全体のfont-familyやfont-sizeなどを指定しているbodyタグは『.mceContentBody』をセレクタとして記述します。記事部分の見出しやpタグに全体の設定と分けるためclass指定をしている場合は、class指定のセレクタを必ず削除してください。classなどセレクタは通常のスタイルシートと同じようにそのままclass属性を使用してCSSを指定しましょう。function.phpでeditor-style.cssを有効化するeditor-style.cssの作成が完了したら、function.phpでエディタースタイルシートが適応されるようにしましょう。);通常のエディタースタイルシートを適応させる場合は、上記のソースコードの一行目だけ記述しましょう。記事の中で、FontAwesomeなどの外部のスタイルシートを使用する場合は上記のソースコードの2行目のように『add_editor_style('~');』で反映したいスタイルシートへのパスも記述しておいてください。function.phpへの関数を追記するとeditor-style.cssがビジュアルエディタで反映されるようになります。上記の画像のようにビジュアルエディタを確認したときに、editor-style.cssが反映されていればエディタースタイルシートの設定は完了です。マークアップスタイルを追加するマークアップスタイルはスタイルを定義しておき、ビジュアルエディタのプルダウンから選ぶだけでスタイルを適応させることができるようになる便利な機能です。仕組みとしては、予めdivやspanタグにclass属性を付けCSSを設定しておき、ビジュアルエディタのスタイルボタンでそのタグを呼び出しています。class="sample">サンプルテキスト</div>上記のようにスタイルを適応することで、タグが追加されデザインが適応されます。マークアップスタイル用の関数を定義するマークアップスタイルを使用できるようにするために、まずはfunction.phpに関数を設定しましょう。今回は、リンク用の『pagelink』と記事のポイントを強調するための『point』の2つのスタイルをデモとして追加します。);上記の関数を追加することで『リンク』と『ポイント』という2つのマークアップスタイルが使用できるようになります。editor_setting($init)』の関数で適応させたいスタイルを定義します。スタイルは『array()』で配列で内容を記述してください。複数のスタイルを追加したいときは、『array(),array()』というようにコンマ区切りで追加していきましょう。array内の配列は、下記のように連動しています。titleスタイルの名前を定義します。ここで指定した名前が、ビジュアルエディタのプルダウンに表示されます。blockスタイルのタグの種類を指定します。'span'』と記述してください。classesスタイルを定義するためのclass属性を指定します。CSSのセレクタとしてもこの値を使用します。)』という関数でセレクトボタンを有効化しましょう。function.phpへの記述が完了すると、下記のようにビジュアルエディタにスタイルタブが追加され、定義したスタイルを使用できるようになります。スタイル用のデザインをCSSで整えるスタイルの定義とボタンの有効化が終わったら、CSSでデザインを整えていきましょう。デザインは、自由に追加しましょう。デモでは、『リンク』と『ポイント』2つのスタイルに本サイトでも使用している2つのCSSを適応していきます。適応後のデザインとソースは下記の通りです。ここにスタイル内に追加したい文字を記述してください。~ここにスタイル内に追加したい文字を記述してください。上記のデザインは、下記のCSSをスタイルシートに記述して反映させています。#fff;}スタイルを適応させたときに表示されるFontAwesomeアイコンや文字は『:before』『:after』などの疑似要素でcontentとして追加し、適応させています。スタイルのデザインは、あなたのブログのイメージに合うように自由にデザインしましょう。ビジュアルエディタでスタイルを適応したときにデザインを表示させたい場合は、先程のeditor-style.cssにも同じCSSをコピーして追加してください。定義したスタイルのデザインが完了したら、マークアップスタイルの設定は完了です。いつでもビジュアルエディタから簡単に追加することができるようになります。テキストエディタにもボタンを追加するスタイルを適応させるためのコードを出力するボタンは、ビジュアルエディタだけでなくテキストエディタにも出力することができます。テキストエディタにボタンを追加するためには、function.phpで関数定義しましょう。</script><?php}add_action('admin_print_footer_scripts','add_my_quicktag');テキストエディタにボタンを追加する場合は、上記のように『javascript』でボタンを定義します。定義するときに記述する引数は下記の通りです。QTags.addButton('ID','ボタンに表示するラベル','開始タグ','タグ');function.phpへの記述が完了すると、下記のようにテキストエディタにボタンが追加されますので設定したタグで囲いたい部分を選択し、ボタンを押すだけでタグが追加されるようになります。エディタをカスタマイズして作業効率アップWoredPressで記事を編集する場合は、エディタの使いやすさが作業効率を大きく分けます。自分に合ったスタイルやボタンを追加して自分の一番使いやすいようにエディタをカスタマイズしましょう。できるだけ手間を省くことで、執筆作業が大分効率化され楽になりますので是非追加してみてくださいね。『7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する』内のディスクリプションの出力方法を変更しました。『7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する』内のコードを修正しました。2019年9月21日WordPressテーマ作成の記事の内容をリニューアルしました。