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

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

投稿日:2016年7月9日 更新日:

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

はじめに

カスタムフィールドに画像を登録出来るようにしたものの、登録される画像が縦長だったり横長だったりするとデザインが崩れてしまいますよね。そこでfunction.phpに情報を追加する事でカスタムフィールドに登録した画像を好きなサイズで表示させる方法が見つかりました。

注意事項

カスタマイズ完了後に登録した画像しか反映されません

指定した画像サイズで表示させよう

function.php

<?php 
add_image_size('名前', 横幅, 縦幅, true);
?>
  • 名前:任意の名前を付けましょう 例 photo-test
  • 横幅:表示させたい横幅です。
  • 縦幅:表示させたい縦幅です。
  • true:画像を切り抜きするかどうかです。良くわからない場合はtrue

表示させたいのファイル

<?php
$attachment_id = $cfs->get('カスタムフィールド名');
echo wp_get_attachment_image( $attachment_id, 'function.phpに追加した名前' );
?>

こうするとワードプレスで画像を特定のサイズで表示させる事が出来ます。

画像の登録がない場合、自動で特定の画像を表示させる

例えばスタッフページで、メイン画像を登録していいない場合に「noimg」や「現在準備中」と言った形で表示させたいなんて事もありますよね。

そういった場合のカスタマイズはこちらになります。

<?php $ctm = get_post_meta($post->ID, 'カスタムフィールド名', true);?>
<?php if(empty($ctm)):?>
 <img src="画像が登録されていない時に表示させる画像のURL" />
<?php else:?>
<?php 
$attachment_id = $cfs->get('カスタムフィールド名');
echo wp_get_attachment_image( $attachment_id, 'function.phpに追加した名前' );
?>
<?php endif;?>

※2箇所書かれている「カスタムフィールド名」は同じカスタムフィールド名になります。

こうする事で画像が登録されていない場合にデザインが崩れる心配もありませんよね。

さらにlightbonxを使って拡大させたい

最後は先ほどの情報にさらに画像をクリックすると大きくなるlightboxを表示させたい場合のカスタマイズ方法をご紹介いたします。

<?php $ctm = get_post_meta($post->ID, 'カスタムフィールド名', true);?>
<?php if(empty($ctm)):?>
<img src="画像が登録されていない時に表示させる画像のURL" />
<?php else:?>
<?php 
$attachment_id = $cfs->get('カスタムフィールド名');
$full = wp_get_attachment_image_src( $attachment_id, 'full' );
?>
<a href="<?php echo $full[0];?>" rel="lightbox">
<?php
echo wp_get_attachment_image( $attachment_id, 'function.phpに追加した名前' );
?>
</a>
<?php endif;?>

※2箇所書かれている「カスタムフィールド名」は同じカスタムフィールド名になります。

このコードを使う事で画像をクリックすると登録した元々の画像(フルサイズ)を表示させる事が出来ます。

これらを組み合わせる事で後ほど修正や手を加える心配もないデザインにする事が出来ます。

以上でワードプレスの画像を特定のサイズで表示させる方法の説明を終了いたします。

さいごに

写真は重要

HP制作関係の稼げる副業をしていて気がついたのは基本的にデザインの要になるのは画像だと言う事です。クライアント様側でも自由に変更や修正が可能なデザインにする場合、どうしてもカスタムフィールドは導入しなければいけませんよね。

ただ、知識のないクライアント様の場合適当に画像を登録する人が多いので元々縦長の画像と指定しても意味はありません笑

今回は自分で少し特殊なサイトを作成した際の技術を忘れないように掲載させて頂きました。

ワードプレスで画像関係がある程度コントロールできるようになれば、かなり幅は広がります。

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

執筆者:


comment

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

関連記事

特定のユーザーのみ反映するカスタマイズ方法

ワードプレスでは管理画面の情報をいじると全てのユーザーが影響を受けてしまいますがカスタマイズする事で管理者は影響を受けないように出来ます。

tinymce advancedで絵文字もフォントサイズも可能に

ワードプレスって、顔文字が使えなかったり、フォントサイズがいじれなかったりと日本人のブログとしては微妙ですよね?そこでこれらを可能にするプラグインのご紹介です。

スマホの理想的なハンバーガーメニュー紹介

スマホデザインを作るのであれば、ハンバーガーメニューが一般的ですよね。今回は理想的なハンバーガーメニューを見つけたのでご紹介させて頂きます。

無料のFC2ショッピングカートの登録方法

今回は、ショッピングカートを利用したいけど月額費用が気になる方向けのFC2ショッピングカートの登録方法をご紹介いたします。

ワードプレスの記事下に任意の情報を入れるプラグイン

ブログの最後に毎回同じ情報を入れている人にお勧めのプラグインを発見しました。毎回コピペして入力しなくてもこのプラグイン一つで解決出来ます。

人気の副業記事(24時間で更新)