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をイチから勉強してみる【イベント編】の続きとしてメモします。 イチから「JavaScript」を学び直しをする為に記録を残しています。少しず …

no image

苦手なJavaScriptをイチから勉強してみる【記述の基礎編】

この記事は約 1 分で読めます。 苦手なJavaScriptをイチから勉強してみる【基本準備編】の続きとしてメモします。 イチから「JavaScript」を学び直しをする為に記録を残しています。少しず …

no image

Worepressのロゴ、ボタン、カラースキームなどの公式データをメモ

この記事は約 1 分で読めます。 WordPressのロゴ、ボタン、カラースキームなど、公式データがダウンロード出来るようになっていたので、メモ。 ちゃんと、あったんですね!!しかも、かなり種類が豊富 …

no image

右クリックで独自メニューを出して画像のコピーガード

この記事は約 1 分で読めます。 画像のコピーガードを3通り試しています。 今回は「右クリックで独自メニューを出す」方法を試してみました。 「右クリック禁止で画像のコピーガード」、 「透明画像を置いて …

no image

WordPressでRSSフィードを便利に使うプラグイン。

この記事は約 1 分で読めます。 以前、「WordPressサイトでRSSフィードボタンを設置してみた♪」でRSSフィードボタンを設置しました。 その後、RSSフィード関係で便利そうなWordpres …