Webの記録

WordPress カスタムフィールドを使ってみる

投稿日:

この記事は約 4 分で読めます。

WordPressの便利な機能のひとつ「カスタムフィールド」に今回チャレンジします♪

「カスタムフィールド」は、記事本文とは別に項目を独自で作って表示するものです。

私の場合、作品の制作ツールや、制作日数など・・・「作品集。」で表示したいので、本文とは別に「カスタムフィールド」で表示させたいと思っています。

奥が深そうなので、簡単なところから・・・?!

下準備。

投稿記事の入力画面の下にある「カスタムフィールド」の部分に「名前」と「値」を入力します。

私の場合の例では、1行目に「名前」に「制作ツール」を、「値」に制作に使ったソフト名を入れました。

複数ある場合は、カスタムフィールドの入力画面の中にある「カスタムフィールドを追加」ボタンを押して2行目を入力します。(3行目以降がある場合はこの繰り返し)

カスタムフィールド入力画面

カスタムフィールドを出力させる

次は、カスタムフィールドで表示させたいのは投稿の個別ページなので・・・テーマ編集で「single.php」を少々書き加えます。

今回書き加えたいのは・・・。

<?php the_meta(); ?>

・・・というものです。

書き加える場所は、ループの中です。

自分が表示させたいポイントの部分に入れるワケですが、私は記事の下に表示させようと思います。

<div class="entry-content">
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' =--> '&nbsp;
<div class="page-link">' . __( 'Pages:', 'coraline' ), 'after' =&gt; '</div>
' ) ); ?&gt;

<?php the_meta(); ?>

</div><!-- .entry-content -->

キレイに整える。

ブラウザ上で表示確認してみると・・・リストで表示されているのが分ります。

これでとりあえずはカスタムフィールドが表示されたのですが、表示をちょっとキレイにしたいのでひと手間加えます。

ソースコードを見てみると・・・。

<ul class="post-meta">
	<li> <span class="post-meta-key">制作ツール:</span>
Dreamweaver CS4(コーディング担当のため)</li>
	<li> <span class="post-meta-key">制作日数:</span>
約5カ月(私の作業は1週間位)</li>
	<li> <span class="post-meta-key">制作年月:</span>
2011年3月</li>
</ul>

・・・と書かれていました。

そんなワケで自分なりにstyle.cssで表示を整えて完成です♪

カスタムフィールドの表示結果

まだまだ「カスタムフィールド」はもっといろいろ出来そうなので、もう少しWordPressをいじって再チャレンジしていきたいと思います。

参考:Codex

補足。(2011年11月28日追記)

プラグインを幾つか使っていると、プラグインによっては「カスタムフィールド」に自動的に値を入れるようになっているものがあるようです。

そのままカスタムフィールドを出力すると、プラグインから出た値も出力されてしまいます。

今私が確認出来ているプラグインは、WordpressからFacebookへ記事を自動投稿するプラグイン「Wordbooker」と、記事の下に付けているソーシャルボタン「Hide SexyBookmarks」の2つのプラグインです。

プラグインを使いつつ、カスタムフィールドを使うという場合は、もっと別な手立てを考える必要がありそうです。。。

-Webの記録
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

軽量で簡単に設置出来るjQueryスライダー「FlexSlider」。

この記事は約 1 分で読めます。 今までいくつかのjQueryスライダーライブラリを利用しました。今回も軽量で簡単に設置が出来る「FlexSlider」を見つけたので、早速メモです。 スマートフォンで …

no image

WordPress プラグイン「Dynamic To Top」で上に戻るボタンを簡単に設置♪

この記事は約 1 分で読めます。 よくいろんなサイトを閲覧していて、ページの下へスクロールしていくと・・・「上に戻る」ボタンを見かけます。 そこで今回は、Wordpressのプラグイン「Dynamic …

no image

Worepress 前後の記事へリンクをつけたい時。

この記事は約 1 分で読めます。 記事の下に「古い記事へ」「新しい記事へ」という前後の記事へのリンクを表示しています。 単純に投稿順で前後の記事へリンクをさせるのか、または開いている記事と同じカテゴリ …

no image

「Wordbooker」を使ってWordPressからFacebookへ自動表示をさせてみた。

この記事は約 1 分で読めます。最近気になっているのは、「Facebook」です。 気になる事は即実行~♪ってコトで、興味半分で早速Facebookに登録です♪ 今回は、WordPressのプラグイン …

エックスサーバーの無料独自SSL「Let’s Encrypt」をWordPressに設定して、カンタンhttps対応

この記事は約 1 分で読めます。 2016年6月30日から、「エックスサーバー」の全プランにおいて、「Let’s Encrypt」によるドメイン認証型SSL証明書の無料発行および設定機能の …