WordPressテーマ、カスタマイズの入門編 #wcafeFuji


FacebookのWordCafe Fujiグループの参加者の方の質問投稿(?)を受けて、Fb上で返答しましたがブログ記事にもしてみます。制作者以外の方も多いグループですが、何かしら解決に導けたらいいな…。
WordPressの問題のひとつとして、<p>タグの自動挿入というものがあります。
記事中で2行以上の改行をすると<p>タグが自動的に挿入されてしまい、場合によっては記事中のレイアウトが思い通りにならないことがあります。1行の改行の場合は、<br>タグが挿入されます。この場合は、特にレイアウト崩れに悩まされることはないでしょう。

pタグを自動挿入させないようにする方法を紹介する前に、デフォルトテーマ(TwentyTen〜Twenty Fourteen)のカスタマズをする方法を紹介します。
基本的には、使用しているテーマのスタイルシート(style.css)をパソコン上で編集し、FTPでアップロードすると、自分の希望通りの表示になります。
が! コレには注意が必要で、デフォルトテーマはときどき更新されることがあります。その更新を適用するとせっかく自分がカスタマイズした内容が上書きされ、消えてしまいます。
そこで、使っている「デフォルトテーマ」に対する「子テーマ」というものを作り、デフォルトテーマを更新しても影響がないようにすることができます。
子テーマの作り方に関しては、以下のサイトがわかりやすいかと思います。

【重要】WordPressテンプレートのカスタマイズ前に子テーマをつくる方法CSS篇|ThePresentNote

子テーマに、自分が変更したい部分のCSSを書き込みます。
たとえば、ブログ記事を表示した状態(シングル表示)でのみ表示を変更したい場合は、デフォルトテーマのsingle.phpを開いてみます。

<div class="hoge">ほげほげ</div>

という部分のレイアウトを変更したい場合、子テーマのstyle.css

div.hoge{
    /*(ここに変更したいスタイルを書き込む)*/
}

のようにして子テーマ用のフォルダにアップロードすると、その部分が親テーマの同じ部分よりも優先されます。また、親テーマにはないスタイルを書き込むときも、子テーマのstyle.cssに書き込むとそれが読み込まれます。

同じ方法で、single.phpsideber.phpなど、他のファイルも上書きすることができます。(子テーマ用のフォルダにアップロードすることが重要。デフォルトテーマに上書きしないようにしましょう)

さて、最初にお話しした<p>タグの自動挿入を回避する方法ですが、サイト全体で自動挿入を止めたい場合は、functions.phpに以下のコードを追加することで解決できます。(これも、子テーマにfunctions.phpを作り、そこに記述します。間違えるとページが真っ白になることがあるので注意。)

<?php
remove_filter( 'the_content', 'wpautop' ); // 記事本文を書いた部分のpタグ除去
remove_filter( 'the_excerpt', 'wpautop' ); // 記事の「抜粋」機能を使っている、その部分のpタグ除去
?>

また、single.phppage.phpなど、特定の条件でpタグの自動挿入を避けたい場合は、single.phppage.phpの中にある

<?php the_content(); ?>

の手前に

 <?php remove_filter('the_content', 'wpautop'); ?>

と記述すると、page.phpならページ、single.phpならブログ記事のpタグ自動挿入がされなくなります。
phpコードを使うことなどで、もっと条件を絞ることも可能です。
ただし、これを行うことで、通常の改行もされなくなるため、改行をしたい場所には必ず<br>タグを記述する必要があります。