🕘 Як написати плагін для Wordpress за допомогою chatGPT4 ( ͡° ͜ʖ ͡°) Промпти ✍️

Як ChatGPT4 написав плагін для WordPress з налаштуваннями з адмінки і докладною інструкцією за 2 години, попутно заощадивши мені ~ 200$.

Отже, я написав плагін для WP за допомогою chatGPT4

Плагін автоматично конвертує всі завантажені в галерею зображення #jpg #png у формат webp, який любить Google
Змінює роздільну здатність на задану в налаштуваннях плагіна
Стискає без видимої втрати якості.

Усе почалося зі створення сайту і чек-листа з його наповнення для художниці. З айтішкою вона на “ВИ”, а в списку добра 1/3 пунктів це оптимізація зображень перед завантаженням у галерею WP

Зміну роздільної здатності, конвертацію в .webp і стиснення картинок мені захотілося автоматизувати

Написав ТЗ, уже думав відправити на фріланс-біржу, але тут мене відвідала ідея “чому б не спробувати написати цей плагін за допомогою ChatGPT? Раптом вийде?”

На той момент я бачив уже багато позитивного зворотного зв’язку від людей, які пишуть код за допомогою ChatGPT-4

Перший запит до GPT-4 мав такий вигляд. Мені не вірилося, що за підсумком нейронка віддасть робочий плагін, який повністю відповідає ТЗ.

Напиши плагін для wordpress: кожне завантажене в галерею зображення у форматах – jpg, jpeg, png, gif – потрібно автоматично конвертувати у формат webp, а також змінювати роздільну здатність на 1200 завширшки, а висота щоб підлаштовувалася відповідно. Також зображення має стискатися (для зменшення ваги), але з мінімальними втратами.

eng

Write a plugin for wordpress: every image uploaded to the gallery in the formats – jpg, jpeg, png, gif – should be automatically converted to webp format and also change the resolution to 1200 wide, and the height to adjust accordingly. Also the image should be compressed (to reduce weight), but with minimal loss.

Для створення такого плагіна нам потрібно знати PHP та API WordPress. Ось базовий приклад коду плагіна, який робить те, про що ви питали:

Спочатку створіть нову папку в wp-content/plugins/ із назвою, наприклад, webp-converter.
У цій папці створіть файл webp-converter.php і вставте наступний код:

<?php
/**
* Plugin Name: WebP Converter
* Description: Конвертує завантажені зображення в формат WebP і змінює їх розмір.
* Version: 1.0
* Author: ChatGPT
*/

add_filter('wp_generate_attachment_metadata', 'convert_to_webp', 10, 2);

function convert_to_webp($metadata, $attachment_id) {
$upload_dir = wp_upload_dir();
$image_path = $upload_dir['basedir'] . '/' . $metadata['file'];

// Перевіряємо, чи це зображення із потрібним розширенням
$pathinfo = pathinfo($image_path);
if (!in_array(strtolower($pathinfo['extension']), ['jpg', 'jpeg', 'png', 'gif'])) {
return $metadata;
}

// Змінюємо розмір
$image_editor = wp_get_image_editor($image_path);
if (!is_wp_error($image_editor)) {
$image_editor->resize(1200, null, false);
$saved_image = $image_editor->save($image_path);

// Конвертуємо у WebP
$webp_path = $pathinfo['dirname'] . '/' . $pathinfo['filename'] . '.webp';
$image_editor->save($webp_path, 'image/webp');

// Видаляємо оригінальне зображення
unlink($image_path);
}

return $metadata;
}

Активуйте плагін в адмінці WordPress.

Цей код буде конвертувати завантажені зображення в формат WebP після їхнього завантаження. Він також змінює розмір зображення на 1200px по ширині, а висота підлаштовується автоматично.

Зверніть увагу, що цей плагін може не працювати на всіх серверах або в усіх конфігураціях. Необхідно також враховувати, що для роботи цього плагіна потрібна підтримка GD або Imagick на вашому сервері.

Зверніть увагу, що це лише базовий приклад, і ви можете розширити його залежно від ваших потреб. Наприклад, додавши можливість користувачу вибирати роздільну здатність чи ступінь стиснення.

Далі я просто сказав “Продовжуй“.

