我编写了一个非常基本的插件,它创建了一个具有多个自定义元字段的自定义帖子类型(CPT)。
我似乎无法回显图像URL。我尝试了很多其他类似的帖子解决方案,但它们似乎都以某种方式与高级自定义字段(ACF)插件相关。
捕获了两幅图像,它们以两种方式捕获:
这种方式允许用户将文件上载到表单中:
<div class="form-row">
<label for="your-profile-picture">Your Profile Picture</label>
<input type="file" id="your-profile-picture" accept=".jpg,.jpeg,.png" tabindex="1" name="your-profile-picture" onchange="validateImageFileType()" required/>
</div>
第二种方法是使用单选按钮让他们从所选图像中进行选择:
<div class="form-row">
<input type="radio" name="your-background-image" tabindex="6" class="sr-only" id="normal">
<label for="normal">
<img src="/test/clicky/wp-content/uploads/2020/08/testimonial-bg-1.png" alt="normal">
</label>
<input type="radio" name="your-background-image" tabindex="7" class="sr-only" id="flipped">
<label for="flipped">
<img src="/test/clicky/wp-content/uploads/2020/08/testimonial-bg-2.png" alt="flipped">
</label>
<input type="radio" name="your-background-image" tabindex="8" class="sr-only" id="bright">
<label for="bright">
<img src="/test/clicky/wp-content/uploads/2020/08/testimonial-bg-3.png" alt="bright">
</label>
</div>
然后通过POST方法传递此信息,如下所示:
<?php
// Handle Form Submissions
if (\'POST\' == $_SERVER[\'REQUEST_METHOD\'] && !empty($_POST[\'post-type\']) && $_POST[\'post-type\'] == "testimonial") :
// Do some minor form validation to make sure there is content
if (isset ($_POST[\'your-profile-picture\'])) {
$your_profile_picture = $_POST[\'your-profile-picture\'];
} else {
echo \'Please provide a profile picture.\';
}
if (isset ($_POST[\'your-background-image\'])) {
$your_background_image = $_POST[\'your-background-image\'];
} else {
echo \'Please select a background image.\';
}
if (isset($_POST[\'post-type\'])) {
$post_type = $_POST[\'post-type\'];
} else {
echo \'Unable to get post type.\';
}
// Add the content of the form to $post as an array
$testimonial_args = array(
\'your_profile_picture\' => $your_profile_picture,
\'your_background_image\' => $your_background_image,
\'post_type\' => $post_type,
\'post_status\' => \'publish\'
);
//save the new post
$post_id = wp_insert_post($testimonial_args, true);
$your_profile_picture = $_POST[\'your-profile-picture\'];
$your_background_image = $_POST[\'your-background-image\'];
add_post_meta($post_id, \'your_profile_picture\', $your_profile_picture, true);
add_post_meta($post_id, \'your_background_image\', $your_background_image, true);
if ($post_id != \'\') : ?>
<script>
alert(\'Testimonial details successfully submitted!\');
</script>
<?php else : ?>
<script>
alert(\'Testimonial details submission was unsuccessful!\');
</script>
<?php endif;
endif; ?>
随着成功信息的传递,我开始考虑如何最好地将图像输出到我的前端代码中:
<?php
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php
$background_image_id = get_post_meta(get_the_ID(), \'your_background_image_id\', true);
$background_image = wp_get_attachment_image( $background_image_id, \'full\' );
$profile_image_id = get_post_meta(get_the_ID(), \'your_profile_picture_id\', true);
$profile_image = wp_get_attachment_image( $profile_image_id, \'full\' ); ?>
<div class="testimonial-slide" style="background-image: url(<?php echo $background_image; ?>);">
<div class="testimonial-profile-picture" style="background-image: url(<?php echo $profile_image ?>);"></div>
</div>
<?php
endwhile; ?>
但在检查时,这会返回空白的背景图像声明。
我也尝试了很多其他的方法,但我并没有把这个问题拉长,我想我们可以理解我想要实现的目标。。。考虑到已经获得的两种方法,我可以如何回声图像的方法。
~插件中有更多捕获基于文本的元字段的代码,我可以确认它们收集并回显了正确的信息。只有图像才不会返回任何信息。
~我以前有一个解决方案会发出“开”的回音,另一个只返回文件名。同样,没有图像src。
请我们寻找一种解决方案,将图像的url映射到背景图像样式中,好吗?