Creando un Plugin

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:

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
 */

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

crea números consecutivos

<?php
/**
 * Plugin Name: Contador
 * Description:    shortcode de contador diario con nuemeros diferentes.
 * Version:          1.0
 * Author:           Arnoldo Ricardo
 * Author URI:    arnoldoricardo.com
*/

function contador(){
    $a = date("Y") - 1000;
    $b = date("z");
    return $a + $b;

}
add_shortcode('codigo', 'contador'); 

Pregunta: Por que aqui usamos directamente wp_enqueue_style y no se usó primero wp_register_style ?

<?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:

add_action('wp_enqueue_scripts','enqueue_my_script');
function enqueue_my_script(){
    if(is_404()){
      wp_enqueue_style( 'estilo404', get_template_directory_uri().'/style404.css', '','1.0', 'all');
    }
}

Que increíble, me encanta como se pueden hacer.

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/alejandroverita

function estilos_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

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/ramitaenlarama

function estilos_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:

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

?>

styles.css:

.css_filter img,
img.css_filter{
    transition: filter 0.3s ease-in-out;
    -webkit-transition: filter 0.3s ease-in-out;
    -moz-transition: filter 0.3s ease-in-out;
    -ms-transition: filter 0.3s ease-in-out;
    -o-transition: filter 0.3s ease-in-out;
}

.css_filter_grey img,
img.css_filter_grey{
    filter: grayscale(1);
}

.css_filter_grey img:hover,
img.css_filter_grey:hover{
    filter: grayscale(0);
}

.css_filter_blur img,
img.css_filter_blur{
    filter: blur(1.5px);
}

.css_filter_blur img:hover,
img.css_filter_blur:hover{
    filter: blur(0);
}

.css_filter_opacity img,
img.css_filter_opacity{
    filter: opacity(0.8);
}

.css_filter_opacity img:hover,
img.css_filter_opacity:hover{
    filter: opacity(1);
}

.css_filter_invert img,
img.css_filter_invert{
    filter: invert(0);
}

.css_filter_invert img:hover,
img.css_filter_invert:hover{
    filter: invert(1);
}

Yo cree un boton que al darle click te lleva al top de la página.

Comparto mi Plugin.

Qeu buena explicacion, a ver que se me ocurre hacer como plugin

Me encantó esta clase, muchas gracias Cristian

Mi primer plugin desarrollado para wordpress 😃

Muy interesante

Cuál es la recomendación para capturar fechas de nacimiento, el género (Select), check Box de políticas de uso al momento de registrar un usuario?
Custom Post Field a usuarios o al cliente?
(Considerando que usuario es a WordPress y Cliente a Woocommerce)

Excelente y precisa clase!

Me acaba de volar la cabeza con ésta clase!!!

Comparto mi plugin Modo Obscuro:

https://gwst.eu

Profesor, haciendo el reto, me llegó a salir el siguiente error:

Al parecer no se puede tener funciones en el plugin con el mismo nombre que las funciones en el tema,. Pero, en plugin de terceros cómo gestionan ese problema con nuestro código?.

practicando ando… darkmode

Gracias por la clase. Perfectamente claro.

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu