将图标放置在 WordPress 上的 PHP 代码中

发布于 2025-01-10 10:48:38 字数 994 浏览 4 评论 0原文

我试图在特定条件下使用自定义布局功能在 Astra Wordpress 主题的标题中放置一个自定义部分，但我无法正确管理它。问题是，我想使用自定义图标将特色标题图像的位置放置在标题部分中。问题是，我正在使用 Wordpress 图像的“标题”部分。如果标题部分不为空，我只能显示标题部分。我的 PHP 知识并不完美，但我做了研究，但一无所获。

示例：右上角

我可以显示图像的标题部分，但无法放置标题文本之前的图标。

我尝试了很多组合，但仍然一无所获。

<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<div class="featured-image-caption-for-header"
    style="position: absolute; top: 10px; right: 10px; text-align: right; font-size: 12px; color: #3A4115;">
    <?php $featured_image_caption = the_post_thumbnail_caption(); if( $featured_image_caption ): ?>
    <i class="uil uil-camera"> </i>
    <?php echo esc_url( $featured_image_caption ); ?>
    <?php endif; ?>
</div>

我的主要目标是仅当图像的标题部分被填充时才在标题文本之前显示图标。

原文

I'm trying to place a custom section in the Astra Wordpress Theme's header under a specific condition, with Custom Layouts feature, but I couldn't manage it properly. The thing is, I wanted to place the location of the featured header images in the header section with a custom icon. The thing is, I'm using the "caption" section of the Wordpress image. I can display only the caption section if it's not empty. My PHP knowledge is not perfect, but I've done the research and found nothing.

Example: top right corner

I could display the caption section of the image but couldn't place the icon before the caption text.

I've tried many combinations, but still nothing.

<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<div class="featured-image-caption-for-header"
    style="position: absolute; top: 10px; right: 10px; text-align: right; font-size: 12px; color: #3A4115;">
    <?php $featured_image_caption = the_post_thumbnail_caption(); if( $featured_image_caption ): ?>
    <i class="uil uil-camera"> </i>
    <?php echo esc_url( $featured_image_caption ); ?>
    <?php endif; ?>
</div>

My main goal is to display the icon before the caption text only when the caption section of the image is filled.

分享到QQ

分享到微博