• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / TIPS / 固定ページのみ自動的に付与されるpタグやbrタグを無効にしてレイアウト崩れを伏せぐ

固定ページのみ自動的に付与されるpタグやbrタグを無効にしてレイアウト崩れを伏せぐ

池田祐太郎 | 2017年12月27日 公開


WordPressには「wpautop」という関数があり、改行を自動的にbrタグに変換したり、いい具合に本文をpタグで囲ってくれたりと、一件便利なのですが、stlyeを設定しているpタグが消えたり、勝手にbrが挿入されレイアウトが崩れるなど、予期せぬ挙動をしてくれます。

関数リファレンス/wpautop – WordPress Codex 日本語版

上記ページにもある通り、無効にするには下記コードをfunctions.phpに記載すれば無効にできます。

remove_filter( 'the_content', 'wpautop' );

これだと投稿、固定ページ、カスタム投稿含み全てにおいて無効になります。
運用上、それで問題ないケースであればいいのですが、
更新するコンテンツである投稿タイプやカスタム投稿をクライアントが更新していく際に、エンターキーの改行にて改行したほうが良かったり、わざわざpタグを打つ必要が無い方がいいケースが多いと思います。

そのようなケースのために、「固定ページだけwpautopを無効にして、投稿やカスタム投稿は引き続き有効にする」というコードをご紹介します。

サンプルコード

以下をfunctions.phpへ記載します。場所は任意の箇所へ&バックアップは忘れずに取っておきましょう。

/*
* 固定ページのみ自動的に付与されるpタグやbrタグを無効
*/
function disable_page_wpautop() {
  if ( is_page() ) remove_filter( 'the_content', 'wpautop' );
}
add_action( 'wp', 'disable_page_wpautop' );

有効と無効にした違いと管理画面の見え方

この「wpautop」が有効とときの見え方と無効の見え方を見比べてみます。
以下が有効、つまりデフォルトの見え方です。

そして以下が無効にしたときの見え方。

無効にすると改行がなくなっているのがわかります。HTMLタグを利用していないテキストのため、ちょっとみえづらいですが、HTMLコーディング→WP構築というフローの場合は余計なレイアウト崩れや、クライアント編集による崩れなどの恐れがなくなるので、クライアントワークには説明前提の上、導入するといいかもしれません。

ちなみに、上記の画像の管理画面の見え方です。

管理画面では改行をしていますが、実際のフロント画面には反映されていないことがわかります。

メールコンサルティング
WordPress保守管理サービス

カテゴリTIPS 関連タグ:WordPressカスタマイズ

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

この記事と関連する記事

同一ページでMW WP Formのフォームを切り替える方法
2023年8月29日
タグ: WordPressカスタマイズ
カテゴリー: TIPS
WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
2022年1月27日
タグ: WordPressカスタマイズ
カテゴリー: WordPress
フレームワークを使ってWordPressサイトをリニューアルしたら表示速度が速くなった話
2018年6月4日
タグ: Webサイト高速化, WordPressカスタマイズ
カテゴリー: WordPress, ホームページ制作, モバイル

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • 2024-2025年末年始の営業のご案内
  • WordPressのプラグイン自動更新のロールバック機能が正しく動くのか確認してみた
  • 遅延読み込み開始させる画像を変更させるWordPressカスタマイズ
  • WordPressで特定の画像やアイキャッチ画像をlink rel=”preload”に設定する
  • WordPressのプラグインがどのくらい表示速度を重くさせるのか22個のプラグインで検証

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

ai Android ChatGPT CMS css DALL-E elementor gmail google workspace Gutenberg HTML iPhone jQuery Mac Photoshop php SEO SNS ssh SSL Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン セキュリティ ツール ブログ プラグイン マーケティング リニューアル レスポンシブWebデザイン 保守管理 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2025 high five create All rights reserved.