更改 Wordpress 默认图库输出 [英] Change Wordpress default gallery output

问题描述

我希望使用 Wordpress 图库快捷方式，但我想将输出与 Foundation Orbit 插件(制作滑块).这是我要输出的 HTML:

<div class="preloader"></div><ul数据轨道><li><img src="img1.png" alt="bla bla bla"/><li><img src="img2.png" alt="bla bla bla"/><li><img src="img3.png" alt="bla bla bla"/><li><img src="img4.png" alt="bla bla bla"/>

是否可以在 functions.php(或类似的)中放入一些东西来实现这一点?

解决方案

是的，确实如此.很久以前，我找到了这段代码，并且一直在使用它.可以根据需要自定义 WP 的默认图库.

post_gallery 有一个过滤器，您可以使用它来自定义所有默认 WP 画廊.这是我使用的适合您提供的模板的代码示例.我已经尽可能地清理了它.

该功能的第一部分几乎是画廊附件处理，因此您可能只想更改后半部分，即决定画廊模板输出的部分(遵循评论):

add_filter('post_gallery', 'my_post_gallery', 10, 2);函数 my_post_gallery($output, $attr) {全球 $post;如果 (isset($attr['orderby'])) {$attr['orderby'] = sanitize_sql_orderby($attr['orderby']);如果 (!$attr['orderby'])未设置($attr['orderby'])；}提取(shortcode_atts(数组('订单' =>'ASC','orderby' =>'menu_order ID','id' =>$post->ID，'项目标签' =>'dl','图标标签' =>'dt','标题标签' =>'dd','列' =>3、'尺寸' =>'缩略图','包括' =>'','排除' =>''), $attr));$id = intval($id);if ('RAND' == $order) $orderby = 'none';如果(！空($包括)){$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];}}if (empty($attachments)) 返回 '';//这是您的实际输出，您可以根据需要对其进行自定义$output = "<div class=\"slideshow-wrapper\">\n";$output .= "<div class=\"preloader\"></div>\n";$output .= "
\n​​";//现在你遍历每个附件foreach ($attachments as $id => $attachment) {//获取缩略图(或完整图像，由您决定)//$img = wp_get_attachment_image_src($id, 'medium');//$img = wp_get_attachment_image_src($id, 'my-custom-image-size');$img = wp_get_attachment_image_src($id, 'full');$output .= "
\n";$output .= "<img src=\"{$img[0]}\" width=\"{$img[1]}\" height=\"{$img[2]}\" alt=\"\"/>\n";$output .= "</li>\n";}$output .= "</ul>\n";$output .= "</div>\n";返回 $output;}

只需将其粘贴到您的 functions.php 文件中并进行修改以适应您的需要.我很确定它对你有用，因为它对我有用:)

I am looking to use the Wordpress gallery shortcut but I want to tie the output into the Foundation Orbit plugin (to make a slider). This is the HTML I am looking to output:

<div class="slideshow-wrapper">
    <div class="preloader"></div>
    <ul data-orbit>
        <li>
            <img src="img1.png" alt="bla bla bla" />
        </li>
        <li>
            <img src="img2.png" alt="bla bla bla" />
        </li>
        <li>
            <img src="img3.png" alt="bla bla bla" />
        </li>
        <li>
            <img src="img4.png" alt="bla bla bla" />
        </li>
    </ul>
</div>

Is it possible to put something in functions.php (or similar) to achieve this?

解决方案

Yes, indeed. Quite a while ago I've found this code and have been using it ever since. It's great to customize WP's default gallery to whatever you want.

There's a filter to post_gallery which you can use to customize all default WP galleries. Here's a sample of the code I use adapted to the template you provided. I've cleared it up as much as possible.

The first part of the function is pretty much gallery attachments handling, so you'll probably just want to change the latter half, the one that determines the output of your gallery template (follow the comments):

add_filter('post_gallery', 'my_post_gallery', 10, 2);
function my_post_gallery($output, $attr) {
    global $post;

    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)) {
        $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];
        }
    }

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

    // Here's your actual output, you may customize it to your need
    $output = "<div class=\"slideshow-wrapper\">\n";
    $output .= "<div class=\"preloader\"></div>\n";
    $output .= "<ul data-orbit>\n";

    // Now you loop through each attachment
    foreach ($attachments as $id => $attachment) {
        // Fetch the thumbnail (or full image, it's up to you)
//      $img = wp_get_attachment_image_src($id, 'medium');
//      $img = wp_get_attachment_image_src($id, 'my-custom-image-size');
        $img = wp_get_attachment_image_src($id, 'full');

        $output .= "<li>\n";
        $output .= "<img src=\"{$img[0]}\" width=\"{$img[1]}\" height=\"{$img[2]}\" alt=\"\" />\n";
        $output .= "</li>\n";
    }

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

    return $output;
}

Just paste it to your functions.php file and modify to adapt it to your need. I'm pretty sure it'll work for you as it have worked for me :)

这篇关于更改 Wordpress 默认图库输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！