<?php
/**
 * WordPress 上传图片自动生成WebP
 * 适配本地/阿里云OSS，自动前端替换图片格式
 */

// 上传图片后自动生成WebP
function auto_generate_webp($attachment_id) {
    $file = get_attached_file($attachment_id);
    $mime = get_post_mime_type($attachment_id);
    // 仅处理jpg/png格式
    if (!in_array($mime, ['image/jpeg', 'image/png'])) return;

    $info = pathinfo($file);
    $webp_path = $info['dirname'] . '/' . $info['filename'] . '.webp';
    $quality = 80;

    // 创建图片资源
    if ($mime === 'image/jpeg') {
        $img = imagecreatefromjpeg($file);
    } else {
        $img = imagecreatefrompng($file);
        imagepalettetotruecolor($img);
    }
    // 输出WebP文件
    imagewebp($img, $webp_path, $quality);
    imagedestroy($img);
}
add_action('add_attachment', 'auto_generate_webp');

// 前端输出自动替换为WebP链接
function replace_img_to_webp($content) {
    if (!stristr($_SERVER['HTTP_ACCEPT'], 'image/webp')) return $content;
    preg_match_all('/<img(.*?)src="(.*?)\.(jpg|jpeg|png)"/i', $content, $matches);
    foreach ($matches[2] as $k => $src) {
        $old = $matches[0][$k];
        $new = str_replace('.'.$matches[3][$k], '.webp', $old);
        $content = str_replace($old, $new, $content);
    }
    return $content;
}
add_filter('the_content', 'replace_img_to_webp', 99);

// 兼容特色封面图WebP输出
function post_thumbnail_webp($html, $post_id, $post_image_id) {
    if (!stristr($_SERVER['HTTP_ACCEPT'], 'image/webp')) return $html;
    $html = preg_replace('/\.(jpg|jpeg|png)/i', '.webp', $html);
    return $html;
}
add_filter('post_thumbnail_html', 'post_thumbnail_webp', 99, 3);
?>

# WebP 自动协商
map $http_accept $webp_suffix {
    default "";
    "~*image/webp" ".webp";
}
location ~* \.(jpg|png)$ {
    try_files $uri$webp_suffix $uri;
    expires 30d;
    add_header Cache-Control "public";
}

/* 七赞云(7zan.com)主题专属效果  主导航菜单悬停增强果 */
/* =========================================
   PC端导航样式（仅在 > 768px 生效）
   ========================================= */
@media screen and (min-width: 769px) {
.nav-list > li > a,
.nav-list .sub-menu li a {
    position: relative;
    overflow: hidden;
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1); /* 更丝滑的缓动 */
}

/* 主菜单样式 */
.nav-list > li > a {
    padding: 2px 16px !important;
}

/* 子菜单样式 */
.nav-list .sub-menu li a {
    padding: 8px 20px !important;
    margin: 2px 4px;
    border-radius: 3px;
    font-size: 14px;
}

/* 扫光效果（主菜单） */
.nav-list > li > a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(30,136,229,0.18), transparent);
    transition: 0.7s;
}

/* 主菜单下划线 */
.nav-list > li > a::after {
    content: '';
    position: absolute;
    bottom: 12px;
    left: 48%;
    width: 0;
    height: 1px;
    background: linear-gradient(to right, #1E88E5, #42A5F5);
    transition: all 0.7s ease;
    transform: translateX(-50%);
}

/* 悬停效果 */
.nav-list > li > a,
.nav-list .sub-menu li a {
    transition: transform 0.2s ease;   /* 基础过渡 */
}

.nav-list > li > a:hover,
.nav-list .sub-menu li a:hover {
    color: #1E88E5 !important;
    background: rgba(30,136,229,0.09) !important;
    animation: menuHeartbeat 1.2s ease-in-out 3;  /* infinite无限循环 */
}

/* 可选：移开鼠标时快速恢复 */
.nav-list > li > a:hover {
    animation-play-state: running;
}

/* 心跳放大动画（类似Logo） */
@keyframes menuHeartbeat {
    0%   { transform: scale(1); }
    15%  { transform: scale(1.08); }
    30%  { transform: scale(1.02); }
    45%  { transform: scale(1.07); }
    70%  { transform: scale(1); }
    100% { transform: scale(1); }
}

/* 主菜单悬停动画 */
.nav-list > li > a:hover::before {
    left: 20%;
}

.nav-list > li > a:hover::after {
    width: 56%;
}

/* 子菜单悬停下划线 */
.nav-list .sub-menu li a::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 48%;
    width: 0;
    height: 0.1px;
    background: #1E88E5;
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1); /* 更丝滑的缓动 */
    transform: translateX(-50%);
}

