WordPress Image Gallerys的自定义HTML只输出一半的功能
问题描述：
I took the following code from an example and adjusted it so a standard gallery in wordpress would output as a Flexslider and Carousel. I can output one of them just fine, but I added additional *outputs for a Carousel as well, and now only the Carousel prints out. Any help on how I can get the whole thing to output would be appreciated
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
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=\\\"wordpress-gallery\\\"> \"; $output = \"<div id=\\\"sliding\\\" class=\\\"flexslider flexslider--post-content\\\"> \"; //$output .= \"<div class=\\\"preloader\\\"></div> \"; $output .= \"<ul class=\\\"slides flexslider__slides\\\"> \"; // 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\'); // $imgThumbnail = wp_get_attachment_image_src($id, \'thumbnail\'); $img = wp_get_attachment_image_src($id, \'full\'); $output .= \"<li class=\\\"slide flexslider__slide cover\\\"> \"; $output .= \"<img src=\\\"{$img[0]}\\\" width=\\\"{$img[1]}\\\" height=\\\"{$img[2]}\\\" alt=\\\"\\\" /> \"; $output .= \"</li> \"; } $output .= \"</ul> \"; $output .= \"</div> \"; $output = \"<div id=\\\"carousel\\\" class=\\\"flexslider flexslider--post-content-carousel\\\"> \"; $output .= \"<ul class=\\\"slides flexslider__slides\\\"> \"; foreach ($attachments as $id => $attachment) { $imgThumbnail = wp_get_attachment_image_src($id, \'thumbnail\'); $output .= \"<li > \"; $output .= \"<img src=\\\"{$imgThumbnail[0]}\\\" alt=\\\"\\\" /> \"; $output .= \"</li> \"; } $output .= \"</ul> \"; $output .= \"</div> \"; $output .= \"</div> \"; return $output; |
}
the html that gets outputed so far (it doesn\'t output the #sliding div, only the #carousel):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<div id=\"carousel\" class=\"flexslider flexslider--post-content-carousel\"> <div class=\"flex-viewport\" style=\"overflow: hidden; position: relative;\"> <ul class=\"slides flexslider__slides\" style=\"width: 1400%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);\"> <li class=\"flex-active-slide\" style=\"width: 210px; float: left; display: block;\"> <img src=\"//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-300x300.jpg\" alt=\"\" draggable=\"false\"> </li> <li style=\"width: 210px; float: left; display: block;\"> <img src=\"//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-1-300x300.jpg\" alt=\"\" draggable=\"false\"> </li> <li style=\"width: 210px; float: left; display: block;\"> <img src=\"//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-2-300x300.jpg\" alt=\"\" draggable=\"false\"> </li> <li style=\"width: 210px; float: left; display: block;\"> <img src=\"//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-3-300x300.jpg\" alt=\"\" draggable=\"false\"> </li> <li style=\"width: 210px; float: left; display: block;\"> <img src=\"//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-4-300x300.jpg\" alt=\"\" draggable=\"false\"> </li> <li style=\"width: 210px; float: left; display: block;\"> <img src=\"//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-5-300x300.jpg\" alt=\"\" draggable=\"false\"> </li> <li style=\"width: 210px; float: left; display: block;\"> <img src=\"//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-6-300x300.jpg\" alt=\"\" draggable=\"false\"> </li> </ul> </div> <ul class=\"flex-direction-nav\"> <li class=\"flex-nav-prev\"><a class=\"flex-prev flex-disabled\" href=\"#\" tabindex=\"-1\">Previous</a></li> <li class=\"flex-nav-next\"><a class=\"flex-next\" href=\"#\">Next</a></li> </ul> </div> |
网友观点：
You have a few errors, that I can see.
|
1 2 3 4 5 6 |
// Here\'s your actual output, you may customize it to your need $output = \\\"<div class=\\\\\"wordpress-gallery\\\\\"> \\\"; $output = \\\"<div id=\\\\\"sliding\\\\\" class=\\\\\"flexslider flexslider--post-content\\\\\"> \\\"; |
If you wish to append data, you need to put a period . before your equals = like this .= on the second $output assignment. Anytime you are appending but not putting .= after the variable name, you are basically reassigning it a new value instead of adding to it.
Also change this line:
$output = \\\"<div id=\\\\\"carousel\\\\\" class=\\\\\"flexslider flexslider--post-content-carousel\\\\\">
\\\";
to:
$output .= \\\"<div id=\\\\\"carousel\\\\\" class=\\\\\"flexslider flexslider--post-content-carousel\\\\\">
\\\";
The problem lies in the fact that you were basically resetting the variable with a new output instead of appending the data to it.
Hope this helps you.
Be sure to go through your code and double check variable assignments to make sure you are appending rather than resetting.
###
You have two errors in your code, that lies in following lines:
|
1 2 3 4 5 6 |
$output = \\\"<div id=\\\\\"sliding\\\\\" class=\\\\\"flexslider flexslider--post-content\\\\\"> \\\"; [...] $output = \\\"<div id=\\\\\"carousel\\\\\" class=\\\\\"flexslider flexslider--post-content-carousel\\\\\"> \\\"; |
You are resetting $output variable two times, thus what was written to it before is lost, so you should replace them with:
|
1 2 3 4 5 6 |
$output .= \\\"<div id=\\\\\"sliding\\\\\" class=\\\\\"flexslider flexslider--post-content\\\\\"> \\\"; [...] $output .= \\\"<div id=\\\\\"carousel\\\\\" class=\\\\\"flexslider flexslider--post-content-carousel\\\\\"> \\\"; |
由于网站搬家，部分链接失效，如无法下载，请联系站长！谢谢支持！
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » WordPress Image Gallerys的自定义HTML只输出一半的功能
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » WordPress Image Gallerys的自定义HTML只输出一半的功能
