このエントリーをはてなブックマークに追加

リニューアルでテーマを変更したところ、過去に投稿した画像のフルサイズが新しいテーマのサムネイルサイズより小さい場合があるので、新しいテーマのサイズより小さい場合はクラスを付加してフルサイズを表示

<?php if ( has_post_thumbnail() ) { ?>
<?php $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
$small_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'blog-thumb'); ?>  
<div<?php if ($large_image_url[1] < 570 ) { echo ' class="xxxx"'; } ?>>
<img src="<?php if ($large_image_url[1] < 570 ) { echo $large_image_url[0]; } else { echo $small_image_url[0]; } ?>" alt="<?php the_title(); ?>" />
</div>
<?php } ?>

画像とテキストを横並びにしたいが、画像のサイズを統一できないので、全体の横幅から画像サイズを引いたものをテキスト部分の横幅に充てる *画像はAdvanced Custom Fields でアップロード

<?php if(get_field('image') ){ $attachment_id = get_field('image');$size = 'full'; $image = wp_get_attachment_image_src( $attachment_id, $size ); ?><li style="width:<?php echo $image[1]; ?>px;"><img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt=""></li><?php } ?>
<li<?php if(get_field('image') ){ $width = 968 - $image[1]; echo ' style="width:' . $width . 'px"'; } ?>><?php the_field('xxxx'); ?></li>

商品画像をグリッド状に並べる際、画像の縦幅を統一できないが中心に置きたいので、グリッドの縦サイズから画像サイズを引いて2で割ったものをマージンに充てる *画像はAdvanced Custom Fields でアップロード、スマホ表示の際はグリッド状にしないので !is_mobile()

<?php if(get_field('list_image') ){ ?><?php $attachment_id = get_field('list_image');$size = 'full'; $image = wp_get_attachment_image_src( $attachment_id, $size ); $im = 130-$image[2]; $margin = floor($im/2); ?><a href="" title=""><img<?php if (!is_mobile()) { echo ' style="margin:' . $margin . 'px auto;"'; } ?> src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt=""></a><?php } ?><span><a href="" title=""><?php the_field('xxxx'); ?></a></span>

2015.04.20 投稿 2016.04.25 更新

新しい情報を追記している場合はありますが、古い情報の修正はしていません。投稿日・文中の日付を参照してください。

Recent Articles