XPressME Integration Kit

フォーラム

WPのギャラリーからの画像取得について

永らくありがとうございました › フォーラム › テーマ › WPのギャラリーからの画像取得について

  • このトピックには14件の返信、2人の参加者があり、最後に匿名により11年、 3ヶ月前に更新されました。
15件の投稿を表示中 - 1 - 15件目 (全15件中)
  • 投稿者
    投稿
  • 2011 年 10 月 26 日 4:14 AM #2680
    匿名
    ゲスト

    toemon 様

    毎度お世話になります。

    ただいま、wordpressでプラグインや関数などをいろいろ試しながら

    思考錯誤しております。

    wordpressで再現できること＝xpressmeでも基本OKと考えておりまして、

    まずはwordpressを理解しようと励んでいる次第です。

    【環境】wordpress3.2.1

    さて、表題にありますように、

    WPの投稿画面からアップロードしたギャラリー画像から、

    任意の画像を取得できないかと考えております。

    【再現したいこと】

    ─────────────────────────────

    　WPの投稿画面からアップロードしたギャラリー画像のうち、

    　●番目の画像を取得できないだろうか。

    　例えばindex.php内のループで、

    　各記事にアップロードされているギャラリー内から

    　2番目の画像を並べるといった感じです。

    ─────────────────────────────

    画像取得系のプラグインですと、「wp-kougabu」や「QF-GetThumb」がありますが、

    「wp-kougabu」の場合、●番目の画像を取得はできないようですし、

    「QF-GetThumb」の場合は、記事中の画像を取得するプラグインかと

    認識しております。

    記事のサムネイルであれば、アイキャッチ機能が使えるようになったので、

    <?php the_post_thumbnail(); ?>のように取得しています。

    たとえば、ある記事に画像を2枚アップしたとします。

    1枚目の画像をアイキャッチとして使用して、

    2枚目の画像をテンプレ内で取得するといったイメージです。

    いろいろ調べておりましたところ、

    下記の記事を見つけました。

    http://tenderfeel.xsrv.jp/wordpress/513/

    http://www.white-room.jp/blog/?m=200904

    これらの記事にあるように、$orderにて、ギャラリーでの順序で入れた

    ●番目の画像を取得できないかと考えております。

    試にfunctions.phpに記事の通りコードを追加しました。

    テーマファイル(index.php)に出力コードを入れました。

    ※【条件】カテゴリーID＝5・表示枚数3・ギャラリー内10番目の画像

    <code><?php query_posts('cat=5&posts_per_page=3'); ?><br />
