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

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

ただいまの
回答率

90.52%

  • PHP

    23487questions

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

  • WordPress

    8722questions

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

Smart Custom Fieldsを使って、カテゴリーに説明文付きの画像を何枚も表示させたい。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,003

totaminotuyu

score 4

つい先日に質問し、miz様よりご回答を頂いたものです。(有難うございました。)
ご回答を元に、やりくりすれば「カテゴリーに説明文付きの画像を何枚も表示させたい。」を実現出来ると思っておりましたが、まったくチンプンカンプンで上手くいかなかったので再度質問させて下さい。

まず、画像だけの出力は、miz様のご回答そのままでうまく表示できましたが、画像のサイズが「フィールド編集内のプレビューサイズ」を変更してもimg width="150" height="150"で出力されてしまう(ソースで確認)のです。サイズの指定方法が分かりません。

画像のサイズ変更も出来ていないのですが、フィールド編集画面でサブフィールドを追加しテキストにて画像の説明分を付けたいと思っております。

正直、PHPをなめていました。htmlを少しかじったくらいでは太刀打ち出来ないと分かり、恥ずかしながら再度質問と言うか、解決策をご教授して頂けたらと思います。

宜しくお願い致します。


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

サイズを変更しても下記ソースで出力されてしまいます。⇓

<img width="150" height="150" src="http://amami-setouti.com/wp/wp-content/uploads/s-P1150005-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="たんかん4" /><img width="150" height="150" src="http://amami-setouti.com/wp/wp-content/uploads/s-P1150013-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="たんかん5" />        </div>

該当のソースコード

miz様よりご回答頂いたソースコード↓

<?php
$term_id = get_query_var('cat');

$objects = SCF::get_term_meta( $term_id, 'category', '商品紹介' );

foreach ( $objects as $object ) {
    echo wp_get_attachment_image( $object['scfimg'] );
}
?>

補足情報(言語/FW/ツール等のバージョンなど)

wordpressバージョン → WordPress 4.7.1  
テーマ → WelcartBasicの子テーマ Welcart Nova 

Smart Custom Fieldsの 
フィールド名 → ギャラリー 
グループ名 → 商品紹介 
タイプ → 画像
名前 → scfimg 
ラベル → scfimg 

サブフィールドの
タイプ → テキスト
名前 → txt 
ラベル → txt 


Welcart Nova: カテゴリーテンプレート (category.php)
の中身です。
現在は</div><!-- #content -->の上に画像出力させています。

<?php
/**
 * @package Welcart
 * @subpackage Welcart_Basic
 */
get_header();?>

<div id="primary" class="site-content">

    <?php
    $term_img = $term_class = $term_before = $term_after = '';
    $term_id        = get_query_var( 'cat' );
    $term_img_url    = get_term_meta( $term_id, 'wcct-tag-thumbnail-url', true );
    if( ! empty( $term_img_url ) ) {
        $term_img    = '<p class="taxonomy-img"><img src="' . get_term_meta( $term_id, 'wcct-tag-thumbnail-url', true ) . '"></p>';
    }
    if( wcct_get_options( 'cat_image' ) && ! empty( $term_img_url ) ) {
        $term_class        = ' over';
        $term_before    = '<div class="wrap"><div class="inner">';
        $term_after        = '</div></div>';
    }
    ?>
    <div class="page-header<?php echo $term_class; ?>">
        <?php
        echo $term_img;
        echo $term_before;
        the_archive_title( '<h1 class="page-title">', '</h1>' );
        the_archive_description( '<div class="taxonomy-description">', '</div>' );
        echo $term_after;
        ?>
    </div><!-- .page-header -->
    <div class="content-wrapper">
        <div id="content" role="main">

        <?php if( usces_is_cat_of_item( $term_id ) ): ?>

            <?php if (have_posts()) : ?> 

                <div class="cat-il type-grid">

                    <?php while (have_posts()) : the_post(); ?>
                        <article id="post-<?php the_ID(); ?>">

                            <div class="itemimg">
                                <a href="<?php the_permalink(); ?>">
                                    <?php usces_the_itemImage( 0, 300, 300 ); ?>
                                    <?php if( wcct_get_options( 'display_soldout' ) && ! usces_have_zaiko_anyone() ): ?>
                                    <div class="itemsoldout">
                                        <div class="inner">
                                            <?php _e('SOLD OUT', 'welcart_basic_nova' ); ?>
                                            <?php if( wcct_get_options( 'display_inquiry' ) ): ?>
                                            <span class="text"><?php wcct_options( 'display_inquiry_text' ); ?></span>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                    <?php endif; ?>
                                </a>
                            </div>
                            <?php wcct_produt_tag(); ?>
                            <?php welcart_basic_campaign_message(); ?>
                            <div class="item-info-wrap">
                                <div class="itemname"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php usces_the_itemName(); ?></a></div>
                                <div class="itemprice"><?php usces_crform( usces_the_firstPrice('return'), true, false ) . usces_guid_tax(); ?></div>
                            </div><!-- item-info-box -->

                        </article>
                    <?php endwhile; ?>

                </div><!-- .cat-il -->

            <?php else: ?>

                <p class="no-date"><?php echo __('No posts found.', 'usces'); ?></p>

            <?php endif; ?>

        <?php else : ?>

            <?php if (have_posts()) : ?>

            <div class="post-li">
                <?php while (have_posts()) : the_post(); ?>
                    <article id="post-<?php the_ID(); ?>">
                        <?php if ( has_post_thumbnail() ): ?>
                        <div class="thumb-img"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a></div>
                        <?php endif; ?>
                        <p><time datetime="<?php the_time('c'); ?>"><?php the_time(__('Y/m/d')) ?></time></p>
                        <div class="post-title"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php printf( esc_attr__( 'Permalink to %s', 'welcart_basic' ), the_title_attribute( 'echo=0' ) ); ?>"><?php the_title(); ?></a></div>
                        <?php the_excerpt() ?>
                    </article>
                <?php endwhile; ?>
            </div>

            <?php else: ?>

                <p class="no-date"><?php echo __('No posts found.', 'usces'); ?></p>

            <?php endif; ?>

        <?php endif; ?>

            <div class="pagination_wrapper">
                <?php
                $args = array (
                    'type' => 'list',
                    'prev_text' => __( ' &laquo; ', 'welcart_basic' ),
                    'next_text' => __( ' &raquo; ', 'welcart_basic' ),
                );
                echo paginate_links( $args );
                ?>
            </div><!-- .pagenation-wrapper -->
