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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

2415閲覧

archive.phpでwp_get_attachment_imageで出力した画像を画像の縦横比毎にclassの自動追加で制御したい

missselfi

総合スコア10

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/01/21 05:59

archive.phpでwp_get_attachment_imageで出力した画像を画像の縦横比毎にclassの自動追加で制御したい

<?php if(have_posts() ): //投稿があった場合 ?> <?php while ( have_posts() ) : the_post(); //ループ開始 ?> <?php $post_id = get_the_ID(); ?> <?php $attachments = get_children( array( 'post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image', )); foreach( $attachments as $attachment_id => $attachment ) : ?> <div class="item blue w" data-color="blue"> <div class="item-content"> <?php echo wp_get_attachment_image( $attachment_id , 'large' );?> <a href="../content/index.html"> <div class="mask"> <div class="caption"><?php the_title(); ?></div> </div></a> </div> </div> <?php endforeach; ?> <?php endwhile; ?> <?php endif; ?>

現状この状態なのですが、ep_get_attachmet_imageで出力されるimg
タグにクラスを付与、また<div class="item blue w" data-color="blue">の部分のクラス、データカラーの部分の値をwordpressの管理画面側から出力して,
出力されたclassにcssを当て縦横比毎に変わるように制御できないかと考えております。
稚拙な文章での質問、大変申し訳ないのですが、方法を知っている方が居ましたら是非ご教授願いたいです。
よろしくお願いします。

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

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

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

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

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

kei344

2019/01/21 17:13 編集

(質問文は編集できます)質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答1

0

wp_get_attachment_image_src なら画像サイズの情報が採れますよ。

【wp_get_attachment_image_src – WordPress私的マニュアル】
https://elearn.jp/wpman/function/wp_get_attachment_image_src.html

返り値

添付ファイルの表示用データを配列で返す。配列は、イメージファイルのURL、幅、高さの順に格納されている。表示用データを取得できなかった場合はfalseを返す。

【WordPress » 画像の取得・表示まとめ | MORILOG】
http://morilog.com/wordpress/template/post_thumbnail_and_image_functions/#wp_get_attachment_image_src

投稿2019/01/21 17:12

kei344

総合スコア69364

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問