• 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保守管理サービス

Filed Under: TIPS 関連タグ:WordPressカスタマイズ

池田祐太郎

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

この記事と関連する記事

WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
2022年1月27日
タグ: WordPressカスタマイズ
カテゴリー: WordPress
フレームワークを使ってWordPressサイトをリニューアルしたら表示速度が速くなった話
2018年6月4日
タグ: Webサイト高速化, WordPressカスタマイズ
カテゴリー: WordPress, ホームページ制作, モバイル
WP固定ページや投稿内でphpファイルを読み込むショートコード
2018年4月1日
タグ: WordPressカスタマイズ
カテゴリー: TIPS

人気記事

  1. 同一サーバー上に構築するWordPressのテスト環境の作り方
  2. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  3. ダウンロードして即使えるサイトマップ(サイト構成図)のテンプレート5点
  4. コラム:class名とid名はどうやってつければいい?
  5. Elementorで表を作る3つの方法
  6. 【2022年最新】WooCommerceで作られた国内ECサイト一覧まとめ

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • なぜかSSL化されないエックスサーバーのWordPress 簡単インストール機能でhttpsに変更し常時SSLを実現する方法
  • ブラウザ戦争の一区切り。Internet Explorer のサポート終了で思うこと
  • エクセルを使って顧客データから任意の条件に合う顧客を抽出する方法
  • 2022年以降WordPressのテーマを選ぶ際にこれだけは注意しておきたいポイント
  • ブロックエディタを拡張するSnow Monkey Editorプラグインはコーポレート+ブログに適切

カテゴリー

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

タグ

Android aws Backlog BtoC CMS css Dropbox Paper elementor google workspace Gutenberg HTML IE10 iPhone jQuery Mac php SEO SNS ssh SSL Sublime Text Webサイト高速化 WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウド クラウドソーシング サブスクリプション サーバー ショートカット スマホサイト スマートフォン ツール フルサイト編集 ブログ プラグイン マーケティング リニューアル 保守管理 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 特定商取引法に基づく表示
  • 転載・引用について
  • Facebook

© 2022 high five create All rights reserved.