Question

我正在尝试在我的主题中使用wordpress中的内置厚箱。我试图让它成为所有我通过管理员添加的图片自动具有thickbox功能。我尝试将它放在functions.php中，但它不起作用：

function fb_add_thickbox($content){
$content = preg_replace('/<a(.*?)href="(.*?).(jpg|jpeg|png|gif|bmp|ico)"(.*?)><img/U', '<a$1href="$2.$3" $4 class="thickbox"><img', $content);
return $content;
}
add_filter('the_content', 'fb_add_thickbox', 2);

Answer 1

假设您的代码实际正在运行 - （您的标记实际上是否已被过滤？） - 这将失败，因为胖盒尚未激活。你必须手动注入它：

正如@Alexcp所说 - 你必须手动注册和排队javascript和css（在管理部分之外）。除了preg_replace函数之外，还要将以下内容添加到模板的Functions.php。

// register scripts 
if (! function_exists(thickbox_register){
function thickbox_register() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
    wp_register_script( 'thickbox', 'path to thickbox'.thickbox.js, 'jquery');
    }  
}   
add_action('init', 'thickbox_register');

//print the now registered scripts 
if (! function_exists(thickbox_enqueue){
function thickbox_enqueue() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'thickbox' );
    }  
}
add_action('wp_print_scripts', 'thickbox_enqueue');

// do the same for css 
if (! function_exists(thickbox_style_enqueue){
function thickbox_style_enqueue() {
    wp_register_style( 'thickbox', 'path to css'.thickbox.css );
    wp_enqueue_style( 'thickbox' );
    }  
}
add_action('wp_print_styles', 'thickbox_style_enqueue');

请注意，可以获取路径several ways - 但bloginfo('url');之类的内容可以帮助您入门。

如果您仍然遇到问题，请使用FireBug或类似的东西来确保在DOM的jquery对象中 thickbox正在正确注册。

希望有所帮助

Answer 2

一些简单的方法，wordpress已在其脚本文件夹中包含thickbox.js。

所以只需打开wp-include/script-loader.php

从function print_head_scripts()找到该行，

在$wp_scripts->do_items( 'thickbox' );

之后添加$wp_scripts->do_items( 'l10n' );

然后刷新您的页面，您会看到thickbox.js中已包含header part，然后只在class="thickbox"中添加<a> tag，您可以完美地调用您的厚箱

Answer 3

将此添加到主题中的functions.php文件中：

<?php
// Adds thickbox to all images with a link inside of $content.
// Uses the title attribute in the Media Library.
add_filter('the_content', 'brentini_addthickboxclass');
function brentini_addthickboxclass($content) {
add_thickbox();
$pattern[0] = "/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
$replacement[0] = '<a$1href=$2$3.$4$5 class="thickbox">';
$pattern[1] = "/(<a href=)('|\")([^\>]*?)(\.bmp|\.gif|\.jpg|\.jpeg|\.png)('|\")([^\>]*?)(>)(.*?) title=('|\")(.*?)('|\")(.*?)(<\/a>)/i";
$replacement[1] = '$1$2$3$4$5$6 title=$9$10$11$7$8 title=$9$10$11$12$13';
$pattern[2] = "/(<a href=)('|\")([^\>]*?)(\.bmp|\.gif|\.jpg|\.jpeg|\.png)('|\")([^\>]*?) title=([^\>]*?) title=([^\>]*?)(>)(.*?)(<\/a>)/i";
$replacement[2] = '$1$2$3$4$5$6 title=$7$9$10$11';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}

如果你这样做的话，它会完美无缺。没有必要添加其他人提到的所有呼叫。由于WordPress本身包含用于后端的jquery和thickbox，因此完全没有必要。所以add_thickbox（）就是你在主题中调用thickbox所需要的。脚本的其余部分只是将class =“thickbox”添加到$ content内的任何图像中，并使用WordPress媒体库中的title属性。

如果您对包含此功能的脚本以及带导航的图库的Thickbox支持感兴趣，请查看pastebin。

对于不包含导航的更简化版本，this one at pastebin使用jquery将thickbox类添加到库中。

Answer 4

这个为我工作

<?php add_thickbox(); ?>
<div id="my-content-id" style="display:none;">
 <p>
      This is my hidden content! It will appear in ThickBox when the link is clicked.
 </p>
</div>

<a href="#TB_inline?width=600&height=550&inlineId=my-content-id" 
class="thickbox">View my inline content!</a>

在没有插件的情况下使用内置在thickbox中的wordpress

4 个答案: