使用ChatGPT修改WPOSS插件代码

问题场景

很多用户反馈动态图片为什么到我们网站上就不动了呢

相关阅读 【ChatGPT零基础教程】从注册到使用，完整教程 1个月前22668610 解决思路

首先，我们需要定位问题

我们是在选择模式中，选择的自定义规则，规则是阿里云OSS的图片处理那边打的水印

动图为什么不能加载呢，因为水印打上去之后，就只能加载一帧了 。所以如果要修复这个问题，我们需要对WPOSS插件的自定义规则进行优化，让它不对GIF图片增加样式，就可以解决这个问题。

因此，我们下载WPOSS插件的代码，导入vscode，先定位代码位置

我们可以看到代码如下

我们可以看到自定义规则应该是这个变量存储并传输的

$this->options[‘opt’][‘img_process’][‘style_value’]

因此我们继续搜索这个变量，Setting.php文件不用看了，因为是设置使用的。因此我们现在重点关注index.php文件

可以看到核心代码如下

public function image_display_processing($content){ if ( isset($this->options[‘opt’][‘img_process’]) && $this->options[‘opt’][‘img_process’][‘switch’] ) { $media_url = get_option(‘upload_url_path’); $pattern = ‘#image_display_default_tab . $this->options[‘opt’][‘img_process’][‘style_value’], $matches[0]); } }, $content); } return $content; }

大概思路应该是先用正则表达式匹配了img标签，然后提取src中的图片链接，之后使用替换的函数增加图片样式，实际效果如下，在原有图片后面增加的样式

接下来我们进入提需求，获得代码的环节

ChatGPT修改代码

首先我们需要提出需求

然后看看AI是怎么回答的吧

可以看到在代码中增加了以下内容，对图片后缀使用pathinfo进行了判断

这样动图就不加样式了，因此，动图又可以动起来了，而且是可以直接在页面动起来

当然，我们也把AI生成的代码放到最后吧

修改的代码

wposs/index.php文件中，第401行，将下面代码

public function image_display_processing($content){ if ( isset($this->options[‘opt’][‘img_process’]) && $this->options[‘opt’][‘img_process’][‘switch’] ) { $media_url = get_option(‘upload_url_path’); $pattern = ‘#image_display_default_tab . $this->options[‘opt’][‘img_process’][‘style_value’], $matches[0]); } }, $content); } return $content; }

修改为

public function image_display_processing($content){ if ( isset($this->options[‘opt’][‘img_process’]) && $this->options[‘opt’][‘img_process’][‘switch’] ) { $media_url = get_option(‘upload_url_path’); $pattern = ‘#image_display_default_tab . $this->options[‘opt’][‘img_process’][‘style_value’], $matches[0]); } } }, $content); } return $content; }