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

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

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

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

関連記事

no image

オリジナルドメインを使おう

オリジナルのドメインについては取得するだけだと意味がありません。オリジナルのドメインは設定しないと使えません。今回はその設定の方法を紹介いたします。 関連記事: サクラで日本語ドメインを使う方法 お名 …

[WordPress]投稿のテキストエディタ内にある情報を編集する

テキストを選択した時にエディタ内にめちゃくちゃ情報が多いと困りませんか? 関連記事: The WordPress Popular Posts “classic” widget …

amazon seller centralで商品登録をする方法

私の場合はブランド登録をしているのでJANコードなしの方法になります。 関連記事: 【ゆうちょ】アリエクのアフィリエイト報酬を受け取りました 【2019年版】googleショッピングに掲載する方法 ツ …

カスタム投稿タイプを簡単に作れるワードプレスプラグイン

ブログ記事以外に新着情報と言うのが出したいと言う方の為のカスタム投稿が簡単に作れるプラグインです。 関連記事: カスタムフィールドで画像を出力する時のヒント【ワードプレス】 ワードプレスに任意の画像サ …

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

Contact Form 7を利用している方でエラー項目をよりわかりやすくさせる方法をご紹介いたします 関連記事: スマホ画面の一番下にふわっとコンテンツを表示させる方法 スマホ画面の下にPC切り替え …

新着記事一覧

2024/03/19

インフォーマー

2024/03/18

正欲

2024/03/15

トッカイ

2024/03/14

キル・ボクスン

2024/03/13

ブラックリスト