the_post_thumbnail()によりアイキャッチ画像を表示して、moreで自動的にfloatを解除する機能を実装するまで

2013/05/22
- PHP
- WordPress

今日、WordPressの投稿画面で「アイキャッチ画像」というタグの下にある項目が気になった。

アイキャッチ画像ってアイキャッチ画像ですよね？

気になったら今すぐ検索！

検索したら、あちこちのサイトで見つかりました。
なんでも、WordPress3から追加された機能らしく、アイキャッチ画像をアップロードして設定することで、テンプレートタグthe_post_thumbnail()で表示が可能で、表示する際にサイズの指定も可能らしい。

・WordPressのアイキャッチ画像の使用方法【基本＆応用】

今まで記事の本文に画像を追加して、アイキャッチ画像として使用していました。なので、投稿時のリンクの設定などが煩雑で、しかも記事の中に直接記述しているので、single.php（記事ページ）でも不要なリンクがついてました。

それが、the_post_thumbnail()でアイキャッチ画像を表示できれば、index.phpやcategory.php、search.php、tag.phpなどの記事リストでは記事ページへのリンクをつけて、single.phpでは画像を表示するだけといったことが可能になります。

floatの解除も自動でできれば！？超ラクちん

今までは、アイキャッチ画像も記事に直接記述していましたが、アイキャッチ画像に適用していたfloatの解除も記事の中に記述していました。アイキャッチ画像をテンプレート化するだけでも、かなり楽になりますが、floatの解除も自動でできればメチャメチャ楽になります。

記事は the_content() で出力されるため、通常は途中にレイアウト用の要素を挿入することができませんが、「続きを読む」のリンク先を指定することができるように #more があるはずなので、そこに clear:both; を記述すれば一件落着！とリニューアルするときに思いましたが、WordPressの場合は、#more-記事ID になっちゃうんですね！記事ごとにID名が変わっちゃうので、CSSで clear:both; を指定できず、時間もなかったため記事の中に直接記述する方法をとりました。

しかし、せっかくアイキャッチがテンプレート化できるので、floatの解除もテンプレート化したいと思い調べたら、あっけなく手段がみつかりました。

PHPのstr_replace()関数で文字列を置換すれば良いんじゃないか？

get_the_content() で記事内容を変数に代入して、str_replace()関数で文字列を置き換えることで、moreを含んでいるパラグラフにidやclassを追加すればCSSでfloatの解除ができるんじゃないか？と思ったわけです。

割と簡単そうだったけど、テンプレートが上手くいったら今まで書いた記事を全て修正する必要があるので、午後の授業が終わってからすることにしました。この時点では、１～２時間ぐらいで終わるだろうと簡単に思っていました。

しかし、しかし、授業が終わって試してみると・・・

get_the_content()で記事内容を変数に代入して出力してみるとパラグラフが追加されない。自動的に追加されるパラグラフを嫌う人も多いですが、文法的には追加してもらった方が正しいだろうし、段落間のマージンの調整もできるので私はあった方が良いです。

話は戻りますが、パラグラフが追加されないので置換によりパラグラフにidやclassを追加するということができない。
一つ目の案は、速攻ボツになりました。

more-link の #more-xxxx を削除する

しかし、今回はどうしても実装したかったので、あきらめず調べました。
そうしたら、いくつかのサイトで「more-link の #more-xxxx を削除する」なるものを発見！削除できるんだったら、変更もできるだろうと思い詳しく見てみました。

<?php
// #more-$id を削除する。
function custom_content_more_link( $output ) {
    $output = preg_replace('/#more-[\d]+/i', '', $output );
    return $output;
}
add_filter( 'the_content_more_link', 'custom_content_more_link' );
?>

上のリンク先のページで紹介してあるコードがコレですが、4行目を下のように変更すれば記事IDなしの #more にできそうだ！と思い、さっそく functions.php に追加してみましたが、記事IDが消えないorz

<?php
// #more-$id を削除する。
function custom_content_more_link( $output ) {
    $output = preg_replace('/#more-[\d]+/i', '/#more', $output );
    return $output;
}
add_filter( 'the_content_more_link', 'custom_content_more_link' );
?>

いくつか同じような記事のページを参考に functions.php に追加してみたけど、どのコードを試しても記事IDが消えない。

single.phpのmoreでfloatをclearしたい

もう何で検索して見つけたか覚えていませんが、下のリンクのページを見つけました。同じようなことを考える人もいるんですね！

・single.phpのmoreでfloatをclearしたい

このページでは、<br clear=”all”> を追加するようになってました。
しかし、CSSで解除したかったので、spanのID名を#moreに変更して、CSSで display:block にして clear:both を指定しました。

// #more-$id  を #more に置き換え
function _my_custom_func($content){
    global $post;
    if(!is_single()){
        return $content;
    }
    return str_replace('<span id="more-' . $post-&>ID . '"></span>', '<span id="more"></span>', $content);
}
add_filter('the_content', '_my_custom_func', 12);

出来ました！

これで、やっと固定のid名ができたので、CSSで clear:both; が指定できます！