• 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をはじめとしたCMSの導入を10年以上にわたって手掛けており、中小企業から大企業までコーポレートサイト・ランディングページ・ECサイト・ブランドサイト等、幅広いWebサイトの企画・制作・開発・プロモーション業務などを行う。2012年にハイファイブクリエイトを創業し、現在はディレクションや開発業務などを担当している。 プロフィール詳細

この記事と関連する記事

フレームワークを使ってWordPressサイトをリニューアルしたら表示速度が速くなった話
2018年6月4日
タグ: Webサイト高速化, WordPressカスタマイズ
カテゴリー: WordPress, ホームページ制作, モバイル
WP固定ページや投稿内でphpファイルを読み込むショートコード
2018年4月1日
タグ: WordPressカスタマイズ
カテゴリー: TIPS
一覧ページ等で、アイキャッチ画像がなかったら一番目の画像を取得し、さらに画像がなかったら定義した画像を表示するカスタマイズ方法
2018年3月22日
タグ: WordPressカスタマイズ
カテゴリー: TIPS

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • WordPressの保守が必要な理由とチェックするべき9点
  • Contact Form 7 に見つかったファイルアップロードの脆弱性はどのくらい危険なのか?
  • 2020-2021年末年始の営業のご案内
  • [WordPressサイト向け支援キャンペーン] WordPress保守管理の無料コンサルティングを実施
  • お名前.com レンタルサーバーでSSH接続する方法

カテゴリー

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

タグ

Android BtoC Chrome CMS css Fireworks Google+ HTML Illustrator iOS iPhone jQuery Mac mixi Photoshop初心者 php SEO SNS Webサイト高速化 WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 お知らせ アクセス解析 アプリ カスタマイズ カフェ クラウド サーバー スマホサイト スマートフォン ソーシャル ツール フラットデザイン ブログ プラグイン マーケティング ライフログ リニューアル 保守管理 制作のご依頼 最適化 集客するサイト構築 飲食店

アーカイブ

CONTACT

お問い合わせはこちら

Footer

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

© 2021 high five create All rights reserved.