Question

我有一个让我发疯的问题，并且无法在文档中找到解决方案...... 我想要加入Wordpress＆＃39; post_gallery函数将一个Class添加到包含WP生成的库单个图像的dl元素。通过这个我希望有选择可以通过ACF开关在WP Media的附件窗口中控制全宽图像

if ( get_field('fullwidth') == 1 ){ 
    $classname = 'fullwidth'; 
} else { 
    $classname = ""; 
}

同时设置img＆＃34; src＆＃34;对于这些全宽图像来说，这将很方便，因此页面加载不会太慢。

我是否需要从此处重写整个图库生成代码？ https://core.trac.wordpress.org/browser/trunk/src/wp-includes/media.php

可以通过这种方法完成，还是应该以某种方式尝试挂钩到the_content？但是对于那种方法，我没有找到关于如何生成画廊的任何信息......

Answer 1

将一个Class添加到包含WP生成的库单个图像的dl元素

而不是那样，你为什么不 - 使用文本/ HTML编辑器 - 像这样添加图库：

<div class="fullwidth">
    [gallery ... /]
</div>

（三个点表示短代码参数，例如ids，size和link）

并编写一些类似于：

的CSS代码

.fullwidth .gallery-item {
    /* Add styles for the DL (or FIGURE for HTML5-supported themes) element that wraps the gallery image and caption. */
}

    .fullwidth .gallery-icon {
        /* Add styles for the DT (or DIV for HTML5-supported themes) element that wraps the gallery image. */
    }

    .fullwidth .gallery-caption {
        /* Add styles for the DD (or FIGCAPTION for HTML5-supported themes) element that wraps the gallery caption. */
    }

[编辑]以下自定义短代码;使用与使用默认[gallery]短代码完全相同的方式。

将这些添加到主题的 functions.php 文件中：

/**
 * @param array $attr
 * @param WP_Post $attachment
 */
function gallery_shortcode2_image_attributes( $attr, $attachment ) {
    // Name of the custom field. (ACF)
    $field_name = 'fullwidth';

    if ( get_field( $field_name, $attachment->ID ) ) {
        $attr['data-gallery-layout'] = 'full-width';
    }

    return $attr;
}

add_shortcode( 'gallery2', 'gallery_shortcode2' );
function gallery_shortcode2( $attr ) {
    $atts = shortcode_atts( array(
        'itemtag' => 'figure',       // I'm assuming we'll always be using HTML5-supported themes..
        'fwclass' => 'fullwidth',    // The CSS class applied to items with, well, full-width layout.
        'size'    => 'medium_large', // You may change the default value; to "large", "custom", etc.
    ), $attr );

    // Don't modify anything below unless you're 100% sure of what you're doing. =)

    $itemtag = tag_escape( $atts['itemtag'] );
    $valid_tags = wp_kses_allowed_html( 'post' );
    if ( ! isset( $valid_tags[ $itemtag ] ) ) {
        $itemtag = 'dl';
    }

    add_filter( 'wp_get_attachment_image_attributes', 'gallery_shortcode2_image_attributes', 10, 2 );
    $output = gallery_shortcode( array_merge( $attr, $atts ) );
    $output2 = '';
    remove_filter( 'wp_get_attachment_image_attributes', 'gallery_shortcode2_image_attributes', 10, 2 );

    $_tag = '<' . preg_quote( $itemtag ) . ' class=\'gallery-item\'>';
    $arr = preg_split( "/($_tag)/", $output, -1, PREG_SPLIT_DELIM_CAPTURE );
    for ( $i = 0, $j = 1; $i < count( $arr ); $i++, $j++ ) {
        if ( $_tag === $arr[ $i ] && isset( $arr[ $j ] ) ) {
            $class = 'gallery-item';
            if ( preg_match( '/<img (.*?) data-gallery-layout="full-width"/', $arr[ $j ] ) ) {
                $class .= ' ' . $atts['fwclass'];
            }

            $output2 .= '<' . $itemtag . ' class=\'' . esc_attr( $class ) . '\'>';
        } else {
            $output2 .= $arr[ $i ];
        }
    }
    unset( $output, $arr );

    return $output2;
}

使用[gallery2]代替[gallery];相同的参数（例如ids和size），但[gallery2]有一个额外的参数，即fwclass。（有关该参数的详细信息，请参阅gallery_shortcode()函数。）

希望[gallery2]适合你，就像它对我一样。

注意：仅当要将自定义CSS [gallery2]添加到单个图库项目元素时才使用class （即{{1 }}）。否则，请使用默认的短代码 - .gallery-item。

挂钩到post_gallery函数以更改图库的样式

1 个答案: