php 自定义 WordPress 画廊 html 布局

Customise the WordPress gallery html layout

提问by Romain

When creating an image gallery in WordPress using the default Media Uploader, WordPress wraps the images in a bunch of HTML markup.

当使用默认的媒体上传器在 WordPress 中创建图片库时，WordPress 将图像包装在一堆 HTML 标记中。

How can I overwrite this before it's generated so that I can output the desired markup and change the way the gallery layout is created?

如何在生成之前覆盖它，以便我可以输出所需的标记并更改图库布局的创建方式？

Currently, WordPress is generating the code like this:

目前，WordPress 正在生成这样的代码：

<div id="container">
   <div src="<?php bloginfo('template_directory'); ?>/images/small.jpg">
   <div src="<?php bloginfo('template_directory'); ?>/images/medium.jpg" data-media="(min-width: 400px)"></div>
   <div src="<?php bloginfo('template_directory'); ?>/images/large.jpg" data-media="(min-width: 950px)"></div>
   <div src="<?php bloginfo('template_directory'); ?>/images/extralarge.jpg" data-media="(min-width: 1200px)"></div>
</div>

采纳答案by Romain

Here is the code that I change to obtain the layout that I was looking for:

这是我更改以获得我正在寻找的布局的代码：

/******    REWRITE THE GALLERIE FUNCTION FROM WORDPRESS   **********/

add_shortcode('gallery', 'my_gallery_shortcode');  

function my_gallery_shortcode($attr) {
  $counter=0;
//var_dump("Rewrite the shortcode gallery");

    $post = get_post();

static $instance = 0;
$instance++;


if ( ! empty( $attr['ids'] ) ) {
    // 'ids' is explicitly ordered, unless you specify otherwise.
    if ( empty( $attr['orderby'] ) )
        $attr['orderby'] = 'post__in';
    $attr['include'] = $attr['ids'];
}



// Allow plugins/themes to override the default gallery template.
$output = apply_filters('post_gallery', '', $attr);
if ( $output != '' )
    return $output;

// We're trusting author input, so let's at least make sure it looks like a valid orderby statement
if ( isset( $attr['orderby'] ) ) {
    $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
    if ( !$attr['orderby'] )
        unset( $attr['orderby'] );
}

extract(shortcode_atts(array(

/******    CHANGE TO FULL SIZE TO GET THE CORRECT INFORMATION **********/
    'order'      => 'ASC',
    'orderby'    => 'menu_order ID',
    'id'         => $post->ID,
    'itemtag'    => 'dl',
    'icontag'    => 'dt',
    'captiontag' => 'dd',
    'columns'    => 3,
    'size'       => 'Full size',
    'include'    => '',
    'exclude'    => ''    
), $attr));

/***********************************************************************/

$id = intval($id);
if ( 'RAND' == $order )
    $orderby = 'none';

if ( !empty($include) ) {
    $_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );

    $attachments = array();
    foreach ( $_attachments as $key => $val ) {
        $attachments[$val->ID] = $_attachments[$key];
    }
} elseif ( !empty($exclude) ) {
    $attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
} else {
    $attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
}

if ( empty($attachments) )
    return '';

if ( is_feed() ) {
    $output = "\n";
    foreach ( $attachments as $att_id => $attachment )
        $output .= wp_get_attachment_link($att_id, $size, true) . "\n";
    return $output;
}

$itemtag = tag_escape($itemtag);
$captiontag = tag_escape($captiontag);
$icontag = tag_escape($icontag);
$valid_tags = wp_kses_allowed_html( 'post' );
if ( ! isset( $valid_tags[ $itemtag ] ) )
    $itemtag = 'dl';
if ( ! isset( $valid_tags[ $captiontag ] ) )
    $captiontag = 'dd';
if ( ! isset( $valid_tags[ $icontag ] ) )
    $icontag = 'dt';

$columns = intval($columns);
$itemwidth = $columns > 0 ? floor(100/$columns) : 100;
$float = is_rtl() ? 'right' : 'left';

$selector = "gallery-{$instance}";
$gallery_div ="<div pictures-content>";
$gallery_style ="";

$output = apply_filters( 'gallery_style', "\n\t\t" . $gallery_div );

