スキップしてメイン コンテンツに移動

投稿

1月, 2015の投稿を表示しています

WordPressのカスタムフィールドの出力をCSSで素敵にデザイン(フィルターフック未使用版)

【趣旨】 WordPress(に限ったことではありませんが)のカスタムフィールドなどの出力で



な出力を、PHPの「preg_replace」を使用して



という素敵な見た目に変更します。
(フィルターフックは使用しませんので、functions.phpは編集不要です。)


【コード的には】
Before
<p>本日は晴天なりテキストテキストテキストテキストテキスト...</p> <p>二段落目テキストテキストテキストテキストテキストテキストテキスト...</p>

After
<p><span class='mydeco'>本</span>日は晴天なりテキストテキストテキストテキストテキスト...</p> <p>二段落目テキストテキストテキストテキストテキストテキストテキスト...</p>
CSS
.mydeco { color: #fff; background: #c6506d; margin: 6px 5px 0 0; padding: 17px 12px 12px; text-align: center; float: left; font-size: 44px; font-weight: 400; line-height: 30px; } (CSSはあらかじめ用意しておきます。)


【方法】 テンプレートの当該カスタムフィールドの出力が
<?php the_field('cf_mytxt',$post->ID); ?> だとして、出力箇所を以下のように変更します。
(※プラグイン「Advanced Custom Fields」での出力方法です。
 標準ではpost_custom('cf_mytxt')のように取得します。)

<?php $string = get_field('cf_mytxt',$post->ID); //(1) $pattern = "/^<p>(.)(.+)$/mu"; //(2) $replacement = "<p><span class='mydeco'…