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

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

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

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

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

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

関連記事

プラグインのインストール方法【ワードプレス】

ワードプレスは必要時に応じてプラグインをインストールする事でさまざまな機能を追加する事が可能です。今

記事を読む

WordPressでCSV登録が出来るReally Simple CSV Importer

とにかく沢山のデータをワードプレス上に登録しなければいけない場合、1つづつ入力するのってバカらしいで

記事を読む

フォトショップで文字や人物が簡単に消せたったwww

フォトショップを使えば人物を消す事がこんなにも簡単に出来るとは思ってもみませんでした

記事を読む

ワードプレスでお問い合わせを作る。Contact Form 7

ホームページの制作やブログの制作で必ず必要なのがお問い合わせフォームの設置です。ワードプレスのプラグ

記事を読む

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

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

記事を読む

EC-CUBEで各カテゴリーページに情報を表示させる方法

EC-CUBEでカテゴリーページごとに情報を入れる方法をご紹介 はじめに EC-CU

記事を読む

ホームページが重いと感じたらスピードチェック

ホームページを制作した際に何だか重いなぁって感じる事ありませんか?そんな時にお勧めなサイトを紹介いた

記事を読む

スパムコメントを自動で削除してくれるAkismet

ワードプレスをインストール時に最初からインストールされているAkismetの使い方をご紹介いたします

記事を読む

無料でECサイトが3分で作れる

今までにない、完全に無料で利用出来るECサイトをご紹介いたします。 はじめに ECサイト

記事を読む

WP Autoresponderをわかる範囲でカスタマイズ

ステップメールが無料で使えるワードプレスのプラグインをご紹介させて頂きます。 はじめに

記事を読む

Message

現在の総記事数: 316件

ECCUBEの検索に商品IDを追加させる方法

ECCUBEはデフォルトだと検索機能は非常に弱いです。 はじめに

EC-CUBEで各カテゴリーページに情報を表示させる方法

EC-CUBEでカテゴリーページごとに情報を入れる方法をご紹介

windows10のおすすめを非表示にする方法

windows10に変わってからめっちゃうっとおしくなってきましたね

PHPの中にPHPを入れたい人の為のヒント

PHP初心者によくある疑問点PHPの中にPHPを入れる事が出来れば

Contact Form 7のエラー項目を分かりやすく方法

Contact Form 7を利用している方でエラー項目をよりわかりや

→もっと見る

PAGE TOP ↑