在单个帖子中显示图像标题和标题

时间:2016-03-26 作者:Emir Dupovac

我想在<p> 在单个post中标记the_content() 函数用于每个具有一个的图像。例如,如果我添加了图库,并为每个图像定义了标题,我希望在每个图像上方显示其标题,在每个图像下方显示其标题,如果定义了标题,还希望对所有单个图像显示标题。要直观地表达它:enter image description here

2 个回复
最合适的回答,由SO网友:SBP 整理而成

我有几分钟的时间为您定制了代码。将其复制并粘贴到主题功能中。php

remove_shortcode(\'gallery\', \'gallery_shortcode\');
add_shortcode(\'gallery\', \'gallery_shortcode_custom\');
function gallery_shortcode_custom( $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\'];
    }

    /**
     * Filter the default gallery shortcode output.
     *
     * If the filtered output isn\'t empty, it will be used instead of generating
     * the default gallery template.
     *
     * @since 2.5.0
     * @since 4.2.0 The `$instance` parameter was added.
     *
     * @see gallery_shortcode()
     *
     * @param string $output   The gallery output. Default empty.
     * @param array  $attr     Attributes of the gallery shortcode.
     * @param int    $instance Unique numeric ID of this gallery shortcode instance.
     */
    $output = apply_filters( \'post_gallery\', \'\', $attr, $instance );
    if ( $output != \'\' ) {
        return $output;
    }

    $html5 = current_theme_supports( \'html5\', \'gallery\' );
    $atts = shortcode_atts( array(
        \'order\'      => \'ASC\',
        \'orderby\'    => \'menu_order ID\',
        \'id\'         => $post ? $post->ID : 0,
        \'itemtag\'    => $html5 ? \'figure\'     : \'dl\',
        \'icontag\'    => $html5 ? \'div\'        : \'dt\',
        \'captiontag\' => $html5 ? \'figcaption\' : \'dd\',
        \'columns\'    => 3,
        \'size\'       => \'thumbnail\',
        \'include\'    => \'\',
        \'exclude\'    => \'\',
        \'link\'       => \'\'
    ), $attr, \'gallery\' );

    $id = intval( $atts[\'id\'] );

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

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

    if ( empty( $attachments ) ) {
        return \'\';
    }

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

    $itemtag = tag_escape( $atts[\'itemtag\'] );
    $captiontag = tag_escape( $atts[\'captiontag\'] );
    $icontag = tag_escape( $atts[\'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( $atts[\'columns\'] );
    $itemwidth = $columns > 0 ? floor(100/$columns) : 100;
    $float = is_rtl() ? \'right\' : \'left\';

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

    $gallery_style = \'\';

    /**
     * Filter whether to print default gallery styles.
     *
     * @since 3.1.0
     *
     * @param bool $print Whether to print default gallery styles.
     *                    Defaults to false if the theme supports HTML5 galleries.
     *                    Otherwise, defaults to true.
     */
    if ( apply_filters( \'use_default_gallery_style\', ! $html5 ) ) {
        $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;
            }
            /* see gallery_shortcode() in wp-includes/media.php */
        </style>\\n\\t\\t";
    }

    $size_class = sanitize_html_class( $atts[\'size\'] );
    $gallery_div = "<div id=\'$selector\' class=\'gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}\'>";

    /**
     * Filter the default gallery shortcode CSS styles.
     *
     * @since 2.5.0
     *
     * @param string $gallery_style Default CSS styles and opening HTML div container
     *                              for the gallery shortcode output.
     */
    $output = apply_filters( \'gallery_style\', $gallery_style . $gallery_div );

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

        $attr = ( trim( $attachment->post_excerpt ) ) ? array( \'aria-describedby\' => "$selector-$id" ) : \'\';
        if ( ! empty( $atts[\'link\'] ) && \'file\' === $atts[\'link\'] ) {
            $image_output = wp_get_attachment_link( $id, $atts[\'size\'], false, false, false, $attr );
        } elseif ( ! empty( $atts[\'link\'] ) && \'none\' === $atts[\'link\'] ) {
            $image_output = wp_get_attachment_image( $id, $atts[\'size\'], false, $attr );
        } else {
            $image_output = wp_get_attachment_link( $id, $atts[\'size\'], true, false, false, $attr );
        }
        $image_meta  = wp_get_attachment_metadata( $id );

        $orientation = \'\';
        if ( isset( $image_meta[\'height\'], $image_meta[\'width\'] ) ) {
            $orientation = ( $image_meta[\'height\'] > $image_meta[\'width\'] ) ? \'portrait\' : \'landscape\';
        }
        $output .= "<{$itemtag} class=\'gallery-item\'>";
        $output .= "<p>$attachment->post_title</p>";
        $output .= "
            <{$icontag} class=\'gallery-icon {$orientation}\'>
                $image_output
            </{$icontag}>";
        if ( $captiontag && trim($attachment->post_excerpt) ) {
            $output .= "
                <p>
                " . wptexturize($attachment->post_excerpt) . "
                </p>";
        }
        $output .= "</{$itemtag}>";
        if ( ! $html5 && $columns > 0 && ++$i % $columns == 0 ) {
            $output .= \'<br style="clear: both" />\';
        }
    }

    if ( ! $html5 && $columns > 0 && $i % $columns !== 0 ) {
        $output .= "
            <br style=\'clear: both\' />";
    }

    $output .= "
        </div>\\n";

    return $output;
}
如果需要向p标记添加自定义类,请修改

$output .= "<p>$attachment->post_title</p>";
以及

<p>
    " . wptexturize($attachment->post_excerpt) . "
</p>";

SO网友:SBP

The answer is here 但您将需要编辑代码并仅提取您需要的内容。

请参阅最后几行代码,标题被包装在h3标记中。

相关推荐

Dash after page title

在“中”;“页码”;在WordPress管理面板的一节中,在一些页面标题之后,我看到了这些长划线和一个类似的注释:;隐私政策页面"E;首页,Elementor“;,等这些是什么;注释</如何编辑它们