Ajax Load Moreメディア内の画像を一覧表示
最近WordPressのページネーションは、Ajax Load Moreという無限スクロールのプラグインをよく利用している。
このプラグインは、ショートコードを利用してpost_typeやtaxonomyを指定しアーカイヴなどで一覧を表示してくれます。
大変動きも良く、細かな指定もできるので大変助かっています。
今回はそのAjax Load Moreも利用してメディア内にある画像を一覧表示する方法です。
また、画像にカスタムフィールドで任意の値を持たせ、その値を持った画像を一覧表示する方法も書いておきます。
まずは、エディッター内の使用ではなくarchive.phpなどのテーマで実行したい場合の書き方です。
do_shortcodeを利用します。
|
1 |
<?php echo do_shortcode(['[ajax_load_more repeater="template名" post_type="attachment" post_status="inherit" posts_per_page="4" button_label="表示する"]']); ?> |
画像を表示する場合は、post_statusに注意
このコードを表示したいテーマの部分に記入します。
ここで注意するのは、post_status=”inherit” に指定すると言うことです。この指定をしないと画像が表示されません。
そして表示するテンプレート側の記述です。
|
1 2 3 4 5 6 7 8 9 |
<div class="attachment"> <?php global $post; $page_id = get_queried_object_id(); $post_thumbnail_id = get_post_thumbnail_id( $page_id ); $image = wp_get_attachment_image_src( $post_thumbnail_id, 'thumbnail-large' ); ?> <img src="<?php echo $image[0]; ?>" alt="" /> </div> |
参考：https://connekthq.com/plugins/ajax-load-more/examples/attachments/
カスタムフィールドを利用して特定の値を持った画像を一覧表示
次にカスタムフィールドで特定の値を持った画像のみを表示させる方法です。
画像へは、Advanced Custom Fieldsなどを利用して、画像（attachment）に対してカスタムフィールドの値を持たせます。
例えばAdvanced Custom Fieldsのチェックボックスを利用してフィールド名「location」に「海、山、空」を設定し、その値を画像に持たせた場合。山（mountain）の値を持った画像を一覧表するには下記のようにします。
|
1 2 3 4 5 6 7 8 9 |
<?php $location = 'meta_key="location" meta_value="mountain" meta_compare="LIKE"'; $template = "使用するテンプレート名"; $post_type = "attachment"; $posts_per_page = "4";//表示する画像数 $label = "画像を表示"; //attachment時は、post_status="inherit" echo do_shortcode( '[ajax_load_more repeater="' . $template . '" post_status="inherit" post_type="' . $post_type . '" posts_per_page="' . $posts_per_page . '" button_label="' . $label . '" ' . $location. ' ]' ); ?> |
ここでは、ショートコードが長くなって分かりにくくなるのと、他でも使い回せるようにカスタムフィールドの部分などは変数にしています。
注意するのは、meta_compare=”LIKE”にするということです。これで山（mountain）画像が一覧表示されます。
Ajax Load Moreで他にも試したこと
- 他にも、表示した画像の使われている投稿の親IDを取得して画像からその投稿へのリンクを作成
- 取得した画像のURLから画像のIDを取得して画像に持たせたcaptionテキストを表示（簡単なようでハマってしまった）
以上、Ajax Load Moreを使った画像の一覧表示についてです。
最近のコメント