如何修改图库项目的HTML输出(使用图库快捷代码)?

时间:2012-03-12 作者:somdow

我对这个简单的问题有点迷茫,所以我想我会来问问专业人士。我的客户刚刚告诉我,在他们的网站图库中,名字和描述在同一行。

例如,如果图片名为ABC,描述为“123”。

输出为“ABC-123”,全部在一行上。所以它看起来像:

 --------
| Picture |
 --------
ABC-123
她想把名字写在一行上,把描述写在另一行上,就像这样:

 --------
| Picture |
 --------
ABC

123
问题是,我甚至不知道我在寻找什么,如何编辑代码来进行这个简单的更改。

在输出代码id上,只需输入一个快速的“br”标记或类似的东西,但我不知道在哪里进行更改。作为一种变通方法,我在本地服务器上继续操作,在画廊图片标题区域中,我添加了“ABC
123”,结果成功了。它把名字和描述放在了两行上,但那个图库上有很多图片,我确信还有比这个解决方法更干净、更优雅的东西。

有没有关于我可以在哪里编辑代码的想法??我使用的是最新版本的WP和所有虽然我的主题是自定义的,但它基本上是默认的,没有什么疯狂的。

我只是想知道当你添加库代码时,例如,这个引用的是什么页面或代码块?

提前感谢

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

好吧,以防万一,有人看到了这个,我通过手动插入<br/> 标题区域中的标记。

例如,如果图片内容有以下示例文本"ABC-123" 输出此

 --------
| Picture |
 --------
ABC-123
然后在标题中我输入了这样的内容ABC<br/>123 输出此

 --------
| Picture |
 --------
ABC

123
这是Wp中的简单图库(带有短代码),我指的是上面要求的http://deadsilencethemovie.com/?page_id=29 (在br标签之后)但是,这只是一个解决方法,直到Wp有了更合法的内容。(如果还没有)。谢谢大家。

SO网友:Tom Auger

让我们假设您的主题没有滚动其自己的库短代码,并且假设您在此处使用的是[库]短代码,而不是“库”帖子格式。您需要的是中的“gallery\\u shortcode”功能wp-includes/media.php 绕线750(从3.3.1开始)。这就是图库项目的HTML输出硬编码的地方。

当然,我们不能(嗯,我们真的不应该)编辑或更改任何WordPress核心文件,因此我们必须寻找其他方法来连接、过滤或以其他方式增强内置功能,以便为每个附件添加您想要的“标题”和“描述”信息。不幸的是,按照库短代码的编码方式,没有方便的过滤器允许您添加到每个库项目的内容中(这让我认为提交增强请求和补丁可能不是一个坏主意……嗯……)。因此,我们要做的是大量替换整个shortcode函数。

这并不像听起来那么难,因为我们可以将内置代码复制并粘贴到我们自己的插件中,然后添加/修改/破坏我们想要的任何东西。

下面是您将如何做到这一点。为了使用此代码,只需创建一个名为“WPSE45326\\u Gallery\\u Replacement”的文件。php“在您的plugins 文件夹然后你必须进入你的管理后端并激活新插件。然后,只需确保图像有描述和标题。

注意:首先,在Vanilla WordPress安装上试试这个。如果它在那里有效,但在客户的站点上无效,那么这是因为您使用的主题正在滚动它自己的代码。那会使事情变得更复杂。

<?php
/*
Plugin Name: WPSE-45326 Gallery Replacement example
Plugin URI: http://wordpress.stackexchange.com/questions/45326
Description: A plugin to demonstrate how to replace the default \'gallery\' shortcode and add additional HTML tags for more customization.
Version: 1.0
Author: Tom Auger
Author URI: http://www.tomauger.com
License: GPL2
*/

class wpse_45326_Gallery_Replacement {
    function __construct(){
        // Hook on the plugins-loaded action since it\'s the first real action hook that\'s available to us.
        // However, if you\'re using a theme and want to replace that theme\'s `gallery` custom shortcode,
        // you may need to use another action. Search through your parent theme\'s files for \'gallery\' and see
        // what hook it\'s using to define it\'s gallery shortcode, so you can make sure this code runs AFTER their code.
        add_action( "init", array( __CLASS__, "init" ) );
    }

    function init(){
        remove_shortcode( \'gallery\' ); // Remove the default gallery shortcode implementation
        add_shortcode( \'gallery\', array( __CLASS__, "gallery_shortcode" ) ); // And replace it with our own!
    }

    /**
    * The Gallery shortcode.
    *
    * This has been taken verbatim from wp-includes/media.php. There\'s a lot of good stuff in there.
    * All you want to do is add some more HTML to it, and since (for some reason) they didn\'t provide more
    * filters to be able to add, we have to replace the Gallery shortcode wholesale.
    *
    * @param array $attr Attributes of the shortcode.
    * @return string HTML content to display gallery.
    */
    function gallery_shortcode($attr) {
        global $post;

        static $instance = 0;
        $instance++;

        $output = apply_filters(\'post_gallery\', \'\', $attr);
        if ( $output != \'\' )
            return $output;

        if ( isset( $attr[\'orderby\'] ) ) {
            $attr[\'orderby\'] = sanitize_sql_orderby( $attr[\'orderby\'] );
            if ( !$attr[\'orderby\'] )
                unset( $attr[\'orderby\'] );
        }

        // NOTE: These are all the \'options\' you can pass in through the shortcode definition, eg: [gallery itemtag=\'p\']
        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\'    => \'\',
            // Here\'s the new options stuff we added to the shortcode defaults
            \'titletag\'  => \'p\',
            \'descriptiontag\' => \'p\'
        ), $attr));

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

        if ( !empty($include) ) {
            $include = preg_replace( \'/[^0-9,]+/\', \'\', $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) ) {
            $exclude = preg_replace( \'/[^0-9,]+/\', \'\', $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);
        $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}>";

            // MODIFICATION: include the title and description HTML if we\'ve supplied the relevant shortcode parameters (titletag, descriptiontag)
            if ( $captiontag ) {
                $output .= "
                    <{$captiontag} class=\'wp-caption-text gallery-caption\'>";
                // The CAPTION, if there is one
                if ( trim( $attachment->post_excerpt ) ) {
                    $output .= "
                        " . wptexturize($attachment->post_excerpt);
                }

                // The TITLE, if we\'ve not made the \'titletag\' param blank
                if ( $titletag ){
                    $output .= "
                        <{$titletag} class=\\"gallery-item-title\\">" . $attachment->post_title . "</{$titletag}>";
                }

                // The DESCRIPTION, if we\'ve not specified a blank \'descriptiontag\'
                if ( $descriptiontag ){
                    $output .= "
                        <{$descriptiontag} class=\\"gallery-item-description\\">" . wptexturize( $attachment->post_content ) . "</{$descriptiontag}>";
                }

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

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

        return $output;
    }
}

new wpse_45326_Gallery_Replacement();

结束

相关推荐

Load images after page load

我刚刚听说,通过使用一些javascript,可以在整个页面加载完成后加载页面,当我搜索时,我发现LazyLoad, 但最新的浏览器似乎不支持它。我的网站有一些图片,因为哪些网站速度变慢,是否可以在页面加载完成后加载图片?