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

画像を特定のサイズで表示させる方法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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

さくらサーバーでワードプレスの無料SSLを導入してみたよ

さすがにそろそろSSL化しないといけないのでやってみたよ

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

ワードプレスは必要時に応じてプラグインをインストールする事でさまざまな機能を追加する事が可能です。今回はインストールの方法をご紹介いたします。

ワードプレスの設定1【アップロード】

副業をする際に必須条件のブログ。導入費用は無料でインストールも非常に簡単なので誰でも簡単に始められます。広告を表示するも良し、アフィリエイトをするのも可能なのでお勧めです。

ワードプレスに目次を簡単に入れるTable of Contents Plus

今までタグを手打ちしていたのですが、やっとこさおさらば出来そうです。

年のみphpで出力する

ホームページなどでコピーライトが2011年とか見ると少しさみしくなってしまいます。

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