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

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

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

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

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

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

広告

関連記事

ワードプレスにグーグルアドセンスを導入する方法

ワードプレスにアドセンスを導入する際に効率の良い導入方法をご紹介いたします。 アドセンスの設定をす

記事を読む

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

ttfをwoffに簡単に変換できた! WEBフォントでttfはあるのに、それ以外がない事って多

記事を読む

アフィリエイトの審査に落ちた方へ

リンクシェアって審査が厳しいですよね はじめに 副業でアフィリエイトサービスを利用しようと思

記事を読む

no image

大容量ファイルをメールで送る方法

写真や音楽データ、その他メールでは送信できない大容量ファイルをメールで送る方法です。実際はメールで送

記事を読む

新しいユーザー権限が作れるUser Role Editor

ワードプレスで新しい権限を作れるって知っていましたか? はじめに 新しいサイトを作成している

記事を読む

ワードプレスの管理画面でチェックできるアクセス解析

今まで使っていたアクセス解析がデータが蓄積されていくタイプなので、少し重いなと感じるようになりました

記事を読む

ふわっと表示したらごっつカッコええやん

スクロールしたらふわっと表示されるやつ作ってみたよ はじめに 縦長系のサイトで下

記事を読む

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

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

記事を読む

ワードプレスでページごとにレイアウトを変える方法

ワードプレスでブログを運営中で特定のページだけカスタマイズしたいなんて事ありませんか? はじめに

記事を読む

管理画面でお問合せメールの確認が出来るTrust Form

ワードプレス内でお問合せフォームからのメールの内容を確認出来るプラグインがございます。 はじめに

記事を読む

広告

Message

広告

現在の総記事数: 292件

GoogleのWEBフォントを導入してみた

過去にもwebフォントに触れている記事は多いですが、googleさんの

yahooリスティング広告のオプション登録は必須

広告の下に出てくるリンクは絶対に設定しておきましょう はじめ

2017年最新版 メルカリで受取評価してくれない時の対策

メルカリを利用していると変なお客さんにあたる場合があります はじめに

Googleアナリティクス一覧のセッションなどのデータが表示されなくなった

久々にGoogleアナリティクスを見たらデータが表示されなくなっていた

yahooリスティング広告で広告を作るまでの流れ

yahooリスティング広告でキャンペーンの作成から広告の登録までをご紹

→もっと見る


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