vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万PV〜。

[WordPress] 記事下に一言コメントを挿入!カスタムフィールドを使ってみよう

      2017/02/01

LINEで送る
Pocket

wp-hitokoto-c
こんにちは、okutani(@okutani_t)です。よくブログを読んでいると、記事を書いた人の一言コメントが記事下にあったりしますよね。なんかオシャレなので、当ブロクでも僕の一言コメントを入れるように設置してみました。

その一言コメント、WordPressでは「カスタムフィールド」を利用することで簡単&便利に挿入することができます。

カスタムフィールドって少しややこしい言葉ですが、とっても便利なのでこの機会に覚えちゃいましょう。

ではさっそく設定をおこなっていきます。

スポンサーリンク

カスタムフィールドを設定する

カスタムフィールドを使うと、通常の投稿とは別に「ちょっとした追加項目」を増やすことができるんですね。

実際に作業していくと理解できると思いますので、設定していきましょう。

ダッシュボードから「投稿」→「新規追加」、右上に「表示オプション」タブがあるのでそちらをクリック。

クリックすると、するすると表示オプション欄が降りてくるので、「カスタムフィールド」にチェックを入れます。

wp-hitokoto

本文を入力欄の下にカスタムフィールド欄が表示されました。「新規追加」をクリックしてカスタムフィードの初期設定をおこないましょう。

wp-hitokoto2

新規追加をクリックすると、名前の欄に文字を入力できるようになりました。お好きな文字を入力します。今回は「ヒトコト」にしました。右にある値の欄に適当な文字を入力しておきます。

入力が済んだら「カスタムフィールドを追加」をクリックしましょう。

wp-hitokoto3

これでカスタムフィールドの名前に「ヒトコト」が追加されます。

実は、このままだと記事内には何も表示されません。なので、ちょっとだけ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ファイルを保存したら、試しに先ほどの投稿画面から一言コメントを入力して投稿してみましょう。

wp-hitokoto4

ちゃんと投稿されているのが確認できました!

改行を反映させる

カスタムフィールド内ではデフォルトで改行が反映されません。反映させたい方は先程「single.php」に記述した下記コードをこのように変更してみましょう。

<p><?php echo esc_html(post_custom('ヒトコト'));?></p>

↓

<p><?php echo nl2br(esc_html(post_custom('ヒトコト')));?></p>

これでフィールド内の改行が認識されるようになりました。

まとめ

カスタムフィールドの設定をおこなうことで簡単にコメントが挿入できるようになりました。

しかし、カスタムフィールドを設定しただけでは、ただ文字を表示しただけで終わってしまいます。divタグにclass属性を付け、CSSでスタイルを変更出来るようにしておくと良いですね。

追記:CSSレイアウト記事

一言コメントをCSSでレイアウトする記事を書きました。参考にしてください。

[WordPress] 記事下の一言コメントをCSSで装飾してみた
こんにちは、okutani(@okutani_t)です。以前、WordPressのカスタムフィールドを使っ...
2015-05-30 14:40
はてブ

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
追記したCSSレイアウトをおこなえば、こんな感じで表示されます。CSSの記述は少しめんどうでしたが、オシャレになっていい気分です(`・ω・´)

 - WordPress

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

WordPressにGravatarを導入してアバターを設定してみよう!

こんにちは、okutani(@okutani_t)です。WordPressでは、 …

WordPressの初期設定手順まとめ

こんにちは、okutani(@okutani_t)です。サイト立ち上げ時に、We …

本番環境のWordPressサイトを『VCCW+WordMove』でローカルと同期!

こんにちは、okutani(@okutani_t)です。VCCWを使うとWord …

[Stinger5] リード文下のAdSense広告をPC・スマホ用サイズに分岐して表示する

こんにちは、okutani(@okutani_t)です。AdSenseの広告サイ …

WordPressサイトをGitで管理。Macローカル開発環境編

こんにちは、okutani(@okutani_t)です。みなさんはちゃんと「Wo …

ロリポップのWordPressデータベースを手動バックアップする方法

こんにちは、okutani(@okutani_t)です。みなさんはWordPre …

[WordPress]記事内で使える『連載記事一覧』機能をPHPで作ってみた

こんにちは、okutani(@okutani_t)です。ブログを書いていると、連 …

『Vagrant+VCCW』でWordPressローカル環境を構築してみよう

こんにちは、okutani(@okutani_t)です。お店のサイトやブログなん …

初心者でもOK!WordPress有料テーマ「New Standard」を使ってみよう【PR記事】

こんにちは、okutani(@okutani_t)です。最近はPHPをせこせこ書 …

WordPressでテーブルを利用する方法(HTML+CSS)

こんにちは、okutani(@okutani_t)です。サイトを運営していると、 …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。