.nav-list .sub-menu li a:hover::after {
    width: 64%;
}
.navbar .nav-list .sub-menu{
    left: 80%;
    top: 120%;
}
}

/* ================= 移动端样式 (≤768px) ================= */
@media screen and (max-width: 768px) {
    .slicknav_nav { width: 100% !important; padding: 10px 15px !important; margin: 0 !important; }
    .slicknav_nav li { width: 100% !important; margin: 4px 0 !important; display: block !important; position: relative !important; }

    /* 统一容器 */
    .slicknav_nav > li > a, .slicknav_nav .slicknav_item.slicknav_row, .slicknav_nav .sub-menu li a {
        display: block !important; text-align: center !important; width: 100% !important;
        box-sizing: border-box !important; position: relative !important;
        overflow: hidden !important; border-radius: 3px !important; z-index: 1 !important;
        transition: background 0.3s ease !important;
    }

    /* 样式区分 */
    .slicknav_nav > li > a { padding: 14px 20px !important; background: #f5f6f7 !important; font-size: 15px !important; font-weight: 500 !important; color: #333 !important; }
    .slicknav_nav .slicknav_item.slicknav_row { padding: 14px 45px 14px 20px !important; background: #f5f6f7 !important; }
    .slicknav_nav .sub-menu li a { padding: 12px 20px !important; margin: 3px 10px !important; width: calc(100% - 20px) !important; background: #e9ecef !important; font-size: 14px !important; color: #555 !important; border-radius: 3px !important; }

    /* 【核心】移动端扫光伪元素 */
    .slicknav_nav > li > a::before, 
    .slicknav_nav .slicknav_item.slicknav_row::before, 
    .slicknav_nav .sub-menu li a::before {
        content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important;
        width: 100% !important; height: 100% !important;
        background: linear-gradient(90deg, transparent, rgba(30,136,229,0.35), transparent) !important;
        transition: left 0.6s ease !important; /* 扫光过渡 */
        pointer-events: none !important; z-index: 0 !important;
    }

    /* 【核心】移动端悬停/点击触发效果（无下划线） */
    .slicknav_nav > li > a:hover, 
    .slicknav_nav .slicknav_item.slicknav_row:hover, 
    .slicknav_nav .sub-menu li a:hover {
        background: rgba(30,136,229,0.09) !important; /* 背景微亮 */
        animation: menuHeartbeat 1.2s ease-in-out 3 !important; /* 心跳动画 */
    }
    
    /* 文字变色 */
    .slicknav_nav > li > a:hover,
    .slicknav_nav .slicknav_item.slicknav_row:hover > a,
    .slicknav_nav .sub-menu li a:hover {
        color: #1E88E5 !important;
    }

    /* 扫光移动 */
    .slicknav_nav > li > a:hover::before, 
    .slicknav_nav .slicknav_item.slicknav_row:hover::before, 
    .slicknav_nav .sub-menu li a:hover::before {
        left: 100% !important; /* 扫光从左扫到右 */
    }

    /* 内部元素定位（保持居中） */
    .slicknav_nav .slicknav_item.slicknav_row > a { display: inline-block !important; color: inherit !important; font-size: 15px !important; font-weight: 500 !important; position: relative !important; z-index: 2 !important; pointer-events: none !important; transition: color 0.3s ease !important;}
    .slicknav_nav .slicknav_item.slicknav_row > .slicknav_arrow { position: absolute !important; right: 20px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; padding: 0 !important; font-size: 14px !important; color: #999 !important; z-index: 2 !important; pointer-events: auto !important; }
}