$i = 0;
$count=0;
foreach ( $attachments as $id => $attachment ) {

$test = $attachments[$id];
$link=$test->guid;
    $nocsript="";
    if ($count==0){$nocsript ="<noscript><img src='$link'</noscript>";$sentence ="<div data-src='$link'></div>";}
    if ($count==1){$sentence ="<div data-src='$link' data-media='(min-width: 400px)'></div>";}
    if ($count==2){$sentence ="<div data-src='$link' data-media='(min-width: 800px)'></div>";}
    if ($count==3){$sentence ="<div data-src='$link' data-media='(min-width: 1000px)'></div>";}
    if($nocsript==""){ $output .= "$sentence";} else { $output .= $nocsript."$sentence";}
    $count++;
}
$output .= "</div>\n";
return $output;
}

回答by DaveF

Instead of overwriting the gallery shortcode function, a better way is to use the post_gallery filter that is included within that function.

不是覆盖画廊简码函数，更好的方法是使用该函数中包含的 post_gallery 过滤器。

Add this in functions.php

在functions.php中添加这个

add_filter('post_gallery','customFormatGallery',10,2);

function customFormatGallery($string,$attr){

    $output = "<div id=\"container\">";
    $posts = get_posts(array('include' => $attr['ids'],'post_type' => 'attachment'));

    foreach($posts as $imagePost){
        $output .= "<div src='".wp_get_attachment_image_src($imagePost->ID, 'small')[0]."'>";
        $output .= "<div src='".wp_get_attachment_image_src($imagePost->ID, 'medium')[0]."' data-media=\"(min-width: 400px)\">";
        $output .= "<div src='".wp_get_attachment_image_src($imagePost->ID, 'large')[0]."' data-media=\"(min-width: 950px)\">";
        $output .= "<div src='".wp_get_attachment_image_src($imagePost->ID, 'extralarge')[0]."' data-media=\"(min-width: 1200px)\">";
    }

    $output .= "</div>";

    return $output;
}

This is assuming you've set up image sizes for the different sizes you need using https://codex.wordpress.org/Function_Reference/add_image_size

这是假设您已经使用https://codex.wordpress.org/Function_Reference/add_image_size为您需要的不同尺寸设置了图像尺寸

回答by david.binda

I missed the post_galleryfiltermentioned in the Answer just below this one. You should really consider using that filterinstead of copying over the whole function.

我错过了在这个下面的答案中提到的post_gallery过滤器。您真的应该考虑使用该过滤器而不是复制整个函数。

Add this code to your template's functions.php and modify the HTML inside function. This function is copy of WP35's default gallery shortcode function. Accordiong to Codex, each shortcode can have only one function assigned to it, and because of that, your function will override WordPress default one:

将此代码添加到模板的functions.php 并修改函数内的HTML。此功能是 WP35 默认图库简码功能的副本。根据Codex，每个短代码只能分配一个功能，因此，您的功能将覆盖 WordPress 默认功能：

add_shortcode('gallery', 'my_gallery_shortcode');    
function my_gallery_shortcode($attr) {
    $post = get_post();

static $instance = 0;
$instance++;

if ( ! empty( $attr['ids'] ) ) {
    // 'ids' is explicitly ordered, unless you specify otherwise.
    if ( empty( $attr['orderby'] ) )
        $attr['orderby'] = 'post__in';
    $attr['include'] = $attr['ids'];
}

// Allow plugins/themes to override the default gallery template.
$output = apply_filters('post_gallery', '', $attr);
if ( $output != '' )
    return $output;

// We're trusting author input, so let's at least make sure it looks like a valid orderby statement
if ( isset( $attr['orderby'] ) ) {
    $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
    if ( !$attr['orderby'] )
        unset( $attr['orderby'] );
}

extract(shortcode_atts(array(
    'order'      => 'ASC',
    'orderby'    => 'menu_order ID',
    'id'         => $post->ID,
    'itemtag'    => 'dl',
    'icontag'    => 'dt',
    'captiontag' => 'dd',
    'columns'    => 3,
    'size'       => 'thumbnail',
    'include'    => '',
    'exclude'    => ''
), $attr));

$id = intval($id);
if ( 'RAND' == $order )
    $orderby = 'none';

if ( !empty($include) ) {
    $_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );

    $attachments = array();
    foreach ( $_attachments as $key => $val ) {
        $attachments[$val->ID] = $_attachments[$key];
    }
} elseif ( !empty($exclude) ) {
    $attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
} else {
    $attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
}

