質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.31%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

2回答

955閲覧

ワードプレスのカスタムフィールドで、画像を入れようとしてますが表示できません。

2232

総合スコア301

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2022/02/14 13:40

編集2022/02/15 01:46

初心者です。
今現在、ワードプレスでホームページを作ってます、
カスタムフィールドで登録した画像をトップ・ページで表示する方法を試していますが、上手くいきません、

今現在は、single.phpで作成したもの、をトップページに持って来るようにPHPを書いています。
画像と文章をカスタムフィールドに設定していて、
文章はうまく表示されていますが画像は写真の通り表示できません。

固定ページのID は2です。
また画像の名前は、participant-photo3です。
返り値はURLにしてます。

HTMLを検証ツールで確認したところ、

<div class="person-img"> <img class="test-image" src(不明)> <div> となりました。

プラグイン
Advanced Custom Fields
を使用、

トップページ

ファイル名  front-page-php  トップページ用のファイル

PHP

1 <div class="list-content-third"> 2 <div class="list-inner"> 3 <div class="list-area"> 4 <div class="list-area-title"> 5 <p class="area-txt">早稲田大学国際教育学部AO入試合格!TOEFLiBT109点</p> 6 </div> 7ーーーー画像ーーーーーーー 8 <div class="list-img"> 9 <div class="person-img"> 10 <?php if (get_field('participant-photo3','2')) : ?> 11 <img class="test-image" src="<?php the_field('participant-photo3'); ?>" /> 12 <?php endif; ?> 13 </div> 14 </div> 15ーーーーーーここまでーーーーーー 16 <div class="list-area-txt"> 17 <div class="txt-item"> 18 <?php the_field('participant7', '2'); ?> 19 </div> 20 <div class="txt-item-second"> 21 <?php the_field('participant8', '2'); ?> 22 </div> 23 </div> 24 <div class="txt-item-third"> 25 <?php the_field('participant9', '2'); ?> 26 </div> 27 </div> 28 </div>

固定ページ用のファイル
ファイル名  single.php

PHP

1<div class="list-content-third"> 2 <div class="list-inner"> 3 <div class="list-area"> 4 <div class="list-area-title"> 5 <p class="area-txt">早稲田大学国際教育学部AO入試合格!TOEFLiBT109点</p> 6 </div> 7ーーーー画像ーーーーーーー 8 <div class="list-img"> 9 <div class="person-img-third"> 10 <?php if (get_field('participant-photo3')) : ?> 11 <img class="test-image" src="<?php the_field('participant-photo3'); ?>" /> 12 <?php endif; ?> 13 </div> 14 </div> 15ーーーーーーここまでーーーーーー 16 <div class="list-area-txt"> 17 <div class="txt-item"> 18 <p class="txt-item-area"><?php echo get_post_meta($post->ID, 'participant7', true); ?></p> 19 </div> 20 <div class="txt-item-second"> 21 <p class="txt-item-area-second"><?php echo get_post_meta($post->ID, 'participant8', true); ?></p> 22 </div> 23 </div> 24 <div class="txt-item-third"> 25 <p class="txt-item-area-third"><?php echo get_post_meta($post->ID, 'participant9', true); ?></p> 26 </div> 27 </div> 28 </div> 29 </div>

画像のように3つ並んだ空白に画像を入れ、
下の3つの白い枠に文字を入れます。
こういった繰り返しの処理(ループ)をするのが一般的で、
そういうコードにするべきでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

<?php if (get_field('participant-photo2', 2)) : ?> <img class="test-image" src="<?php the_field('participant-photo2', 2); ?>" /> <?php endif; ?>

これで解決しました。
2段めのthe_fieldにもIDを指定するのが正しいようです。

投稿2022/02/15 01:57

2232

総合スコア301

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

どのような HTML が出力されているのでしょうか。

質問の画像から判断すると 画像の壊れたあいこんがみえるので、画像の URL が読み込めていないようです。

Advanced Custom Fields の Image で、カスタムフィールドを作成されたのでしょうか。

<img class="test-image" src="<?php the_field('participant-photo3'); ?>" />

質問に記載されている 上記の img タグの src に記載する場合は、image フィールドの「返り値」 は、「画像 URL」なっている必要がありますが、「返り値」 は、「画像オブジェクト」「画像 URL」「画像 ID」何にしていますか? 

投稿2022/02/14 14:50

CHERRY

総合スコア25234

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

2232

2022/02/15 01:45 編集

返り値はURLになっています、書き忘れてしまい申し訳ございません。 HTMLを検証ツールで確認したところ、 <div class="person-img"> <img class="test-image" src(不明)> <div> となりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問