「ダメ人間2.0」by地雷屋 リアルタイムでレビュー中!

WordPressのビジュアルエディタ自動整形に知識0で対処


このページは…

WordPressの自動整形で困ってる人の為のページです。
目を通しておく事で、WordPressの自動整形に関する悩みを減らすことができます。
このページでは、WordPressの自動整形に対処する方法について、簡単な説明を行っていきます。

結論

WordPressの自動整形に関して、完全に解決することはできませんでした。
なので、自動整形ではなく、エディタの設定をカスタマイズして誤魔化しました。
現在は、これといって問題はありません。

何故こういう結論に至ったのか?
経緯について解説していきます。

おすすめな人

  • 「WordPressの自動整形機能で困っている!」
  • 「自動整形機能をOFF、もしくは制御したい!」
  • 「ビジュアルエディタに切り替えたら表示が崩れる!」
  • ……など

WordPressの自動整形機能に困らされた

今回のトラブルに関しては、以下のように分けられます。

  1. 発端
  2. 自動整形とは
  3. 試したこと
  4. 最終的な対処
  5. その他の対処、試してないこと

それぞれ解説していきます。

発端

  • テキストエディタからビジュアルエディタに切り替えると表示が崩れる
  • せっかく装飾したのに、これじゃ意味ない
  • 調べてみるとWordPressの自動整形機能というのが原因らしい
  • 色々試してみた

自動整形とは

  • 2種類ある
  • 一つはWordPressのwpautopという関数によって行われる処理
  • 主に、以下の処理を自動で行う

  1. 改行コードを<br>タグに変換
  2. インラインタグまたは文章には<p>タグを適用
  3. 改行が2回続いたら<p>タグを適用

  • 要は段落やレイアウトに影響する関数
  • 早い話、タグを勝手に入れたり消したりするので、混乱させられる

  • もう一つは、ビジュアルエディタ(TinyMCE)により行われる処理
  • wpautopが表示の際に整形を行うのに対し、TinyMCEは編集の際に整形を行う
  • 今回のケースは編集時の場合、つまりTinyMCEが原因と見ている

  • 他には、自動変換機能も存在する
  • 自動変換は、wptexturizeという関数によって行われる

今回は、これら自動整形を制御する方法について紹介する

試したこと

カスタマイズする方法と、プラグインを追加する方法を試した

カスタマイズ

  • テーマの編集で、functions.phpにコードを追記する方法を試した。
  • 何通りかあったが、全て効果は無かった
  • とりあえず、試したものを一通り書いておく

    手順

  1. 好きなコードをコピー
  2. functions.phpにペースト

    カスタマイズ後は、既存の記事も確認すること

    自動整形は編集だけではなく、表示の時も行われている

    その為、自動整形機能をOFFにすると、うまく表示されなくなる場合がある

    カスタマイズの反映は、キャッシュをクリアしてから確認

全ての投稿で自動整形をOFF

remove_filter('the_content', 'wpautop'); // 記事の自動整形を無効にする
remove_filter('the_excerpt', 'wpautop'); // 抜粋の自動整形を無効にする

  • 他にも「投稿ページのみOFF」「固定ページのみOFF」といった設定が可能
  • 全ての自動整形がOFFになるので、タグの挿入も手動で行うことになる

<p>の自動挿入はON、HTMLソースの自動消去をOFFにしたい場合

add_action('init', function() {
  remove_filter('the_title', 'wptexturize');
  remove_filter('the_content', 'wptexturize');
  remove_filter('the_excerpt', 'wptexturize');
  remove_filter('the_title', 'wpautop');
  remove_filter('the_content', 'wpautop');
  remove_filter('the_excerpt', 'wpautop');
  remove_filter('the_editor_content', 'wp_richedit_pre');
});
add_filter('tiny_mce_before_init', function($init) {
  $init['wpautop'] = false;
  $init['apply_source_formatting'] = ture;
  return $init;
});

  • 自動整形をOFFにすると、<p>の自動挿入もOFFになる
  • <p>の自動挿入がOFFになると、それはそれで不便な時もある

自動置換をOFF

// 特定文字の自動置換制御
remove_filter( 'the_content', 'wptexturize' );
remove_filter( 'the_excerpt', 'wptexturize' );

今の所は自動置換で困ったことはないけど、とりあえず書いといた