if ( empty($attachments) )
    return '';

if ( is_feed() ) {
    $output = "\n";
    foreach ( $attachments as $att_id => $attachment )
        $output .= wp_get_attachment_link($att_id, $size, true) . "\n";
    return $output;
}

$itemtag = tag_escape($itemtag);
$captiontag = tag_escape($captiontag);
$icontag = tag_escape($icontag);
$valid_tags = wp_kses_allowed_html( 'post' );
if ( ! isset( $valid_tags[ $itemtag ] ) )
    $itemtag = 'dl';
if ( ! isset( $valid_tags[ $captiontag ] ) )
    $captiontag = 'dd';
if ( ! isset( $valid_tags[ $icontag ] ) )
    $icontag = 'dt';

$columns = intval($columns);
$itemwidth = $columns > 0 ? floor(100/$columns) : 100;
$float = is_rtl() ? 'right' : 'left';

$selector = "gallery-{$instance}";

$gallery_style = $gallery_div = '';
if ( apply_filters( 'use_default_gallery_style', true ) )
    $gallery_style = "
    <style type='text/css'>
        #{$selector} {
            margin: auto;
        }
        #{$selector} .gallery-item {
            float: {$float};
            margin-top: 10px;
            text-align: center;
            width: {$itemwidth}%;
        }
        #{$selector} img {
            border: 2px solid #cfcfcf;
        }
        #{$selector} .gallery-caption {
            margin-left: 0;
        }
    </style>
    <!-- see gallery_shortcode() in wp-includes/media.php -->";
$size_class = sanitize_html_class( $size );
$gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'>";
$output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div );

$i = 0;
foreach ( $attachments as $id => $attachment ) {
    $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);

    $output .= "<{$itemtag} class='gallery-item'>";
    $output .= "
        <{$icontag} class='gallery-icon'>
            $link
        </{$icontag}>";
    if ( $captiontag && trim($attachment->post_excerpt) ) {
        $output .= "
            <{$captiontag} class='wp-caption-text gallery-caption'>
            " . wptexturize($attachment->post_excerpt) . "
            </{$captiontag}>";
    }
    $output .= "</{$itemtag}>";
    if ( $columns > 0 && ++$i % $columns == 0 )
        $output .= '<br style="clear: both" />';
}

$output .= "
        <br style='clear: both;' />
    </div>\n";

return $output;
}

回答by RCNeil

Building off of @DaveF'sanswer, here is a gallery function that maintains the gallery order and also randomizes if it is selected in the WP editor -

根据@DaveF 的回答，这里有一个画廊功能，它维护画廊顺序，并且如果在 WP 编辑器中选择它，也会随机化 -

add_filter('post_gallery','customFormatGallery',10,2);

function customFormatGallery($string,$attr){

    $posts_order_string = $attr['ids'];
    $posts_order = explode(',', $posts_order_string);

    $output = "<div class=\"gallery-container\">";
    $posts = get_posts(array(
          'include' => $posts_order,
          'post_type' => 'attachment', 
          'orderby' => 'post__in'
    ));

    if($attr['orderby'] == 'rand') {
        shuffle($posts); 
    } 

    foreach($posts as $imagePost){
        $output .= '<img src="' . wp_get_attachment_image_src($imagePost->ID, 'full')[0] . '" alt="" />';
    }

    $output .= "</div>";

    return $output;
}

回答by jere_hr

Just addition to accepted answer To make it work you need first to remove default gallery short code like this:

只是除了接受的答案要使其工作，您首先需要删除默认的画廊短代码，如下所示：

add_action( 'after_setup_theme', 'my_override_of_default_gallery' );

function my_override_of_default_gallery() {
    remove_shortcode( 'gallery' );
    add_shortcode('gallery', 'my_gallery_shortcode');  
}

//add_shortcode('gallery', 'my_gallery_shortcode'); 

function my_gallery_shortcode($attr) {
    $post = get_post();
    ...
}