当前位置:首页7b2美化7b2灯箱美化

7b2灯箱美化

插入B2根目录:functions.php

/**FancyBox图片灯箱,柒月笔记优化版**/
add_filter('the_content', 'fancybox');
function fancybox($content){ 
    $file_types = 'bmp|gif|jpeg|jpg|png|swf|webp'; // 文件类型列表
    $pattern = array(
        "/<img(.*?)src=('|\")([^>]*).($file_types)('|\")(.*?)>/i",
        "/<a(.*?)href=('|\")([^>]*).($file_types)('|\")(.*?)>(.*?)<\/a>/i"
    );
    $replacement = array(
        '<a$1href=$2$3.$4$5 data-fancybox="images"><img$1src=$2$3.$4$5$6></a>',
        '<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>'
    );
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

/FancyBox图片灯箱,柒月笔记优化版/
add_filter('the_content', 'fancybox');
function fancybox($content){
$file_types = 'bmp|gif|jpeg|jpg|png|swf|webp'; // 文件类型列表
$pattern = array(
"/?)src=('|\")([^>]).($file_types)('|\")(.?)>/i", "/?)href=('|\")([^>]).($file_types)('|\")(.?)>(.*?)<\/a>/i"
);
$replacement = array(
'',
'$7'
);
$content = preg_replace($pattern, $replacement, $content);
return $content;
}

首先在header.php引入 jQuery 和 FancyBox 文件引入位于 之前

<!-- 引入 jQuery 和 Fancybox -->
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

另外一种方法直接放functions.php

/**
 * FancyBox图片灯箱 - 增强版
 * 包含代码美化和强制应用于所有图片
 */

// 添加到内容过滤器
add_filter('the_content', 'enhanced_fancybox');
// 添加到摘要过滤器
add_filter('the_excerpt', 'enhanced_fancybox');
// 添加到小工具文本过滤器
add_filter('widget_text', 'enhanced_fancybox');

function enhanced_fancybox($content) {
    $pattern = array(
        "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|webp)('|\")(.*?)>/i",
        "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|webp)('|\")(.*?)>(.*?)<\/a>/i"
    );
    $replacement = array(
        '<a$1href=$2$3.$4$5 data-fancybox="images"><img$1src=$2$3.$4$5$6></a>',
        '<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>'
    );
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

// 在头部加载FancyBox资源
function load_fancybox_resources() {
    wp_enqueue_script('fancybox-js', 'https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js', array('jquery'), null, true);
    wp_enqueue_style('fancybox-css', 'https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css');
}
add_action('wp_enqueue_scripts', 'load_fancybox_resources');

// 初始化FancyBox
function initialize_fancybox() {
    ?>
    <script>
    jQuery(document).ready(function($) {
        Fancybox.bind("[data-fancybox]", {
            // 可以在这里添加FancyBox的选项
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'initialize_fancybox');

// 代码美化列表直接显示
function code_beautify_list() {
    $code = '
    /**
     * FancyBox图片灯箱 - 增强版
     * 包含代码美化和强制应用于所有图片
     */

    // 添加到内容过滤器
    add_filter(\'the_content\', \'enhanced_fancybox\');
    // 添加到摘要过滤器
    add_filter(\'the_excerpt\', \'enhanced_fancybox\');
    // 添加到小工具文本过滤器
    add_filter(\'widget_text\', \'enhanced_fancybox\');

    function enhanced_fancybox($content) {
        $pattern = array(
            "/<img(.*?)src=(\'|\")([^>]*).(bmp|gif|jpeg|jpg|png|webp)(\'|\")(.*?)>/i",
            "/<a(.*?)href=(\'|\")([^>]*).(bmp|gif|jpeg|jpg|png|webp)(\'|\")(.*?)>(.*?)<\/a>/i"
        );
        $replacement = array(
            \'<a$1href=$2$3.$4$5 data-fancybox="images"><img$1src=$2$3.$4$5$6></a>\',
            \'<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>\'
        );
        $content = preg_replace($pattern, $replacement, $content);
        return $content;
    }
    ';
    
    echo '<pre>' . htmlspecialchars($code) . '</pre>';
}

// 添加一个短代码来显示代码美化列表
add_shortcode('show_fancybox_code', 'code_beautify_list');
温馨提示:

文章标题:7b2灯箱美化

文章链接:https://yuntunft.cn/52397.html

更新时间:2024年11月16日

搜索