FTP管理のデブログをWordPress管理にしました♪

The Devlog Has Moved from FTP to WordPress!

Why I Originally Used FTP

I add furigana (reading guides) to most of my articles so that more people can enjoy reading them. However, when I used many <ruby> tags, the security system called WAF (Web Application Firewall) sometimes mistakenly detected the code as dangerous and prevented me from saving my articles. To work around this problem, I stored my devlog articles in files on the server and had WordPress read those files via FTP (File Transfer Protocol).

Why I Stopped Using FTP

When storing files via FTP, I had to add the Google tag used to record page views to each page individually. I had to obtain the tag through Google Analytics, and the process was somewhat complicated. Getting a new tag every time I wrote an article felt like a lot of work. With WordPress, visitor data can be managed centrally, making the process much easier.

WordPress also allows me to use related-content links and the site's shared header and footer. This makes it easier for visitors to explore other content on the site, so I decided to move the devlog to WordPress.

What Made the Process Difficult

The main challenge was finding a way to work around the WAF while managing everything in WordPress. At first, I tried saving each item in a meta box (an input field in the editing screen), but that did not work well. I then tried saving the required information in the main content editor, but that did not work either. In the end, I adopted a hybrid approach: use the meta boxes whenever saving works, and read the files stored via FTP whenever saving through the meta boxes fails.

The idea was simple: “If Plan A doesn't work, try Plan B.” It took many rounds of code revisions with Claude to get to this solution.

What's Improved in the WordPress Version

Normally, I create related links by writing the required code in a Custom HTML block. This time, I built a system to automate the process. I added a “Related Items” field to the article editor. When I enter a URL there, the system retrieves and displays a thumbnail or a social media image.

The links originally consisted of text only, but I thought thumbnails would make them more exciting, so I switched to thumbnail links. I also added a subtle wobble animation to the thumbnails. On a computer, a hover effect can enlarge a linked image when you move the mouse over it. However, hover effects do not work the same way on smartphones, so I created a shared animation that can be enjoyed on both computers and smartphones.