WordPress 記事入力フォーム(ビジュアルエディタ) にプレースホルダをつける

Posted on Update by nendeb


特に今まで気にしてなかったのですが WordPressの記事投稿ページで、タイトル入力欄にプレースホルダーテキストがあるのに本文入力欄にはありません。
（※プレースホルダーテキスト＝あらかじめ入力欄内に表示することができるテキスト）

普通に投稿として使う分には本文入力欄にプレースホルダの必要は無いと思いますが、カスタムポストタイプの場合ではどうでしょう？　カスタムポストタイプの場合は本文に入れる内容が投稿とは違って特殊な場合があります。

例えば入力内容が決まっている入力欄、「ここは担当者のおすすめポイント50文字以内で～」などの注意書きなど、カスタムポストタイプの本文入力欄にもプレースホルダで説明を入れておいたらユーザーにやさしいですよね。

しかし、これが結構 厄介で「テキスト(HTMLエディタ)」の場合はやりようもあるのですが 「ビジュアル(ビジュアルエディタ)」では内部の仕組みが複雑でうまくできませんでした。
そんな時に とてもいい方法を見つけましたのでご紹介します。

TinyMCE plugin for placeholder attribute support ( License:MIT )
https://github.com/mohan/tinymce-placeholder
※これは TinyMCEでプレースホルダを設置するjsです。WordPress用ではありません。

設置は簡単です。GitHub より plugin.js 又は plugin.min.js を ダウンロード してサーバーにアップロードして以下のコードをどこかに設置するだけです。
　

設置サンプル

いつも使ってる my-plugin に設置するとして説明します。
まず、GitHubより ダウンロード した plugin.js を FTPで wp-content/plugins/my-plugin/フォルダ へ アップロードします。

次に以下のコードを my-plugin.php に張り付けてください。

/**
 * Add js for placeholder of TinyMCE external plugins.
 * ビジュアル(ビジュアルエディタ) で plugin.js を読み込むように設定する。
 *
 * The url should be absolute, and should include the js filename
 * to be loaded. For example:'myplugin' => 'http://mysite.com/wp-content/plugins/myfolder/mce_plugin.js'.
 * checked WordPress4.7.2
 * License: GPLv2 or later
 *
 * @param array $external_plugins An array of external TinyMCE plugins.
 */
function nendebcom_add_mce_content_placeholder( $plugin_array ){

	if( 'post' === get_post_type() ){
		$plugin_array[ 'placeholder' ] = plugins_url( 'plugin.js', __FILE__ );
	}
	return $plugin_array;
}
add_filter( 'mce_external_plugins', 'nendebcom_add_mce_content_placeholder' );

/**
 * Add placeholder to the HTML markup that displays the editor.
 * テキスト(HTMLエディタ) で <textarea>タグに placeholder を追加する。
 * checked WordPress4.7.2
 * License: GPLv2 or later
 *
 * @param string $output Editor's HTML markup.
 */
function nendebcom_add_the_editor_placeholder( $the_editor_html ){

	if( 'post' === get_post_type() ){
		$placeholder = 'ここに あれ を入力してください。';
		$the_editor_html = preg_replace( '/<textarea/', "<textarea placeholder=\"{$placeholder}\"", $the_editor_html );
	}
	return $the_editor_html;
}
add_filter( 'the_editor', 'nendebcom_add_the_editor_placeholder' );

※ ‘post’ の所は表示したいカスタムポストタイプ名に変更してください。
※ $placeholder の所に表示したい文章を入れてください。
※ plugins_url( ‘plugin.js’, __FILE__ ) の所は環境にあわせて変更してください。
※ 今回はWordPress4.7.2でテストしましたが WordPressをバージョンアップした場合は、いちおう動作確認しといてくださいね。

　

ご注意

plugin.js は WordPress用ではないので「ビジュアル(ビジュアルエディタ)」での プレースホルダーテキスト は「最大行表示エディターと集中執筆モード機能を有効化します。」のチェックを外しておかないとエディターボタンに隠れてしまいます。

ちょっと残念なところです。

　

　

タイトルのプレースホルダを変更する

ついでにタイトルのプレースホルダも変更しましょう。
これも以下のコードを my-plugin.php に張り付けてください。

/*
 * タイトルのプレースホルダを変更する
 * 
 * @package WordPress4.7
 * License: GPLv2 or later
 */
function nendebcom_add_title_placeholder( $placeholder ) {

	if( 'post' === get_post_type() ){
		$placeholder = 'あれのタイトル';
	}
	return $placeholder;
}
add_filter( 'enter_title_here', 'nendebcom_add_title_placeholder' );

※ ‘post’ の所は表示したいカスタムポストタイプ名に変更してください。
※ $placeholder の所に表示したい文章を入れてください。

　
　

参考

WordPress Codex　Plugin API/Filter Reference/mce external plugins
https://codex.wordpress.org/Plugin_API/Filter_Reference/mce_external_plugins

WordPress Developer Resources　the_editor | Hook |
https://developer.wordpress.org/reference/hooks/the_editor/

WordPress Developer Resources　enter_title_here | Hook |
https://developer.wordpress.org/reference/hooks/enter_title_here/

WordPress Codex 日本語版　関数リファレンス / get post type –
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_post_type

WordPress Codex 日本語版　関数リファレンス / plugins url
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/plugins_url

TinyMCE plugin for placeholder attribute support ( License:MIT )
https://github.com/mohan/tinymce-placeholder