Давайте розширимо наш плагін, додавши йому сторінку налаштувань у панелі адміністратора WordPress. Ця сторінка дозволить користувачам вибирати роздільну здатність і ступінь стиснення для конвертованих зображень.

Додайте сторінку налаштувань

Додайте наступний код до файлу webp-converter.php:

add_action('admin_menu', 'webp_converter_settings_page');

function webp_converter_settings_page() {
add_options_page(
'WebP Converter Settings',
'WebP Converter',
'manage_options',
'webp-converter',
'webp_converter_settings_page_content'
);
}

function webp_converter_settings_page_content() {
// зберігаємо налаштування, якщо форма була відправлена
if (isset($_POST['webp_converter_width'])) {
update_option('webp_converter_width', intval($_POST['webp_converter_width']));
update_option('webp_converter_quality', intval($_POST['webp_converter_quality']));
}

$width = get_option('webp_converter_width', 1200);
$quality = get_option('webp_converter_quality', 90);

echo '<div class="wrap">';
echo '<h1>WebP Converter Settings</h1>';
echo '<form method="post">';

echo '<table class="form-table">';
echo '<tr>';
echo '<th scope="row"><label for="webp_converter_width">Width:</label></th>';
echo '<td><input type="number" id="webp_converter_width" name="webp_converter_width" value="' . $width . '" /></td>';
echo '</tr>';
echo '<tr>';

Використовуйте налаштування у функції конвертації

Змініть функцію convert_to_webp, щоб вона використовувала ці налаштування:

function convert_to_webp($metadata, $attachment_id) {
// ...

// Використовуйте налаштування з бази даних
$width = get_option('webp_converter_width', 1200);
$quality = get_option('webp_converter_quality', 90);

$image_editor = wp_get_image_editor($image_path);
if (!is_wp_error($image_editor)) {
$image_editor->resize($width, null, false);
$image_editor->set_quality($quality);
// ...
}

return $metadata;
}

Тепер у вас є плагін, який не лише конвертує завантажені зображення до формату WebP та змінює їх розмір, але також дозволяє користувачам налаштовувати ці параметри з панелі адміністратора WordPress.

Після додавання цього коду, активуйте плагін і перейдіть до сторінки налаштувань (Settings > WebP Converter), щоб налаштувати його за вашими потребами.

Візьми першу версію плагіна і додай налаштування в адмінку, щоб можна було вибрати роздільну здатність (висота і ширина в пікселях), але якщо задається тільки ширина або тільки висота, то другий параметр підлаштовується пропорційно. Також додай до налаштувань рівень стиснення – потрібно стискати кожне зображення після того, як воно буде сконвертоване у формат webp.

Зрозуміло. Я врахую ваші вимоги і додам відповідні налаштування до плагіна.

Додайте сторінку налаштувань до адмінки

Розширте файл webp-converter.php наступним чином:

// ... Початковий коментар плагіна та фільтр ...

add_action('admin_menu', 'webp_converter_settings_page');

function webp_converter_settings_page_content() {
// зберігаємо налаштування, якщо форма була відправлена
if (isset($_POST['webp_converter_width']) || isset($_POST['webp_converter_height']) || isset($_POST['webp_converter_quality'])) {
update_option('webp_converter_width', intval($_POST['webp_converter_width']));
update_option('webp_converter_height', intval($_POST['webp_converter_height']));
update_option('webp_converter_quality', intval($_POST['webp_converter_quality']));
}

$width = get_option('webp_converter_width', 1200);
$height = get_option('webp_converter_height', ''); // Пусте за замовчуванням
$quality = get_option('webp_converter_quality', 90);

echo '<div class="wrap">';
echo '<h1>WebP Converter Settings</h1>';
echo '<form method="post">';

echo '<table class="form-table">';
echo '<tr>';
echo '<th scope="row"><label for="webp_converter_width">Width (px):</label></th>';
echo '<td><input type="number" id="webp_converter_width" name="webp_converter_width" value="' . $width . '" /></td>';
echo '</tr>';
echo '<tr>';
echo '<th scope="row"><label for="webp_converter_height">Height (px):</label></th>';
echo '<td><input type="number" id="webp_converter_height" name="webp_converter_height" value="' . $height . '" /></td>';
echo '</tr>';
echo '<tr>';
echo '<th scope="row"><label for="webp_converter_quality">Quality (10-100):</label></th>';
echo '<td><input type="number" id="webp_converter_quality" name="webp_converter_quality" value="' . $quality . '" min="10" max="100" /></td>';
echo '</tr>';
echo '</table>';

echo '<p class="submit"><input type="submit" class="button-primary" value="Save Changes" /></p>';

echo '</form>';
echo '</div>';
}

// ...

Використовуйте налаштування у функції конвертації

Змініть функцію convert_to_webp, щоб вона використовувала ці налаштування:

function convert_to_webp($metadata, $attachment_id) {
// ...

$width = get_option('webp_converter_width', 1200);
$height = get_option('webp_converter_height', '');
$quality = get_option('webp_converter_quality', 90);

$image_editor = wp_get_image_editor($image_path);
if (!is_wp_error($image_editor)) {
$image_editor->resize($width, $height, false);
$image_editor->set_quality($quality);

// ... Зберігання WebP і видалення оригіналу ...
}

return $metadata;
}

У цьому коді, якщо користувач встановлює лише висоту або ширину, інший параметр буде автоматично визначений пропорційно завдяки функції resize() в WordPress.

Тепер у вас є плагін, який дозволяє користувачам налаштовувати розмір та якість конвертованих зображень через панель адміністратора WordPress.

Я все зробив за інструкцією, встановив плагін у WP, активував його. І… під час завантаження зображення в галерею система видала помилку. Це перше моє розчарування.

Але варто згадати, що варіантів рішення було 3, про 2-й варіант було написано:

PHP бібліотека imagick – більш надійне і продуктивне рішення для роботи із зображеннями.

Тому я віддав ChatGPT-4 нове завдання, з повним ТЗ на основі бібліотеки imagick

ChatGPT-4 віддав мені новий плагін, з рішенням на основі бібліотеки imagick. Але і тут з’явився збій. Я почав розуміти, що все не так просто)))