<?php if(have_posts()) : while (have_posts()) : the_post(); ?><br />
<?php  get_the_post_image(get_the_ID(), 'thumbnail', 10, 1); ?><br />
<?php endwhile; endif; ?><br />
<?php wp_reset_query(); ?></code>

    ん～、何も表示されません。

    これはWPのバージョンによる問題でしょうか、

    そもそもコードの書き方の問題なのでしょうか。

    ご教授いただければ幸いです。

    どうぞ宜しくお願いいたします。

    2011 年 10 月 27 日 3:06 AM #3304
    toemon
    キーマスター

    [wp] WordPress2.7 記事に添付された画像を取得して表示

    http://www.white-room.jp/blog/?m=200904

    のコードを見る限り、

    <code><?php  get_the_post_image(get_the_ID(), 'thumbnail', 10, 1); ?></code>

    では、表示が行われません。

    function get_the_post_image($postid,$size,$order=0,$max=null)は

    1. この関数ではecho していませんので、 
      <code><?php　echo get_the_post_image(...); ?></code>

      として利用しなければなりません。

    2. $orderは ギャラリーの1番目が0となりますので、10番目の場合は、9とする必要があります。

    3. $maxは$orderより大きな数字あるいは、無指定でないと表示が行われません。

      というか、forループの中で、returnしてますので、そもそも、１画像しか表示出来ません。

    このあたり、作者様の意図を充分理解できていないのであれなのですが、そりあえず画像が１個だけとして

    <code><?php echo get_the_post_image(get_the_ID(), 'thumbnail', 9); ?></code>

    といった使い方で、よいのではないでしょうか。

    ちなみに、指定数の画像を得たい場合のget_the_post_image()の修正例を示しておきます。

    <code>function get_the_post_image($postid,$size='full',$offset=0,$numberimages=-1) {<br />
$args = array(<br />
'post_type'			=> 'attachment',<br />
'post_mime_type'	=> 'image',<br />
'orderby'			=> 'menu_order',<br />
'order'				=> 'ASC',<br />
'post_status'		=> null,<br />
'numberposts'		=> $numberimages,<br />
'offset'			=> $offset,<br />
'post_parent'		=> $postid,<br />
);<br />
<br />
$attachments = get_posts( $args );<br />
if ( $attachments ) {<br />
foreach ( $attachments as $attachment ) {<br />
echo '<li>';<br />
echo wp_get_attachment_image( $attachment->ID, $size );<br />
echo '</li>';<br />
}<br />
}<br />
}</code>

    こちらではechoしてるので、

    <code><?php  get_the_post_image(get_the_ID(), 'thumbnail', 9, 1); ?></code>

    のような使い方になります。

    # XPressMEではなく、WordPressを使ったテストでの質問でも、出来る限りの回答はさせていただきますが、回答が遅くなったり、解決できない場合もありますので、

    http://ja.forums.wordpress.org/ ほうが回答率がよいと思います。

    あるいは、作者さまへの問い合わせとか

    2011 年 10 月 27 日 4:26 PM #3305
    匿名
    ゲスト

    toemon 様

    ありがとうございます。

    $orderは ギャラリーの1番目が0となりますので、10番目の場合は、9とする必要があります。

    $orderはギャラリーの順序に入力した番号と勘違いしておりました。

    何枚目ということなのですね。

    各記事の1枚目はアイキャッチとして使用して、

    別の画像をテンプレート内で表示しようと考えておりました。

    記事ごとにアップされている画像の数がバラバラなので、

    ASCだとget_the_post_image()で引っぱってくる画像も

    バラバラになってしまいました。

    各記事に10枚以上画像をアップすることはないと仮定して、

    get_the_post_image()で引っぱってくる画像には順序番号を10とし、

    ASCをDESCにして、以下のコードで表示ができました！

    <code><?php get_the_post_image(get_the_ID(), 'thumbnail', 0, 1); ?></code>

    # XPressMEではなく、WordPressを使ったテストでの質問でも、出来る限りの回答はさせていただきますが、回答が遅くなったり、解決できない場合もありますので、

    http://ja.forums.wordpress.org/ ほうが回答率がよいと思います。

    あるいは、作者さまへの問い合わせとか

    本当に申し訳ありません。

    wordpressに直接関係する話については、

    各フォーラムを先にあたってみます。

    またトピックを立てさせていただくかも知れませんが、

    どうか宜しくお願いいたします。

    どうもありがとうございました。

    2011 年 10 月 28 日 12:10 AM #3306
    toemon
    キーマスター

    なるほど、ギャラリーの画像順序番号(menu_order)指定での抽出ということであれば、

    <code>function get_image_by_menu_order($postid,$menu_order=1,$size='full') {<br />
$args = array(<br />
'post_type'			=> 'attachment',<br />
'post_mime_type'	=> 'image',<br />
'post_status'		=> null,<br />
'post_parent'		=> $postid<br />
);<br />
$attachments = get_posts( $args );<br />
if ( $attachments ) {<br />
foreach ( $attachments as $attachment ) {<br />
if ($attachment->menu_order == $menu_order){<br />
echo wp_get_attachment_image( $attachment->ID, $size );<br />
}<br />
}<br />
}<br />
}</code>

    をfunction.phpにおき

    <code><?php get_image_by_menu_order(get_the_ID(), ギャラリーの画像順序番号,'thumbnail'); ?></code>

    みたいな感じで実現できるとおもいます。

    2011 年 10 月 28 日 12:36 PM #3307
    匿名
    ゲスト

    toemon 様

    追加フォローいただき感謝申し上げます。

    おお！まさにこれです。

    プラグインでもこの機能を有したものが見つからず、

    なぜ無いのか不思議でしたが、これであれば自由に特定の画像を

    引っぱって来れますね。

    ちなみに、WPではサムネイルのほか、

    中、大、フルサイズの４種類があると思います。

    やはりこの場合、テンプレート内では、

    この４種類のサイズから指定する以外に、

    たとえば<?php the_post_thumbnail(array(75,75)); ?>のように

    縦・横サイズを指定するということはできないのでしょうか。

    度重なり恐れ入ります。

    2011 年 10 月 28 日 2:28 PM #3308
    toemon
    キーマスター

    参考例で利用しているwp_get_attachment_image()は、the_post_thumbnail()内部でも使用している関数で、size指定には

    • キーワード(thumbnail, medium, large , full)

    • 配列（32,32）等のピクセル単位の幅と高さを表す配列

    が使えます、

    従って、

    <code><?php get_image_by_menu_order(get_the_ID(), ギャラリーの画像順序番号,array(75,75)); ?></code>

    のような利用も可能となります。

    また、カスタムサイズを使いたいなら

    <code>if ( function_exists( 'add_image_size' ) ) {<br />
add_image_size( 'category-thumb', 300, 9999 ); //幅300ピクセル、幅無制限に縮小(縦横比維持)<br />
add_image_size( 'homepage-thumb', 220, 180, true ); //(幅 220px,高さ180pxに切り抜き)<br />
}</code>

    のようなコードをfunction.phpに追加して（この例では、’category-thumb’と、’homepage-thumb’という名前のサイズを追加しています。名前は任意です。）

    <code><?php get_image_by_menu_order(get_the_ID(), ギャラリーの画像順序番号,'homepage-thumb'); ?></code>

    みたいな使い方もできます。

    さらに、get_image_by_menu_orderをプラグイン化したいなら

    以下のコードを含むget_image_by_menu_order.phpを作成して（単にプラグインであることを示す一定フォーマットのコメント文を追加するだけです。)

    <code><?php<br />
