稼げる副業でお小遣いを稼ぐ方法

稼げる副業でお小遣いを稼ぐだけじゃなく、料理や映画アニメ、趣味などメモにも使っているブログ

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

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

関連記事

ECのショッピングカートシステム比較

新しく事業を立ち上げるにあたってECのショッピングカートシステムをそれぞれ比較してみました 関連記事: 大型らくらくメルカリ便の登録から発送までの流れ メルカリの出品から発送までの流れ カスタムフィー …

no image

メールソフトの設定【サンダーバード】

メールソフトをインストールするだけではメールの受信と送信は出来ません。流れとしてはオリジナルのメールアドレスを制作し、メールソフトをインストールし、設定後から使用出来るようになります。 関連記事: 無 …

ワードプレスで短縮URLが使えるPretty Link Lite

短縮URLって何かと必要ですよね?今回はワードプレスを使った短縮URLが簡単に使えるプラグインの紹介です。 関連記事: ネスタリゾートを100%遊びたい人へ【宿泊あり】 iPhoneアプリ内の広告を無 …

グーグルアドセンスで広告収入を得よう!

グーグルアドセンスとは、ブログやホームページに広告を張る事で広告収入を得る方法です。今回は申込み方法からご紹介いたします。 関連記事: Googleアドセンスから警告がきました 検索結果に著者情報を掲 …

パソコンでスマホ用デザインを確認する方法

パソコンからでもスマホ用のレスポンシブデザインやスマホ用デザインを確認する方法があります 関連記事: 検索結果に著者情報を掲載する方法 iPhoneアプリ内の広告を無料で消す方法 【2019年版】go …