開發 WordPress AI 外掛：一次與 Cloudflare Worker 和 WordPress 的左右互搏 Building a WordPress AI Plugin: A Battle with Cloudflare Workers and WordPress

Since I have friends still working hard in the field of news reporting, and I wanted to use AI to help them out, I’ve been iteratively developing writing assistance features. The WordPress plugin completed this time has the following main features:

• Text Rewriting: Supports customizable prompt templates (e.g., news editing, professional style).
• Image Alt Text: Automatically generates accessible descriptions (alt text) for images.
• Article Rewriting: Reshapes the entire article while preserving the original format, requiring text-image interspersion.

The origin of this text record is that I initially asked Claude to generate it using my commit log. However, the output was too mechanical, and I couldn’t stand reading it, so I started thinking about how to improve it.

I tried finding my tweets on Twitter, wanting to use AI to analyze my writing style, but the article analyzed from tweets was too sharp, resulting in a writing style that was “strange, mechanical, sharp, and contrived” - I really couldn’t swallow it.

So, I used voice input to ramble on about a bunch of improvements to the AI-generated draft, and finally produced this blog post. I think this version is more acceptable and reads more approachably.

In the end, I still went through manual editing of half the content. Letting AI generate text directly is really not a good idea. Based on this experience, I think it would be better to generate a framework for rewriting.

This is a development record of approximately 30 hours, with the goal of creating a WordPress plugin that can integrate with multiple AI providers (Gemini, OpenAI, Anthropic). The core requirement was to use Cloudflare Workers as a secure proxy to prevent any API keys from being exposed on the frontend.

The final product was expected to rewrite text, generate alternative descriptions for images, and reshape the structure of entire articles.

It sounds like a good plan. However, during development, I found that the real challenge wasn’t the complexity of the code, but rather my unfamiliarity with the characteristics of these tools, and the major pitfalls I stepped into as a result.

I mainly used Cloudflare Worker as the entry point for API calls, having gained some familiarity with it from previous uses.

Using the Worker’s functionality combined with a whitelist as a defense layer, ensuring only authorized users could access it.

The flow was clear: WordPress requests were sent to Cloudflare Worker, which acted as a proxy to communicate with the backend AI API, and then sent the results back.

The beginning is always the smoothest. Development started from the most basic structure: setting up the project and attempting to integrate with the WordPress ecosystem.

In short, I created two folders: worker/ and plugin/ directories to house Cloudflare and WordPress code respectively.

WordPress converted images to base64 encoding, which Worker then passed to Gemini for analysis and description generation. Then I added i18n to the plugin interface, which was a piece of cake for Claude. Since I had already iterated through several versions of using Gemini to analyze images and text, this part went very quickly.

As advanced features were added, some troubles began to brew.

API usage tracking was a necessary feature. To prevent usage from getting out of control, I used Cloudflare KV to build a simple usage dashboard. However, it couldn’t work properly at first - it could read but couldn’t write.

Further adding the customizable prompt template feature, allowing users to customize prompts. Then there was another strange problem - I don’t know if it’s Gemini or other AIs that have similar behavior - when generating articles, it would also randomly generate image URLs, supposedly to protect content…? So I couldn’t pass it as plain text to the AI; I had to use markdown format so the AI wouldn’t modify URLs. Of course, I also needed to use canvas to shrink images to speed up the generation process.

In the late development stage, all accumulated technical debt and my unfamiliarity with certain aspects exploded together.

During testing, an error message kept appearing: “Unable to create scaled image blob”. After looking at various logs, I finally caught the “silent failure” of canvas.toBlob(). The culprit was: CORS and canvas tainting. If CORS isn’t resolved, canvas can’t render correctly, and of course I couldn’t convert images to text.

The second problem was that even though I was using the API, it wasn’t successfully converting to Cloudflare KV record data. When testing the API with curl, everything seemed smooth, but the values in the Cloudflare KV storage were always 0. Even more bizarre, when tested separately, everything worked normally - KV and the program itself had no issues; but in real scenarios, it would fail.

After repeated examination, I discovered the problem came from a characteristic of Cloudflare Workers: it’s a temporary worker, not a permanent one. After sending a response to the client, its lifecycle stops, and the record doesn’t have time to be written. So I needed to use ctx.waitUntil() to wrap this asynchronous task.

The culmination of approximately 30 hours of effort was a system consisting of over 1,200 lines of TypeScript (Cloudflare Worker) and nearly 2,000 lines of PHP/JavaScript (WordPress plugin). It supports multiple AI providers, can process images, track usage, and is integrated into the WordPress block editor.

Building a working program on serverless for the first time was indeed quite interesting. I learned a lot and feel this is the best example of enhancing one’s development capabilities through AI (and not being so easily discouraged during the learning process).

Maintain healthy skepticism toward the tools you use, test thoroughly, and leave detailed logs - your future self will be extremely grateful. Then learn to embrace limitations, use limitations to stimulate creativity, and examine knowledge you thought you had.