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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

.htaccessでリダイレクト

検索で飛んでいらっしゃる方もけっこういるようなのですが、以前とディレクトリが変わったし、パーマリンク …

WDP覚え書

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

Chrome版TweetDeckのカラム幅変更

ずーっとTwitterはHootSuiteを使っていたのですが、なんか調子悪いのでChromeアプリ …

スマイリーがおかしい

変だな~、以前書いたエントリーのスマイリーが表示されなくなってます。 編集しなおすと表示されるんだけ …

トラックバックURLの一発選択

お気楽極楽ブログさんのトラックバックURLの一撃選択を参考に、トラックバックURLをマウスでいちいち …

カテゴリー

アーカイブ

サイト内検索