前端使用wordpress 核心函数调用ACF自定义字段

本篇文章是下面这篇文章的深入研究和系统化探索帖。

http://xyx115.com/2020/05/06/%e4%bd%bf%e7%94%a8wordpress%e6%a0%b8%e5%bf%83%e5%87%bd%e6%95%b0%e8%b0%83%e7%94%a8acf%e8%87%aa%e5%ae%9a%e4%b9%89%e5%ad%97%e6%ae%b5/

文本(字符)

文本字段在使用中,应用非常广泛,包括名称,地址,简单备注等。

<?php


echo '<h3>使用 wordpress 核心函数调用</h3>';
echo get_post_meta($post->ID,"dcaf01",true);
echo '<hr>';
echo '<h3>使用 ACF 核心函数调用</h3>';
the_field('dcaf01');
echo '<hr>';



?>

文本段

本文段相比文本,可以多行输入。因此也稍复杂一点。

  • 新行控制方式:无格式
    • 示例:echo get_post_meta($post->ID,"dcaf02",true);
  • 新行控制方式:自动添加
    • 示例:echo nl2br(get_post_meta($post->ID,"dcaf02",true), true);
  • 新行控制方式:自动添加段落
    • 示例:echo nl2br(get_post_meta($post->ID,"dcaf02",true), true);
<?php



echo '<h3>使用 wordpress 核心函数调用</h3>';

echo get_post_meta($post->ID,"dcaf02",true);
// 新行控制方式:无格式,使用上面的方法,直接输出即可。
echo '<hr>';

echo nl2br(get_post_meta($post->ID,"dcaf02",true), true);
// 新行控制方式:自动添加<br> 使用上面的方法,在所有换行符之前插入HTML换行符
echo '<hr>';

echo nl2br(get_post_meta($post->ID,"dcaf02",true), true);
// 新行控制方式:自动添加段落 使用上面的方法,在所有换行符之前插入HTML换行符
echo '<hr>';

echo '<h3>使用 ACF 核心函数调用</h3>';
the_field('dcaf02');

echo '<hr>';




?>

号码(数字)

<?php



echo '<h3>使用 wordpress 核心函数调用</h3>';
echo get_post_meta($post->ID,"dcaf_range",true);
echo '<hr>';
echo '<h3>使用 ACF 核心函数调用</h3>';
the_field('dcaf_range');
echo '<hr>';




?>

电子邮件

<?php



echo '<h3>使用 wordpress 核心函数调用</h3>';
echo get_post_meta($post->ID,"dcaf_mail",true);
echo '<hr>';
echo '<h3>使用 ACF 核心函数调用</h3>';
the_field('dcaf_mail');
echo '<hr>';




?>

密码

<?php



echo '<h3>使用 wordpress 核心函数调用</h3>';
echo get_post_meta($post->ID,"dacf_password",true);
echo '<hr>';
echo '<h3>使用 ACF 核心函数调用</h3>';
the_field('dacf_password');
echo '<hr>';




?>

地址

<?php



echo '<h3>使用 wordpress 核心函数调用</h3>';
echo get_post_meta($post->ID,"dacf_address",true);
echo '<hr>';
echo '<h3>使用 ACF 核心函数调用</h3>';
the_field('dacf_address');
echo '<hr>';




?>

所见即所得编辑器

所见即所得编辑器字段,在后台编辑时,有三种显示模式。如下图所示。标签选择“显示与文本”时,后台编辑器将显示web内容,并兼具提供html字符串编辑模式。而且提供两种工具条,“full”和“basic”。下面第二章图是当前设置参数所显示的实际编辑区式样。具体可根据实际需求,进行设置。

这种编辑器显示式样为纯文本模式。
<?php



echo '<h3>使用 wordpress 核心函数调用</h3>';
echo nl2br(get_post_meta($post->ID,"dacf_product_summary",true), true);
echo '<hr>';
echo '<h3>使用 ACF 核心函数调用</h3>';
the_field('dacf_product_summary');
echo '<hr>';




?>

图像

<?php





echo '<h3>使用 wordpress 核心函数调用</h3>';
$img_id = get_post_meta($post->ID,"dacf_image",true);// dacf_image 替换为你的图像字段slug
if( !empty( $img_id ) ):
 echo wp_get_attachment_image($img_id);
endif;

echo '<hr>';



// 当ACF设置图像字段返回格式为'数组’时,使用下面的方法
echo '<h3>使用 ACF 核心函数调用</h3>';
$image = get_field('dacf_image');// dacf_image 替换为你的图像字段slug
if( !empty( $image ) ): ?>
    <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif;

echo '<hr>';





// 当ACF设置图像字段返回格式为使用Image URL时,使用下面的方法
echo '<h3>使用 ACF 核心函数调用</h3>';
if( get_field('dacf_image') ): ?>
    <img src="<?php the_field('dacf_image'); ?>" />
<?php endif;
echo '<hr>';




// 当ACF设置图像字段返回格式为Image ID时,使用下面的方法
$image = get_field('image');
$size = 'full'; // (thumbnail, medium, large, full or custom size)
if( $image ) {
    echo wp_get_attachment_image( $image, $size );
}

echo '<hr>';




?>

当ACF设置图像字段返回格式为’数组’时,get_field('dacf_image');返回的内容示例如下:

<?php 


Array
(
    [ID] => 450
    [id] => 450
    [title] => logo_250x25003
    [filename] => logo_250x25003.png
    [filesize] => 10971
    [url] => http://localhost/test/wp-content/uploads/2020/05/logo_250x25003.png
    [link] => http://localhost/test/?attachment_id=450
    [alt] => 迷路轮回
    [author] => 1
    [description] => 
    [caption] => 
    [name] => logo_250x25003
    [status] => inherit
    [uploaded_to] => 431
    [date] => 2020-05-16 17:04:38
    [modified] => 2020-05-16 19:18:24
    [menu_order] => 0
    [mime_type] => image/png
    [type] => image
    [subtype] => png
    [icon] => http://localhost/test/wp-includes/images/media/default.png
    [width] => 70
    [height] => 70
    [sizes] => Array
        (
            [thumbnail] => http://localhost/test/wp-content/uploads/2020/05/logo_250x25003.png
            [thumbnail-width] => 70
            [thumbnail-height] => 70
            [medium] => http://localhost/test/wp-content/uploads/2020/05/logo_250x25003.png
            [medium-width] => 70
            [medium-height] => 70
            [medium_large] => http://localhost/test/wp-content/uploads/2020/05/logo_250x25003.png
            [medium_large-width] => 70
            [medium_large-height] => 70
            [large] => http://localhost/test/wp-content/uploads/2020/05/logo_250x25003.png
            [large-width] => 70
            [large-height] => 70
            [1536x1536] => http://localhost/test/wp-content/uploads/2020/05/logo_250x25003.png
            [1536x1536-width] => 70
            [1536x1536-height] => 70
            [2048x2048] => http://localhost/test/wp-content/uploads/2020/05/logo_250x25003.png
            [2048x2048-width] => 70
            [2048x2048-height] => 70
        )

)




?>

wp_get_attachment_image返回的内容示例如下:

<img width="150" height="82" src="http://localhost/test/wp-content/uploads/2020/05/20200517131826-150x82.png" class="attachment-thumbnail size-thumbnail" alt="" />
Scroll to Top