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

苦手なJavaScriptをイチから勉強してみる【基本準備編】

この記事は約 1 分で読めます。今更なんですが、実はJavaScriptはちょっと苦手です。。。 jQueryのライブラリーを使って、部分的にいじる事はあっても・・・何となく「JavaScript」っ …

no image

ファビコンその後・・・。

この記事は約 2 分で読めます。3月2日投稿した「ファビコン」の話、その後・・についてです。 実は、IEでのファビコン表示が出来ずに苦戦していたんです。 そこで・・・いろいろ試した結果。 本日、やっと …

no image

baserCMSで更新した内容がすぐにブラウザで反映しないとき

この記事は約 1 分で読めます。 baserCMSで既にあるphpや画像などを一部修正して、FTPでアップし直しをした時。 baserCMSでログインしている状態でブラウザ表示できちんと更新されていた …

no image

WebサイトのURLを変更した後 .htaccessの記述して新しいURLに転送してみる

この記事は約 2 分で読めます。 ずっと運営していたサイトのURLを都合により変更(ファイルを移動)させてしまった時、ブックマークから訪問してくれた人が困らないように新しいURLへ転送する事が必要にな …

no image

WordPressのオベンキョウ②

今日は、プラグインを準備してみました。