コントローラー

WEB

WordPress でレイアウトが崩れる自動整形を回避する方法

WordPress で固定ページを作成しようと思い、コードを記述して表示を確認してみるとレイアウトが崩れている!! こんなことでお困りではありませんか?

これは、どうやら WordPress には、自動で <br><p> などが作成されてしまう機能があるからのようです。

この WordPress の自動整形を回避する方法をご紹介します。

WordPress の自動整形を回避する方法

全ての投稿に実装

全ての投稿の自動整形を回避する方法です。「functions.php」に記述するだけです。

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

テンプレートごとに実装

次に、上記のように『全ての投稿に実装』するのではなく、『固定ページのみに実装したい』という場合について説明します。

こちらの方法だと、クライアントさんがブログを投稿するのに使用する「single.php」にはそのまま自動整形機能を残す、ということができますね。

page.php(自動整形させたくないテンプレート)

<?php remove_filter ('the_content', 'wpautop'); ?> // <?php the_content(); ?>の前に入れる

 

下記のように functions.php で制御する方法もあります。

add_filter('the_content', 'wpautop_filter', 9);
function wpautop_filter($content) {
  global $post;
  $remove_filter = false;
      
  $arr_types = array('page'); //自動整形を無効にする投稿タイプを記述
  $post_type = get_post_type( $post->ID );
  if (in_array($post_type, $arr_types)) $remove_filter = true;
      
  if ( $remove_filter ) {
    remove_filter('the_content', 'wpautop');
    remove_filter('the_excerpt', 'wpautop');
  }

  return $content;
}

まとめ

実装が終わったら、特に既存のブログの場合は、レイアウトに崩れがないかチェックを忘れないようにしましょう!!

 

 
スポンサードリンク
 
スポンサードリンク

海を背景にフレームを持つ女性の手Photoshopで簡単!!画像に枠線を作る方法前のページ

お名前.com でドメインを取得する方法次のページドメイン

関連記事

  1. 子猫をのせた乳母車を押す親猫

    WEB

    とっても簡単!!WordPress(ワードプレス)の子テーマの作り方

    ずっと面倒だと思っていた WordPress(ワードプレス)の子テーマ…

  2. 郵便受け

    WEB

    要素の高さを揃える 『matchHeight.js』の使い方

    float させた横並びのカラムの高さをそろえたい!! だけど、ボック…

  3. サーバー

    WEB

    エックスサーバー(XSERVER)でサーバー契約してみよう!!

    ワードプレス(WordPress)でブログを始める際にまず必要となるの…

  4. パソコンを前に困っている女性

    WEB

    WordPress簡単移行ができずに手動で移行作業を行う方法

    私は普段からレンタルサーバーはエックスサーバーを利用しているのですが、…

  5. ドアに差し込まれた封筒

    WEB

    Contact Form 7 のメールが届かない?『WP Mail SMTP』で即解決!!

    WordPressでは『Contact Form 7』というプラグイン…

  6. mistake

    WEB

    『FileZilla』で転送に失敗した場合の操作方法について

    FTPソフト『FileZilla』で転送する際に、『失敗した転送』が発…

== WORDPRESS 完全マニュアル ==

wordpress

よく読まれている記事

  1. ケーブル
  2. ブランコに乗る女の子
  3. Google Search Console
  4. ペンを持つ手
  5. タイプライター
  6. 子猫をのせた乳母車を押す親猫
  7. ドアに差し込まれた封筒
  8. 郵便受け
  9. コントローラー
  10. チェックリスト

当サイトで使用しているテーマはこちら!!

Gutenberg 完全対応のテーマならコレ!!

Adobeを買うのならどこよりも安い?!

WordPressでブログ始めてみませんか?

パソコンを覗き込む二人の女子
  1. local by flywheel

    WEB

    Local by Flywheel を使って、ローカル環境を構築してみよう
  2. 黄色い壁を背に喜ぶ女性

    WEB

    画像圧縮なら『TinyPNG』、使い方とその実力を検証します
  3. チェックリスト

    WEB

    『wpX Speed』でDNSレコードから所有権を確認する方法
  4. crayon,クレヨン

    WEB

    記事内にソースコードを表示する『Crayon Syntax Highlighte…
  5. パソコンを前に困っている女性

    WEB

    WordPress簡単移行ができずに手動で移行作業を行う方法
PAGE TOP