Hacer un plugin con IA

Yeah! Vamos a crear un plugin de WordPress y la IA de ChatGPT 4.0 nos va a ayudar.

El enunciado

Dependiendo de la foto destacada que le pongamos a una entrada de WordPress, estableceremos el color de fondo de esa publicación.

Lo primero será crear el plugin.

  • Nos conectamos por FTP remoto o local desde nuestro IDE favorito.
  • wp-content/plugins/ y aquí creamos una carpeta con el nombre de nuestro plugin. En mi caso color-feature-image-background
  • Dentro de la carpeta, un archivo que se llame color-feature-image-background.php
  • Y a partir de aquí, lo que hago es pegar este esquema que ya tengo de otros plugins:
<?php
/**
 * Plugin Name: Color Feature Image Background
 * Plugin URI: https://flabernardez.com
 * Description: A plugin that capture the principal colors of the feature image of a post and pic one of them to be the background color of that post.
 * Version: 1.0
 * Author: Flavia Bernárdez Rodríguez
 * Text Domain: cfi-background
 *
 * @package cfi-background
 */

Utilizo el prefijo «cfi_» para todo. Es el acrónimo de Color Feature Image.

Vamos al grano!

Pregunta a ChatGPT

Quiero que me ayudes a escribir un plugin que saque los colores principales de una imagen destacada de ese post, como máximo 5 de distintos tonos (descarta los colores similares) y que sean los más representativos de esa imagen.

Luego esos colores deben aparecer en un selector en la pantalla de edición del post de wordpress, justo debajo de donde esté la imagen. Así el usuario podrá escoger solo un color. En el selector, que aparezca el código hexagesimal más una miniatura con la previsualización del color.

El color que escoja creará una regla css al body de la página con ese background color.

Podrías ayudarme a hacerlo? Todas las funciones deben empezar con el acrónimo cfi_

Pero nos ha dado una idea de cómo «extraer los colores» con PHP. Con una simple búsqueda en Google, llego a este artículo:

Extract Image Color

Así que le he preguntado lo siguiente.

Pregunta a ChatGPT

Mira este artículo: https://www.the-art-of-web.com/php/extract-image-color/
¿Podrías leerlo y aplicar lo que dice para nuestro plugin?

Lo que nos contesta es que hay que pillar el código de ImageSample.php e integrarlo en nuestro plugin.

Creo un archivo que se llame «image-sample.php» en la carpeta de nuestro plugin, y pego el código.

Pregunta a ChatGPT

Vale, he creado el image-sample.php en el directorio del plugin y le he pegado la clase. ¿Cómo hago el include al archivo principal de WordPress para usar esta clase? Te paso el esquema de mi plugin por ahora:

color-feature-image-background

– php color-feature-image-background. php

– php image-sample-php

La contestación ha sido básicamente que añada la clase en el archivo principal:

require_once plugin_dir_path( __FILE__ ) . 'image-sample.php';

Como anteriormente ChatGPT nos dio como un esquema de lo que tendríamos que hacer, voy a hacer ese paso a paso. Siendo el primero la creación de la metabox para seleccionar los colores cuando se extraiga de la imagen.

Pregunta a ChatGPT

Vale, venga, primero crea la metabox debajo de la imagen destacada en la pantalla de edición del post donde deberemos seleccionar los colores que se extraiga de la imagen.

Llamemos a la sección de ese metabox «Colores de la imagen destacada». Recuerda que aparecerán como máximo 5.

Recuerda activar el plugin!

Genial! Ya nos sale el códiguito en nuestra pantalla:

Screenshot 2024 02 13 at 19.03.48

En «Colores de la imagen destacada» he cambiado a «Colores imagen» mucho más cortito y que se detecta bien en el código.

Para subir más la metabox, he cambiado la prioridad de ‘low’ a ‘high’. Pero no ha valido. Pero sí que le voy a añadir una pequeña descripción de qué hacen los colores. También he cambiado el nombre de la metabox a «Fondo».

Pregunta a ChatGPT

Lo he puesto así:

function cfi_register_meta_box() {
	add_meta_box(
		'cfi_color_selector', // ID de la metabox
		'Fondo', // Título de la metabox
		'cfi_display_color_selector', // Función de callback que muestra el contenido de la metabox
		'post', // Tipo de pantalla donde se mostrará esta metabox (en este caso, posts)
		'side', // Contexto donde se mostrará la metabox (side, advanced, normal)
		'high' // Prioridad de la metabox
	);
}
add_action('add_meta_boxes', 'cfi_register_meta_box');

y nada, en el mismo sitio. Quiero que el tamaño de la letra del título de la metabox sea exactamente igual que el resto de metaboxes ya creadas. También quiero que dentro de la metabox nuestra muestre el mensaje «Colores a partir de la imagen destacada de esta publicación, que se aplicará como color de fondo». Y a continuación los colores.

