如何在 WordPress 列表页面上轻松展示外部图像 URL？

php

2024-03-12 21:00:48

在 WordPress 列表页面上展示外部图像 URL

前言

在某些情况下，你可能需要在 WordPress 列表页面上显示来自外部来源的图像。本指南将详细介绍如何实现这一功能，让你能够在不使用 WordPress 特色图像的情况下展示外部图像。

获取图像 URL

第一步是获取你希望在列表页面上显示的图像 URL。这可以通过多种方式实现，包括使用插件抓取另一个网站上的图像或直接从图像托管服务获取 URL。

存储图像 URL

一旦获取了图像 URL，你需要将其存储到 WordPress 自定义字段中。这将使你能够在需要时访问这些 URL。你可以使用 Advanced Custom Fields 或 Pods 等插件创建和管理自定义字段。

创建列表页面模板

接下来，创建自定义列表页面模板来显示外部图像 URL。创建名为 archive-your-post-type.php 的文件，其中 your-post-type 是你想要显示图像的帖子类型的名称。

显示图像

在模板文件中，使用 get_post_meta() 函数获取存储在自定义字段中的图像 URL。然后，使用 HTML <img> 标签显示图像。示例代码如下：

<?php
$image_url = get_post_meta( get_the_ID(), 'your_custom_field_name', true );
?>

<img src="<?php echo esc_url( $image_url ); ?>" alt="<?php the_title(); ?>" />

添加 CSS 样式

可能需要添加 CSS 样式来调整图像的外观和布局。例如，添加以下样式以使图像居中并设置最大宽度：

.your-custom-class {
    text-align: center;
    max-width: 200px;
}

示例代码

将以下代码添加到你的自定义列表页面模板中：

<?php
$image_url = get_post_meta( get_the_ID(), 'your_custom_field_name', true );
?>

<div class="your-custom-class">
    <img src="<?php echo esc_url( $image_url ); ?>" alt="<?php the_title(); ?>" />
</div>