Creación de un Plugin de Modo Oscuro en WordPress

Contenido del curso

Comenzar con WordPress

Armar estructura del Theme

Contruir vistas

Personalizar el Loop de WordPress

Extra

Cierre del curso

31
Fundamentos de WordPress: Creación de Catálogo de Productos
02:16 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:56

Creación de un Plugin de Modo Oscuro en WordPress

Curso de WordPress Práctico

Clase 29 de 31

Clase 29 / 31

Recursos

¿Cómo crear un plugin de modo oscuro en WordPress?

Crear un plugin para WordPress puede parecer una tarea difícil, pero con los pasos adecuados, puedes lograrlo fácilmente. En este ejercicio, aprenderemos cómo crear un plugin que permita activar y desactivar el modo oscuro en un tema de WordPress. Este proceso incluye la creación de archivos esenciales en PHP y estilos CSS para lograr el efecto deseado de manera efectiva.

¿Qué archivos necesitas para iniciar el plugin?

El primer paso para crear un plugin es organizar bien los archivos y carpetas de tu proyecto.

Crear una nueva carpeta: Inicia un nuevo proyecto creando una carpeta que será el directorio del plugin. Es recomendable comenzar el nombre del archivo principal de tu plugin con 'plugin' (plugin-modo-oscuro.php).
Archivo PHP principal: Este archivo es fundamental ya que le indicará a WordPress la existencia del plugin.

Aquí tienes un ejemplo de cómo deberían verse algunos comentarios iniciales en el archivo PHP:

<?php
/**
 * Plugin Name: Modo Oscuro
 * Description: Activa el modo oscuro en tu tema.
 * Version: 1.0
 * Author: Tu Nombre
 * Author URI: https://tuweb.com
 */

¿Cómo definir la funcionalidad del modo oscuro?

Con el archivo PHP creado y estructurado, el siguiente paso es agregar la lógica que permitirá aplicar los estilos del modo oscuro a tu sitio web:

CSS y estructura: Crea un archivo style.css dentro de una nueva carpeta, por ejemplo, css, para definir los estilos oscuros.
Encolar estilos: Es importante que los estilos CSS se encolen correctamente en el tema activo. Puedes usar la función de WordPress wp_enqueue_style para administrar esto.

function estilos_blazor() {
    // Define la URL del plugin
    $estilos_url = plugin_dir_url(__FILE__) . 'css/style.css';

    // Encola el estilo del modo oscuro
    wp_enqueue_style('modo-oscuro', $estilos_url, array(), '1.0', 'all');
}

add_action('wp_enqueue_scripts', 'estilos_blazor');

¿Cómo aplicar estilos adecuados para el modo oscuro?

El archivo CSS debe contener cambios básicos que transformen el aspecto de tu sitio al modo oscuro:

body {
    background-color: #000 !important;
    color: #fff !important;
}

h1, h2, h3, h4, span, a {
    color: #fff !important;
}

Estos cambios en CSS modifican el fondo del sitio a negro y el texto a blanco, utilizando la directiva !important para asegurar que estos estilos sobrescriban los existentes.

¿Cómo activar y verificar tu plugin?

Con toda la configuración lista, puedes activar tu plugin desde el panel de WordPress:

Activación: Ve al menú de plugins en el panel de administración de WordPress y activa el plugin recién creado.
Verificación: Navega en tu sitio web para verificar que el modo oscuro se aplica correctamente.

Recuerda que, si en algún momento quieres desactivar el modo oscuro, solo necesitas desactivar el plugin desde el panel, y el sitio volverá a su estilo original automáticamente.

Esta experiencia no solo te permitirá entender cómo funcionan los plugins en WordPress, sino también ver en acción tu creación. ¡Intenta extender la funcionalidad siguiendo tus propias ideas!

Te animo a que sigas explorando y mejorando tus habilidades en desarrollo web. Crear algo propio es una experiencia enriquecedora; ¡nunca dejes de aprender y experimentar!

Fabiola Jessica Huancollo Chambi

Hace 6 años

Mi plugin se llama: zoom-imagen para cuando se pase el mouse sobre las fotos de los productos se pueda apreciar mejor.

Mi archivo principal: plugin-zoom-imagen.php:

<?php

//Plugin name: Zoom Imagen
//Description: Activa el zoom imagen
//version: 1.0
//Author: Jessica Huancollo Chambi
//Author URI: https:/github.com/ramitaenlarama

function assets_plugin()
{
	$url_raiz = plugin_dir_url(__FILE__); //URL del directorio del proyecto plugin

	//ejecutando el estilo
	wp_enqueue_style('zoom_imagen',$url_raiz.'/assets/css/estilos.css', '', '1.0', 'all');

	//ejecutando el script
	wp_enqueue_script('custom', $url_raiz.'/assets/js/custom.js',array('jquery'), '1.0', true);

}

