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

公開日: : 最終更新日: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やクライアントからのカスタマイズ依頼で勉強した結果、色々とわかるようになりました。

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

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

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

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

広告

関連記事

Gmailを使ったメールの振り分け方法

Gmailを使ったメールの振り分け方法をご紹介致します。 はじめに Gmailでメールの振り

記事を読む

スマホ画面の一番下にふわっとコンテンツを表示させる方法

スマートフォンでホームページを見た際に常に一番下に表示されているふわっとした広告枠の出し方を紹介いた

記事を読む

インフォトップの登録方法

情報商材の販売をするならやっぱりインフォトップ はじめに 2ティア制を利用して不労所得を得る

記事を読む

EC CUBEでSSLページのみに表示させる方法

EC CUBEでSSLページにだけ違うデザインをしたい時に使えるコードです。 はじめに EC C

記事を読む

画像を特定のサイズで表示させる方法WordPress

カスタムフィールドで登録した画像を指定のサイズで表示させる方法をご紹介いたします。 はじめに

記事を読む

FC2ショッピングカートの商品登録方法とデザイン変更

FC2ショッピングカートの商品登録方法とデザインの変更方法をご紹介いたします。 はじめに F

記事を読む

no image

FFFTPのインストール方法

ホームページの制作時には必ず必要になってくるソフトがFFFTPです。主にファイルのアップロードに使用

記事を読む

ムーバブルタイプからワードプレスに引越しする方法

ムーバブルタイプからワードプレスに引越しをした時のメモです。 はじめに 今回はムーバブルタイプか

記事を読む

ECCUBE2.4のインストール時にエラーが出た場合

プラグイン側が2.4のサービスの提供を終了してきていますね。 はじめに そろそろECCUBEのバ

記事を読む

EC-CUBEでPHPを使う方法

EC-CUBEでもPHPが使えました!これで色々捗るね はじめに 私みたいなコピペでしか

記事を読む

広告

Message

広告

現在の総記事数: 274件

gmailの裏技発見したったったwww

gmailの裏技発見したったったwww 登録したサイ

windows10でone driveを無効にする方法

こゆ意図せずに出てこられるのは非常に腹立たしい はじめに on

no image
WEBフォントはcss3で簡単に使えた

WEBフォントを使って好きなフォントをWEB上に公開しよう

ttfをwoffに簡単に変換できた!

ttfをwoffに簡単に変換できた! WEBフォントでttfはあ

ツイッターの最初に固定した内容を表示させる方法

ツイッターの初めに固定されたツイートと言う内容があると思いますが、これ

→もっと見る


  • ここでは副業での稼ぎ方や、誰でも簡単に稼げる副業のジャンルなどを紹介しております。 今の所、平均して月に15,000円ほど副収入があります。
    • エステコスメ エステ化粧品やエステコスメの通販サイトです。一般の方でもエステサロンで使用しているコスメを激安価格で購入出来ます。
    • エステ用品 エステ用品のMOCOエステです。新規開業を考えているエステサロン様向けに卸価格でご提供させて頂きます。
    • サロン集客 サロン集客に悩んでいる人向けに完全無料で集客方法を公開しております。インターネットを使う事で0円でサロン集客する方法もお教えいたします。
    • ヒートマット 遠赤外線ヒートマットシリーズは入ると滝に打たれたような発汗を体験できます。サロン様から一般の方までご利用いただけます
    • フェイシャルスチーマー 業務用だけでなく、一般の方も使用出来るフェイシャルスチーマーを詳しく説明しているホームページです。
    • 美容室のホームページ制作 美容室やエステサロン、ネイルのホームページ制作です。3万円台から制作も出来るので予算のないサロン様にも対応しております。
PAGE TOP ↑