WordPressの特定のアイキャッチ画像（サムネイル）に任意の文字列を乗せたい

Question

前提・実現したいこと

タイトルの通り、アイキャッチ画像に特定の文字列を乗せたいです。
CSS、PHP、HTMLを使用して投稿時点で文字をアイキャッチ画像に乗せたいと考えています。
投稿毎に異なるアイキャッチ画像を使用する予定で、記事にあった文字を画像に乗せたいのです。

発生している問題・エラーメッセージ

ネットにあった方法

１，アイキャッチ画像にカテゴリを乗せる方法
こちらは私が実現したいことにかなり近いのですが、
任意の文字列を入れたいので、記事を投稿する度に入れたい文字列のカテゴリを作るのは厳しいです。

２，最初から編集した画像をアップロードする方法
流石に毎回これだと作業の負荷が高いので出来ればCSS、PHP、HTMLで実施したいです。

試したこと

調べた結果、下記関数でアイキャッチのURLを取得出来ることが分かりました。
<img src="<?php echo get_the_post_thumbnail_url(get_the_ID(),'full'); ?>">

このURLを使って何とか投稿段階で任意の文字列を画像に載せることは出来ないでしょうか。
もちろん別の方法でも問題ありません。

どうか、よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

WordPressのバージョンは5.0.3–jaです。
使用しているテーマはluxeritasです。

追記しました。

色々とご教授いただきありがとうございます。
教えていただいたやり方でPHP文を書いてみました。

function food_func() {
if( has_post_thumbnail() ): ?>
<div class="eyecatch">
<?php echo the_post_thumbnail( 'medium' ); ?>
<p class="eyecatchlabel">
<?php echo get_post_meta( get_the_ID(), '野菜', true ); ?>
</p>
</div>
<?php endif; 
}
add_shortcode('food', 'food_func');

これで画像の上にカスタムフィールドで入力した文字が表示されたのですが、
『記事の中』でアイキャッチ画像の上に文字が表示されました。（画像右上の「3456」がカスタムフィールドで入力した文字です）

やはり**『記事一覧』**のサムネイルに文字を乗せるには、

get_the_post_thumbnail_caption
```が必要だと考え。

※最終的な目標は下画像の記事一覧のサムネイルに上の画像のようにカスタムフィールドで入力した文字を乗せることです。
![イメージ説明](8d42735e9fb1ef4a9453b3c74d9bfac8.png)




```PHP
function food_func() {
if( has_post_thumbnail() ): ?>
<div class="eyecatch">
<?php echo get_the_post_thumbnail_caption( 'medium' ); ?>　←　この行を変更
<p class="eyecatchlabel">
<?php echo get_post_meta( get_the_ID(), '野菜', true ); ?>
</p>
</div>
<?php endif; 
}
add_shortcode('food', 'food_func');

と書いてみた所、記事内で画像が表示されなくなりました。

get_the_post_thumbnail_caption
```の使い方がおかしいのだと思いますが、
度々申し訳ないのですがアドバイスをいただけないでしょうか。

よろしくお願いいたします

Answer 1

１の方法でカスタムフィールドを使うようにすればいいだけです。

追記

おかしい点

文法と用法が目茶苦茶なので何ともかんとも…

とりあえず参考にされたサイトの『カテゴリ名の取得方法』の所のコードを

<?php echo get_post_meta( get_the_ID(), 'メタキー', true ); ?>

こんな感じにしておいて…

メタキーを覚えておくのも面倒なのでカスタムフィールドの入力欄を設ければ先々楽です。

参考
独自のカスタムフィールドを追加する方法。プラグインなしでオリジナルの入力項目を追加しよう
https://fit-jp.com/customfield/

Comments

[退会済みユーザー]

Space-Monkey様、ご回答ありがとうございます。
現在カスタムフィールドを作成して頑張っております。
もしよろしければ、kszk311様の返信に書かせてPHP・CSS文のおかしい所をご指摘いただけないでしょうか。
よろしくお願いいたします。

[退会済みユーザー]

元の質問に追記しました。

[退会済みユーザー]

アイキャッチ画像とサムネイルが別物なのか同一なのか質問のタイトルから見てもいまいち分かりませんが、どのようなテーマでどのようにしたいのかテーマの詳細とスクリーンショットを質問に追記してみてください。

[退会済みユーザー]

度々申し訳ありません。
画像を追加いたしました。

[退会済みユーザー]

何となく理解できましたが、ショートコードを使う理由は何ですか？

>記事一覧のサムネイル

この部分のコードがどうなっているのか、ですね。

[退会済みユーザー]

よく考えたら記事投稿画面のカスタムフィールドに入れた文字列を、
アイキャッチ画像に乗せることが出来ればショートコードは必要ありませんね。
何故か「PHPに書き込んだらショートコードで使う」という固定概念がありました。

[退会済みユーザー]

luxeritasとはhttps://thk.kanzae.net/wp/で配布しているテーマでしょうか？
もし間違ってなければ大文字小文字くらいは区別してください。
あと、配布元のサイトURLくらいは欲しいもんです。

そのテーマだとするなら関連記事を出力しているのはrelated.phpです。

<div class="term"><a href="<?php the_permalink() ?>" aria-hidden="true"><?php

このあたりでサムネイルを表示しているので自身のやりたいようにカスタマイズすればいいかと思います。

Answer 2

管理画面上で、その画像ごとにキャプション設定し、
get_the_post_thumbnail_caption()で、取得してくるのはどうですか？

Comments

[退会済みユーザー]

ご回答ありがとうございます。
get_the_post_thumbnail_caption()は知りませんでした。
早速、教えていただいた関数で画像を取得して、
Space-Monkey様に教えていただいた、
カスタムフィールドで入力した値を画像に乗せるためPHP・CSS文を書いてみたのですがエラーが出てしまいます。
もしよろしければおかしい点をご指摘いただけないでしょうか。
お願いいたします。
参考にしたサイト様：ttp://inomacreate.com/wordpress-eyecatch2/

・PHP（ショートコードにしようと試みています）
-----------------------------------------------------
function food_func() {
<div class="eyecatch">
$caption = get_the_post_thumbnail_caption();
<p class="eyecatchlabel">
echo post_custom(‘野菜’);
</p>
</div>
add_shortcode('food', 'food_func');
}
-----------------------------------------------------

・CSS（細かい位置調整は文字が乗ってからやろうと考えています）
-----------------------------------------------------
div.eyecatch{
position: relative;
}

p.eyecatchlabel{
position: absolute;
color: #fff;
background: #6495ed;
}
-----------------------------------------------------

[kszk311]

カスタムフィールドを使うならカスタムフィールドを取得する関数を使用してください。

[CHERRY]

(横からですが...)

エラーが出るのであれば、「エラーメッセージ」を明記してください。