add_action('wp_enqueue_scripts','assets_plugin');

Mi archivo de estilos para darle el efecto del zoom con las propiedades css (estilos.css):

img.wp-post-image 
{
    width: 300px;
    height: 150px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}

/*Para zoom*/
.transition {
    -webkit-transform: scale(1.4); 
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
}

Mi archivo js (custom.js) para añadir la clase en el elemento y así pueda aplicar el estilo (zoom).

(function($) {

	$('.wp-post-image').hover(function()
    {
        $(this).addClass('transition');

    }, function()
    {
    
        $(this).removeClass('transition');
    
    });

})( jQuery );

La estructura de mi proyecto plugin es la siguiente:

Manuel Alejandro Brea García

Hace 6 años

Hola Jessica!

Se nota que estás aprendiendo un montón con el curso y que esto se te da bien, pero, si no es molestia, me gustaría compartir contigo y con el resto de compañeros mi opinión sobre tu plugin.

Desde mi punto de vista, creo que sería mucho mejor si, el plugin añade la modificación de CSS únicamente, de esta forma, no necesitas JS y no añades un poco más de carga a la web al no tener que cargar el fichero custom.js.

El código estilos.css quedaría de la siguiente forma:

img.wp-post-image 
{
    width: 300px;
    height: 150px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}

/*Para zoom*/
img.wp-post-image:hover {
    -webkit-transform: scale(1.4); 
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
}```
Si te das cuenta, es exáctamente lo mismo que tenías tu, solo que, en vez de añadir y quitar clases mediante JS, lo que hacemos es dejar que ese cambio se haga mediante CSS.

Espero que te haya ayudado!

Un saludo,
Alejando

Fabiola Jessica Huancollo Chambi

Hace 6 años

Gracias por el aporte :) Alex!

Comentarios (45)45 comentarios

Moisés Muñoz Nieto

Hace 7 años

Arnoldo Ricardo HR

LUIS ESTEBAN ORDOÑEZ ERAZO

Cristian Ramanzin

Profesor

Usuario anónimo

User

Erick Cordova

Michelle Osorio

Juan Felipe Gomez Ramirez

Hace 4 años

Melisa Quintero

Luis Alejandro Vera Hernandez

Samuel Isaac Sánchez Reyes

Jorge Paiva

Luis Barba

Fabin Muñoz

Hace 5 años

Humberto Alejandro Casique Alvarez

Marvin Jesus Arguinzones Moreno

Steven Rincon Medina

Hace un año

Juan Sebastian Calderon

Facundo Oubel

Marcelo Gorski

Abelino Suarez

Leonardo Matamoros

Comenzar con WordPress

Curso Actualizado

Curso Profesional de WordPress: Profundiza en Taxonomías y Categorías

Gestión y Personalización de Sitios Web con WordPress

Funcionamiento y características principales de WordPress

Estructura de Archivos para Vistas Dinámicas en PHP

Manejo de Hooks y Filtros en PHP para Extender Funcionalidades

Manejo de Librerías y Dependencias en HTML con Funciones Personalizadas

Instalación de Apache y PHP en Windows para Entorno Local

Instalación de WordPress en entorno local paso a paso

Gestión de WordPress: Navegación y Personalización Básica

Gestión de Usuarios y Configuración en WordPress

Gestión de Roles y Permisos de Usuario en WordPress

Armar estructura del Theme

Creación de un Tema Personalizado en WordPress con Visual Studio Code

Integración de Librerías CSS en Proyectos Web

Carga y manejo de librerías en temas de WordPress

Instalación y Personalización de Themes en WordPress

Contruir vistas

Incorporación de Menús en Temas de WordPress

Uso de Widgets en WordPress para Personalizar Contenido

Creación de Widgets en WordPress y su Inserción en el Footer

Gestión de Contenidos Personalizados en WordPress

Uso de Open Golpes para Gestión de Contenido Web

Creación de vistas personalizadas en WordPress con PHP y Gutenberg

Creación de Vistas Personalizadas en WordPress con PHP

Creación de la Página Principal en WordPress

Personalizar el Loop de WordPress

Creación de Post Type Personalizado en WordPress

Creación de un Loop Personalizado en WordPress

Extra

Selección de Plugins en WordPress: Compatibilidad y Mantenimiento

Instalación de Plugins en WordPress: Métodos y Herramientas

Creación de un Plugin de Modo Oscuro en WordPress

Creación de Página 404 Personalizada en WordPress

Cierre del curso

Fundamentos de WordPress: Creación de Catálogo de Productos

Creación de un Plugin de Modo Oscuro en WordPress