更改 Wordpress 默认图库输出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19802157/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change Wordpress default gallery output
提问by Sheixt
I am looking to use the Wordpress gallery shortcutbut I want to tie the output into the Foundation Orbit plugin(to make a slider). This is the HTML I am looking to output:
我想使用Wordpress 画廊快捷方式，但我想将输出绑定到Foundation Orbit 插件（以制作滑块）。这是我要输出的 HTML：
<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?
是否可以放入functions.php（或类似的）东西来实现这一目标？
回答by mathielo
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.
确实是的。很久以前，我找到了这段代码，并且一直在使用它。将 WP 的默认图库自定义为您想要的任何内容都很棒。
There's a filter to post_gallerywhich you can use to customize alldefault 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.
有一个过滤器post_gallery可用于自定义所有默认 WP 画廊。这是我使用的适合您提供的模板的代码示例。我已经尽可能地清理了它。
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.phpfile and modify to adapt it to your need. I'm pretty sure it'll work for you as it have worked for me :)
只需将其粘贴到您的functions.php文件中并进行修改以适应您的需要。我很确定它对你有用，因为它对我有用:)
回答by StandardSpace
Super answer Mathielo.
超级答案马蒂埃洛。
However, I needed the option of including a caption, so I've modified your code to use the wp_prepare_attachment_for_js()function as that seems to provide the necessary data.
但是，我需要包含标题的选项，因此我修改了您的代码以使用 wp_prepare_attachment_for_js()函数，因为它似乎提供了必要的数据。
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 all data related to attachment
$img = wp_prepare_attachment_for_js($id);
// If you want a different size change 'large' to eg. 'medium'
$url = $img['sizes']['large']['url'];
$height = $img['sizes']['large']['height'];
$width = $img['sizes']['large']['width'];
$alt = $img['alt'];
// Store the caption
$caption = $img['caption'];
$output .= "<li>\n";
$output .= "<img src=\"{$url}\" width=\"{$width}\" height=\"{$height}\" alt=\"{$alt}\" />\n";
// Output the caption if it exists
if ($caption) {
$output .= "<div class=\"orbit-caption\">{$caption}</div>\n";
}
$output .= "</li>\n";
}
$output .= "</ul>\n";
$output .= "</div>\n";
return $output;
}
回答by Stephanie
I know the original question has been answered but I just wanted to share what I've done with the filter snippet in case it helps anyone else. I've enabled Miro Mannino's 'Justified Gallery' jquery plugin http://miromannino.com/projects/justified-gallery/to work with Wordpress galleries in Wordpress 3.9 ... Here's the code with the changes I made to get it to work... (img size light thumb is my custom thumbnail to preserve image dimensions but keep page load times down.)
我知道最初的问题已得到解答，但我只是想分享我对过滤器片段所做的工作，以防它对其他人有所帮助。我已经启用 Miro Mannino 的“Justified Gallery”jquery 插件http://miromannino.com/projects/justified-gallery/在 Wordpress 3.9 中与 Wordpress 画廊一起工作......这是我为使其工作所做的更改的代码...（img size light thumb 是我的自定义缩略图，用于保留图像尺寸但减少页面加载时间。）
// Custom Gallery
add_filter( 'post_gallery', 'my_post_gallery', 10, 2 );
function my_post_gallery( $output, $attr) {
global $post, $wp_locale;
static $instance = 0;
$instance++;
// We're trusting author input, so let's at least make sure it looks like a valid orderby statement
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' => 'light-thumb',
'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];
}
} 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}";
$output = apply_filters('gallery_style', "
<style type='text/css'>
#{$selector} {
margin: auto;
}
#{$selector} .gallery-item {
float: {$float};
margin-top: 0px;
text-align: center;
width: {$itemwidth}%; }
#{$selector} img {
border: 0;
}
#{$selector} .gallery-caption {
margin-left: 0;
}
</style>
<!-- see gallery_shortcode() in wp-includes/media.php -->
<div id='$selector' class='gallery galleryid-{$id}'>");
$output = "<div id=\"mygallery\">\n";
$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}>";
if ( $captiontag && trim($attachment->post_excerpt) ) {
$output .= "
<{$captiontag} class='gallery-caption'>
" . wptexturize($attachment->post_excerpt) . "
</{$captiontag}>";
}
$output .= "</{$itemtag}>";
if ( $columns > 0 && ++$i % $columns == 0 )
$output .= '<br style="clear: both" />';
}
$output .= "
<br style='clear: both;' />
</div>\n";
return $output;
}
It works a treat. Thanks for sharing the filter - it was just what I was looking for.
它是一种享受。感谢分享过滤器 - 这正是我想要的。
回答by AlexanderShustik
So if you want output another string like img title or img desc just use this construction
因此，如果您想输出另一个字符串，如 img title 或 img desc，请使用此构造
$title = $img['title'];
$title = $img['title'];
This is comment to Super answer Mathielo (second answer), and this universal solution, not only zubr foundation
这是对超级答案 Mathielo（第二个答案）的评论，以及这个通用解决方案，不仅是 zubr 基金会