<?php
$term_id = get_query_var('cat');

$objects = SCF::get_term_meta( $term_id, 'category', '商品紹介' );

foreach ( $objects as $object ) {
    echo wp_get_attachment_image( $object['scfimg'] );
}
?>
        </div><!-- #content -->

        <?php get_sidebar(); ?>
    </div><!-- .content-wrapper -->

</div><!-- #primary -->

<?php get_footer(); ?>

カテゴリーページのhttpアドレスです。

http://amami-setouti.com/category/item/tankan/

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • miz

    2017/01/16 22:02

    そういえば、質問のタグに「WordPress」をつけたほうがいいですよ。

    キャンセル

  • totaminotuyu

    2017/01/17 19:45

    miz様。wordpress Codexを参考に画像サイズの変更が出来ました。kei344様。teratailの質問方法のご指摘有難うございます。

    キャンセル

  • totaminotuyu

    2017/01/17 19:51

    wordpress Codexを参考に改めて、ネット検索で調べて見たのですが、サブフィールドのテキストの呼び出しは、echo esc_html( $fields['txt'] );が一番近いのかと思い、 echo wp_get_attachment_image( $object['scfimg'], $full );の下に記述しましたが駄目でしたので、違うのでしょうね(汗)

    キャンセル

回答 1

checkベストアンサー

+2

多分こうです。

<?php
$term_id = get_query_var('cat');

// デバッグ用の出力 ここから(消してOK)
?><pre><?php var_dump($term_id); ?></pre><?php
// デバッグ用の出力 ここまで(消してOK)

$objects = SCF::get_term_meta( $term_id, 'category', '商品紹介' );

foreach ( $objects as $object ) {

// デバッグ用の出力 ここから(消してOK)
?><pre><?php var_dump($object); ?></pre><?php
// デバッグ用の出力 ここまで(消してOK)

    echo wp_get_attachment_image( $object['scfimg'], array( 200, 0 ) );
    echo esc_html( $object['txt'] );
}
?>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/01/18 07:05

    miz様。早速の回答頂き有難うございます。
    txtは無事表示されました。(有難うございます。)
    ですが、txtが私のイメージしていた表示と違い、画像の横に出てしまいレイアウトもずれてしまう状態です。
    勉強にもなるので、ネットで調べて解決策をで探してみようと思いますが、駄目だった場合は、ご教授のほどよろしくお願いいたします。(解決しましたの報告が出来れば良いのですが。)
    後、miz様のご回答があった時間帯にご報告出来ず済みません。本当はタイムリーに報告するのがベストなんですが、アルバイト等があり失礼いたしました。

    キャンセル

  • 2017/01/18 08:12

    出力ができたのであれば、残りのレイアウトはHTML/CSSの問題です。質問者様のお好きなレイアウトに調整されればよいかと思います。

    それから、別にチャットをしているわけではないので、コメント等に時間差が出るのは当然のことです。気にされることはありません。

    キャンセル

  • 2017/01/18 18:00

    解決致しました!
    echo nl2br("\n");
    を注入する事で、レイアウトが整いました。
    これで目指していたカテゴリーページが完成致しました。
    本当に有難うございました。

    キャンセル

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

  • PHP

    23487questions

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

  • WordPress

    8722questions

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