副業で稼ぐ仕組みの作り方

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

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

はじめに

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

注意事項

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

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

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

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

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

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

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

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

関連記事

  1. オリジナルのメールアドレスの作り方

  2. カスタムフィールドを使って計算 WordPress

  3. ワードプレスでステップメールを無料で使えるプラグイン

  4. ユーザーIDで分岐させる方法 WordPress

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

  6. 投稿のビジュアルにcssを反映させる

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

コメントするためには、 ログイン してください。
PAGE TOP