記事ごとに自動整形を制御

//==============================================================================
//
//	自動整形を無効にするカスタムフィールドを作成
//
//==============================================================================

//	アクションフックに登録:管理画面にカスタムボックスをエントリー
add_action(
	'add_meta_boxes', 
	function(){
		$screens = array('post', 'page');
		foreach($screens as $scrn){
			add_meta_box(
				'peralab-custombox-dont-autoformatting', 	//編集画面セクションのHTML ID
				'自動整形を無効化', 	//メタボックスのタイトル
				'PeralabDontAutoFormatting_CustomBoxCreate', 	//入力フォーム作成で呼び出されるコールバック
				$scrn, 								//表示するページ
				'side', 							//メタボックス表示箇所(advanced, normal, side)
				'default', 							//表示優先度(high, core, default, low)
				null);								//コールバック時に渡す引数があれば指定
		}
	}
);

//	メタボックスを作成
function PeralabDontAutoFormatting_CustomBoxCreate($post){	//$postには現在の投稿記事データが入っています
	//入力済みのデータを取得
	$data_str = get_post_meta($post->ID, "dont_autoformat_radio", true);
	if($data_str != 'dont'){
		$data_str = 'format';
	}
	
	//nonce作成
	wp_nonce_field('action-noncekey-dontautoformat', 'noncename-dontautoformat');

	?>
	<div>
	
	<!-- 出力する文字列 -->
	<p><label><input name="name-metabox_autoformat_radio" type="radio" value="format" <?php echo (($data_str == 'format') ? 'checked' : '') ?>>整形する(初期値)</label></p>
	<p><label><input name="name-metabox_autoformat_radio" type="radio" value="dont" <?php echo (($data_str == 'dont') ? 'checked' : '') ?>>整形しない</label></p>
	<p><label>ビジュアルエディタの整形無効の切り替えは[下書き保存] [更新]などで記事の保存後から反映されます。</label></p>
	
	</div>
	<?php
}

//--------------------------------------------------------------
//	カスタムボックス内のフィールド値更新処理
//--------------------------------------------------------------
add_action(
	'save_post', 
	function($post_id){
		//nonceを確認
		if(isset($_POST['noncename-dontautoformat']) == false 
				|| wp_verify_nonce($_POST['noncename-dontautoformat'], 'action-noncekey-dontautoformat') == false) {
			return;	//nonceを認証できなかった
		}
		
		//自動保存ルーチンかどうかチェック。そうだった場合はフォームを送信しない(何もしない)
		if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE){
			return;
		}
		
		//パーミッション確認
		if(isset($_POST['post_type'])){
			if($_POST['post_type'] == 'page'){
				if(!current_user_can('edit_page', $post_id)){
					return;	//固定ページを編集する権限がない
				}
			}
			else{
				if(!current_user_can('edit_post', $post_id)){
					return;	//記事を編集する権限がない
				}
			}
		}
		
		//== 確認ここまで ==

		
		//予約投稿時は、データが有るにも関わらず$_POSTからデータ取得ができないので、
		//issetでデータ確認が出来るときのみ値の更新処理を行います。
		if(isset($_POST['name-metabox_autoformat_radio'])){
			update_post_meta($post_id, "dont_autoformat_radio", $_POST['name-metabox_autoformat_radio']);
		}
	}
);

//=========================
//	自動整形無効の実処理
//=========================

//記事表示時の整形無効
add_action(
	'wp_head',
	function(){
		if(get_post_meta(get_the_ID(), 'dont_autoformat_radio', true) == 'dont'){
			remove_filter('the_content', 'wpautop');
			remove_filter('the_excerpt', 'wpautop');
		}
	}
);

//ビジュアルエディタ(TinyMCE)の整形無効
add_filter(
	'tiny_mce_before_init',
	function($init_array){
		if(get_post_meta(get_the_ID(), 'dont_autoformat_radio', true) == 'dont'){
			global $allowedposttags;
			$init_array['valid_elements']          = '*[*]';
			$init_array['extended_valid_elements'] = '*[*]';
			$init_array['valid_children']          = '+a[' . implode( '|', array_keys( $allowedposttags ) ) . ']';
			$init_array['indent']                  = true;
			$init_array['wpautop']                 = false;
			$init_array['force_p_newlines']        = false;
		}
		return $init_array;
	}
);

