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

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

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

関連記事

no image

jquery.gmap3.jsを使って、Googlemapを簡単にカスタマイズ♪

この記事は約 1 分で読めます。 今回は、GoogleMapを埋め込んで、カスタマイズ出来るjQuery プラグイン「jquery.gmap3.js」。使ってみたら楽に出来たので、メモです。 配布元: …

WordPress 「Contact Form7」でエラーメッセージが出たときに確認したこと

この記事は約 1 分で読めます。 「Contact Form7 4.4」をバージョンアップした途端、エラーメッセージが出るようになりました。 エラーメッセージが出たことで、再度設定を見直すキッカケがで …

no image

WordPressでオリジナルテーマ作りにチャレンジ4【index.php編】

この記事は約 2 分で読めます。WordPressのオリジナルテーマ作りにチャレンジしています。 今回は、「index.php」の部分を作りたいと思います。 前回までに1つのhtmlを「header. …

no image

無料Facebookアプリ「Pronto ContactForm」を試してみた♪

この記事は約 2 分で読めます。 最近、Facebook関連の便利なアプリをたくさん見掛けます。 Facebookページでお問い合せフォームが必要になった時に便利なアプリ「Pronto Contact …

no image

Chromeの拡張機能FireBugとSnifferを入れてみた♪

この記事は約 1 分で読めます。Webサイト作っている時、大活躍しているのがFirefoxの「FireBug」です。 私が確認しているブラウザは、IE,Firefox,Safari,Chromeですが …