/*<br />
Plugin Name: Get Image By Menu Ordrer Number<br />
Plugin URI: http://exsample.com<br />
Description: Get Image by Post Garrary Order (custom function)<br />
Author: Foo<br />
Version: 1.0<br />
Author URI: http://exsample.com<br />
*/<br />
if ( function_exists( 'add_image_size' ) ) {<br />
add_image_size( 'width_256', 256, 9999 );<br />
add_image_size( 'width_128', 128, 9999 );<br />
add_image_size( 'width_64', 64, 9999 );<br />
add_image_size( 'height_256', 9999,256 );<br />
add_image_size( 'height_128', 9999,128 );<br />
add_image_size( 'height_64', 9999,64 );<br />
}<br />
function get_image_by_menu_order($postid,$menu_order=1,$size='full') {<br />
$args = array(<br />
'post_type'			=> 'attachment',<br />
'post_mime_type'	=> 'image',<br />
'post_status'		=> null,<br />
'post_parent'		=> $postid<br />
);<br />
$attachments = get_posts( $args );<br />
if ( $attachments ) {<br />
foreach ( $attachments as $attachment ) {<br />
if ($attachment->menu_order == $menu_order){<br />
echo wp_get_attachment_image( $attachment->ID, $size );<br />
}<br />
}<br />
}<br />
}</code>

    作成されたファイルを、プラグインにアップして有効化しておけばどのテーマからも、

    get_image_by_menu_order()を使えるようになります。

    要するに、WordPressではテーマ内にあるfunction.phpはプラグインと同等の働きを行っているということです。

    このように自分の欲しい機能をテーマ内に仕込んだり、プラグイン化したりを比較的簡単に実現できるところがWordPressの魅力でもあります。

    テンプレートタグ

    関数リファレンス

    アクションフック

    フィルターフック

    なんかを眺めていると、結構楽しいです。

    がんばってください。

    2011 年 10 月 29 日 4:20 PM #3309
    匿名
    ゲスト

    重ねて、追加フォローありがとうございます。

    ピクセルのサイズ指定も問題なく表示させることができました。

    要するに、WordPressではテーマ内にあるfunction.phpはプラグインと同等の働きを行っているということです。

    なるほど･･･。

    functions.php内に書かれているfunction～というのは

    それぞれが小さなプラグインみたいないもの･･･と言うことなんですね。

    さらに、get_image_by_menu_orderをプラグイン化したいなら

    以下のコードを含むget_image_by_menu_order.phpを作成して（単にプラグインであることを示す一定フォーマットのコメント文を追加するだけです。)

    驚きです！

    このような書き方をすることで、

    普段インストールしているプラグインのように

    なってしまうんですね。

    いや～、深いです。。。

    また、各情報リンクをいただきありがとうございます。

    まずはテンプレートタグ、関数リファレンスを

    使いこなせるところから探求してみたいと思います。

    毎度、迷宮入りするたびに助けていただき

    感謝いたします。

    がんばります！

    2011 年 11 月 30 日 7:59 AM #3310
    匿名
    ゲスト

    toemon 様

    たびたびお世話になります。

    get_image_by_menu_orderについて質問させていただきたく、

    再度こちらのトピックにて投稿させていただきました。

    以前教えていただきましたattachmentsの出力

    get_image_by_menu_orderですが、画像ファイルのURL(http://****.jpg)やタイトル、

    キャプションなどを個々に抽出するということは可能でしょうか。

    jqueryのギャラリー(http://jsajax.com/Articles/galleriffic/1405)を

    使いたいと考えているのですが、画像ファイルへリンクを貼る必要があるようで、

    以下のようなコードを書く必要があるようです。

    <code><a href="ファイル画像URL" title="画像タイトル"><br />
<?php get_image_by_menu_order(get_the_ID(), 1,array(300,9999)); ?><br />
<a/><br />
<div class="caption"><br />
<a href="ファイル画像URL">キャプション</a><br />
</div><br />
<div class="image-title">画像タイトル</div><br />
<div class="image-desc">説明</div></code>

    これらを出力するのに、get_image_by_menu_orderを

    応用できないかと…。

    いろいろ調べているのですが、

    どうしても個々のデータを取得できず…

    ご教授いただけませんでしょうか。

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

    2011 年 12 月 1 日 5:34 AM #3311
    toemon
    キーマスター

    画像のキャプションを引っ張ってきたりとか、標準では面倒なので

    get_image_by_menu_orderで利用しているwp_get_attachment_image()関数の利用をやめて

    代わりにwp_get_attachment_image()をパクッテ必要な機能を追加したwp_get_attachment_image_info()関数を作成してそれを利用します。

    <code>function get_image_by_menu_order($postid,$menu_order=1,$size='full') {<br />
$args = array(<br />
'post_type'			=> 'attachment',<br />
'post_mime_type'	=> 'image',<br />
'post_status'		=> null,<br />
'post_parent'		=> $postid<br />
);<br />
$attachments = get_posts( $args );<br />
if ( $attachments ) {<br />
foreach ( $attachments as $attachment ) {<br />
if ($attachment->menu_order == $menu_order){<br />
<br />
$image =  wp_get_attachment_image_info( $attachment->ID, $size );<br />
return $image;<br />
}<br />
}<br />
}<br />
}<br />
function wp_get_attachment_image_info($attachment_id, $size = 'thumbnail', $icon = false, $attr = '') {<br />
<br />
$image = wp_get_attachment_image_src($attachment_id, $size, $icon);<br />
if ( $image ) {<br />
list($src, $width, $height) = $image;<br />
$hwstring = image_hwstring($width, $height);<br />
if ( is_array($size) )<br />
$size = join('x', $size);<br />
$attachment =& get_post($attachment_id);<br />
$default_attr = array(<br />
'src'	=> $src,<br />
'class'	=> "attachment-$size",<br />
'alt'	=> trim(strip_tags( get_post_meta($attachment_id, '_wp_attachment_image_alt', true) )), // Use Alt field first<br />
'title'	=> trim(strip_tags( $attachment->post_title ))<br />
);<br />
if ( empty($default_attr['alt']) )<br />
$default_attr['alt'] = trim(strip_tags( $attachment->post_excerpt )); // If not, Use the Caption<br />
if ( empty($default_attr['alt']) )<br />
$default_attr['alt'] = trim(strip_tags( $attachment->post_title )); // Finally, use the title<br />
<br />
$attr = wp_parse_args($attr, $default_attr);<br />
$attr = apply_filters( 'wp_get_attachment_image_attributes', $attr, $attachment );<br />
$attr = array_map( 'esc_attr', $attr );<br />
$html = rtrim("<img $hwstring");<br />
foreach ( $attr as $name => $value ) {<br />
$html .= " $name=" . '"' . $value . '"';<br />
}<br />
$html .= ' />';<br />
$attr['img_tag'] = $html;<br />
$attr['caption'] = trim(strip_tags( $attachment->post_excerpt ));<br />
$attr['desc'] = trim(strip_tags( $attachment->post_content ));<br />
}<br />
<br />
return $attr;<br />
}</code>

    これでget_image_by_menu_orderは各要素をばらばらに連想配列で出力するようになりますのでそれらを個別利用します。

      配列添え字

    • ‘src’ : ファイルのURL

    • ‘alt’ : 代替えテキスト

    • ‘title’ : タイトル

    • ‘caption’ : キャプション

    • ‘desc’ : 説明

    • ‘image_tag’ : イメージタグ（以前のget_image_by_menu_orderで出力していた内容)

    先の、お問い合わせの例では、以下のように利用します。

    <code><?php<br />
$image = get_image_by_menu_order(get_the_ID(), 1,array(300,9999));<br />
?><br />
<a href="<?php echo $image['src']; ?>" title="<?php echo $image['title']; ?>"><?php echo $image['img_tag']; ?></a><br />
<div class="caption"><br />
<a href="<?php echo $image['src']; ?>"><?php echo $image['caption']; ?></a><br />
</div><br />
<div class="image-title"><?php echo $image['title']; ?></div><br />
<div class="image-desc"><?php echo $image['desc']; ?></div></code>

    2011 年 12 月 1 日 1:24 PM #3312
    匿名
    ゲスト

    toemon 様

    誠にありがとうございます。

    上記コードをfunctions.phpに追加して、

    テンプレートに出力させてみました。

    作ろうと思っているギャラリーですが、

    こちら(http://jsajax.com/Articles/galleriffic/1405)のように、小さいサムネイルをクリックすると

    画像が切り替わるようになっています。

    大きいサイズの画像URLと小さいサイズの画像URLを

    取得する必要がありました。

    下記のようにコードを入れ込みましたところ…

    <code><li><br />
<?php<br />
$image = get_image_by_menu_order(get_the_ID(), 1,array(300,9999));<br />
?><br />
<a class="thumb" href="<?php echo $image['src']; ?>" title="<?php echo $image['title']; ?>"><br />
<?php<br />
$image = get_image_by_menu_order(get_the_ID(), 1,array(90,90));<br />
?><br />
<?php echo $image['img_tag']; ?><br />
</a><br />
</li></code>

    上手くいったかな…と思ったのですが、

    <li>～</li>

    を画像の枚数分(1・2・3…)並べたところ、

    なぜか、3番目以降の画像(大きい方)がfullサイズで表示されてしまいました。

    ※4・5…もfullサイズになりました。

    大きく表示される画像はここでは(300・9999)という指定に。

    小さい画像は(90・90)と指定しております。

    途中でサイズの指定が利かなくなるという事は

    考えられますでしょうか。

    ちなみに、3枚目以降、fullサイズになってしまうところを

    (150・150)以下にすると、突然サムネイルサイズに変わります。

    お手数おかけしまして申し訳ございません。

    2011 年 12 月 2 日 1:23 AM #3313
    toemon
    キーマスター

    途中でサイズの指定が利かなくなるという事は

    考えられますでしょうか。

    これは、WordPressのサムネイル作成ルールと、

    画像サイズ指定での画像取得方法のルールによって引き起こされる現象です。

    少しややこしいですが

    WordPressはイメージのアップロード時、特に指定の無い限り、thumbnail, medium, large , fullのイメージを作成します。

    次にコード例wp_get_attachment_image_info()で利用しているwp_get_attachment_image_src()はイメージのURLとそのサイズを取得する場合

    image_get_intermediate_size()を利用して、作成されているイメージより

    幅が指定サイズと同じ　かつ　高さが指定サイズより小さい

    または

    高さが指定サイズを同じ　かつ　幅が指定サイズより小さい

    という条件で該当するイメージを探します。

    上の条件に一致するものがない場合、

    幅が指定サイズより大きい　かつ　高さが指定サイズより小さい最小のイメージ

    または

    高さが指定サイズより大きい　かつ　幅が指定サイズより小さい最小のイメージ

    という条件のもとで最寄りのイメージを探します。

    そして、これらの条件のもとで検索された、イメージのURLとそのサイズを返します。

    つまり、作成されているイメージの中から指定のサイズ(300,9999)で検索した結果としてフルサイズのイメージへのURLが検索され

    URLが示すイメージのサイズは大きいけれどIMGタグのwidht,heightで縮小表示しているということになります。

    大きいサイズの画像URLと小さいサイズの画像URLを

    取得する必要がありました。

    利用されているJQueryがIMGタグのwidht,heightを無視して、イメージのURLだけを取得表示しているのであれば、

    必要なサイズのイメージを作成しておく必要があります。

    例えば、幅500,高さ600の画像をアップロードした場合、

    デフォルトのmediumサイズのイメージ(300,300)で作成されるイメージは幅250高さ300となります。

    ここで、指定サイズ(300,9999)のイメージを検索した場合、幅300に該当する画像がないため、それより大きい画像（フルサイズ）のURLが返ります。

    従って、指定サイズ(300,9999)のイメージとそのURLが必要ということであれば、thumbnail, medium, largeのサイズ設定を見直すか、

    add_image_size()を使って作成されるイメージサイズを増やす等の検討を行う必要があります。

    2011 年 12 月 3 日 10:36 AM #3314
    toemon
    キーマスター

    目的にあうのかはわかりませんが

    jQuery.gallerifficを使った、wordpressプラグインで、

    Photospace Galleryというのがあったので、

    それをベースに、

    PhotospaceEXっていうのを作ってみました。

    2011 年 12 月 5 日 2:10 PM #3315
    匿名
    ゲスト

    toemon 様

    お返事が遅くなってしまいました。

    解説いただき感謝いたします。

    上の条件に一致するものがない場合、

    幅が指定サイズより大きい　かつ　高さが指定サイズより小さい最小のイメージ

    または

    高さが指定サイズより大きい　かつ　幅が指定サイズより小さい最小のイメージ

    という条件のもとで最寄りのイメージを探します。

    例えば、幅500,高さ600の画像をアップロードした場合、

    デフォルトのmediumサイズのイメージ(300,300)で作成されるイメージは幅250高さ300となります。

    なるほど。。。

    そういう仕組みになっているんですね。

    幅300以上の画像はアップしないので、

    設定＞メディア＞の画像設定で

    中・大のサイズを横幅300のみにしましたところ、

    問題なく表示されるようになりました。

    add_image_size()を使って作成されるイメージサイズを増やす等の検討を行う必要があります。

    これも今後使えそうです。

    PhotospaceEXっていうのを作ってみました。

    おお！なんと！正にこれです！

    すごい…。

    試に入れてみました。

    ショートコードでの表示はできたのですが、

    PHPコードだと、どうもエラーが出てしまいます。

    <code><?php<br />
echo photospace();<br />
photospace(array('gallery_type='Images_of_posts_list','menu_order'=>3));<br />
?></code>

    そっくりそのまま入れてみただけなので、

    的を得ていない場合は申し訳ありません。

    ちょっとこちらも弄ってみたいと思います。

    本当にありがとうございます。

    ※念のため、再度こちらのトピックは解決済みにいたしました。

    2011 年 12 月 5 日 3:06 PM #3316
    toemon
    キーマスター

    ショートコードでの表示はできたのですが、

    PHPコードだと、どうもエラーが出てしまいます。

    すみません、ダウンロードサイトでの説明文の記述がエスケープされていてたようです。修正しておきます。

    2011 年 12 月 12 日 10:09 AM #3317
    匿名
    ゲスト

    追記いただきましてありがとうございます。

    また一段と自由に画像を扱えるようになり嬉しいです。

    サポートいただきましてありがとうございましたm(_ _)m

  • 投稿者
    投稿
15件の投稿を表示中 - 1 - 15件目 (全15件中)
  • このトピックに返信するにはログインが必要です。