web-dev-qa-db-ja.com

Photoswipeを使ってアイソトープギャラリーのメディア詳細を描く方法

私は現在、メディアライブラリから直接描画し、アイソトープとフォトスワイプを組み込んだワードプレスギャラリーを作成中です。 this の修正版を使用して、添付ファイルをページテンプレートに追加し、表示をカテゴリ（メディア添付ファイルのカテゴリを含む）に制限しました。

私の問題は今ディスプレイをさらに洗練することです...

wp_get_attachment_imageではなく、wp_get_attachment_urlを関数内で使用しているので（画像サイズを定義できます）、hrefを機能させることはできません。これに加えて、私はフルイメージサイズをhrefのdata-size内に定義する必要があります。

私はまた、画像のタイトルとキャプションを描画すること、そして各画像のカテゴリをクラスとして含むdivに適用することも試みています。

これが私が使っているコードです：

function get_images_from_media_library() {
    $args = array(
        'post_type' => 'attachment',
        'post_mime_type' =>'image',
        'post_status' => 'inherit',
        'posts_per_page' => 25,
        'category_name' => 'artwork',
    );
    $query_images = new WP_Query( $args );
    $images = array();
    foreach ( $query_images->posts as $image) {
        $images[]= wp_get_attachment_image( $image->ID, 'full' );
    }
    return $images;
}

function display_images_from_media_library() {

    $imgs = get_images_from_media_library();
    $url = wp_get_attachment_url( $image->ID );
    $image_title = $attachment->post_title;
    $caption = $attachment->post_excerpt;
    $html = '<section class="isotope-wrap">
              <div class="isotope gallery" data-pswp-uid="1">
                <div class="isotope-sizer"></div>';

    foreach($imgs as $img) {
        $html .= '<div class="isotope-item"><figure>
                  <a href="' . $url . '" data-size="">' . $img . '</a>
                  <figcaption class="wp-caption-text"><h2>' . $image_title . '</h2>
                  <p>' . $caption . '</p></figcaption></figure></div>';
    }

    $html .= '</div>';

    return $html;

}

最後に、画像カテゴリをラベルとして使用して、同位体ギャラリー用のフィルターグループを作成することも試みています。これは私がこれまでに持っているコードです、私のカテゴリは画像を数えていないので、うまくいっていないようです（すべてのカテゴリは0のカウントを示します）：

$terms = get_terms('category', array('parent' => 'artwork'));
                      $count = count($terms);
                        if ( $count > 0 ){
                          foreach ( $terms as $term ) {
                            echo "<button type='button' class='btn btn-dark'  data-hover='" . $term->name . "' data-filter='." . $term->slug . "'>" . $term->name . "</button>\n";
                          }
                        }

これに関するどんな助けでも大いに感謝されるでしょう、ありがとう。

EDIT私は以下のコードを追加しました：

function get_image_urls_from_media_library() {
    $args = array(
        'post_type' => 'attachment',
        'post_mime_type' =>'image',
        'post_status' => 'inherit',
        'category_name' => 'artwork',
    );
    $query_images = new WP_Query( $args );
    $urls = array();
    foreach ( $query_images->posts as $image) {
        $urls[]= wp_get_attachment_url( $image->ID );
    }
    return $urls;
}

そして有効なforeachを描画している入れ子のhrefを追加しました。残念ながら、それは最初の添付ファイルのエントリを描画するだけで、ギャラリー内のすべての画像はその同じ最初の画像にリンクしています。画像もページに5回複製されます。

phpfunctionsimagesgallery
5
Ash

私はあなたと非常によく似たシナリオを持っていました。私はこれらのメモが助けになると信じています。

1 - カスタム分類法を照会するとき、wp_queryにはより多くの情報が必要です。 コーデックスの参照はこちらです。 情報はこの形式です。

'tax_query' => array(
        array(
            'taxonomy' => 'people',
            'field'    => 'slug',
            'terms'    => 'bob',
        ),
    ),

あなたの場合、分類法は「アートワーク」だと思います。私は、 'slug'のフィールド値を使うのが良いことがわかりました。あなたの言葉が何であるかを知るためにあなたに任せます。

2 - あなたの改訂版の関数では、 "posts_per_page"パラメータを削除しました。それはあなたの選択ですが、あなたがそれを宣言しないならばWP-Queryが最大10レコードを返すことに注意してください。もっと多くの画像を期待しているなら、これが答えかもしれません。

3 - あなたの関数 "display_images_from_media_library"では、2行目は：

"$ url = wp_get_attachment_url（$ image-> ID）;"＃：。

