プラグインでカスタムフィールド全開！

Posted on by

タイトル…大げさに来ましたね。コレ。全開じゃなく半開でもないかも。。。先に謝っとくごめんなさい。

今回も、φ(｀д´)ﾒﾓﾒﾓ…してなかったため、またいつも同じところでハマっていまうという罠に数日苦しんだので、いい加減記述しておこうと思いまして久々に更新です。

[今回のやりたかったこと]
投稿で項目をぽんぽん入力してレイアウトに入力した情報をぷしゅっと自動で入るようにし
なおかつ自動でカテゴリ毎にページに一覧をさくっと表示する

[実際にやったこと]
カスタム投稿を作る為に、ゴリゴリとfunctions.phpに書く時間もないのでさくっと便利そうな、Custom Post Type UIをインスコ！
インストールするとWordpressの管理画面左メニューに「CPT UI」(ジャックがでてきそうな名前だけどでてきませんそれCTUや）という項目ができますので、それをクリック！
「Manage Post Types」で、[Post Type Slug]に分類名(PHPに書く用)[Plural Label]に表記用の分類名あとはさらっと省略してサポートにチェック。今回はTitle, Editor,Custom Fieldsにはチェックいれました。
んで[save post type]すると、Wordpress管理画面左に[Plural Label]に入力した項目がでます。
（カスタム投稿の記事を増やしたり編集したりはここから）

次、カスタム投稿で使うカスタムフィールドを準備します。
Advanced Custom Fieldsを使ってカスタムフィールドを全開できそうなぐらい項目を増やすのもカンタン！なプラグインを使用させて頂きました。

インストールするとWordpressの管理画面左メニューに「カスタムフィールド」という項目ができます。
そこを使徒全滅できそうな勢いでクリックしてもらうと「フィールドグループ」というタイトル画面に切り替わります。
[新規追加]をぽちっとな。おおよそルールとかそのまま投稿タイプで作りました。
[フィールドを追加]をクリックしじゃんじゃんやっていきます。
[フィールドラベル]これは投稿記事を編集するときに明記される呼び名的なもの。
[フィールド名]これはphpファイルで項目を呼び出す為の名前
[フィールドタイプ]でテキストだとかチェックボックスだとか画像だとかいろいろ選べます！（これが楽ちんでたまらないああぁん）
全ての項目を必須かどうかまで選択できるのでマジ便利。
プラグイン作ってくださる方には感謝カンゲキあめあられです。

[フィールド記入のヒント]は更新編集する人への入力を補助する文言。ここに書けよ！おらぁ！みたいなのとか設定できます。あとは画像だったりの場合いろいろIDでやる？とかサイズどげんする？とか聞かれて、チェックボックスの時は必須？のあとに選択肢の設定があるので
(例）
選択肢A: ねこ
選択肢B : 犬
フィールド名:labelみたいなかんじで入れる。
ぽちぽちしていくと設定はあっという間に終わります。
（そんなに難しくはないと思うけど。。。もっと知りたい方は他の豆な方のブログいっぱいヒットするので探してみてください。）

ここからテンプレートファイルをいじります。
PHPと仲良くしたいけどあまり仲良くなくてもカスタムできるのがWordpressのいいところ！！
愛してます♥

まず、カスタム投稿を表示する為の個別のページ（通常single.phpにあたるところ)
パンくずはこう書いた

<ul class="pankuzu">
<li><a href="<?php bloginfo('home'); ?>">TOP</a></li>
<li><?php
	$category = get_the_category();
	$cat_id   = $category[0]->cat_ID;
	$cat_name = $category[0]->cat_name;
	$cat_slug = $category[0]->category_nicename;
?>
<a href="<?php bloginfo('home'); ?>/<?php echo $cat_name; ?>/"><?php echo $cat_name; ?></a></li>
<li><?php the_title(); ?></li>
</ul>

最初にtitleの呼び出し

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_title(); ?>

画像の呼び出し

<?php
	$attachment_id = get_field('フィールド名');//カスタムフィールドで設定したやつ
	$size = "full"; // (thumbnail, medium, large, full or custom size)
	$image = wp_get_attachment_image_src( $attachment_id, $size );
	$attachment = get_post( get_field('フィールド名') ); 
	$alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
	$image_title = $attachment->post_title;
?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo $alt; ?>" title="<?php echo $image_title; ?>" />

テキストとかは

<?php the_field('フィールド名'); ?>

入力があった時は表示、なかった時は項目名ごとまるまる消したい場合とかに使える呪文

   <?php if(post_custom('フィールド名')): ?>
   <tr> <td>項目名とか</td><td><?php echo post_custom('フィールド名'); ?></td>
    </tr>
<?php endif; ?>

チェックボックスにチェック入ってたら画像表示したいよーとかのとき

<?php if( in_array( '選択A', get_field('フィールド名') ) )
{
    echo '<img src="' .get_stylesheet_directory_uri(). '/img/dummy_A.png" alt="選択A"/>';
}
?>
<?php if( in_array( '選択B', get_field('フィールド名') ) )
{
    echo '<img src="' .get_stylesheet_directory_uri(). '/img/dummy_B.png" alt="選択B"/>';
}
?>
//画像名はダミー、urlはテンプレートの中のimgフォルダとかの場合

カスタム投稿のカテゴリ毎の一覧ページ作成

<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts( array(
	'post_type' => 'Post Type Slugに入力した名前', 
	'taxonomy' => 'category',  //たくくそが！
	'term' => '分類名',
	'posts_per_page' => 50, //何個表示する？
	'paged' => $paged,
	'order' => 'ABC'　//あいうえお順で表示
	)
);

if (have_posts()) :while (have_posts()) :
	the_post();
?>

あとは、個別ページの時と同じようにtitleやら画像だけだったりとか呼び出します。

PHPの処理エンド呪文

<?php endwhile; else: ?>

<?php endif; ?>

を忘れるとエラーになりますん

追伸：眠い時ブログ書くと雑になりますねスイマセン！
とりあえずヒントは書いたので、そこからまたいざとなったらggrksデス