2020.08.11

カスタムフィールド｜記事に本文以外の情報やCSSを追加

この記事は1355日前に投稿されたものです。

wordpressで記事投稿するときに、本文やタイトル以外の情報を表示したい場合があります。例えば、お店の連絡先や営業時間をフォーマットに合わせて表示したい場合など、カスタムフィールドを使用すれば便利です。

この記事の目次

カスタムフィールドを使う

1.「表示オプション」（投稿画面上部）で「カスタムフィールド」にチェック
2.「カスタムフィールドを追加:」にある「新規追加」で項目名と値を入力
3. single.phpなどのテーマファイル（表示させる場所）にコードを追加

表示させたい場所に追加

<?php echo(get_post_meta($post->ID,’項目名’,true)); ?>

記事内のレイアウト調整やCSSのサンプルなど、その記事でしか使用しないCSSを追加したい場合がありますが、そういったときにもカスタムフィールドが便利です。

通常CSSは<head>内に記載しますが、実は普通にカスタムフィールドで<body>内にCSSを追加しても反映されます。でも・・・なんか気持ち悪いし、そもそもHTML5では推奨されていません。なので<head>内に追加したいです。

header.phpに追加

<?php if ( is_single()): ?>//シングルページなら
<?php echo(get_post_meta($post->ID, '項目名', true)); ?>
<?php endif;?>

<head>内にカスタムフィールドの値を追加するだけなので、JavaScariptやウェブフォントなんかをリンクで読み込みもいけますね。フッターに追加する場合も同じ感じです。

カスタムフィールドのプラグインです。もっと便利に使うならadvanced-custom-fieldsを使うのが手っ取り早いです。フォーマット通りのフィールドを複数表示したり、カテゴリーによって表示させるカフィールドを変えたり、いろいろできて便利です。