https://www.advancedcustomfields.com/resources/image/
建议使用Advanced Custom Fields PRO版本,WordPress后台上传插件安装启用即可。
添加自定义字段一定要是数组标题才可以调用出来要不下代码会出错
文章页面调用
<?php $images = get_field('photos');if( $images ): ?> <ul> <?php foreach( $images as $image ): ?> <li> <a href="<?php echo esc_url($image['url']); ?>"> <img src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" /> </a> <p><?php echo esc_html($image['caption']); ?></p> </li> <?php endforeach; ?> </ul><?php endif; ?>
图片调用说明
缩略图
<?php echo esc_url($image['sizes']['thumbnail']); ?>
大图
<?php echo esc_url($image['sizes']['large']); ?>
原图
<?php echo esc_url($image['sizes']['full']); ?>
说明
<?php echo esc_html($image['caption']); ?>
描述
<?php echo esc_html($image['description']); ?>
atl
<?php echo esc_html($image['alt']); ?>
以上调用函数完成
列表文章中获取相册地址非数组
<?php $images = get_field('pic'); //获取文章里面的相册 foreach($images as $images) { echo '<a href="'. $images . '">'; echo '<img src="'. $images . '" alt="" />'; echo '</a>'; }?>
此示例演示如何在使用返回类型时显示所选图像Image ID
。此示例使用wp_get_attachment_image()函数生成图像 HTML。
<?php $image = get_field('image');$size = 'full'; // (thumbnail, medium, large, full or custom size)if( $image ) { echo wp_get_attachment_image( $image, $size );}
此示例演示如何在使用返回类型时显示所选图像Image Object
。此返回类型提供额外的图像数据,例如替代文本、标题和大小。
<?php $image = get_field('image');if( !empty( $image ) ): ?> <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" /><?php endif; ?>
内容页面定制显示(阵列)此示例演示如何在使用Image Object
返回类型时显示所选图像的自定义尺寸。此返回类型允许我们访问额外的图像数据,例如尺寸、宽度、高度等。
<?php $image = get_field('image');if( $image ): // Image variables. $url = $image['url']; $title = $image['title']; $alt = $image['alt']; $caption = $image['caption']; // Thumbnail size attributes. $size = 'thumbnail'; $thumb = $image['sizes'][ $size ]; $width = $image['sizes'][ $size . '-width' ]; $height = $image['sizes'][ $size . '-height' ]; // Begin caption wrap. if( $caption ): ?> <div class="wp-caption"> <?php endif; ?> <a href="<?php echo esc_url($url); ?>" title="<?php echo esc_attr($title); ?>"> <img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" /> </a> <?php // End caption wrap. if( $caption ): ?> <p class="wp-caption-text"><?php echo esc_html($caption); ?></p> </div> <?php endif; ?><?php endif; ?>
显示图像(URL)此示例演示如何在使用返回类型时显示所选图像Image URL
。这种返回类型使我们能够有效地显示基本图像,但阻止我们加载有关图像的任何额外数据。
<?php if( get_field('image') ): ?> <img src="<?php the_field('image'); ?>" /><?php endif; ?>
图片地址判断分类页面
<?php if ($image && $image['url']) {echo esc_url($image['url']); } else {// 替代默认图片的URL$default_image_url = '链接到默认图片的URL';echo esc_url($default_image_url); } ?>
调用缩略图分类页面
<?php $post_thumbnail_id = get_post_thumbnail_id(); if ($post_thumbnail_id) {$thumbnail_url = wp_get_attachment_image_src($post_thumbnail_id, 'full')[0];echo esc_url($thumbnail_url); }else { // 替代默认图片的URL $default_image_url = 'https://#####/wp-content/uploads/2024/01/banner-white-400.png'; echo esc_url($default_image_url); } ?>
自定义文章类型如何使用字段
1、自定义文章类型分类页获取分类自定义字段的方法: <?php $queried_object = get_queried_object(); $taxonomy = $queried_object->taxonomy; $term_id = $queried_object->term_id; ?> /**在你需要获取字段的地方使用下面的代码即可**/ <?php the_field('_fmt',$taxonomy . '_' . $term_id);?> /**只需要将_fmt修改成你的字段名即可**/ 2、自定义文章类型文章页获取该自定义分类的字段 <?php $term_list = wp_get_post_terms($post->ID, 'product_category', array("fields" => "all"));/**product_category是你自定义分类法的名字**/ $term_id = $term_list[0]->term_taxonomy_id ; ?>
转载请注明:Wordpress» WordPress 添加相册功能【Advanced Custom Fields PRO自定义字段插件系列教程】