WordPressのカスタムフィールドで「今日のひとこと」を表示する方法

スポンサーリンク

ちょっと前から、エントリーの下の方に「今日のNo Way!」っていうのを表示するようにしています。

「No way」って、道がない、つまりは「まさか?」とか「マジで?」という感じの意味です。外国人が大袈裟なアクションとともに「No way!」って叫んでるの見たことある人も多いはず。

日々生活していると、そんな「No way」的な出来事ってちょくちょくありますが、それだけでブログを書けることはまずないです。でも、ちょっと伝えたい!それで「今日のひとこと」みたいなイメージでブログの下に置いておこうと思ってつけてみました。

ニューバランス初心者におすすめな2足 noway
(こういうの)

素人がカスタムフィールドをつかってみる

カスタムフィールドは、例えばお店紹介ブログなどで必ず入力する項目を、予め設定しておき、そこに記入した内容を設定したレイアウトで表示することができます。

データベースにデータが入っているので、その住所と電話番号の順序を変えたいときなど、簡単に変更できるというメリットもあります。今日のひとこと的なところは、あまり入替えとかはないと思いますが、カスタムフィールドを使ってみたくて今回やってみました。

プログラマーでもない自分はプラグインを使ってカスタムフィールドを使う方法を紹介します。

『Advanced Custom Fields』があれば何とかなる

カスタムフィールドはPHPファイルをいじってやる方法もありますが、素人の自分にはプラグインです。まずは、『Advanced Custom Fields』プラグインを新規追加して有効化します。

新規投稿を追加 ‹ noway — WordPress

メニューに「カスタムフィールド」項目が追加されるので、そちらをクリックすると「フィールドグループ」というタイトルのページに切り替わります。横に「新規追加」ボタンがあるのでクリックして、新しいカスタムフィールドを追加します。

フィールドグループを新規追加 ‹ noway — WordPress

まずはタイトルを入力し(今日のひとこととしておきます)、それから「+フィールドを追加」をクリックします。

フィールドグループを新規追加 2‹ noway — WordPress
フィールドに必要事項を入力します。

フィールドラベルは編集ページに表示される名称です。フィールド名は、半角英数(アンダーバーも可)で、つけておきます。後で使うので、打ち間違えにくいわかりやすいのがいいです。

フィールドタイプは「テキスト」や「テキストエリア」や「数値」など色々用意されているので、自分の用途にあったものを選びます。今回はひとことなので、一行入力が可能な「テキスト」を選択します。

今回は以下のように設定
フィールドラベル:今日のひとこと
フィールド名:today_noway
フィールドタイプ:テキスト

フィールドグループを新規追加3 ‹ noway — WordPress
位置の設定ではカスタムフィールドを表示させる投稿タイプを設定させることができます。

投稿の場合は「POST」、固定ページに表示させる場合は「PAGE」を選択します。今回は「POST」を選択します。

ここまで設定できたら、右上の公開をぽちっと押します。

で、投稿画面に行くと通常の投稿画面の下に、「今日のひとこと」が追加されています。で、こちらに入力するのですが、入力しただけではブログには何も表示されません。

ブログでのカスタムフィールドの表示設定

今回は投稿の下に「今日のひとこと」を入れるので、「外観」>「テーマの編集」に移動して、投稿用のphp(content.phpなど)を選択します。それから表示させたい箇所に下記のコードをはりつけます。

<?php if ( get_post_meta($post->ID,'today_noway',true ) ): // 今日のNowayの処理 ?>
<p class="post-noway"><b>今日のNo way!</b><br /><?php echo $post->today_noway; ?></p>
<?php endif; ?>

そうするとこのエントリーの下にあるように「今日のNo way!」が表示されます。ifで書いてあるのは、入力しなかった時は表示されないようにするためです。
全部に表示するなら、以下のようにすると入力の有無に関わらず表示されます。

今日のNo way!:<?php echo $post->today_noway; ?>

ちなみに「today_noway」となっているところがフィールド名なので、自分で設定したフィールド名に変更するのを忘れないように。

あと、CSSでレイアウトの設定についても紹介しておきますね。
今回はPタグのクラスでレイアウト指定してあります。

CSSはこれです。

.post-noway{
font-size: 16px;
padding: 0 10px;
border: 1px solid #E2E2E2;
background-color: #F7F7F7;
}

ほんと素人の雑な解説ですが、何かの参考になればうれしいです。たぶん自分が忘れた時に参考にしていそうです。

 

コメント