Este es el código después de varias interacciones con ChatGPT:

Ahora empezamos una nueva parte. Vamos a comenzar a hacer el css:

Pregunta a ChatGPT

Ahora quiero que el color que seleccione, se aplique como fondo de ese post, cómo lo harías?

Nos da una nueva función que añadiremos a nuestro plugin:

Screenshot 2024 02 13 at 19.16.50
Screenshot 2024 02 13 at 19.16.59

Genial, y ahora vamos con el tema del image-sample!

Pregunta a ChatGPT

Ahora quiero que el color que seleccione, se aplique como fondo de ese post, cómo lo harías?

Y contesta con este código que tenemos que sustituir con una de las funciones que ya está subida, concrétamente «cfi_display_color_selector».

Pantalla blanca!

Vamos a activar el debug mode. En WordPress, en el FTP o árbol de archivos, vamos a wp-config.php y escribimos:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);
@ini_set('display_errors', 0);

Estoy experimentando algún lío, pero le voy a aclarar ChatGPT dónde y en qué orden tengo que llamar al archivo php donde está la clase y cómo tengo que declarar que se use esa clase. Así que le pongo todo el código que va en el plugin.

Resulta que el error que me da:

[13-Feb-2024 18:36:15 UTC] PHP Fatal error:  Uncaught Error: Class "ImageSampler" not found in /homepages/21/d4296857098/htdocs/wordpress/wp-content/plugins/color-feature-image-background/color-feature-image-background.php:50
Stack trace:
#0 /homepages/21/d4296857098/htdocs/wordpress/wp-admin/includes/template.php(1456): cfi_display_color_selector()
#1 /homepages/21/d4296857098/htdocs/wordpress/wp-admin/includes/post.php(2368): do_meta_boxes()
#2 /homepages/21/d4296857098/htdocs/wordpress/wp-admin/edit-form-blocks.php(316): the_block_editor_meta_boxes()
#3 /homepages/21/d4296857098/htdocs/wordpress/wp-admin/post.php(187): require('/homepages/21/d...')
#4 {main}
  thrown in /homepages/21/d4296857098/htdocs/wordpress/wp-content/plugins/color-feature-image-background/color-feature-image-background.php on line 50

Es porque ChatGPT se ha inventado el código.

Así que le he vuelto a pasar el link del artículo original para que tome ideas.

Después de hacerlo y convencer a ChatGPT que no sea tan remolón y que me escribiera la función de marras completa, conseguí dos cosas:

  1. Que me dijera que había que poner estas dos líneas de código al principio del archivo (una estaba, la otra no).
require_once plugin_dir_path( __FILE__ ) . 'image-sample.php';
use Chirp\ImageSampler;
  1. Que escribiera la puñetera función completa:
function cfi_display_color_selector($post) {
    // Obtener la URL de la imagen destacada del post
    $featured_image_url = get_the_post_thumbnail_url($post->ID, 'full');

    if ($featured_image_url) {
        // Asegúrate de que la clase ImageSampler puede manejar la URL directamente
        // Aquí, adaptamos el código para trabajar con la clase tal como fue proporcionada
        // Nota: Esto requiere que tu servidor permita abrir URLs con funciones de imagen de PHP
        $sampler = new \Chirp\ImageSampler($featured_image_url);
        $sampler->set_percent(5); // Ajusta estos valores según sea necesario
        $sampler->set_steps(10); // Ajusta estos valores según sea necesario
        $sampler->init(); // Inicializa las dimensiones de muestreo

        // Obtiene la matriz de colores muestreados
        $colors_matrix = $sampler->sample();

        // Procesamiento adicional para extraer colores individuales de la matriz
        // Este es un ejemplo simplificado. Deberás adaptar esto según tus necesidades
        $colors = [];
        foreach ($colors_matrix as $row) {
            foreach ($row as $color) {
                $colors[] = sprintf("#%02x%02x%02x", $color[0], $color[1], $color[2]);
            }
        }

        // Elimina colores duplicados y selecciona los primeros 5 únicos
        $unique_colors = array_unique($colors);
        $top_colors = array_slice($unique_colors, 0, 5);

        // Verifica si ya se ha seleccionado un color para este post
        $selected_color = get_post_meta($post->ID, '_cfi_selected_color', true);

        echo '<p>Colores a partir de la imagen destacada de esta publicación, que se aplicará como color de fondo.</p>';
        echo '<div id="cfi_color_selector">';

        foreach ($top_colors as $color) {
            // Marca el color seleccionado previamente
            $checked = checked($selected_color, $color, false);
            echo "<label style='background-color: {$color}; margin-right: 5px; padding: 10px; display: inline-block; border: solid 1px #ccc;'>";
            echo "<input type='radio' name='cfi_selected_color' value='{$color}' {$checked}> {$color}";
            echo '</label>';
        }

        echo '</div>';
    } else {
        echo '<p>Por favor, establece una imagen destacada para este post para extraer colores.</p>';
    }
}

