如何为图库获取干净的代码?

时间:2014-04-08 作者:Accore LTD

我想要一个库的干净代码,比如:

<div class="gallery">
<ul>
<li><a href=\'../wp-content/uploads/2014/04/lgitem-01.jpg\'><img width="150" height="150" src="../wp-content/uploads/2014/04/lgitem-01-150x150.jpg" class="tnggallery" /></a></li>
<li><a href=\'../wp-content/uploads/2014/04/lgitem-01.jpg\'><img width="150" height="150" src="../wp-content/uploads/2014/04/lgitem-01-150x150.jpg" class="tnggallery" /></a></li>
<li><a href=\'../wp-content/uploads/2014/04/lgitem-01.jpg\'><img width="150" height="150" src="../wp-content/uploads/2014/04/lgitem-01-150x150.jpg" class="tnggallery" /></a></li>
<li><a href=\'../wp-content/uploads/2014/04/lgitem-01.jpg\'><img width="150" height="150" src="../wp-content/uploads/2014/04/lgitem-01-150x150.jpg" class="tnggallery" /></a></li>
</ul>
</div>
目前,我的代码如下所示:

<div id="gallery-2" class="gallery galleryid-12 gallery-columns-5 gallery-size-thumbnail"><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="../uploads/2014/04/lgitem-01.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-01-150x150.jpg" class="attachment-thumbnail" alt="lgitem-01"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="../uploads/2014/04/lgitem-02.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-02-150x150.jpg" class="attachment-thumbnail" alt="lgitem-02"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="../uploads/2014/04/lgitem-03.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-03-150x150.jpg" class="attachment-thumbnail" alt="lgitem-03"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="../uploads/2014/04/lgitem-04.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-04-150x150.jpg" class="attachment-thumbnail" alt="lgitem-04"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="../uploads/2014/04/lgitem-05.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-05-150x150.jpg" class="attachment-thumbnail" alt="lgitem-05"></a>
        </dt></dl><br style="clear: both"><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="../uploads/2014/04/lgitem-06.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-06-150x150.jpg" class="attachment-thumbnail" alt="lgitem-06"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="../uploads/2014/04/lgitem-07.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-07-150x150.jpg" class="attachment-thumbnail" alt="lgitem-07"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="../uploads/2014/04/lgitem-08.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-08-150x150.jpg" class="attachment-thumbnail" alt="lgitem-08"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="../uploads/2014/04/lgitem-09.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-09-150x150.jpg" class="attachment-thumbnail" alt="lgitem-09"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="../uploads/2014/04/lgitem-10.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-10-150x150.jpg" class="attachment-thumbnail" alt="lgitem-10"></a>
        </dt></dl><br style="clear: both"><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="../uploads/2014/04/lgitem-11.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-11-150x150.jpg" class="attachment-thumbnail" alt="lgitem-11"></a>
        </dt></dl>
        <br style="clear: both;">
    </div>

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

您可以尝试用以下内容覆盖库短代码:

add_shortcode( \'gallery\', \'custom_gallery_shortcode\' );
其中,快捷码回调为:

/**
 * Overwrite the native [gallery] shortcode, to modify the HTML layout.
 */
function custom_gallery_shortcode( $attr = array(), $content = \'\' )
{
        $attr[\'itemtag\']        = "li";
        $attr[\'icontag\']        = "";
        $attr[\'captiontag\']     = "p";

        // Run the native gallery shortcode callback:    
        $html = gallery_shortcode( $attr );

        // Remove all tags except a, img,li, p
        $html = strip_tags( $html, \'<a><img><li><p>\' );

        // Some trivial replacements:
        $from = array(  
            "class=\'gallery-item\'", 
            "class=\'gallery-icon landscape\'", 
            \'class="attachment-thumbnail"\',
            \'a href=\', 
        );              
        $to = array( 
            \'\',
            \'\',
            \'class="tnggallery"\', 
            \'a class="lightbox" href=\', 
        );
        $html = str_replace( $from, $to, $html );

        // Remove width/height attributes:
        $html = preg_replace( \'/(width|height)=\\"\\d*\\"\\s/\', "", $html );

        // Wrap the output in ul tags:
        $html = sprintf( \'<ul class="gallery">%s</ul>\', $html );

        return $html;
}
修改HTML布局。

结束

相关推荐

Custom gallery in wp3.5

我使用了我在3.4中为一个光滑的小自定义库找到的教程,但升级到3.5后,它就不再工作了。我仍在努力学习php,但似乎无法再次使用它,因为我要么出错,要么什么都没有。无论如何,在升级之前,用户所要做的就是点击“添加媒体”,上传他想在帖子中显示的任何图像[在本例中是产品],设置图像的顺序,第一个图像是顶部/全尺寸图像,然后在文本字段中键入他的描述,当他点击“提交”时,将以上所有内容以良好的格式显示出来,如下所示:single.php xxxxxxxxxxxxxxxxxxxxxxxxxxxxx