web関係

カスタムフィールドプラグイン「Smart Custom Fields」を使ってみた

投稿日:2015年9月21日

WordPressはいろんなことができますがCMSとして使うにはデフォルトの設定ではちょっと使いづらいところがあります。
そこはやはりブログなんでしょうね。
ですが、カスタムフィールドというのを使うとけっこう使えるようになります。
WordPress標準のカスタムフィールドでも良いのですが、今回はプラグインを使ってみました。

Advanced Custom Fieldsが有名・・・ですが

最初、カスタムフィールドでは有名な「Advanced Custom Fields」というプラグインを使おうと思っていたのですが、繰り返し処理をするには有料のアドオンが必要!
25豪ドルなので買っておいても良いのですが。

やりたかったことは画像を何枚か載せてその下に簡単なテキストをつけるというもの。
以下はAdvanced Custom Fieldsで書いたコード。
これは画像だけですが。

<?php
    $attachment_id = get_field('img01');
    $size = "thumbnail"; // (thumbnail, medium, large, full or custom size)
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('img01') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
?>

<a href="<?php echo wp_get_attachment_url( get_field( 'img01',$post->ID) ); ?>"><img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php echo $alt; ?>" title="<?php echo $image_title; ?>" /></a>

画像を何枚も載せようとすると、これをimg02、img03・・・とかどんどん書いていかないといけないみたい。
なんか汚いし、強引にループ処理しようとやってみましたがダメでした。
記事を書くときに写真を何枚のせるかわかりませんし。

Smart Custom Fieldsだと無料でループ処理できる

いろいろ調べてみたら、繰り返し処理が標準でできるSmart Custom Fieldsが便利そう。
Advanced Custom Fieldsほど高機能ではありませんが、今のところこれで十分かなと思います。

さっそくプラグイン新規追加画面でSmart Custom Fieldsを検索してインストールしました。
ここでは画像の下にテキストを表示するようにしてみます。

使い方(てきとう)

名前を適当につけます。
01

画像をimg、テキストをtxtとしてサブフィールドを追加して、「繰り返し」にチェックを入れて、グループ名をimg_groupとします。
02

投稿タイプを「投稿」か「固定ページ」を選んで保存。
カテゴリーなどにもできるようです。

single.phpなどにコード追加

今回は投稿ページに追加したので、以下のコードをsingle.phpに追記します。場所はループ処理内(<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>以降)です。

<?php
    $repeat_group = SCF::get( 'img_group' );
    foreach ( $repeat_group as $fields ) {

    $size = "medium"; // (thumbnail, medium, large, full or custom size)
    $image = wp_get_attachment_image_src( $fields['img'], $size );
    $alt = get_post_meta($fields['img'], '_wp_attachment_image_alt', true);
    $image_title = $fields['img']->post_title;
?>

<div>
<a href="<?php echo wp_get_attachment_url( $fields['img']); ?>"><img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php echo $alt; ?>" title="<?php echo $image_title; ?>" /></a>
<p><?php echo $fields['txt']; ?></p></div>

<?php } ?>

あとはCSSで調整するとうまいぐあいにできました。
カスタムフィールド、便利ですね!

参考:プラグイン作者さんのページ
Smart Custom Fields | モンキーレンチ

-web関係
-,


comment

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

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

関連記事

WordPressにYouTubeを好きなサイズで載せる

何を今更的なタイトルですが、YouTubeのオブジェクトタグでそのまま埋め込むと横幅が425pxとか …

WDP覚え書

WDP(Web Diary Professional)のカスタマイズメモ。 ■画像をクリックした時、 …

WordPressネタ

もう1ヵ月以上前だと思うんですが、家の前に野菜が置いてあったんですよ。 誰が置いていったのか、まった …

URL変更

今までトップにブログが表示されるようにしていましたが /blog/以下に変更しました。 トップページ …

php化&ページ分割

最近、エントリーが増えてきたのでカテゴリーごとに表示すると長ったらしいページになってしまっていたので …

カテゴリー

アーカイブ

サイト内検索