この場合、$ imageは未定義の変数です。 $ imageはあなたの関数 "get_images_from_media_library"からの変数なので、ある段階であなたは画像情報を得てそれを表示するための単一の関数を持っていたのではないかと思います。しかし、単一の関数を2つに分割したとき、おそらくこの行に気付かなかったでしょう。

4 - フィルタを作成するためのコードはトップレベル（親レベル）から始まります - それでいいのですが、フィルタは実際には親ではなく子であると思います。本質的には、もう1つの方法が必要です（詳細は下記）。

5 - 上記に加えて、あなたはあなたの最初の焦点を「添付URL」にしました。しかし、WP_Queryから投稿/添付ファイルIDを取得することに集中して、表示する必要がある他のすべてのフィールドを取得する手段としてこれを使用する方が生産的かもしれません。実際、$ postsに基づいて配列を作成すると、自動的にキャプションとタイトルが副産物として取得されます。

私は以下がうまくいくことがわかりました。明らかにあなたはそれぞれの機能において関連する分類法と用語を代用する必要があります。

function gallery_get_images_from_media_library(){
    $g_myargs = array(
        'post_type' => 'attachment',
        'post_mime_type' =>'image/jpeg',
        'post_status' => 'inherit',
        'posts_per_page' => 25,
        'tax_query' => array(
            array(
                'taxonomy' => 'media_category',
                'field'    => 'slug',
                'terms'    => 'edition-covers',
            ),
        ),
    );
    $g_myquery_images = new WP_Query( $g_myargs );

    $g_posts = $g_myquery_images->posts;

    $html = '<section class="isotope-wrap">
              <div class="isotope gallery" data-pswp-uid="1">
                <div class="isotope-sizer"></div>';

    foreach ($g_posts as $g_img) {

        $url = wp_get_attachment_url($g_img->ID);

        $src = wp_get_attachment_image_src($g_img->ID,'full');

        $image_title = $g_img->post_title;

        $caption = $g_img->post_excerpt;

        $html .= '<div class="isotope-item"><figure>
                        <a href="'.$url.'">
                        <img src="'.$src[0] .'"></a>
                        <figcaption class="wp-caption-text">
                        <h2>' . $image_title . '</h2>
                        <p>' . $caption . '</p>
                        </figcaption></figure></div>';
    }

    $html .= '</div>';

return $html;
}

画像を表示するために、テンプレートページに次のコードを追加しました。

$imgs = gallery_get_images_from_media_library();
echo $imgs;

function gallery_make_filters(){

    // starting row of the filter = show all
    $gallery_filter_content = '<button class="button is-checked" data-filter="*">show all</button>'. PHP_EOL ;

    // get the cover terms for parent terms with a count>0
    $gallery_parentterms = get_terms( array(
    'taxonomy' => 'reviewcovers',
        'parent' => 0,
    'hide_empty' => false,
    ));

    // if there are parent covers with children
    if (is_array($gallery_parentterms)) {

        // break down for each parent
        foreach($gallery_parentterms as $gallery_obj) {

            // get the children covers 
            $gallery_childterms = get_terms( array(
                'taxonomy' => 'reviewcovers',
                'child_of' => $gallery_obj->term_id,
                'hide_empty' => true,
            ));

            // test for content of childterms
            if (is_array($gallery_childterms)) {

            // create a filter for each child.
            foreach($gallery_childterms as $gallery_object) {   

                    // build the filters for each non-zero child term
                    // filter is progressively incremented.
                    $gallery_filter_content .= '<button class="button" data-filter="'.".".$gallery_object->slug.'">'.$gallery_object->description.'</button>'. PHP_EOL;

                } // end of foreach-children array

            } // end of if children array

        } //end of foreach parent array

    }// end of if - parent array
    else 
    {
    echo 'no results';
    }

return $gallery_filter_content;

}

フィルタを表示するには、ページテンプレートに次のコードを挿入します。

$filters = gallery_make_filters();
echo $filters;

最後に、「卵子の吸い方を教える」と非難されることを望まないのですが、私のコードの1行または複数行が期待通りに動作しないことがよくあります（おそらく私はそれほど素晴らしいコーダーではないからです）。いずれにしても、これが起こるとき、私はコードが元に戻されているところだけでうまくいくことができるように配列または変数の内容を表示することが有用であると思います。

これらの数行は私の主力です。行のマークを外し、配列/変数名を更新し、保存し、サイトを更新します。
1 - 配列用

//echo "<pre>";print_r($gallery_childterms);echo "</pre>"; //DEBUG - a readable form of vardump
//echo "<p>end of print_r gallery_childterms</p>"; //DEBUG-this is so I know whether and what has printed.

2 - 変数用

//echo "the src is ".$src."</br>"; // DEBUG - the line break is so that consecutive lines will make sense.
2
Tedinoz