[WordPress] 記事下に一言コメントを挿入！カスタムフィールドを使ってみよう
2017/02/01
こんにちは、okutani(@okutani_t)です。よくブログを読んでいると、記事を書いた人の一言コメントが記事下にあったりしますよね。なんかオシャレなので、当ブロクでも僕の一言コメントを入れるように設置してみました。
その一言コメント、WordPressでは「カスタムフィールド」を利用することで簡単＆便利に挿入することができます。
カスタムフィールドって少しややこしい言葉ですが、とっても便利なのでこの機会に覚えちゃいましょう。
ではさっそく設定をおこなっていきます。
スポンサーリンク
カスタムフィールドを設定する
カスタムフィールドを使うと、通常の投稿とは別に「ちょっとした追加項目」を増やすことができるんですね。
実際に作業していくと理解できると思いますので、設定していきましょう。
ダッシュボードから「投稿」→「新規追加」、右上に「表示オプション」タブがあるのでそちらをクリック。
クリックすると、するすると表示オプション欄が降りてくるので、「カスタムフィールド」にチェックを入れます。
本文を入力欄の下にカスタムフィールド欄が表示されました。「新規追加」をクリックしてカスタムフィードの初期設定をおこないましょう。
新規追加をクリックすると、名前の欄に文字を入力できるようになりました。お好きな文字を入力します。今回は「ヒトコト」にしました。右にある値の欄に適当な文字を入力しておきます。
入力が済んだら「カスタムフィールドを追加」をクリックしましょう。
これでカスタムフィールドの名前に「ヒトコト」が追加されます。
実は、このままだと記事内には何も表示されません。なので、ちょっとだけphpファイルをいじる必要があります。
phpファイルにカスタムフィールドを表示する記述をおこなう
設定するphpファイルはお使いのテーマによって違うかと思いますが、今回はstinger5の「single.php」に記述しています。他のテーマでは「content.php」等が該当するかと思います。
では、下記のコードをphpファイルのお好きな場所に記述しましょう。私は「<?php the_content(); //本文 ?>」のすぐ下に記述してみました。
<!-- 現在の投稿のカスタムフィールド（ひとこと）を取得する -->
<?php $v = get_post_meta($post->ID, 'ヒトコト', true);?>
<?php if(empty($v)):?>
//値が空の場合の処理
<?php else:?>
<p><?php echo esc_html(post_custom('ヒトコト'));?></p>
<?php endif;?>「値が空の場合」の処理に、一言コメントを書かなかった場合の処理を記述することができます。特に表示したいものがない場合、ここを空欄にしておくと良いですね。
phpファイルを保存したら、試しに先ほどの投稿画面から一言コメントを入力して投稿してみましょう。
ちゃんと投稿されているのが確認できました！
改行を反映させる
カスタムフィールド内ではデフォルトで改行が反映されません。反映させたい方は先程「single.php」に記述した下記コードをこのように変更してみましょう。
<p><?php echo esc_html(post_custom('ヒトコト'));?></p>
↓
<p><?php echo nl2br(esc_html(post_custom('ヒトコト')));?></p>これでフィールド内の改行が認識されるようになりました。
まとめ
カスタムフィールドの設定をおこなうことで簡単にコメントが挿入できるようになりました。
しかし、カスタムフィールドを設定しただけでは、ただ文字を表示しただけで終わってしまいます。divタグにclass属性を付け、CSSでスタイルを変更出来るようにしておくと良いですね。
追記：CSSレイアウト記事
一言コメントをCSSでレイアウトする記事を書きました。参考にしてください。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
