カスタムフィールドで画像を出力する時のヒント【ワードプレス】

公開日: : 最終更新日:2016/08/09 副業で稼ぐ仕組みの作り方

ワードプレスを利用中の方で、カスタムフィールドを使い出した人が必ず困る画像の便利な出力方法をご紹介いたします。

はじめに

最近はカスタムフィールドを簡単に使う事が出来るプラグインが沢山でているので、そちらを使いながら画像の出し方をご紹介いたします。

注意事項

ワードプレスのバージョンやプラグインのバージョンが古いと使えない場合がございます。

使用するプラグインのご紹介

今回私が使うカスタムフィールド用のプラグインは

この2つとなります。

お好みのプラグインをインストール、有効化しておきましょう。

設定をしよう

各カスタムフィールドに画像を表示させる設定をします。

Custom Field Suite側

cfimg

Advanced Custom Fields側

cfimg1

今回はわかりやすいようにフィールド名を「img-test」と「img-test2」しました。

また、どちら側も画像の返り値はURLにしておきましょう。

cfimg2

そして、両方に違う画像を登録してみました。

カスタムフィールドで画像を表示させよう

では、次は早速画像を表示させてみましょう。

Custom Field Suite側

cfimg3

<?php echo $cfs->get('img-test'); ?>

Advanced Custom Fields側

cfimg4

<?php the_field('img-test2'); ?>

この内容を任意の場所に掲載して実際に見てみましょう。

cfimg5

するとこのようにURLの取得が出来ました。

では、画像を表示させてみます。

Custom Field Suite側

cfimg6


<img src="<?php echo $cfs->get('img-test'); ?>" width="300" />

Advanced Custom Fields側

cfimg7


<img src="<?php the_field('img-test2'); ?>" width="300" />

こういった書き方になります。では、画像が表示されているか確認してみましょう。

cfimg8

このように見事表示されています。

画像を任意のサイズでアップしよう

先ほどはimgタグに直接書き込みをしましたが、もう少しスマートに表示させるテクニックがございます。

設定しよう

任意の画像サイズでアップする場合、一度カスタムフィールド側の設定を変更しなければいけません。

Custom Field Suite側

cfimg9

Advanced Custom Fields側

cfimg10

返り値をそれぞれURL→IDに変更しておきます。

そして、出力側を

Custom Field Suite側

cfimg13


<?php $attachment_id=CFS()->get('img-test',$post->ID);
echo wp_get_attachment_image($attachment_id,array(300, 200));?>

Advanced Custom Fields側

cfimg14


<?php $attachment_id=get_field('img-test2',$post->ID);
echo wp_get_attachment_image($attachment_id,array(300, 200));?>

このように記載します。
そうする事で画像をそれぞれ300px×200pxで表示してくれます。

cfimg11

するとこういった表示になります。そして、ソースコードを見て頂ければわかりますが、

cfimg12

このように「width=”300″ height=”200″」と言うタグが入っています。

サムネイル画像として表示させたい

次はサムネイル画像として表示させる方法をご紹介いたします。

先ほどはカスタムフィールドの画像をimgタグにwidthを設定する事で画像の横幅を指定しましたが、この場合は画像が大きすぎると300pxでの表示になりますが、ダウンロードするまでに時間がかかりすぎてしまうのがデメリットです。

1枚だけだと良いかもしれませんがアルバムページなどで10枚~20枚となると非常に多くなってしまいまうので要注意です。

テーマファイル内のfunctions.phpに下記の情報を追加

add_image_size('thumwidth' ,300, 100 ,true ); // 横幅が広いサムネイル

functions.phpがもともとない方は

<?php
add_image_size('thumwidth' ,300, 100 ,true ); // 横幅が広いサムネイル

このような書き方になります。

上記の300が横幅で100が縦になります。

Custom Field Suite側

cfimg15


<?php $attachment_id=CFS()->get('img-test',$post->ID);
echo wp_get_attachment_image($attachment_id,'thumwidth');?>

Advanced Custom Fields側

cfimg16


<?php $attachment_id=get_field('img-test2',$post->ID);
echo wp_get_attachment_image($attachment_id,'thumwidth');?>

こういった書き方になります。

実際の画像を見てみましょう。

cfimg17

このように画像が横長で表示されていますね。

画像をクリックして拡大表示もしたい

では、最後はカスタムフィールドに登録した画像を表示させ、さらにクリックして拡大画像を表示させる方法です。

Custom Field Suite側

cfimg18

<?php $attachment_id = $cfs->get('img-test');
$full = wp_get_attachment_image_src( $attachment_id, 'full' );//フルサイズ画像のURLを取得
?>
<a href="<?php echo $full[0];?>" rel="lightbox">
<?php  $attachment_id=CFS()->get('img-test',$post->ID);
echo wp_get_attachment_image($attachment_id,'thumwidth');?></a>

Advanced Custom Fields側

cfimg19

<?php $attachment_id = get_field('img-test2'); $full = wp_get_attachment_image_src( $attachment_id, 'full' );//フルサイズ画像のURLを取得 ?>
<a href="<?php echo $full[0];?>" rel="lightbox"><?php  $attachment_id=get_field('img-test2',$post->ID);
echo wp_get_attachment_image($attachment_id,'thumwidth');?></a>

