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

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

ただいまの
回答率

90.51%

  • PHP

    23997questions

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

  • WordPress

    8920questions

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

WordPress トップページに画像を出力したい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 898

lingwood

score 25

 前提・実現したいこと

WordPressをカスタマイズしています。
トップページ(index.php)にカスタムフィールドに設定した画像が表示されなく困っています。

どうにか教えて頂きたいです><

WordPressは最新で4.9.4
Theme:xeory(https://xeory.jp/)
カスタムポスト系プラグイン:
・Custom Post Type UI
・Smart Custom Field

上記構成です。

バナー管理をしたいのでカスタムポスト名をinput_bnrにしました。
カスタムフィールドの項目は、画像入力欄をbnr_imageにしました。

 ソースコード

<?php get_header(); ?>

<div id="hero"></div>

ここに表示させるためのコードを書いています。

<div id="content">

<div class="wrap">

    <?php 
    if( !( is_home() || is_front_page() ) ){
      // パンくず
      bzb_breadcrumb();

・・・・

 試したこと

<?php $list = post_custom('input_bnr');
echo wp_get_attachment_image( $list , $bnr_image ,'large' );
?><?php $list = post_custom('input_bnr');
echo wp_get_attachment_image( $list , 'large' );
?><?php
$cf_sample = SCF::get('bnr_image');
echo wp_get_attachment_image( $cf_sample , 'large' );
?><?php
$cf_sample = SCF::get('bnr_image');
echo wp_get_attachment_image( $bnr_image , 'large' );
?><?php 
 if( !( is_home() || is_front_page() ) ){
$cf_sample = SCF::get('bnr_image');     
} ?>

<?php wp_get_attachment_image( $cf_sample , 'large' ); ?><?php $args = array(
 'numberposts' => 5,
 'post_type' => 'input_bnr'
);
$customPosts = get_posts($args);
if($customPosts) : foreach($customPosts as $post) : setup_postdata( $post );
?>
<?php //テスト①
<img src="p_get_attachment_image( $bnr_image , 'large');">
?>
<?php //テスト② 
wp_get_attachment_image( $bnr_image , 'large');
?>
<?php endforeach; ?>
<?php else : ?>
<p>画像がありません。</p>
<?php endif;
wp_reset_postdata(); //クエリのリセット ?>

 

いろいろ試行しているのですが、
なかなか表示ができないでいます。

エラー時に表示される画像が表示されていたのですが、
デベロッパーツールで見た時にパスが以下のようになっていました。

<img width="48" height="64" src="http://ドメイン/wp-includes/images/media/default.png" class="attachment- size-" alt="">

すみませんが、教えていただけないでしょうか。
よろしくお願いします!!

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

ただ単に出力するだけならこんな感じでいかがでしょうか。

<?php $query = new WP_Query(array( 'post_type' => 'input_bnr')); ?><!-- input_bnrの投稿を取得 -->
<?php if($query->have_posts()): ?><!-- 投稿があるかどうか -->
<?php while($query->have_posts()) : $query->the_post(); ?><!-- 投稿があればループ開始 -->
<?php
  $bnr_image = SCF::get('bnr_image');
  echo wp_get_attachment_image( $bnr_image , 'large' );
?><!-- 画像を取得して出力 -->
<?php endwhile; ?><!-- ループ終了 -->
<?php endif; ?><!-- 投稿があるかどうかのif終わり -->
<?php wp_reset_query(); ?><!-- メインクエリのためにリセット -->

画像の表示を画像URLにして、画像が無い場合も考えるならこう?

<?php $query = new WP_Query(array( 'post_type' => 'input_bnr')); ?>
<?php if($query->have_posts()): ?>
<ul>
    <?php while($query->have_posts()) : $query->the_post(); ?>
    <?php
    $bnr_image = SCF::get('bnr_image');
    $bnr_image = wp_get_attachment_image_src($bnr_image,'large');
    $imgUrl = esc_url($bnr_image[0]);
    ?>
    <?php if( $imgUrl ){ ?>
        <li><img src="<?php echo $imgUrl; ?>"></li>
    <?php } else { ?>
        <li><img src="http://placehold.jp/eeeeee/cccccc/150x150.png?text=NoImage" alt=""></li>
    <?php } ?>
    <?php endwhile; ?>
</ul>
<?php endif; ?>
<?php wp_reset_query(); ?>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/05 16:30

    dit. 様
    お世話になります。
    ありがとうございました!

    無事出力されました!!!

    上記コード参考にしてちゃんと理解したいと思います。

    まったくウンともスンともだったのですが、
    どのように考えたらよろしいのでしょうか?

    お時間よろしければ教えていただけたらすごくうれしいです。

    本当にありがとうございました!!!

    キャンセル

  • 2018/03/05 16:48

    考え方としては、まずカスタム投稿タイプinput_bnrの一覧をループさせる。
    https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/WP_Query

    そのループの中で画像を表示させる
    https://www.akecre.com/wordpress/display_scf/

    です。
    1個目のコードにコメント入れてみました。

    キャンセル

  • 2018/03/05 18:45

    dit. 様
    お世話になります。
    詳しい解説をいただいて本当にありがとうございます!!

    ご解説を頂いてすごく勉強になりました。

    自身でもいろいろと試行して今後起こり得る場面で対応できるよう、
    応用幅を持ちたいと思います。

    また今後ともよろしくお願い致します。

    キャンセル

0

画像が複数枚あるんですかね?

<?php
foreach ( post_custom( 'input_bnr' ) as $attachment_id ) {
    echo '<li>'.wp_get_attachment_image( $attachment_id , 'large' ).'</li>';
}
?>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/05 15:13

    Space-Monkey 様
    お世話になります。

    画像は1枚です。

    すみません、上記コードはいろいろググって取得したコードを張り付けて
    やってみた際の名残でして・・・失礼いたしました。
    ただ、上記のようにforeach文で回したコードも試行してみたのですが、
    それも取得できなかったものですから、
    ワケがわからなくなってしまい、それでお聞きしようと思い立った次第です。

    すみませんが、引き続きよろしくお願い致します。

    キャンセル

  • 2018/03/05 15:24 編集

    一枚しかないなら
    <?php echo wp_get_attachment_image( get_post_meta( 'カスタムポストのページID', 'input_bnr', true ), 'large' ); ?>
    で出ませんか?

    キャンセル

  • 2018/03/05 15:52

    お世話になります。
    ページIDを入れて試してみました。
    <?php echo wp_get_attachment_image( get_post_meta( '499', 'input_bnr', true ), 'large' ); ?>
    出力されませんでした。
    子テーマにしていること、もしくはxeoryというテーマが良くないのでしょうか?

    キャンセル

  • 2018/03/05 16:11

    何となくinput_bnrがカスタムフィールドのメタキーではないように思います。

    キャンセル

  • 2018/03/05 16:31

    Space-Monkey 様
    お世話になります。
    いろいろ思案いただいて本当にありがとうございます!!

    上記、dit.さんが教えてくれたコードで表示できましたが、
    一緒に考えて下さって、本当にうれしかったです!
    ありがとうございました。

    またの際にもどうぞよろしくお願い致します。

    キャンセル

  • 2018/03/05 16:56

    勘違いしてました。
    <?php echo wp_get_attachment_image( get_post_meta( 'カスタムポストのページID', 'bnr_image', true ), 'large' ); ?>

    キャンセル

同じタグがついた質問を見る

  • PHP

    23997questions

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

  • WordPress

    8920questions

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