KUHAKU
no
MEMOCHO

フロントエンドにテキストエディタを表示できる関数wp_editorの使い方

フロントエンドにテキストエディタを表示できる関数wp_editorの使い方のサムネイル

こんにちは、KUHAKUです。

実は昨日いきなり体を動かしたくなり、約60km近くの距離をロードバイクで疾走した結果体中バキバキで指以外を動かすのがとてもつらいです。
慣れないことはするもんじゃないですね。笑

こんなどうでもいい話は置いておいて、ワードプレスでサイト構築をしていると管理画面外にテキストエディタを表示したい場面などがでてくることがあります。

今回はフロントエンドからゲストユーザーが投稿するシステムなどを作成するときにワードプレス標準搭載のテキストエディタを出力できるwp_editor関数について書いていこうと思います。

wp_editor関数とは

じつはこの関数を使用すると、たった一行で固定ページや投稿などで使用しているワードプレスの標準エディタを表示することが可能です。

ワードプレスの標準エディタとはいつも使っているこのエディタです。

標準エディタ

これらを表示できるようになることによってわざわざ面倒くさいフォームのHTMLコードをガリガリ書かなくてもいつも使っているクイックタグや画像を文中に追加できるメディアに追加ボタンも簡単に実装できます

実際に実装したサンプルをご用意いたしましたのでコチラにリンクを張っておきます。 →demo

使い方

このとても便利なwp_editorですが、使い方もいたってシンプルです。

表示したい場所にこの一文を書くだけで標準エディタが出力できます。

$contentパラメータはエディタに最初から表示しておく文字列を指定できます。
空欄で出力したい場合はnullを指定すれば大丈夫です。

$editor_idパラメータはテキストエディタのidを指定できるパラメータです。
コチラを空欄にすることも可能ですが、空欄にする場合は$settingでテキストエリアのname属性を指定してあげないといけません。

$settingパラメータは出力するエディタに関する設定を引数として配列で指定することができます
表示したい条件に合わせて様々なカスタマイズができるので後述します。

三つのパラメータの中で$contentと$editor_idは必須項目なので注意してください。

設定

$setting内で指定できる引数をご紹介していきます。

以上が設定できる項目になります。
ややこしいものが少々ありますが順番に見ていきましょう。

wpautop

この項目はワードプレスで投稿をする際にpタグやbrタグを自動挿入するwpautopを使用するかどうかを設定できます。
functions.php等でwpautopを無効にしている場合はtrueに設定しても自動挿入はされないので注意してください。

media_buttons

メディアボタンを追加するかどうかを指定できます。
ただし、メディアライブラリは寄稿者以下のユーザーは使用ができない上に、管理画面外での使用が制限されているのでフロントエンドに設置する場合はユーザー権限を投稿者以上に設定するか、functions.phpをごにょごにょっとしないと使用できないので要注意。

textarea_name

テキストエリアのname属性を指定できます。
コチラを空欄にした場合はデフォルトで$editor_idが挿入されます。

$editor_idが空欄の場合は文字列での指定が必要です。

textarea_rows

テキストエリアの行数を指定できます。
初期値のget_option(‘default_post_edit_rows’, 10)は特に何もいじっていなければ10に設定されているはずです。

tab_index

フォームフィールドに使用されるtabindex属性値を指定できます。

tabindex属性とはタブの順序属性のことで、TABキーを押したときに遷移する順番を指定できます。

下記のようなコードを使用すると、TABキーを押したときにshimeiからurlに遷移、submitには遷移しないといった設定になります。

詳しくは下記サイトが詳しく書いているのでご参照ください。

HTML5/グローバル属性/tabindex属性 Tabキーによる移動順序を指定する - TAG index
www.tagindex.com

editor_css

表示するエディタのデザインを変更するCSSを指定することができます。
ただし、styleタグが含まれている必要がありますので正直めんどくさいですので普通にCSSファイルからデザインしてあげればいいかと思います。
使う場面はほぼないです。

editor_class

テキストエリアに任意のCSSのclassを付与できます。
$editor_idでidを指定可能なのであまり使う場面はないかと思いますが使用したい際には文字列で指定が可能です。

teeny

最小限のエディタを使用するかどうかを指定できます。最小限とはPressThisの設定を参照したエディタです。

PressThisは管理画面のツールから確認できます。

dfw

コチラは正直使い方がよくわかりませんので関数リファレンスに記載してある文章を引用してご紹介します。

標準のフルスクリーンモード(DFW)に置き換えるか。(特定のDOM要素とCSSを必要とします。)

標準でフルスクリーンモードを使う機会自体あまりないと思うので特に必要性もないかと思います。

tinymce

TinyMCEを読み込むかどうかを指定できます。
有効に設定する場合は配列を使用して、TinyMCEの設定を行うことが出来ます。

基本的にはtrueもしくはfalseのみの指定で困ることはないかと思います。

quicktags

標準エディタで普段使用しているクイックタグを使用するかどうかを指定可能です。
tinymce同様、有効にする場合は配列を使用することもできます。

drag_drop_upload

ドラッグアンドドロップで画像などのファイルをアップロードできる機能の使用を設定できます。
ただし、フロントから使用する際はセキュリティ関連も含め、色々他にもいじらないといけないのであまりお勧めはしません

実際の使用例

今回サンプルとして作ったdemoのコードを書きに書いておきますのでご参考になればと思います。

こんな感じでとても簡単にエディタ表示ができます。

今回ご紹介したwp_editorとwp_insert_post等を使用するといとも簡単にフロントエンドからサイトに訪問したユーザーが投稿できる仕組みを作ることができます。

管理画面外からの投稿機能を作成できるようになると制作の幅が一気に広がるのでワードプレスが面白くなってきます。

ただ、基本的にワードプレスは処理速度と構成の問題で投稿の発信者と受信者の距離が近いサイトには向かないのでそこらへんは注意しましょう。

それではまた。

FB Comment