そして、ライトボックス系のプラグインと組み合わせると

cfimg20

このように1つの画像を追加するだけでサムネイル画像とクリック用の画像を登録する事も可能になります。

おまけ

画像を使っていないときはタグを表示させない方法です。

画像を登録していないときは「noimg」など、違う画像などを表示しておきたいと言う時に使えるテクニックです。

Custom Field Suite側

cfimg21

<?php if(get_post_meta('img-test',$post->ID,true)): ?>

↓Custom Field Suite↓

<?php $attachment_id = $cfs->get('img-test');
$full = wp_get_attachment_image_src( $attachment_id, 'full' );?>
<a href="<?php echo $full[0];?>" rel="lightbox"><?php  $attachment_id=CFS()->get('img-test',$post->ID);
echo wp_get_attachment_image($attachment_id,'thumwidth');?></a>

<?php else : ?>

★noimg★

<?php endif; ?>

Advanced Custom Fields側

cfimg22

<?php if(get_post_meta('img-test2',$post->ID,true)): ?>

↓Advanced Custom Fields↓

<?php $attachment_id = get_field('img-test2'); $full = wp_get_attachment_image_src( $attachment_id, 'full' );?>
<a href="<?php echo $full[0];?>" rel="lightbox"><?php  $attachment_id=get_field('img-test2',$post->ID);
echo wp_get_attachment_image($attachment_id,'thumwidth');?></a>

<?php else : ?>

★noimg2★

<?php endif; ?>
 

これの

<?php else : ?>

よりも上が登録した際に表示される部分で下が登録がない際に表示される部分となります。
両方共の画像を削除した場合は

cfimg23

このように表示されます。

以上でワードプレスのカスタムフィールドで画像を出力する時のヒントの紹介を終了いたします。

さいごに

画像関係は必ず覚えておきましょう

私も元々カスタムフィールド関係は良くわからなかったのですが、最近勉強しだしたPHPやクライアントからのカスタマイズ依頼で勉強した結果、色々とわかるようになりました。

私の場合はカスタムフィールドを導入し出した事頃は今回紹介した方法が全然わからなかったのですが、やはりやればやるほど色々と知識は増えていくものですね。

画像関係は「とりあえず掲載したい」と言う部分から「クリックしたら・・・」「画像のサイズを変更・・・」など、色々とやりたい事が出てきますよね。

そういった人達のために、稼げる副業ブログでご紹介させて頂きました。

まぁ半分は自分自身のメモ用って感じなんですけどね笑

関連記事

ワードプレスに目次を簡単に入れるTable of Contents Plus

今までタグを手打ちしていたのですが、やっとこさおさらば出来そうです。 はじめに Tabl

記事を読む

amazonアフィリエイトの登録方法

もし、自分のお勧めしたい何かがあった時に非常にうれしいツールの一つがこのamazonアフィリエイトで

記事を読む

EC-CUBE(2.11.5)のダウンロード方法

EC-CUBEは無料で使えるネットショップのシステムの事です。副業で何かを販売するなら必ず使いたい一

記事を読む

稼げるサブキーワードの探し方

例えばSEO対策などでメインキーワードが決まっている場合、単一だけでなくサブキーワードもヒットさせた

記事を読む

カスタムフィールドを簡単に導入出来るAdvanced Custom Fields

カスタムフィールドって使ってみたいけど、どうやって使えば良いのかわからないなんてことありませんか?私

記事を読む

商品一覧ページを第一階層ごとにデザインを変える【ECキューブ2.12】

商品のカテゴリが数百とある場合、クライアントが欲しい商品を探すのに苦労してしまいます。 はじめに

記事を読む

youtubeの動画をダウンロードする方法

この動画が削除される前にダウンロードしておきたいって動画や、編集したいと言う動画がyoutubeにあ

記事を読む

SEO対策用文字数カウントを作ってみた

文字数を計算する時にわざわざ計算ボタンを押さなくても自動でカウントしてくれるようなシステムを制作致し

記事を読む

【EC-CUBE】管理画面に色々な箇所のファイルを呼び出す方法

ブロックで作成した情報以外からも情報を取得したい場合はこちらの情報が参考になります。

記事を読む

ワードプレスのカスタム投稿タイプにページ送りを導入する方法

表示件数が多くなりすぎるとページ送りを導入した方がデザイン的にも見やすくなります。 はじめに ス

記事を読む

Message

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

現在の総記事数: 323件

さくらサーバーでワードプレスの無料SSLを導入してみたよ

さすがにそろそろSSL化しないといけないのでやってみたよ はじめに

EC-CUBE特定の商品ステータスのみを特定の箇所に表示させる

代引きが出来ない商品やメール便が対応できない商品を目立たせたい時などに

【EC-CUBE】管理画面に色々な箇所のファイルを呼び出す方法

ブロックで作成した情報以外からも情報を取得したい場合はこちらの情報が参

【画像あり】XAMPPを使ってPHPの動作確認方法

PHPの動作確認をするのにXAMPPは絶対に必要です。 はじめに

【画像あり】XAMPPの誰でもわかるインストール方法

これからPHPを勉強しようと考えている人の強い味方XAMPPのインスト

→もっと見る

PAGE TOP ↑