手順

  1. カスタマイズしたら、投稿の編集画面に移動
  2. 「タグ」とか「カテゴリー」みたいな感じで、「自動整形」に関する設定項目が表示されてる
  3. ONかOFFか設定する
  4. 記事の保存・更新を行う

    補足

  • tiny mce before initというフィルターを使う
  • valid elements
  • 記事を保存する際に削除しないタグを指定できる
  • *[*]=「すべて」

  • extended valid elements
  • よくわかんねえ

  • indent
  • 字下げ設定

  • wpautop
  • 自動的にpタグで囲む機能をOFF

  • force p newlines
  • 改行でpタグが挿入される機能をOFF

    備考

  • 自動整形に関する全てを制御できるわけではない
  • そもそも不可能?

  • ビジュアルエディタへの切り替えで、表示が崩れるのは防げなかった。
  • 今回のケースを解決することはできなかった
  • タグの追加や削除は行われないはずなのに、何故?

  • テーマやプラグインなどで、既に自動整形無効化の設定を行なっている場合、無意味らしい
  • 投稿・固定の両方のページで設定可能

プラグイン

  • プラグインでの解決を試みた
  • ページ表示速度の関係で後回しにしていたが、カスタマイズでは解決できなかったので決行

  1. TinyMCE Advanced プラグインをインストール→有効化。
  2. 設定で”Keep paragraph tags (段落タグの保持)” にチェック→保存。

最終的な対処

  • 何をやってもダメだった
  • ビジュアルエディタに切り替えた時に、絶対に表示が崩れてしまう
  • なので、方向性を変えてみた
  • 自動整形機能ではなく、エディタの設定を弄ってみた
  • 「自動整形の設定が無理なら、ビジュアルエディタ使わなきゃいいじゃん」
  • ということで、最終的な対処はこちら

テキストエディタをデフォルトにした

/**
 * Change editor default input.
 *
 * @param  string $editor
 * @return string $editor
 */
function change_editor_default( $editor ) {
	$editor = 'html';
	return $editor;
}
add_filter( 'wp_default_editor', 'change_editor_default' );

editorをhtmlではなくtinymceにするとビジュアルエディタがデフォルトに

    もうビジュアルエディタ自体要らないという場合

  • 管理画面でビジュアルエディタをOFFにできる
  • ビジュアルエディタをOFFにする方法

  1. ユーザー→プロフィール
  2. 「ビジュアルエディターを使用しない」にチェック

その他の対処、試してないこと

リビジョンで復元

  • 自動整形される前の状態が残っていれば復元可能
  • リビジョンは保存・プレビュー・公開・更新時に記録される筈
  • 詳しくは設定を確認してね

    でもリビジョンし過ぎると重くなるよ

手順

  1. 編集画面の「公開」欄の「リビジョン」を表示
  2. 好きなタイミングを復元

フォーラムで質問

WordPressとかテーマのフォーラムで聞いてみたら何かわかったかも

まとめと補足

まとめると、このようになります。

  1. 任意整形だったら良かったのに
  2. お手上げ

    補足

  • 自動整形機能は、ビジュアルエディタをメインで使う場合は便利かもしれない
  • ここまでやってダメだったのは、何か根本的な部分で見落としている気がする
  • 「メガネメガネ」みたいな

  • とはいえ一から確認し直す体力は残ってない
  • なのでビジュアルエディタは隔離しようと思う

WordPressのビジュアルエディタ問題を解決するには

結局根本的な解決は不可能でした。

やっぱりWordPressの問題に対処するには、PHPに関する勉強が必要なようです。

では、一体どこで勉強すればいいのでしょう?

というわけで、次のページです。

次のページ

  • 【要約】
  • WordPressの勉強方法についてのページです。
  • WordPressについて勉強するには、様々な方法があります。
  • フォーラムを見たりイベントに参加したりするなど、自分に合った方法を選びましょう。

  • 【意味】
  • 目を通しておく事で、WordPressに関する理解を深める効果があります。

  • 【要約】
  • PHPの学習方法についてのページです。
  • PHPの学習方法も様々です。
  • アプリやサイト、講座などがあります。

  • 【意味】
  • 目を通しておく事で、WordPressを更に活用できるようになります。

自由なコメント