Увімкнув режим налагодження у файлі wp-config.php:

define( ‘WP_DEBUG’, true );

Далі скопіював увесь текст помилки і відправив у чат.

Відповідь надійшла негайно.

Було ще кілька помилок, я вставляв їх у чат і мені одразу приходили рішення.

У підсумку я відправив на аудит весь код, нейронка виправила невідповідності, пройшло ще кілька ітерацій з помилками і плагін запрацював відповідно до ТЗ!

Єдина довга заморочка була в тому, що параметри зображення – вага, роздільна здатність і формат – відображалися в галереї на основі оригіналу, тоді як саме зображення було оптимізовано. Але ChatGPT-4 впорався і з цим.

Висновки:

Модель ChatGPT-4 близько підійшла до того, щоб стати заміною розробникам, але це не чарівна паличка, яка відразу все зробить ідеально;
У ChatGPT-4 немає доступу до системи, на якій буде розгортатися код, а значить протестувати код вона не зможе;
Якщо щось не працює – рішення пропонуються перебором, чим більше деталей надано, тим вужчий спектр відповідей;
ChatGPT-4 не завжди слідкує за цілісністю основного коду навіть у межах однієї сесії, у результаті часті виправлення можуть призвести до невідповідностей (використання різних імен змінних для одного й того самого параметра тощо) – що може стати причиною помилок;
1. Навіть у межах однієї сесії кожні 30 хвилин слід віддавати чату весь поточний код на аудит – це знизить імовірність багів;
Кожна нова помилка – протвережувала і підводила до розуміння – ChatGPT-4 це гарний помічник та інструмент, але не геній програміст, який все зробить за тебе. Ментально я дуже втомився, але це була приємна втома. Як після занять у залі, але в площині розуму;
Попри очевидні мінуси, робота з ChatGPT-4 у плані написання коду нагадує роботу з адекватним програмістом, який за лічені секунди пише код, пропонує рішення і супроводжує це все докладними інструкціями.

Плагін у мене працює ідеально, я пробував запустити його на іншому сайті – там теж усе окей. Але це не означає, що плагін працюватиме у всіх. Зараз триває етап тестування.

🕘 Як написати плагін для WordPress за допомогою chatGPT4