wordPress stingerでカスタムフィールドを使う方法

2014年7月10日2014年7月13日

wordPressのデフォルト機能としてカスタムフィールドがあります。この機能を使う事によって、固定ページでは出来なかった、タグやカテゴリと同じようにグループで記事を管理する事も出来ますし、ページ毎に秘密の情報を付け加えて管理する事も出来るのです。そんな便利なカスタムフィールドについて、プラグインを利用する事無く利用出来る方法をまとめてみました。

カスタムフィールドを使えるようにする

まず、カスタムフィールドですが、通常は、隠れており表示されていません。よって、使えるように表示させなくてはなりません。

通常時は、以下の画像のように、カスタムフィールドへの入力が出来ません。

そこで、表示オプションを開き、カスタムフィールドにチェックを入れます。

すると、先程と同じ投稿画面ですが、カスタムフィールドの値が設定出来るように画面が追加されています。

カスタムフィールド実践

カスタムフィールドをトップページに表示

最初に断っておきますが、編集テーマ環境の土台は無敵の無料テーマstinger、こちらをベースにカスタマイズしていきます。カスタマイズ方法も子テーマを用意して、子テーマの中のファイルを編集していくというい、石橋をたたきながら変更する方法をとらせて頂いております。この方法であれば、失敗したファイルを削除すればいいだけですから、安心ですね。

カスタムフィールドの入力

さてまずは、トップページに表記させてみたいカスタムフィールドを入力していきます。
デフォルトでは、名前と値の２つがありますので、それぞれ任意の値を入力していきます。
名前の部分は日本語でもかまいませんが、値は、日本語NGなので、半角英数字を入力しましょう。
以下の画像が参考です。

１つは、”skils”という名前に対して、値”super”を入れています。
ついでにもうひとつ設定、”重要度”に対して、こちらは値に”画像ファイルへpath”を記述しています。
各記事毎に登録されるのが、この値になります。よって、画像ファイルへのpathを入力した場合、
出力結果を画像で得る事が出来ます。

実は、これで入力は終了なのです。余りにも簡単すぎますね。

カスタムフィールドの出力

カスタムフィールドを入力したら、表示させないとその意味がありませんが、この部分がちょっと初心者には難しいというか敬遠される部分です。wordPressの管理画面から設定する事が出来ないのが、その理由かもしれませんね。

では何をするかというと、.phpファイルをカスタマイズします。
トップページに表示したいので、親ページのhome.phpをコピーして、子テーマの中にも同じファイルを入れます。これで、今後wordPressが優先的に読みにいくコードは、子テーマの中のhome.phpになります。
さて、準備が整いましたので、phpファイルのカスタマイズです。

[php]

<?php get_header(); ?>

<!–ループ開始–>
<div id="dendo"> </div>
<!– /#dendo –>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="entry">
<div class="sumbox"> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php
$title= get_the_title();
the_post_thumbnail(array(150,150),
array( ‘alt’ =>$title, ‘title’ => $title)); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="150" height="150" />
<?php endif; ?>
</a> </div>
<!– /.sumbox –>
[/php]

この部分にカスタムフィールドを表示させるコードを追記していきます。

[php]

<?php get_header(); ?>

実際に記述するコードの例skilsを表示する場合

[php]
<?php echo post_custom(‘skils’). "<br />" ?>
[/php]

重要度を表示する場合

[php]
<?php
$custom_fields = get_post_custom(); // 指定した投稿のすべてのカスタムフィールド情報を取得
$my_custom_field = $custom_fields[‘重要度’]; // ‘重要度’ というキーを持つカスタムフィールドの値を取得
foreach ( $my_custom_field as $key => $value )
echo $value . "<br />";
?>
[/php]

こちらも、実は、以下のような記述でもOK

[php]
<?php echo post_custom("重要度"). "<br />" ?>
[/php]

こちらは、サムネイル画像の下に表示する場合としての例なので、

表示したい位置によって、上記コードの位置を変更すれば、

好きな場所に配置する事が可能です。

カスタムフィールドを個別ページに表示

カスタムフィールドの入力は、トップページに表示する際の管理画面からの入力と同じなので、こちらには記述しません。

カスタムフィールドの出力

個別ページに表示したいので、今度は親ページのsingle.phpをコピーして、子テーマの中にも同じファイルを入れます。トップページへ出力する際の準備と同じ流れです。さて、中身のコードを確認すると、以下のようになっています。

[php]

<?php get_header(); ?>

<div class="kuzu">
<div id="breadcrumb">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo home_url(); ?>" itemprop="url"> <span itemprop="title">ホーム</span> </a> > </div>
<?php $postcat = get_the_category(); ?>
<?php $catid = $postcat[0]->cat_ID; ?>
<?php $allcats = array($catid); ?>
<?php
while(!$catid==0) {
$mycat = get_category($catid);
$catid = $mycat->parent;
array_push($allcats, $catid);
}
array_pop($allcats);
$allcats = array_reverse($allcats);
?>
<?php foreach($allcats as $catid): ?>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo get_category_link($catid); ?>" itemprop="url"> <span itemprop="title"><?php echo get_cat_name($catid); ?></span> </a> > </div>
<?php endforeach; ?>
</div>
</div>
<!–/kuzu–>
<div id="dendo"> </div>
<!– /#dendo –>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!–ループ開始–>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="kizi">
<h1 class="entry-title">
<?php the_title(); ?>
</h1>
<div class="blogbox">
<p><span class="kdate">公開日：
<time class="entry-date" datetime="<?php the_time(‘c’) ;?>">
<?php the_time(‘Y/m/d’) ;?>
</time>
:
<?php if ($mtime = get_mtime(‘Y/m/d’)) echo ‘ 最終更新日：’ , $mtime; ?>
</span>
<?php the_category(‘, ‘) ?>
<?php the_tags(”, ‘, ‘); ?>
<br>
</p>
</div>[/php]

折角なので、タイトル表示のすぐ下に表示できるようにコードをカスタマイズしてみる事にします。

[php]
<?php get_header(); ?>

<!–この部分にカスタムフィールド用コードを記述する–>

<div class="blogbox">
<p><span class="kdate">公開日：
<time class="entry-date" datetime="<?php the_time(‘c’) ;?>">
<?php the_time(‘Y/m/d’) ;?>
</time>
:
<?php if ($mtime = get_mtime(‘Y/m/d’)) echo ‘ 最終更新日：’ , $mtime; ?>
</span>
<?php the_category(‘, ‘) ?>
<?php the_tags(”, ‘, ‘); ?>
<br>
</p>
</div>
[/php]

中に記述するコードですが、トップページ（home.php）に記述する内容と同じです。

[php]
<?php echo post_custom("重要度"). "<br />" ?>
[/php]

同じように、サイドバーに表示したければ、○○.phpを変更すれば可能です。

以上カスタムフィールドの使い方でした。