使用没有插件的thickbox内置的wordpress

Posted 2023-02-24

【中文标题】使用没有插件的thickbox内置的wordpress

【英文标题】：Using wordpress built in thickbox without plugin

【发布时间】：2011-10-01 15:59:48

【问题描述】：

我正在尝试在我的主题中使用 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);

【问题讨论】：

该代码在内部工作？我的意思是，the_content 过滤器在内部视图上运行，但我认为它可能在主页上不起作用（除非你强制运行它）

是否为thichkbox插入了javascript和css？

你必须先将厚盒脚本加入队列，因为它只包含在网站的管理部分中

【参考方案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 或类似的工具来确保 thickbox 在 DOM 的 jquery 对象中正确注册。

希望有帮助

【讨论】：

请更新您的代码，它有语法错误，您忘记添加另一个 ")" 的 IF 表达式

【参考方案2】：

这个对我有用

<?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>

【参考方案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 将厚盒类添加到画廊。

【参考方案4】：

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

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

找到来自function print_head_scripts()的行，

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

然后刷新你的页面，你会看到thickbox.js已经包含在你的header part中，那么只需在你的<a> tag中添加class="thickbox"，就可以完美调用thickbox了。

【讨论】：

这是非常糟糕的做法，因为这需要更改核心。