¿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.
functionestilos_blazor(){// Define la URL del plugin$estilos_url=plugin_dir_url(__FILE__).'css/style.css';// Encola el estilo del modo oscurowp_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:
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!
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/ramitaenlaramafunctionassets_plugin(){ $url_raiz =plugin_dir_url(__FILE__);//URL del directorio del proyecto plugin//ejecutando el estilowp_enqueue_style('zoom_imagen',$url_raiz.'/assets/css/estilos.css','','1.0','all');//ejecutando el scriptwp_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).
La estructura de mi proyecto plugin es la siguiente:
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
Gracias por el aporte :) Alex!
Crear nuevo plugin:
<?php/**
* Plugin Name: Modo Oscuro
* Description: Activa el modo oscuro en tu theme.
* Version: 1.0
* Author: Cristian Ramanzin
* Author URI: https://github.com/ramitaenlarama
*/functionestilos_plugin(){$estilos_url=plugin_dir_url(__FILE__);wp_enqueue_style('modo_oscuro',$estilos_url.'/assets/css/estilo.css','','1.0','all');}add_action('wp_enqueue_scripts','estilos_plugin');
Pregunta: Por que aqui usamos directamente wp_enqueue_style y no se usó primero wp_register_style ?
Hola, Esteban! En este caso usé el enqueue porque es el único archivo que voy a cargar. en el plugin Si este archivo fuera necesario para que otro funcione, lo hubiese cargado con un register. Avisame si se entendió. :)
Clarísimo, gracias por la aclaración ;)
<?php
//Plugin name: Dark mode
//Description: Activa el modo oscuro de tu theme
//version: 1.0
//Author: Cristian Ramanzin
//Author Uri: https://github.com/ramitaenlarama
function estilos_plugin(){
$estilos_url = plugin_dir_url(__FILE__);
wp_enqueue_style( 'estilos_plugin', $estilos_url."/assets/css/estilos.css", '', '1.0','all');
}
add_action('wp_enqueue_scripts','estilos_plugin');
se puede registrar unos estilos predefinidos para la 404 de la siguiente forma:
Yo cree un boton que al darle click te lleva al top de la página.
Hola! Tengo una pregunta. Si el plugin tiene archivos .html que controlen la estructura del DOM necesarias para el funcionamiento del mismo. ¿Cómo inyectar los html como se hizo con los css y js?
Nueva carpeta > wp-content > plugins > crear nueva carpeta: modo-oscuro
Por estandares se recomienda iniciar el nombre con plugin
Crear archivo plugin-modo-oscuro.php
<?php
//plugin name: modo oscuro// Description: Activa el modo oscuro en tu theme//Version: 1.0//Author: Alejandro Vera//Author URI: https://github.com/alejandroveritafunctionestilos_plugin(){ $estilos_url =plugin_dir_url(__FILE__);wp_enqueue_style('modo_oscuro', $estilos_url.'/assets/css/estilo.css','','1.0','all');}/* hook */add_action('wp_enqueue_scripts','estilos_plugin');
Añadir carpeta assets. Dentro añadir carpeta css agregar archivo estilo.css
body { background-color: black !important;}p,span,h1,h2,h3,h4,a{color: white !important;}
Actualizar la pagina
Como se podria hacer que la funcion de cambiar el archivo CSS se habilite desde un boton en la pagina web? No activando/desactivando el plugin.
Necesito tener un Plugin para Sliders personalizado.
Que al subir una imagen me cree una version pequeña a partir de la mitad, esto para mobile (para luego con picture de html usarla).
Qué me recomiendan?
Prueba con Smart Slider 3, espero te funcione. Saludos
Excelente aporte bro!!
esto logre no es mucho pero quiero seguir mejorando
<?php
//plugin name: fondo del titulo//description: cambia el el color de fondo de los titulos//version: 1.0//Athor: humberto casique//author: https:/github.com/ramitaenlaramafunctionestilos_plugin(){ $estilos_url =plugin_dir_url(__FILE__);wp_enqueue_style('fondo_titulo',$estilos_url.'/assets/css/estilo.css','','1.0','all');}add_action('wp_enqueue_scripts','estilos_plugin');
el codigo que hace magia es
h1, h2, h3, h4, a{color: white !important; background-color:rgb(29,139,25);}
Aquí dejo mi plugin el cual aplica un filtro css a las imágenes, dependiendo de la clase seleccionada.
Resultado:
plugin-css-filters.php:
<?php
// Plugin name: css filters// Description: filtros css para pantallas de escritorio en tu tema// Version: 1.0// Author: Marvin Arguinzones// Author URI:functionestilos_plugin_css_filters(){ $estilos_url =plugin_dir_url(__FILE__);wp_enqueue_style('filtros css', $estilos_url .'/assets/css/styles.css','','1.0','(min-width: 992px)');}add_action('wp_enqueue_scripts','estilos_plugin_css_filters');?>
no logro activar el modo oscuro, cree las carpetas en las ubicaciones e hice el mismo código tal cual, y no se cambia el fondo
Cómo primer argumento de wp_enqueue_style se utiliza 'modo_oscuro' o 'estilos_plugin' ???
no aparece
Hola Cristian, ¿hay alguna clase donde se explique cómo crear un plugin que pueda ser configurado por el administrador de wordpress?
buenas tardes, tengo una pregunta , al hacer el código del plugin , el WordPress no lo encuentra el directorio esta bien, no se si soy el único , agradezco la colaboración , muchas gracias
A mi no me funciona el plugin de modo-oscuro, ni con mi codigo, ni con el código dejado por el pofe...No entiendo por que...