Y tacháaaaan, ahora va!

Screenshot 2024 02 13 at 19.50.15

Lo que pasa es que me saca colores feísimos, vamos a probar con una imagen mejor!

Screenshot 2024 02 13 at 19.53.19

Aún se parecen mucho, pero la base está!

Y aquí el código del plugin completo resultante después de las interacciones con ChatGPT:

<?php
/**
 * Plugin Name: Color Feature Image Background
 * Plugin URI: https://flabernardez.com
 * Description: A plugin that capture the principal colors of the feature image of a post and pic one of them to be the background color of that post.
 * Version: 1.0
 * Author: Flavia Bernárdez Rodríguez
 * Text Domain: cfi-background
 *
 * @package cfi-background
 */

require_once plugin_dir_path( __FILE__ ) . 'image-sample.php';
use Chirp\ImageSampler;

/**
 * Registro del metabox de selección del color de la imagen destacada
 */
function cfi_register_meta_box() {
	add_meta_box(
		'cfi_color_selector', // ID de la metabox
		'Fondo', // Título de la metabox
		'cfi_display_color_selector', // Función de callback que muestra el contenido de la metabox
		'post', // Tipo de pantalla donde se mostrará esta metabox (en este caso, posts)
		'side', // Contexto donde se mostrará la metabox (side, advanced, normal)
		'high' // Prioridad de la metabox
	);
}
add_action('add_meta_boxes', 'cfi_register_meta_box');

function cfi_display_color_selector($post) {
	// Obtener la URL de la imagen destacada del post
	$featured_image_url = get_the_post_thumbnail_url($post->ID, 'full');

	if ($featured_image_url) {
		// Asegúrate de que la clase ImageSampler puede manejar la URL directamente
		// Aquí, adaptamos el código para trabajar con la clase tal como fue proporcionada
		// Nota: Esto requiere que tu servidor permita abrir URLs con funciones de imagen de PHP
		$sampler = new \Chirp\ImageSampler($featured_image_url);
		$sampler->set_percent(5); // Ajusta estos valores según sea necesario
		$sampler->set_steps(10); // Ajusta estos valores según sea necesario
		$sampler->init(); // Inicializa las dimensiones de muestreo

		// Obtiene la matriz de colores muestreados
		$colors_matrix = $sampler->sample();

		// Procesamiento adicional para extraer colores individuales de la matriz
		// Este es un ejemplo simplificado. Deberás adaptar esto según tus necesidades
		$colors = [];
		foreach ($colors_matrix as $row) {
			foreach ($row as $color) {
				$colors[] = sprintf("#%02x%02x%02x", $color[0], $color[1], $color[2]);
			}
		}

		// Elimina colores duplicados y selecciona los primeros 5 únicos
		$unique_colors = array_unique($colors);
		$top_colors = array_slice($unique_colors, 0, 5);

		// Verifica si ya se ha seleccionado un color para este post
		$selected_color = get_post_meta($post->ID, '_cfi_selected_color', true);

		echo '<p>Colores a partir de la imagen destacada de esta publicación, que se aplicará como color de fondo.</p>';
		echo '<div id="cfi_color_selector">';

		foreach ($top_colors as $color) {
			// Marca el color seleccionado previamente
			$checked = checked($selected_color, $color, false);
			echo "<label style='background-color: {$color}; margin-right: 5px; padding: 10px; display: inline-block; border: solid 1px #ccc;'>";
			echo "<input type='radio' name='cfi_selected_color' value='{$color}' {$checked}> {$color}";
			echo '</label>';
		}

		echo '</div>';
	} else {
		echo '<p>Por favor, establece una imagen destacada para este post para extraer colores.</p>';
	}
}


function cfi_save_selected_color($post_id) {
	if (array_key_exists('cfi_selected_color', $_POST)) {
		update_post_meta($post_id, '_cfi_selected_color', $_POST['cfi_selected_color']);
	}
}
add_action('save_post', 'cfi_save_selected_color');

function cfi_apply_background_color() {
	if (is_single()) { // Asegúrate de que esto solo se ejecute en páginas de posts individuales
		global $post;
		$selected_color = get_post_meta($post->ID, '_cfi_selected_color', true);
		if (!empty($selected_color)) {
			echo "<style>body { background-color: {$selected_color}; }</style>";
		}
	}
}
add_action('wp_head', 'cfi_apply_background_color');

Acuérdate que tendrás que añadir un archivo image-sample.php con el código de ImageSample que está en este link.

Y el enlace a la conversación completa con ChatGPT hasta este momento.

O descargar el plugin completo desde mi repo de Github.