[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 のページテンプレート機能を使用すれば、同じ固定ページでもデザイン(スタイル)を変えることが出来ます。