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!

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.

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.

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.

Recuerda activar el plugin!

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

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».

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');

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

/**
 * 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) {
	// Mensaje dentro de la metabox
	echo '<p>Colores a partir de la imagen destacada de esta publicación, que se aplicará como color de fondo.</p>';
	// Aquí iría el código para extraer los colores de la imagen destacada.
	// Por ahora, vamos a simular con colores de ejemplo.
	$colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#00FFFF']; // Colores de ejemplo

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

	echo '<div id="cfi_color_selector">';
	foreach ($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>';
}

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');

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

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

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');

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

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».

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 ruta a tu archivo image-sample.php es correcta
        require_once plugin_dir_path( __FILE__ ) . 'image-sample.php';

        // Instancia de ImageSampler
        $sampler = new ImageSampler($featured_image_url);
        $colors = $sampler->get_colors(); // Asume que tienes un método get_colors que devuelve los 5 colores principales

        // 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 ($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>';
    }
}

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;

2. 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!

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

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.

Actualización: Debug después de fallo en la versión 6.5 de WordPress

El código más actualizado está en el repositorio de github del plugin