WordPressの投稿抜粋をデザインする方法？ | 京都の行政書士・みやこ事務所

＜追記＞
　このブログを書いた後に、プラグインに関する関連記事を書いています。
WordPressの便利な抜粋用プラグイン『Advanced Excerpt』
　このブログ記事の本文で書いたことを修正している記事ですので、そちらもご参照お願い致します。

　今日は、WordPressの記事抜粋をアレンジする一つの案です。タイトルには「デザイン」となっていますが、正確には抜粋そのものをデザインすることはできないと思われます。

＜ポイント＞
・WordPressの記事抜粋時に、ある部分だけフィーチャーさせたい場合、カスタムフィールドを使うとよい。
・カスタムフィールドにその抜粋部分を掲載する場合、各種テンプレートにタグを埋め込む必要がある。

＜大変参考になるサイト＞
・「PHP が分からない人でも WordPress のカスタムフィールドを使ってカスタマイズする方法」 – WEBLE

１．WordPressにおける記事抜粋

　これについては、コード付きの解説が豊富にありますので、検索されるとよいと思います。私の場合、別のサイトで記事抜粋のタグを使ったのですが、その抜粋箇所に、独立して太字でフィーチャーしたい箇所が出てきました。
　ところが、抜粋はＣＳＳを反映せずに文字データだけを読み込んで表示するようで、検索してもレイアウトの仕方がわかりませんでした。
　ですので、抜粋そのものをデザインすることは諦め、太字で表示したい箇所を独立して入力する、カスタムフィールドを使って実現しました。

２．具体的な方法

　カスタムフィールドについては、先ほどのWEBLEさんのサイトがとても分かりやすく教えて下さっています。
　そのレクチャーを参考に、コードを書いて、たとえば「index.php」の

<?php the_excerpt();?>

の前に貼り付けます。
　表示を調整したい場合は適宜マークアップしてCSSで修正します。私の場合、

<h4><?php
    $field = get_post_meta($post->ID, 'phrase', false);
    if(count($field) > 0) {
        foreach($field as $value) {
            echo $value . '<br>'
        }
    } else {
        echo '今日の名言はありません。';
    }
?>
</h4>

　とまぁ、私の場合は直接ｈ４タグでくくっています。
　これで高さをCSSで調整したりしますと、
カスタムフィールドの表示例
　と、こんな具合にフィーチャーしたい部分がちゃんとわかるように表示されることになる訳です。

３．修正箇所

　しかしながら、これは本文表示の一部を別枠に移していることになるので、「single.php」や「archive.php」も同じように、本文の前にコードを書き足しておく必要があります。

４．まとめ

　WEBLEのライターさんは、カスタムフィールドについて

「一度覚えれば一生使えます」

　とおっしゃっていますが、確かにこのカスタムフィールドはとても便利な機能ですね。勉強になりました。
　このブログは事務手続専門の行政書士が綴っていますが、マイサイトは全てワードプレスで自作しているので、記事もWordPressネタが多くなる時があります。他にも京都や法律についてのことなど書いてますので是非チェックお願い致します。