No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Creando un Plugin

29/35
Recursos

Aportes 34

Preguntas 10

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

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

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

<?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(鈥榳p_enqueue_scripts鈥,鈥榚stilos_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

Hola gente hermosa. Busco a alguien que est茅 dispuesto a aprender y emprender un proyecto de SEO conmigo. 2871278078 por qu茅 gustan escr

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:

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