我一直在寻找一种更好的方法来利用内置的Thickbox功能处理图像。我已经使用我的方法几个月了,但我认为这不是最好的方法。以下是我一直在使用的代码(我不记得在哪里找到代码或链接到文章):
<?php
if (!is_admin()){
/*
add a word found in your domain name
*/
$mydomain = ".com";
/*
The css selector
.entry-content a img
*/
$myselector = "p a img";
wp_enqueue_style(\'thickbox\'); //include thickbox .css
wp_enqueue_script(\'jquery\'); //include jQuery
wp_enqueue_script(\'thickbox\'); //include Thickbox jQuery plugin
// Function that will write js
function thickbox_js(){
global $mydomain, $myselector;
?>
<script type=\'text/javascript\'>
var tb_closeImage = "<?php bloginfo(\'wpurl\'); ?>/wp-includes/js/thickbox/tb-close.png";
var tb_pathToImage = "<?php bloginfo(\'wpurl\'); ?>/wp-includes/js/thickbox/loadingAnimation.gif";
jQuery(document).ready(function() {
jQuery("<?php echo $myselector; ?>").parent("a[href*=<?php echo $mydomain; ?>]").addClass("thickbox");
});
</script>
<?php
}
add_action(\'wp_footer\', \'thickbox_js\'); // use wp_footer hook to write our generated javascript into page footer.
}
?>
如有任何建议,将不胜感激。我尝试了教程中列出的几种不同的方法,但都没有奏效。谢谢
To be more specific, this is the part in question:
<?php bloginfo(\'wpurl\'); ?>
What I\'m using now:
<?php
function add_themescript(){
if(!is_admin()){
wp_enqueue_script(\'thickbox\',null,array(\'jquery\'));
wp_enqueue_style(\'thickbox.css\', \'/\'.WPINC.\'/js/thickbox/thickbox.css\', null, \'1.0\');
}
}
add_action(\'init\',\'add_themescript\');
define("IMAGE_FILETYPE", "(bmp|gif|jpeg|jpg|png)", true);
function wp_thickbox($string) {
$pattern = \'/(<a(.*?)href="([^"]*.)\'.IMAGE_FILETYPE.\'"(.*?)><img)/ie\';
$replacement = \'stripslashes(strstr("\\2\\5","rel=") ? "\\1" : "<a\\2href=\\"\\3\\4\\"\\5 class=\\"thickbox\\"><img")\';
return preg_replace($pattern, $replacement, $string);
}
function wp_thickbox_rel( $attachment_link ) {
$attachment_link = str_replace( \'a href\' , \'a rel="thickbox-gallery" class="thickbox" href\' , $attachment_link );
return $attachment_link;
}
add_filter(\'the_content\', \'wp_thickbox\');
add_filter(\'wp_get_attachment_link\' , \'wp_thickbox_rel\');
?>
我认为这样会好一点,但我仍然不确定这是不是最佳的方式。接下来,我需要学习如何向ThickBox弹出图像添加导航。
SO网友:Tom Auger
上述公认的答案有点过时,从那时起,在默认WordPress网站上添加Thickbox图库就变得容易多了
1: 将thickbox JS和CSS排队现在可以使用内置的WordPress默认句柄轻松完成:
add_action( \'wp_enqueue_scripts\', \'wpse25112_scripts\' );
function wpse25112_scripts(){
// enqueue the thickbox scripts and styles
wp_enqueue_script( \'thickbox\' );
wp_enqueue_style( \'thickbox\' );
// enqueue your own JavaScript
wp_enqueue_script( \'my-thickbox-script\', \'path/to/my-thickbox-script.js\', array( \'jquery\', \'thickbox\' ), \'1.0.0\' );
}
激活WordPress Gallery图像上的Thickbox这可以在自定义JavaScript文件中使用一点jQuery来完成,我们在上面的代码中加入了该文件:
;jQuery(function($){
$(".gallery a").addClass("thickbox");
});
这确保了我们只将Thickbox功能添加到WordPress gallery图像中(不是每个
img
包装在
a
根据其他示例进行标记)。
3: 创建您的多媒体资料
这是通过任何帖子或页面上的WordPress添加媒体按钮完成的。只需查找“Gallery”选项卡。
Important: 确保选择“链接到媒体文件”而不是“链接到附件”,以便在Thickbox模式中正确弹出图像(否则会弹出网页副本!)。
4: 奖金!确保你只在页面上有WordPress图库的时候才把这些东西排队这是有趣的部分。当你不需要的时候,为什么要把16K的脚本和CSS(好吧,这真的不是很多,但仍然如此)排在队列中?我们来看看[gallery]
在我们实际排队之前,在内容中的某个地方进行快捷编码。。。
修改上述排队功能如下:
function wpse25112_scripts(){
/** @var WP_Post $post */
$post = get_post();
// Short circuit if something goes wrong
if ( ! is_a( $post, \'WP_Post\' ) ){
return;
}
// Does this Post have the default WordPress [gallery] shortcode?
if ( preg_match( "/\\[\\s*gallery(?:\\s|\\])/i", $post->post_content ) ){
// enqueue the thickbox scripts and styles
wp_enqueue_script( \'thickbox\' );
wp_enqueue_style( \'thickbox\' );
// enqueue your own JavaScript
wp_enqueue_script( \'my-thickbox-script\', \'path/to/my-thickbox-script.js\', array( \'jquery\', \'thickbox\' ), \'1.0.0\' );
}
}