作者: Jet L

  • 【小贴士】WordPress多站点配置错误的解决

    最近配置Wordpress的多站点,初次成功,后续改变了主站点的域名到裸域名,再次配置多站点时候出现五花八门的错误,什么重定向过多,什么连接不上数据库,如果遇到这种情况,那么大概率在重启多站点的时候,你会看到警告:存在已有的多站点数据。

    那么这时候请按照Wordpress的官方多站点配置进行设置和检查,可以很快定位到问题所在。

    如果是使用Apache2进行的网站配置,检查Rewrite模块及模块中的 ‘AllowOverride all’设置。

    重点检查的WP配置文件:wp-config.php

    需要重点检查的数据表:

    wp_blogs

    wp_blogmeta

    wp_blog_versions

    wp_registration_log

    wp_signups

    wp_site

    wp_sitemeta

    其实主要的原因是Wordpress在关闭多站点设置的时候,不会自动对数据库的多站点数据进行清理,所以在重配置的时候会看到警告,也可能会出现花式错误。

    请参考官方链接:

    WP多站点网络创建

    WP多站点网络管理

    WP多站点网络的Debug

    在成功配置多站点后,一定要注意检查网站的固定链接结构!否则在网页中通过固定连接引用的页面会失效。

    如果多站点配置完成出现Cookie的相关错误,或者点击登录、操作需要等待响应等现象,可以配置wp-config.php添加:

    define(‘COOKIE_DOMAIN’, $_SERVER[‘HTTP_HOST’]);
    define(‘COOKIEPATH’, ‘/’);

    刷新站点缓存及本地缓存,重置Cookie后再尝试。

  • 【小贴士】WordPress中锚点注意事项

    开始之前,建议先阅读:WordPress官方关于锚点的介绍

    WordPress在现在的古登堡编辑器中,可以在“侧边栏-高级-HTML锚点”中很方便为页面添加锚点,但是这其中有一些建议和注意事项。

    问题1、锚点的地址设置

    在WP目前的设置中,如果我们在页面中将锚点前加上完整的URL,点击锚点时,(在某些浏览器中)页面跳转会非常突兀,Not elegant。

    示例:

    因此我们在同一页面中只要直接设置“#锚点”,就可以实现顺滑的跳转。

    问题2、锚点的唯一性

    这是接着问题1引申出来的,我们在每个单独页面中肯定是会注意到锚点的唯一性,但是多页面的锚点一旦多起来呢?重复的话会发生什么问题?

    在一般的用户场景这个问题并不显著,但是在WP的合集页面(目录、标签)中,如果我们有多个关于MV的文章,里面每个MV都在各自页面设置了“#MV”的锚点,那么WP在合计页面只能选择第一个文章的“#MV”锚点进行跳转。

    因此,我们可以在结合WP文章的URL结构,在每个锚点单词前加上对应文章URL的数字码,可以一定程度确保每个锚点的唯一性。


    演示区域

    这是一个锚点

  • 【网站】通过nginx为站点启用HTTP2

    启用过程还是比较简单的,但是过程让我学习到,问Ai之前先看官方手册,,,毕竟Ai的知识库不一定是最新的,而且会一本正经的胡说八道!

    过程:

    1、通过nginx -v检查nginx版本,翻阅nginx的官网手册对nginx配置文件进行编辑。

    2、配置文件server部分要注意是:

    server {
    listen 443 ssl;
    http2 on;
    }

    有些教程会告诉你是listen 443 ssl http2;这一语法已经在1.25.1版本之后被弃用了!所以如果你的nginx版本较高,参考官网的语法进行启用!

    3、按照你的需求配置其他选项。

    4、最重要的,编辑完毕使用nginx -t指令测试nginx的配置文件是否通过,然后重启nginx服务即可。

    效果:

    访问网站,检查协议是否为h2。

  • 【Python】使用cwebp、gif2webp、exiftool实现保留exif信息的WebP转换

    此前写了个使用cwebp、gif2webp的脚本,但是由于cwebp目前在win的元数据提取存在问题,因此我们可以使用已经支持exif提取和写入的exiftool进行最后一步的转换,这样我们的图片压缩、转码都在官方库得以实现。

    前置条件:

    cwebp、gif2webp、exiftool三个组件都注册到系统环境变量。python则使用pil库用于分辨率获取。

    实现效果:

    使用pil库对分辨率进行获取,但是不介入压缩过程,因为cwebp目前没法获取图片分辨率,使用pil库进行是否执行resize的判断。

    使用cwebp处理静态png、jpg,使用gif2webp处理gif图,启用mt多线程,压缩质量85,resize到2560最长、宽边,exiftool采用”-overwrite_original”来避免生成两个图片。

    测试效果:

    该图片原图7M多,压缩质量选择85,可能由于细节较为丰富,压缩到WebP大小仍为1M左右,还是比较大,不过细节保留充分,同时保留了EXIF信息。

    import tkinter as tk
    from tkinter import filedialog, messagebox
    import os
    import subprocess
    from PIL import Image
    
    def validate_file(input_path):
        input_path = os.path.abspath(input_path)
        if not os.path.exists(input_path):
            raise FileNotFoundError(f"文件 {input_path} 不存在,请检查路径。")
        return input_path
    
    def get_resized_dimensions(width, height, max_size):
        if width > height:
            new_width = max_size
            new_height = int((new_width / width) * height)
        else:
            new_height = max_size
            new_width = int((new_height / height) * width)
        return new_width, new_height
    
    def convert_image(input_path, output_path, new_width=None, new_height=None):
        try:
            file_extension = os.path.splitext(input_path)[1].lower()
            if file_extension == ".gif":
                command = ["gif2webp","mt", input_path, "-o", output_path]
            else:
                if new_width and new_height:
                    command = ["cwebp","mt", "-q", "85", "-resize", str(new_width), str(new_height), input_path, "-o", output_path]
                else:
                    command = ["cwebp","mt", "-q", "85", input_path, "-o", output_path]
            subprocess.run(command, check=True)
        except subprocess.CalledProcessError as e:
            raise RuntimeError(f"转换工具运行出错: {e}")
    
    def embed_exif(input_path, output_path):
        try:
            command = ["exiftool", "-overwrite_original", "-tagsfromfile", input_path, "-all:all", output_path]
            subprocess.run(command, check=True)
        except subprocess.CalledProcessError as e:
            raise RuntimeError(f"EXIF 数据嵌入失败: {e}")
    
    def convert_to_webp(input_path, max_size=2560):
        try:
            # 验证文件路径
            input_path = validate_file(input_path)
            output_path = os.path.splitext(input_path)[0] + ".webp"
    
            # 使用 PIL 获取图像分辨率
            with Image.open(input_path) as img:
                width, height = img.size
                if width <= max_size and height <= max_size:
                    convert_image(input_path, output_path)
                else:
                    new_width, new_height = get_resized_dimensions(width, height, max_size)
                    convert_image(input_path, output_path, new_width, new_height)
    
            # 嵌入 EXIF 数据
            embed_exif(input_path, output_path)
    
            return f"图片已转换并保存为 {output_path}"
    
        except (subprocess.CalledProcessError, FileNotFoundError) as e:
            return str(e)
        except Exception as e:
            return f"处理文件时发生错误: {e}"
    
    def select_files():
        file_paths = filedialog.askopenfilenames(
            title="选择图片文件",
            filetypes=[("*所有图片格式", "*.jpg;*.jpeg;*.png;*.gif"),
                       ("JPEG 图片", "*.jpg;*.jpeg"),
                       ("PNG 图片", "*.png"),
                       ("GIF 图片", "*.gif")]
        )
        if file_paths:
            for path in file_paths:
                file_listbox.insert(tk.END, path)
    
    def convert_and_save_batch():
        files = file_listbox.get(0, tk.END)
        if not files:
            messagebox.showerror("错误", "请选择至少一个图片文件!")
            return
    
        results = [convert_to_webp(file_path) for file_path in files]
        messagebox.showinfo("完成", "\n".join(results))
    
    def clear_list():
        file_listbox.delete(0, tk.END)
    
    root = tk.Tk()
    root.title("批量图片转换为 WebP 工具")
    root.geometry("600x400")
    
    frame = tk.Frame(root)
    frame.pack(pady=10, padx=10, fill=tk.BOTH, expand=True)
    
    scrollbar = tk.Scrollbar(frame, orient=tk.VERTICAL)
    file_listbox = tk.Listbox(frame, selectmode=tk.EXTENDED, yscrollcommand=scrollbar.set)
    scrollbar.config(command=file_listbox.yview)
    scrollbar.pack(side=tk.RIGHT, fill=tk.Y)
    file_listbox.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
    
    button_frame = tk.Frame(root)
    button_frame.pack(pady=10)
    
    select_button = tk.Button(button_frame, text="选择文件", command=select_files, width=15)
    select_button.grid(row=0, column=0, padx=5)
    
    clear_button = tk.Button(button_frame, text="清空列表", command=clear_list, width=15)
    clear_button.grid(row=0, column=1, padx=5)
    
    convert_button = tk.Button(button_frame, text="批量转换", command=convert_and_save_batch, width=15)
    convert_button.grid(row=0, column=2, padx=5)
    
    root.mainloop()
    
  • 【Python】使用WebP官方库进行WebP转换

    此前的代码使用了Pillow库集成的库,这次使用WebP官方库,对GIF、PNG的处理也比较友好。需要添加WebP的库到系统环境变量后使用。

    功能实现:

    代码使用cwebp、gif2webp两种方式转换不同的格式图片,使用库本身的压缩分辨率方法,压缩图片到2560最长、宽。

    对于gif,该代码可以实现对原图动态的保持,此前使用pillow库则可以设定gif的持续或者最后一帧静帧。

    遗憾:

    没有能够传递exif,win平台中cwebp压根没法有效传递exif信息,显示——Warning: only ICC profile extraction is currently supported on this platform!元数据只有ICC才能支持传递,所以只依靠cwebp是没法很好在win中进行转换的。

    这个问题采用exiftool进行了解决,下篇文章可以看到。

    import tkinter as tk
    from tkinter import filedialog, messagebox
    import os
    import subprocess
    from PIL import Image
    
    def validate_file(input_path):
        input_path = os.path.abspath(input_path)
        if not os.path.exists(input_path):
            raise FileNotFoundError(f"文件 {input_path} 不存在,请检查路径。")
        return input_path
    
    def get_resized_dimensions(width, height, max_size):
        if width > height:
            new_width = max_size
            new_height = int((new_width / width) * height)
        else:
            new_height = max_size
            new_width = int((new_height / height) * width)
        return new_width, new_height
    
    # 使用 cwebp 或 gif2webp 进行转换
    def convert_image(input_path, output_path, new_width=None, new_height=None, cwebp_metadata="none", gif2webp_metadata="none"):
        try:
            file_extension = os.path.splitext(input_path)[1].lower()
            if file_extension == ".gif":
                command = ["gif2webp", "-metadata", gif2webp_metadata, "-mt", input_path, "-o", output_path]
            else:
                if new_width and new_height:
                    command = ["cwebp", "-q", "85", "-resize", str(new_width), str(new_height), "-metadata", cwebp_metadata, "-mt", input_path, "-o", output_path]
                else:
                    command = ["cwebp", "-q", "85", "-metadata", cwebp_metadata, "-mt", input_path, "-o", output_path]
            subprocess.run(command, check=True)
        except subprocess.CalledProcessError as e:
            raise RuntimeError(f"转换工具运行出错: {e}")
    
    def convert_to_webp(input_path, max_size=2560, cwebp_metadata="none", gif2webp_metadata="none"):
        try:
            # 验证文件路径
            input_path = validate_file(input_path)
            output_path = os.path.splitext(input_path)[0] + ".webp"
    
            # 使用 PIL 获取图像分辨率
            with Image.open(input_path) as img:
                width, height = img.size
                if width <= max_size and height <= max_size:
                    convert_image(input_path, output_path, cwebp_metadata=cwebp_metadata, gif2webp_metadata=gif2webp_metadata)
                else:
                    new_width, new_height = get_resized_dimensions(width, height, max_size)
                    convert_image(input_path, output_path, new_width, new_height, cwebp_metadata=cwebp_metadata, gif2webp_metadata=gif2webp_metadata)
    
            return f"图片已转换并保存为 {output_path}"
    
        except (subprocess.CalledProcessError, FileNotFoundError) as e:
            return str(e)
        except Exception as e:
            return f"处理文件时发生错误: {e}"
    
    def select_files():
        file_paths = filedialog.askopenfilenames(
            title="选择图片文件",
            filetypes=[("*所有图片格式", "*.jpg;*.jpeg;*.png;*.gif"),
                       ("JPEG 图片", "*.jpg;*.jpeg"),
                       ("PNG 图片", "*.png"),
                       ("GIF 图片", "*.gif")]
        )
        if file_paths:
            for path in file_paths:
                file_listbox.insert(tk.END, path)
    
    def convert_and_save_batch():
        files = file_listbox.get(0, tk.END)
        if not files:
            messagebox.showerror("错误", "请选择至少一个图片文件!")
            return
    
        cwebp_metadata = "exif"  # 设置cwebp要复制的元数据类型为exif
        gif2webp_metadata = "xmp"  # 设置gif2webp要复制的元数据类型为xmp
        results = [convert_to_webp(file_path, cwebp_metadata=cwebp_metadata, gif2webp_metadata=gif2webp_metadata) for file_path in files]
        messagebox.showinfo("完成", "\n".join(results))
    
    def clear_list():
        file_listbox.delete(0, tk.END)
    
    # 创建主窗口
    root = tk.Tk()
    root.title("批量图片转换为 WebP 工具")
    root.geometry("600x400")
    
    frame = tk.Frame(root)
    frame.pack(pady=10, padx=10, fill=tk.BOTH, expand=True)
    
    scrollbar = tk.Scrollbar(frame, orient=tk.VERTICAL)
    file_listbox = tk.Listbox(frame, selectmode=tk.EXTENDED, yscrollcommand=scrollbar.set)
    scrollbar.config(command=file_listbox.yview)
    scrollbar.pack(side=tk.RIGHT, fill=tk.Y)
    file_listbox.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
    
    button_frame = tk.Frame(root)
    button_frame.pack(pady=10)
    
    select_button = tk.Button(button_frame, text="选择文件", command=select_files, width=15)
    select_button.grid(row=0, column=0, padx=5)
    
    clear_button = tk.Button(button_frame, text="清空列表", command=clear_list, width=15)
    clear_button.grid(row=0, column=1, padx=5)
    
    convert_button = tk.Button(button_frame, text="批量转换", command=convert_and_save_batch, width=15)
    convert_button.grid(row=0, column=2, padx=5)
    
    root.mainloop()
    
  • 【灰原 哀】收藏的灰原哀表情包

    这个图库是来自历年官方活动或者联名活动的表情包,有动态有静态。

    以下是我自己编辑的表情包,主要是修改B站的静态表情包。

  • 【Python】使用PIL库进行多格式批量转换WebP并压缩分辨率

    网站将逐步切换到WebP格式图片,今天捣鼓了插件在服务器端替换图片,但WP的媒体库却怎么都搞不定了,媒体库会自动生成很多缩略图用于不同的场景,我不想碰它的缩略图生成效果,因此只写单一的转换代码是没法做出完整的效果的。

    退而求其次使用本地对图片进行处理,该脚本使用PIL库,图片分辨率限制为2560最长/宽,可以处理带透明通道的图片,也可以处理GIF,用下来效果还不错。

    1月8日更新:

    【Python】使用WebP官方库进行WebP转换
    【Python】使用cwebp、gif2webp、exiftool实现保留exif信息的WebP转换

    import tkinter as tk
    from tkinter import filedialog, messagebox
    from PIL import Image, ImageSequence
    import os
    
    def resize_image(img):
        max_size = 2560
        width, height = img.size
    
        if width > max_size or height > max_size:
            if width > height:
                new_width = max_size
                new_height = int((new_width / width) * height)
            else:
                new_height = max_size
                new_width = int((new_height / height) * width)
            
            img = img.resize((new_width, new_height), Image.LANCZOS)
        
        return img
    
    def convert_to_webp(input_path):
        try:
            file_extension = os.path.splitext(input_path)[1].lower()
            output_path = os.path.splitext(input_path)[0] + ".webp"
    
            if not os.path.exists(input_path):
                raise FileNotFoundError(f"文件 {input_path} 不存在,请检查路径。")
    
            if file_extension == '.webp':
                return f"文件 {input_path} 已是 WebP 格式,无需转换。"
    
            with Image.open(input_path) as img:
                if file_extension in ['.gif'] and getattr(img, "is_animated", False):
                    frames = []
                    durations = []
                    for frame in ImageSequence.Iterator(img):
                        # 处理透明度
                        if frame.mode == "P":
                            frame = frame.convert("RGBA")
                        
                        # 转换帧为 RGBA 并存储
                        new_frame = frame.copy()
                        frames.append(new_frame)
                        durations.append(frame.info.get('duration', 100))
    
                    # 重复最后一帧
                    if len(frames) > 1:
                        durations[-1] = max(durations[-1], 100) 
    
                    # 保存为动态 WebP
                    frames[0].save(
                        output_path,
                        format="WEBP",
                        save_all=True,
                        append_images=frames[1:],
                        duration=durations,
                        loop=img.info.get('loop', 0),  # 循环次数
                        transparency=0,  # 确保透明度保留
                        quality=85
                    )
                else:
                    # 静态图片处理
                    if img.mode == "P":
                        if "transparency" in img.info:
                            img = img.convert("RGBA")
                        else:
                            img = img.convert("RGB")
    
                    img = resize_image(img)
    
                    if img.mode != "RGBA":
                        img = img.convert("RGBA")
    
                    img.save(output_path, format="WEBP", quality=85)
    
            return f"图片已转换并保存为 {output_path}"
        except Exception as e:
            return f"处理文件时发生错误: {e}"
    
    
    def select_files():
        file_paths = filedialog.askopenfilenames(
            title="选择图片文件",
            filetypes=[("所有图片格式", "*.jpg;*.jpeg;*.png;*.gif;*.webp;*.bmp;*.tiff"), 
                       ("JPEG 图片", "*.jpg;*.jpeg"),
                       ("PNG 图片", "*.png"),
                       ("GIF 图片", "*.gif"),
                       ("WebP 图片", "*.webp"),
                       ("BMP 图片", "*.bmp"),
                       ("TIFF 图片", "*.tiff")]
        )
        if file_paths:
            for path in file_paths:
                file_listbox.insert(tk.END, path)
    
    def convert_and_save_batch():
        files = file_listbox.get(0, tk.END)
        if not files:
            messagebox.showerror("错误", "请选择至少一个图片文件!")
            return
    
        results = []
        for file_path in files:
            result = convert_to_webp(file_path)
            results.append(result)
    
        messagebox.showinfo("完成", "\n".join(results))
    
    def clear_list():
        file_listbox.delete(0, tk.END)
    
    root = tk.Tk()
    root.title("批量图片转换为 WebP 工具")
    root.geometry("600x400")
    
    frame = tk.Frame(root)
    frame.pack(pady=10, padx=10, fill=tk.BOTH, expand=True)
    
    scrollbar = tk.Scrollbar(frame, orient=tk.VERTICAL)
    file_listbox = tk.Listbox(frame, selectmode=tk.EXTENDED, yscrollcommand=scrollbar.set)
    scrollbar.config(command=file_listbox.yview)
    scrollbar.pack(side=tk.RIGHT, fill=tk.Y)
    file_listbox.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
    
    button_frame = tk.Frame(root)
    button_frame.pack(pady=10)
    
    select_button = tk.Button(button_frame, text="选择文件", command=select_files, width=15)
    select_button.grid(row=0, column=0, padx=5)
    
    clear_button = tk.Button(button_frame, text="清空列表", command=clear_list, width=15)
    clear_button.grid(row=0, column=1, padx=5)
    
    convert_button = tk.Button(button_frame, text="批量转换", command=convert_and_save_batch, width=15)
    convert_button.grid(row=0, column=2, padx=5)
    
    root.mainloop()
  • 【动漫音乐】名侦探柯南动画ED72《Shooting star》现已推出!含大量灰原镜头

    《名侦探柯南》的新片尾主题“流星”现已推出!根据动画的内容和音乐发布的时间,看得出是为了灰原哀TV动画初登场的日子推出的。(1999年1月4日灰原哀在《名侦探柯南》TV动画初登场)

    但是结尾是新兰一起看星星,这也是CD专辑柯南版的封面。我不知道策划怎么想的,可以预见及看到的是各大评论区又开始了争论,新兰党对着封面美滋滋,表示吃到了糖,柯哀党觉得是新兰一起看Shiho(志保),我不知道这次策划怎么想的,反正流量这块是玩明白了。

    本次CD特典版会有立牌附送,当然角色也是新兰,看着这背影,看看这作画,抛开立场,现在这个画风看的我真是无语凝噎,看着这脸型和发行,制作人员你们面对你们画的东西,真的不会心痛吗/(ㄒoㄒ)/~~

  • 【自然笔记】通过ECharts建立观鸟图表

    (!该内容目前只做测试,分类未经过严格验证)

    通过模板函数引入ECharts的js,不过这次限制了只有“Echarts”标签的文章加载,避免影响其他界面的加载速度。

    切换图表类型

    效果如上:采用了矩形树图+旭日图,感觉旭日图更加醒目,通过点击标题来切换图表类型。

    <div id="chart-title" style="text-align: center; font-size: 20px; margin-top: 10px; cursor: pointer; color: #007BFF;">
        切换图表类型
    </div>
      document.getElementById('chart-title').addEventListener('click', function () {
                    if (currentOption === 'treemap') {
                        myChart.setOption(sunburstOption);
                        currentOption = 'sunburst';
                    } else {
                        myChart.setOption(treeMapOption);
                        currentOption = 'treemap';
                    }
                });
            });

  • 【WP插件】通过插件形式为WP导入回到顶部功能

    网站此前用的回到顶部按钮是通过插件市场中的插件实现,效果还不错,不过功能比较单一。

    我在其他的博客中看到了一个可以在页面下拉过程中实现当前页面进度的回顶按钮,觉得实用性很棒,因此尝试通过页面脚本的形式导入。

    但是这种方式过于低效,且没法很好自定义,所以便尝试是否可以通过插件的形式导入功能,通过和GPT的一番交流,大致明白了WP插件的制作过程。

    WP的插件可以通过Zip文件导入,其中的结构为:

    backtop/
    ├── assets/
    │ ├── backtop.css
    │ └── backtop.js
    ├── backtop.php
    └── readme.txt (可选)

    其中backtop.php是插件的核心文件,包含了插件的主要功能和初始化代码。

    backtop.css为样式表,js则是JavaScript 文件,写交互逻辑使用。

    参考代码:

    PHP:

    <?php
    /*
    Plugin Name: 写你的插件名称
    Description: 描述
    Version: 版本号
    Author: 作者
    Author URI: https://wanxuefeiyang.cn
    License: GPL2
    */
    
    // Enqueue CSS and JS,注意地址
    function backtop_enqueue_assets() {
        wp_enqueue_style('backtop-style', plugin_dir_url(__FILE__) . 'assets/backtop.css');
        wp_enqueue_script('backtop-script', plugin_dir_url(__FILE__) . 'assets/backtop.js', [], false, true);
    
        $options = get_option('backtop_options');
        wp_localize_script('backtop-script', 'backTopOptions', [
            'position' => $options['position'] ?? 'bottom-right',
            'color' => $options['color'] ?? '#000000',
            'size' => $options['size'] ?? '40px',
            'shape' => $options['shape'] ?? 'circle',
            'margin' => $options['margin'] ?? '20px 20px'
        ]);
    }
    add_action('wp_enqueue_scripts', 'backtop_enqueue_assets');
    
    // 插入 HTML
    function backtop_render_html() {
        echo '
        <div id="backtop-tool">
            <ul>
                <li id="backtop" class="hidden">
                    <span id="backtop-percentage">0%</span>
                </li>
            </ul>
        </div>';
    }
    add_action('wp_footer', 'backtop_render_html');
    
    // 设置页面,可以自定义一些内容
    function backtop_add_settings_page() {
        add_options_page(
            'BackTop Settings',
            'BackTop',
            'manage_options',
            'backtop-settings',
            'backtop_render_settings_page'
        );
    }
    add_action('admin_menu', 'backtop_add_settings_page');
    
    function backtop_render_settings_page() {
        ?>
        <div class="wrap">
            <h1>BackTop Settings</h1>
            <form method="post" action="options.php">
                <?php
                settings_fields('backtop_options_group');
                do_settings_sections('backtop-settings');
                submit_button();
                ?>
            </form>
        </div>
        <?php
    }
    
    function backtop_register_settings() {
        register_setting('backtop_options_group', 'backtop_options', [
            'type' => 'array',
            'sanitize_callback' => 'backtop_sanitize_options',
            'default' => [
                'position' => 'bottom-right',
                'color' => '#000000',
                'size' => '40px',
                'shape' => 'circle',
                'margin' => '20px 20px'
            ],
        ]);
    
        add_settings_section('backtop_main_section', 'Main Settings', null, 'backtop-settings');
    
        add_settings_field('position', 'Position', 'backtop_position_field', 'backtop-settings', 'backtop_main_section');
        add_settings_field('color', 'Background Color', 'backtop_color_field', 'backtop-settings', 'backtop_main_section');
        add_settings_field('size', 'Button Size', 'backtop_size_field', 'backtop-settings', 'backtop_main_section');
        add_settings_field('shape', 'Shape', 'backtop_shape_field', 'backtop-settings', 'backtop_main_section');
        add_settings_field('margin', 'Margin', 'backtop_margin_field', 'backtop-settings', 'backtop_main_section');
    }
    add_action('admin_init', 'backtop_register_settings');
    
    function backtop_position_field() {
        $options = get_option('backtop_options');
        ?>
        <select name="backtop_options[position]">
            <option value="bottom-right" <?php selected($options['position'], 'bottom-right'); ?>>Bottom Right</option>
            <option value="bottom-left" <?php selected($options['position'], 'bottom-left'); ?>>Bottom Left</option>
        </select>
        <?php
    }
    
    function backtop_color_field() {
        $options = get_option('backtop_options');
        ?>
        <input type="color" name="backtop_options[color]" value="<?php echo esc_attr($options['color']); ?>">
        <?php
    }
    
    function backtop_size_field() {
        $options = get_option('backtop_options');
        ?>
        <input type="text" name="backtop_options[size]" value="<?php echo esc_attr($options['size']); ?>" placeholder="e.g., 40px">
        <?php
    }
    
    function backtop_shape_field() {
        $options = get_option('backtop_options');
        ?>
        <select name="backtop_options[shape]">
            <option value="circle" <?php selected($options['shape'], 'circle'); ?>>Circle</option>
            <option value="square" <?php selected($options['shape'], 'square'); ?>>Square</option>
        </select>
        <?php
    }
    
    function backtop_margin_field() {
        $options = get_option('backtop_options');
        ?>
        <input type="text" name="backtop_options[margin]" value="<?php echo esc_attr($options['margin']); ?>" placeholder="e.g., 20px 20px">
        <?php
    }
    
    function backtop_sanitize_options($options) {
        $options['position'] = in_array($options['position'], ['bottom-right', 'bottom-left']) ? $options['position'] : 'bottom-right';
        $options['color'] = sanitize_hex_color($options['color']);
        $options['size'] = preg_match('/^\d+(px|em|%)$/', $options['size']) ? $options['size'] : '40px';
        $options['shape'] = in_array($options['shape'], ['circle', 'square']) ? $options['shape'] : 'circle';
        $options['margin'] = sanitize_text_field($options['margin']);
        return $options;
    }

    JS:

    (function () {
      const backTopTool = document.getElementById("backtop-tool");
      const backTopButton = document.getElementById("backtop");
      const percentageDisplay = document.getElementById("backtop-percentage");
    
      if (backTopTool && backTopButton) {
        const { position, color, size, shape, margin } = backTopOptions || {};
        const [vertical, horizontal] = position.split("-");
        const [marginY, marginX] = margin.split(" ");
        backTopTool.style[vertical] = marginY || "20px";
        backTopTool.style[horizontal] = marginX || "20px";
        backTopButton.style.backgroundColor = color || "#000";
        backTopButton.style.width = size || "40px";
        backTopButton.style.height = size || "40px";
        backTopButton.style.borderRadius = shape === "circle" ? "50%" : "0";
        percentageDisplay.style.fontSize = `${Math.max(parseInt(size) * 0.4, 8)}px`;
      }
    
      const updateScrollProgress = () => {
        const scrollTop = window.scrollY;
        const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        const scrollPercentage = Math.round((scrollTop / scrollHeight) * 100);
    
        if (percentageDisplay) {
          percentageDisplay.innerHTML = scrollPercentage >= 95 ? "▲" : `${scrollPercentage}%`;
        }
    
        if (backTopButton) {
          backTopButton.classList.toggle("hidden", scrollTop < 200);
        }
      };
    
      const scrollToTop = () => {
        window.scrollTo({ top: 0, behavior: "smooth" });
      };
    
      backTopButton?.addEventListener("click", scrollToTop);
      window.addEventListener("scroll", updateScrollProgress);
    })();

    CSS:

    #backtop-tool {
      position: fixed;
      z-index: 9999;
    }
    
    #backtop-tool ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    #backtop-tool .hidden {
      display: none;
    }
    
    #backtop-tool li {
      display: flex; 
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
      width: var(--size, 40px);
      height: var(--size, 40px);
      background: var(--color, rgba(0, 0, 0, 0.7));
      color: #fff;
      border-radius: var(--shape, 50%);
      cursor: pointer;
      font-size: calc(var(--size, 40px) * 0.4); /* 根据按钮大小动态调整字体 */
      text-align: center; /* 对齐数字文本 */
      overflow: hidden;
      box-sizing: border-box;
    }

    管理界面如下:

    从插件制作到实现的过程,给我的感觉是通过插件对页面、功能进行修改,可以避免我们干扰WP核心文件,让页面中的其他功能不受影响,对灵活性、安全性都有一定的增强,这对于我这种半桶水来说非常利好,即便哪里设置错了直接把插件删了就好嘛,可玩性很高。