Traducción con CSS en wordpress

No hay comentarios
Si se desea realizar una traducción sencilla en un sitio web desarrollado bajo wordpress y no se encuentra una mejor forma de hacerlo (como en mi caso que siempre uso loco-translate, pero me tope con una plantilla que no tenía toda la traducción bien configurada ) algunas palabras me quedaban en inglés.   Busque está solución que les comparto y que funciona bien para palabras.


Para este ejemplo vamos a usar un boton.
 
  

.social-share {
  text-indent: -9999px;
  line-height: 0; /* colapso la línea origina */
}

.social-share:after {
  content: "Compartir:";
  text-indent: 0;
  display: block;
  line-height: initial; /* El nuevo contenido toma el lugar de la linea original */
}

HTML5 Manejo del Atributo 'required' usando JQuery

No hay comentarios
El atributo "required" de HTML5 es una mejora importante, que reduce el tiempo de validación en formularios, mejorando la experiencia de usuarios.


      En el HTML: 

Los valores del atributo "required" son validados automaticamente por JQuery, pero esto depende del navegador, en navegadores muy antiguos esto no está soportado.   Si el navegador lo soporta, la respuesta debe ser algo como esto:


Es necesario tener en cuenta todos los navegadores por esto adicionamos la siguiente función de javascript que remplaza los valores de "required" por una clase, y genera un código adicional de validación, para los navegadores que no soportan esta característica.

Aquí un ejemplo de como realizar un manejo de esto, y su respectiva función javascript para valir en caso de que el navegador no soporte está característica.


See the Pen HTML5 Manejo del Atributo 'required' usando JQuery by Lili López Gutiérrez (@creandoweb) on CodePen.

Agregar Ajax en un Plugin de Wordpress

No hay comentarios

Para los que desean crear un plugin en wordpress que ejecute una función utilizando Ajax este es el código a ejecutar.


En este ejemplo vamos a usar un archivo .js en la misma carpeta de nuestro plugin que ejecute las sentencias jquery en wordpress 

Vamos a tener un botón que al dar clic ejecute una función en wordpress y retorne un valor usando Ajax. El botón lo vamos a incluir como un Shorcode Wordpress
 


//  Activa el shortcode [cwBotonprueba] 

add_shortcode('cwBotonprueba', 'pintar_el_boton');
   

function pintar_el_boton () {
     
      // Código para agregar el archivo .js al usar el el shortcode
      wp_register_script ('cw_script.js', plugins_url('ruta/cw_script.js', _FILE_),  array(jquery));
      wp_enqueue_script('jquery'); // Incluimos también el Jquery
      wp_enqueue_script('cw_script.js');
     
      // pintamos el botón
      print "Clic en el botón para ejecutar ajax ";
      print "
"; }
Para activar una acción que se ejecute con Ajax usamos add_action creando una nueva acción siempre con el prefijo "wp_ajax_", el código quedará así
 

    add_action( 'wp_ajax_cw_nombre_a_usar', 'cw_funcion_que_retorna_en_ajax' );

    function cw_funcion_que_retorna_en_ajax () {
              
              $loquepasamos = $_POST['PasamosUnaVariable']
 
              print   "Este es el valor retornado en Ajax y el valor de la variable ". $loquepasamos ; 
              wp_die(); // Esto es requerido para terminar y retornar apropiadamente la respuesta 
    }

Por último revisemos el archivo .js que es el encargado de ejecutar la acción y retornar el valor. Pasamos "activo" que es la función que creamos sin el prefijo, la enviamos Post, utilizando una variable que desde la versión 2.8 está definida en el "header" del administrador de wordpress y da la ruta a admin-ajax.php, para versiones anteriores debemos usar la ruta completa al archivo. En este pintamos con JQuery la respuesta en un div. Al fina al oprimir el botón del shortcode, este debe retornar "Este es el valor retornado en Ajax y el valor de la variable 1"
 
jQuery(function($) {
    $("#selectordepaises").change(function() {
        
  var data = {
   'action': 'cw_tabla_paises', // Valor de la función definida quitando el prefijo
   'PasamosUnaVariable': '1';
  };
  
  $.post(ajaxurl, data, function(response) {
   $("#DivRecibeRespuesta").html(response);
  });
        
    });
});