Ownedmedia ウェブ制作に役立つコンテンツを発信中!

WordPress 2019.03.04

WordPressのビジュアルエディタで適用されるタグ挿入による自動整形を制御する

Tags: ,,

WordPressで記事を投稿する時に仕様するエディタにはビジュアルエディタとテキストエディタという2つのタイプがあります。テキストエディタはHTMLをそのまま記述するときに使うものですが、ビジュアルエディタはHTMLを仕様しなくても、タグ挿入機能がついていたり、自動的に文章が整形してくれたりします。

 

ただし、このビジュアルエディタを使用することで、この自動整形機能が実行され、pタグやbrタグが自動的に挿入されることでレイアウトが崩れたりすることもあります。そんな時にはfunctions.phpに下記のコードを追記することで自動整形機能を強制的に制御することができます。

【functions.php】

// pタグ、brタグの自動挿入制御
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

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

 

wpautopフィルターがpタグやbrタグの制御を行う上で扱うフィルターになるのですが、さらに特定の文字に対して自動置換される場合にはwptexturizeフィルターも合わせて制御していきます。

 

また、今度は逆にpタグがビジュアルエディタからテキストエディタへの切り替え時に消えてしまうケースもあります。そんな時にはエディタの拡張プラグイン「TinyMCE Advanced」の設定で制御することができます。

 

WordPressのビジュアルエディタで適用されるタグ挿入による自動整形を制御する

 

まずはこのプラグインをインストールした後、有効化を行います。そして「設定」→「TinyMCE Advanced」から設定画面へアクセスし、項目の最後の方にある「段落タグの保持」にチェックを入れることで、ビジュアルエディタ側の自動整形を制御してくれるようになり、テキストエディタ側で記述したpタグなども削除されないようになります。

 

WordPressのビジュアルエディタで適用されるタグ挿入による自動整形を制御する

 

いかがでしょうか、普段はあまりないケースですが、クライアントワークにおいて仕様として含まれていたので改めて調べることになりました。どうやら他のプラグインなどでも対応はできるみたいですが、あまりプラグインに依存するのは良くないのでしっかり検討した方が安心ですね。

 

(参考にさせて頂いたサイト)
関数リファレンス/wpautop
WordPressの自動整形(ビジュアルエディタ含む)を無効にする方法

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?