欢迎来到路由器窝!
WordPress 添加相册功能【Advanced Custom Fields PRO自定义字段插件系列教程】

WordPress 添加相册功能【Advanced Custom Fields PRO自定义字段插件系列教程】

浏览次数:

作者: 小编

信息来源:

更新日期: 2024-03-06 10:27

文章简介

建议使用Advanced Custom Fields PRO版本,WordPress后台上传插件安装启用即可。添加自定义字段<?php $images = get_field(‘photos‘);if( $images ): ?> &l

  • 正文开始
  • 相关文章

https://www.advancedcustomfields.com/resources/image/

建议使用Advanced Custom Fields PRO版本,WordPress后台上传插件安装启用即可。

  1. 添加自定义字段一定要是数组标题才可以调用出来要不下代码会出错

  2. image.png

  3.   文章页面调用

<?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自定义字段插件系列教程】

标签:
上一页:所有栏目文章显示ID文件引用即可
下一页:WordPress高级自定义字段插件Advanced Custom Fields Pro 免费下载和使用教程
最近更新作品
acf判断
更新时间:2024-04-17

891人已经看过了!

指定栏目ID另类调用配合acf
更新时间:2024-04-16

857人已经看过了!

word press 自定义文章类型制作留言功能
更新时间:2024-03-10

985人已经看过了!

php if  ifelse 循环
更新时间:2024-03-09

575人已经看过了!

栏目模板选择插件栏目模板
更新时间:2024-03-08

738人已经看过了!

contact-form-7历史版本WP SMTP配合使用
更新时间:2024-03-08

809人已经看过了!

WordPress True / False功能参数
更新时间:2024-03-08

928人已经看过了!

wordpress调用指定分类置顶文章
更新时间:2024-03-07

519人已经看过了!

WordPress父分类调用子分类名称和文章列表
更新时间:2024-03-07

518人已经看过了!