WEBサイト制作効率化のための、
デザイン・wordpressの試作や覚え書き

ワードプレス

WordPress コード自動整形を解除する

2019-08-10

コードが勝手に変わった!?

テキストエディターで編集していたのではじめは気がつきませんでした。
ある日ビジュアルリッチエディターを使ってみたら、なんと表示くずれが!コードを確認すると、なぜか<p>が入っていたり、<span>が消えていたり。

調べてみると、WordPressの機能でコードが自動整形されるようです。
確かにビジュアルリッチエディターで投稿するなら、この機能は親切かも?でもcssの指定が効かなくなるのは困ります。ビジュアルリッチエディターを使わなければいいんですが、納品した後お客さんが更新するならビジュアルのほうが使いやすいです。

テキスト⇔ビジュアルの行き来でコードを変えたくない!そんな時にはこちら。
固定ページのWordPressのコード自動整形を解除するには、functions.phpに下記のコードを追加します。

投稿ページのWordPressのコード自動整形解除は、この部分を入れ替えます。

投稿ページはお客さんがビジュアルエディターのみで更新していくなら<br>を入力しなくてもenterで改行が入るよう、自動整形は残したままでいいかもしれないです。

自分の経験ですが、固定ページまたは投稿ページ内でコードが閉じられていない時(フッターやテンプレート内に閉じタグがある場合)にも</div>などの閉じタグが自動で挿入され、表示が崩れたことがあります。こちらは上のコードをfunctions.phpに記述しても関係なかったので修正しました。

編集ページを開くときは必ずテキストモードで開きたい!

ビジュアルモードで編集を終えて閉じてしまったら、次に開くときはビジュアルモードです。もし表示が崩れてしまっていたら元のコードに戻らないので面倒ですね。そんなことが起こらないよう編集ページをテキストモードで開く設定をしたいと思います。

functions.phpに下記のコードを追加します。

-ワードプレス

関連記事

特定のページだけにcssやjsを読み込ませたい!

JavaScriptファイルはheader.phpかfooter.php、cssファイルはheader.phpに記述しています。でもJavaScriptのファイル、読み込まれるのに時間がかかりページが …

ページの最初の画像を自動でアイキャッチにする

読みやすさや視線誘導のために、記事一覧にアイキャッチ画像を設定します。 「読んでみたい」と思ってもらえるアイキャッチ画像を準備したいですね! WordPressでは編集画面右下の「アイキャッチ画像を設 …

WordPress よく使うおすすめプラグイン

プラグインが増えれば内容によってスクリプトが増え、ページの読み込みが遅くなるので、使い過ぎないようにします。私が今まで制作していて本当に助かっているプラグインはこちらです!

固定ページでphpを使いたい

例えばトップページを固定ページで作成したとき、お知らせの新着一覧を固定ページ上で好きな位置に配置したいな、と考えたことはありませんか?

サイトに訪れていただきありがとうございます!このブログでは、調べたこと、試したことを次回スムーズに行うための覚え書きをアップしています。普段は埼玉のWeb制作会社に勤務しています。