[WordPress] デザインの邪魔になる p タグを取り除いた固定ページのテンプレートを作る

ある固定ページの記事内だけ特別なデザイン（スタイル）を適用したい時があります。この場合、記事内にスタイルを適用するテキストを書くことになります。ですが、WordPress は公開されるテキストに p タグを自動付加するため、こちらの意図しないところに空白が出来、デザインの邪魔になることがあります。

ある特定の固定ページは p タグ自動付加を許さず、しかし他の固定ページは従来通りに運用するために、ページテンプレートの仕組みを利用してみました。

ページテンプレートを作成する

普通の WordPress の固定ページのテンプレートはひとつしか用意されていません。ですが、テンプレートはいくつも増やすことが出来、さらに複数の固定ページにそれぞれ別のテンプレートを適用することが出来ます。

参考：Page Templates « WordPress Codex

では、固定ページ page.php を元にしたページテンプレートを作成します。当ブログの page.php を例に説明します。

<? get_header() ?>

<div id="entry">
  <? if (have_posts()): while (have_posts()): the_post(); ?>
    <h1><? the_title() ?></h1>
    <div class="meta"><? echo get_the_date('Y/m/d H:i') ?> <?php the_category(' '); ?> <?php the_tags(' '); ?> <?php edit_post_link('編集', ''); ?></div>
    <?php the_content(); ?>
  <? endwhile; endif; ?>
</div>

<? get_footer() ?>

上記 page.php を複製して、名前を変更した remove-p-tag-page.php を用意します。場所は同じ階層です。そのファイルを編集し、ページテンプレートであることを宣言するコメントアウト文を書きます。Template Name は必須ですが、Description は必須ではありません。

<?php
/*
Template Name: デザインテンプレート
Description: WordPress により自動付加される p タグを取り除いたページテンプレート
*/
?>

<? get_header() ?>

<div id="entry">
  <? if (have_posts()): while (have_posts()): the_post(); ?>
    <h1><? the_title() ?></h1>
    <div class="meta"><? echo get_the_date('Y/m/d H:i') ?> <?php the_category(' '); ?> <?php the_tags(' '); ?> <?php edit_post_link('編集', ''); ?></div>
    <?php the_content(); ?>
  <? endwhile; endif; ?>
</div>

<? get_footer() ?>

p タグを自動付加されないようにする

p タグを自動付加されないようにするために、記事を出力する the_content() 関数の前に、remove_filter(‘the_content’, ‘wpautop’) を追加します。

remove-p-tag-page.php に書き加えます。

<?php
/*
Template Name: デザインテンプレート
Description: WordPress により自動付加される p タグを取り除いたページテンプレート
*/
?>

<? get_header() ?>

<div id="entry">
  <? if (have_posts()): while (have_posts()): the_post(); ?>
    <h1><? the_title() ?></h1>
    <div class="meta"><? echo get_the_date('Y/m/d H:i') ?> <?php the_category(' '); ?> <?php the_tags(' '); ?> <?php edit_post_link('編集', ''); ?></div>
    <?php remove_filter('the_content', 'wpautop'); ?>
    <?php the_content(); ?>
  <? endwhile; endif; ?>
</div>

<? get_footer() ?>

これでこのページテンプレートでは、記事の内容に p タグが自動付加されなくなります。次は、このテンプレートを固定ページに適用します。

参考：WordPressで自動挿入されてしまう「p」タグを削除する方法 | GLOSSY

投稿画面からページテンプレートを選択する

管理画面から p タグを取り除く固定ページに移動します。[ページ属性] → [テンプレート] から、先ほど作成したデザインテンプレートを選択します。

デザインテンプレートを適用し、記事を保存すれば、その固定ページは p タグが自動付加されなくなります。また、他の固定ページは従来通りに p タグが自動付加されます。

このように WordPress のページテンプレート機能を使用すれば、同じ固定ページでもデザイン（スタイル）を変えることが出来ます。

Pocket