Quantcast
Channel: Programación en WordPress – Ayuda WordPress
Viewing all 326 articles
Browse latest View live

Cómo optimizar Contact Form 7

$
0
0

Si, como millones de usuarios de WordPress, tu plugin de formularios de contacto es Contact Form 7, seguramente habrás observado que de lo único que peca es de que en según qué situaciones puede ralentizar la carga de tu web, así que vamos a ponerle solución.

Cargar selectivamente Contact Form 7

El principal problema, en cuanto a la carga se refiere, que tiene el plugin Contact Form 7 y la mayoría de plugins, es que carga todos sus estilos y scripts globalmente en tu web, da igual si hay un formulario o no en cada página.

Esto, que es comprensible, pues el desarrollador no sabe dónde vas a poner un formulario, supone un lastre en la carga de páginas y entradas que no mostrarán formulario alguno pero que, sin embargo, si que se cargará en ellas todo el CSS y JavaScript del plugin.

Imagina, pues, una web con 20 páginas y 500 entradas en la que solo una de las páginas tiene formulario. Lo que obtendrás es que los estilos y scripts de Contact Form 7 se cargarán en todas ellas, da igual si tienen formulario o no.

La solución pasa por registrar estilos y scripts solo en las páginas o entradas en las que hay formulario.

No registrar estilos CSS de Contact Form 7

Para no registrar (deregister) los estilos de Contact Form 7 en cualquier página o entrada que no sea en la que sí hay  un formulario solo tenemos que saber el slug de la página con formulario, y anularlos en el resto, así:

// Deregister estilos CSS de Contact Form 7 en las páginas sin formulario
add_action( 'wp_print_styles', 'ayudawp_deregister_styles', 100 );
function ayudawp_deregister_styles() {
    if ( ! is_page( 'contacto' ) ) {
        wp_deregister_style( 'contact-form-7' );
    }
}

Este código hay que ponerlo en tu plugin de personalizaciones o al final del archivo functions.php del tema activo (mejor si es el tema hijo).

Lo que hace el código es comprobar si la página no es la que tiene el slug contacto, en cuyo caso des-registra los estilos de Contact Form 7 mediante la función de WordPress wp_deregister_style.

No registrar el JavaScript de Contact Form 7

Para des-registrar el JavaScript en las páginas que no tengan formulario haremos casi lo mismo, pero en esta ocasión con la función wp_deregister_script. Siguiendo el ejemplo anterior sería así:

// Deregister JavaScrip de Contact Form 7 en las páginas sin formulario
add_action( 'wp_print_scripts', 'ayudawp_deregister_javascript', 100 );
function ayudawp_deregister_javascript() {
    if ( ! is_page( 'contacto' ) ) {
                wp_deregister_script( 'contact-form-7' );
        }
}

Por supuesto, acuérdate de guardar cambios en tu plugin de personalizaciones o archivo functions.php, el que hayas elegido para añadir estas funciones.

¿Y si tengo formularios en varias páginas?

Buena pregunta. No hay problema, entonces adaptaremos el código para incluir los slugs de todas las páginas que tengan formulario.

Lo único es modificar la línea que busca la condición is_page, y que modificarla indicando el array de slugs en vez de uno único. Por ejemplo:

if ( ! is_page( array( 'nosotros', 'contacto' ) ) {

Cómo localizar los slugs de tus páginas con formularios

Si no sabes dónde localizar los slugs de tus páginas solo tienes que ir a la ventana de administración de entradas o páginas y hacer clic en cualquiera de ellas en Edición rápida y copiar de ahí el slug.

Carga selectiva de Contact Form 7 localizando el shortcode

Como ya sabrás, el plugin Contact Form 7 mostrará tus formularios donde encuentre un shortcode que empiece con [contact-form-7, así que otro modo mediante el que podemos cargar estilos y scripts es localizando en tus contenidos esta cadena y des-registrando estilos y scripts en el resto.

Solo tendríamos que crear una función así:

//Quitando scripts y estilos de CF7 donde no haya shortocode
function ayudawp_deregister_cf7() {
	global $post;
    if ( ! has_shortcode( $post->post_content, 'contact-form-7' ) ) {
        remove_action('wp_enqueue_scripts', 'wpcf7_do_enqueue_scripts');
    }
}
add_action( 'wp_enqueue_scripts', 'ayudawp_deregister_cf7', 2 );

Lo que hace el código anterior es anular las acciones por las que Contact Form 7 carga estilos y scripts.

Un modo alternativo de conseguir lo mismo sería así:

//Deregister estilos y scripts CF7 donde no esté el shortcode 
if (!function_exists('rc_dequeue_scripts_styles')) { 
function ayudawp_dequeue_scripts_styles() { 
if ( WPCF7_LOAD_JS && WPCF7_LOAD_CSS ) { 
global $post; 
if ( !strpos($post->post_content, '[contact-form-7') ) { 
wp_dequeue_script('contact-form-7'); 
wp_dequeue_style('contact-form-7'); 
} 
} 
} 
add_action( 'wp_enqueue_scripts', 'ayudawp_dequeue_scripts_styles' ); 
}

No cargar nada de CSS ni JavaScript de Contact Form 7

Si, por cualquier motivo, en algún momento quieres anular completamente la carga de los estilos y scripts de Contact Form 7 puedes definir unas nuevas constantes en tu archivo wp-config.php, estas:

define ('WPCF7_LOAD_JS', false); // false Desactiva carga de JS
define ('WPCF7_LOAD_CSS', false); // false Desactiva carga de CSS

Esto puede ser interesante en entornos de desarrollo, por ejemplo.

¿Se puede hacer con plugins?

Te diré que sí, pero el asunto es que el único disponible para esto básicamente lo que te pide es el condicional sobre el que no se aplicará, que tienes que conocer y aplicar, así que viene a ser lo mismo que hacíamos con los primeros códigos.

Si te apetece probarlo, se llama Script Logic.

El problema con el refill de Contact Form 7

Hace unos meses surgió un problema de optimización por el cual los habituales medidores de velocidad web como GTMetrix mostraban importantes retardos de carga de página a causa de la siguiente cadena:

/wp-json/contact-form-7/v1/contact-forms/13891/refill

El problema ocurría donde tuvieses cargada caché de página con algún plugin, por lo que el contenido activo como el reCAPTCHA integrado de Contact Form 7 necesita actualizarse en cada carga de página, generando una llamada al famoso refill.

Si aún tienes este problema puedes solucionarlo de dos maneras:

Actualiza

Desde la versión 7.4.9.2, de diciembre de 2017, este problema se ha solucionado, así que actualiza.

Anula manualmente la caché de página del plugin

Aunque ya sabes que nunca recomiendo modificar archivos propios de plugins, temas o WordPress, si por otro motivo no puedes actualizar, y no usas ningún tipo de CAPTCHA, localiza el archivo includes/controller.php y anula (comenta) o borra estas líneas:

if ( defined( 'WP_CACHE' ) && WP_CACHE ) {
		$wpcf7['cached'] = 1;
	}

¿Y por qué mejor no cambio de plugin?

Tú mismo, pero Contact Form 7 es el plugin con un desarrollo más continuado, que más se actualiza para ir mejorando, y con un ecosistema más amplio, debido a los cientos de extensiones que lo mejoran.

Lo único es que si te provoca algún problema de retardo de carga de páginas ya sabes cómo solucionarlo.

Esto que lees es un contenido original de Ayuda WordPress - Recursos, themes, plugins y tutoriales en español y lo publicó Fernando primero aquí: Cómo optimizar Contact Form 7


Tutorial Divi: Igualar la altura de cada elemento del módulo blog en rejilla

$
0
0

El problema

El módulo blog en rejilla de Divi se adapta al tamaño del extracto, con lo que su visualización provoca que cada entrada tenga una altura diferente.

Me refiero a esto…

Este estilo masonry, que para muchos puede ser estéticamente agradable, incluso moderno al ser similar a las fichas de Pinterest, para otros clientes puede resultar anti-estético, dejando demasiados espacios entre las entradas con extractos más cortos y la siguiente sección.

La solución

Una posible solución sería forzar a que las cajas que contienen los extractos sean todas de la misma altura, igualarlas en altura, algo muy fácil de conseguir.

Añade una clase CSS al módulo

Primero abre el constructor visual de Divi y en la pestaña Avanzado añade la clase CSS blog_igualado. Guarda los cambios.

A continuación abre el Personalizador de temas y, en la sección CSS adicional, añadimos el código que hará que la clase CSS muestre el módulo blog como queremos, este:

//Modulo blog rejilla igualado en altura
@media only screen and (min-width: 768px) {
.blog_igualado .et_pb_post {
min-height: 500px;
max-height:500px;
}
}

Publica los cambios y lo que obtendremos será algo así:

El resultado es que las cajas que contienen cada elemento del módulo blog tendrán la misma altura, ofreciendo una experiencia visual, más equilibrada, que es el efecto buscado.

Puedes, por supuesto, personalizar la altura al tamaño que quieras (en el ejemplo 500px)

El código CSS que hemos aplicado solo tendrá efecto en la visualización de escritorio, no en dispositivos móviles, pues en estos últimos al ir cada elemento encima del otro no supone ningún problema el estilo original, y de hecho se vería raro.

Esto que lees es un contenido original de Ayuda WordPress - Recursos, themes, plugins y tutoriales en español y lo publicó Fernando primero aquí: Tutorial Divi: Igualar la altura de cada elemento del módulo blog en rejilla

Cómo solucionar los errores Parse de WordPress

$
0
0

En este artículo vamos a ver qué son y cómo solucionar los errores de Parse (Unespected, Undefined Constant y Syntax) de WordPress, pero que quede claro de antemano que casi siempre la culpa será tuya, luego no te me enfades.

¿Qué son los errores Parse?

En PHP, un error parse es básicamente cuando un código no termina de ejecutarse, devuelve una respuesta inesperada, algo frena la ejecución y devuelve un error del código.

Hay varios tipos de errores parse:

  • Syntax error – Suelen ser debidos a problemas con guiones, corchetes o comillas utilizados en el código. O faltan o los incluidos no son correctos. Un fallo muy común es incluir comillas tipográficas en vez de normales, por usar un editor de textos en vez de un editor de código.
  • Unexpected error – Es cuando olvidas incluir un carácter de apertura o cierre en corchetes, comillas, etc.
  • Undefined constant error – Se debe normalmente a un carácter que falta en un array que haga referencia a variables.

¿Cuando aparecen errores Parse?

Como te avisaba al principio del artículo, casi siempre son debidos a que has añadido algún tipo de código en tu web con algunos de los errores apuntados arriba.

También pueden ser debidos a un plugin o tema mal programado, por supuesto.

Pero vamos, que lo más común es cuando copias y pegas códigos de aquí o allá, y por algún motivo te falta algo del mismo o se copia mal algún carácter.

Estructura y tipos de errores Parse

Para que aprendas a distinguirlos e identificar qué los provoca, aquí tienes la estructura básica de los errores de código que he mencionado antes y cómo se mostrarán en tu WordPress cuando ocurren.

Es importante que te fijes en los detalles que te destaco, para identificar en dónde está el error concreto en cada caso.

Estructura tipo de errores Syntax

“Parse error: syntax error, unexpected carácter in path/to/php-file.php on line número

Estructura tipo de errores de Undefined constant

“Notice: Use of undefined constant constant string – assumed ‘constant string‘ in ruta/al/archivo-php.php on line número

Estructura tipo de errores Unexpected

“Parse error: unexpected carácter in ruta/al/archivo-php.php on line número

Notas de ayuda en la identificación del problema

  • En los errores de undefined constant la denominada constant string puede que o sea una cadena, ya que PHP a veces se refiere a elementos sin identificar como constant strings.
  • Los errores de unexpected pueden mostrar una lista de caracteres en vez de un solo carácter.
  • El número se refiere al número de línea de código en el archivo afectado, y se reemplazará por números reales (18, 514, 994, etc), y puede que en ocasiones no sean esas líneas exactas y tengas que buscar por tu cuenta el error.
  • El archivo indicado en el mensaje de error es donde persiste el problema, y el número de línea te da una pista de por donde empezar a buscar el problema. Suele estar en esa línea un un poco antes.
  • Los nombres del carácter o de la constant string de la estructura del error te darán una idea de qué buscar en el número de línea indicado (o antes).

Errores Parse más comunes

Son muchos los posibles errores, y la estructura será lo que mejor te indique en qué lugar ocurrió el error, pero yo siempre te recomendaría primero buscar también algo de esto:

  • Asegúrate de que solo haya un <?php de apertura y solo un ?> de cierre por archivo
    • Búscalos en medio del archivo, seguramente en códigos copiados de blogs
    • Busca código añadido después de la etiqueta de cierre ?>
    • Busca código añadido antes de la etiqueta de apertura <?php
  • Busca funciones rotas por causa de otras.
  • Busca líneas vacías adicionales después de la etiqueta de cierre ?>
  • Siempre que añadas códigos nuevos, por ejemplo a tu archivo functions.php, añádelo al final, y siempre antes de la etiqueta de cierre?>, si la hubiese.

¿Cómo evito los errores Parse?

Lo ideal es que aprendas PHP, pues el conocimiento de un lenguaje es lo que más te ayuda a detectar a simple vista errores en su código.

No es difícil, yo soy de letras y poco a poco, con ganas, de modo autodidacta, me voy defendiendo, y puedo identificar muchos errores a simple vista (y también me equivoco, por supuesto)

Sino, siempre puedes/debes comprobar tus códigos antes de aplicarlos a una web o convertirlos en plugin. Aquí tienes algunas herramientas que te pueden ayudar:

¿Cómo soluciono los errores Parse?

Si has tomado nota de la estructura de los errores que hemos visto arriba, ya sabes qué buscar y dónde.

Solo te queda ir al archivo en el que se han provocado e identificar la línea/carácter/constante que lo genera y modificarlo.

Accede por FTP o el panel de archivos de tu hosting, lo que prefieras, y edita el archivo con un editor de código (importante).

Estos programas te ayudarán a identificar rápidamente los problemas, pues incluye numeración de líneas y sintaxis de código a colores, que te facilita detectar los errores.

Mis recomendados son estos:

Mi consejo es que borres el fragmento de código completo que provoca el error, compruebes su sintaxis y arregles los problemas antes de volver a insertarlo. Si no sabes cómo arreglarlo pide ayuda, aquí mismo, o en los foros.

No te olvides: Si copiaste el código de otra web avisa al autor, y si el error está en un plugin o tema avisa al desarrollador, para que lo arreglen y no les ocurra a otros.


Nota final

El peor enemigo de los errores de código son los nervios, así que si te encuentras con algún error Parse en WordPress recuerda que son fáciles de identificar, y de solucionar.

A poco que sigas las indicaciones de este artículo serás capaz de solucionarlos en pocos minutos, y de paso habrás aprendido algo.

Esto que lees es un contenido original de Ayuda WordPress - Recursos, themes, plugins y tutoriales en español y lo publicó Fernando primero aquí: Cómo solucionar los errores Parse de WordPress

Tutorial Divi: Cómo cambiar tamaño de la imagen destacada en el módulo blog en rejilla

$
0
0

El módulo blog en rejilla de Divi es bastante vistoso y atractivo, pero si algo he encontrado que no suele gustar a mis clientes es que la imagen destacada, o la caja a ella destinada, tenga un tamaño fijo, que no sea el que ellos quieren.

Y sí, posiblemente tenga clientes muy cuadriculados, pero hay que dar servicio a todos ¿no?

El otro día hablamos de cómo igualar la altura de los elementos del módulo blog en rejilla, una solución que gusta mucho a los clientes, pero la verdad es que esto de cambiar el tamaño de la imagen destacada lo piden bastantes más.

El problema es que Divi tiene un tamaño por defecto, y si tu imagen es, por ejemplo, más pequeña o grande, te la ajusta como quiere, o te la pixela o te la recorta.

Dicho lo cual, la situación es cuando tu cliente siempre sube las imágenes a un tamaño concreto, y quiere que salgan enteras. En ese caso lo que toca es forzar el tamaño por defecto al del cliente.

Afortunadamente la solución es sencilla.

Solo hay que añadir un par de nuevas funciones al final del archivo functions.php del tema hijo:

/* Definir tamaño imagen en modulo blog rejilla Divi */
function ayudawp_ancho_minitura_blog( $width ) {
    return 840; //ancho de la miniatura en píxeles
}
add_filter( 'et_pb_blog_image_width', 'ayudawp_ancho_minitura_blog');
function ayudawp_alto_miniatura_blog( $height ) {
    return 360; //altura de la miniatura en píxeles
}
add_filter( 'et_pb_blog_image_height', 'ayudawp_alto_miniatura_blog');

En el código anterior solo tienes que cambiar los tamaños de ejemplo de ancho y altura de la miniatura a los de las imágenes destacadas de tu cliente.

Guardas los cambios y ya está, ahora todas las miniaturas con la imagen destacada tendrán el tamaño exacto de las imágenes subidas por tu cliente a ese tamaño.

Nota: Si subes las imágenes destacadas de otro tamaño al del código entonces cada imagen saldrá distinta. El truco está en que la imagen que subas sea exactamente del mismo tamaño que el definido en el código.

Esto que lees es un contenido original de Ayuda WordPress - Recursos, themes, plugins y tutoriales en español y lo publicó Fernando primero aquí: Tutorial Divi: Cómo cambiar tamaño de la imagen destacada en el módulo blog en rejilla

Cómo añadir la aceptación de política de privacidad en los comentarios

$
0
0

Uno de los requisitos principales de la RGPD, obligatoria desde el 25 de mayo de 2018, es obtener el consentimiento expreso y consciente de los usuarios de los datos que guardarás de ellos en tu web.

Y uno de los elementos de tu web que guarda información de los usuarios son los comentarios.

Podrías pensar que te lo puedes ahorrar si, en los ajustes de comentarios, desmarcas la casilla de solicitar correo electrónico y nombre.

Pero no, WordPress seguirá almacenando la IP, así que el truco no te servirá de nada.

Lo que debes hacer es añadir una casilla de selección en la que el usuario te permita expresamente almacenar la información que guardes, y con un enlace bien claro a la política de privacidad donde le informes de:

  • Quién es el albacea de sus datos
  • Qué datos se almacenan
  • Con quién se comparten
  • Cuánto tiempo los almacenas
  • Dónde y cómo borrar sus datos de usuario.
  • Dónde y cómo solicitar sus datos.

¿La añadimos?

Añadir casilla de aceptación de la política de privacidad en los comentarios con un código

Si eres de los que prefieres añadir un sencillo código aquí te dejo una serie de filtros que cumplen con todo lo que hemos comentado arriba:

/* Casilla de verificación de privacidad después del formulario de comentarios */
add_filter( 'comment_form_field_comment', 'mi_campo_de_privacidad_en_comentarios' );
function mi_campo_de_privacidad_en_comentarios( $comment_field ) {
    return $comment_field.'<input type="checkbox" name="privacy" value="privacy-key" class="privacyBox" aria-req="true"><p class="pprivacy">Acepto la <a target="blank" href="https://ayudawp.com/legal/">política de privacidad</a><p>';
}
//validación por javascript
add_action('wp_footer','valdate_privacy_comment_javascript');
function valdate_privacy_comment_javascript(){
    if (is_single() && comments_open()){
        wp_enqueue_script('jquery');
        ?>
        <script type="text/javascript">
        jQuery(document).ready(function($){
            $("#submit").click(function(e)){
                if (!$('.privacyBox').prop('checked')){
                    e.preventDefault();
                    alert('Debes aceptar nuestra política de privacidad marcando la casilla ....');
                    return false;
                }
            }
        });
        </script>
        <?php
    }
}

//sin validación js
add_filter( 'preprocess_comment', 'verify_comment_privacy' );
function verify_comment_meta_data( $commentdata ) {
    if ( ! isset( $_POST['privacy'] ) )
        wp_die( __( 'Error: Debes aceptar nuestra política de privacidad marcando la casilla ....' ) );

    return $commentdata;
}

//guarda el campo como comment meta
add_action( 'comment_post', 'save_comment_privacy' );
function save_comment_meta_data( $comment_id ) {
    add_comment_meta( $comment_id, 'privacy', $_POST[ 'privacy' ] );
}

Añade el código anterior al final de tu archivo functions.php del tema activo, recordando cambiar la URL de ejemplo de la política de privacidad por la tuya.

Lo que obtienes (dependiendo del tema, por cosas del HTML) es esto:

El código solicita aceptar la privacidad a todos los usuarios, conectados o no, y si no aceptan les muestra un error.

Además, el campo se guarda en tu base de datos, para que conste que han aceptado.

Añadir casilla de aceptación de la política de privacidad en los comentarios con plugins

Si prefieres hacer lo mismo con un plugin hay varios.

Uno de ellos, muy sencillo de usar, se llama WP Comment Policy Checkbox y solo tienes que instalarlo, activarlo, decirle en Ajustes > Comentarios cual es tu página de política de privacidad y ya está.

La casilla de marras aparecerá al final del formulario de comentarios, y antes del botón de enviar.

Otros plugins que permiten hacen lo mismo son los siguientes:

  • Agreeable: Puedes definir la página de privacidad, que se abre en nueva pestaña, y el campo de aceptación se guarda en la base de datos. Se adapta muy bien a casi cualquier tema.
  • Terms of Use: Puedes incluir la petición de aceptación casi en cualquier parte. También incluye un shortcode.

Con cualquiera de estos métodos solicitas el consentimiento expreso de tus usuarios para almacenar sus datos, les informas de tu política de privacidad, y se guarda el consentimiento en la base de datos, así que puedes dar por cumplida esta parte de la RGPD o GDPR.

Eso sí, hay más cosas que cumplir, que iremos viendo en el archivo de información de todo lo que debes saber para cumplir la RGPD, que iré actualizando poco a poco con más guías actualizadas.

Esto que lees es un contenido original de Ayuda WordPress - Recursos, themes, plugins y tutoriales en español y lo publicó Fernando primero aquí: Cómo añadir la aceptación de política de privacidad en los comentarios

Tutorial Divi: Menú móvil desplegable, extensible y plegable

$
0
0

Uno de los errores más comunes de usabilidad es ofrecer menús eternos que, cuando se visualizan en un dispositivo móvil, simplemente no se pueden utilizar, por su enorme extensión.

Y es que cuando nos ponemos a crear menús de navegación tendemos a pensar y visualizar los menús desde nuestro ordenador de escritorio.

Y sí, quedan muy bonitos y tal, con montones de submenús, submenús de menús, mega menús y montones de personalizaciones. Ahora bien, cuando los visualizas en un móvil resulta que dejan de tener utilidad alguna, y ofreces algo tan inútil como esto…

menu divi movil

¿No sería mejor ofrecer un menú, plegado por defecto, que pudiese el usuario desplegar a voluntad?

Esa es la idea.

Menú plegable / desplegable móvil en Divi

Si quieres ofrecer un menú que sea plegable y desplegable, solo tienes que añadir un poco de código.

Ve a Divi > Opciones del tema > Integración > Agregar código al <body> e insertar este código:

/* Estilos para menú plegable móvil Divi */
<style type="text/css">
#main-header .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-family: 'ETmodules'; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: '\4c'; top: 13px; right: 10px; }
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after { content: '\4d'; }
#main-header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important;  transition: all 1.5s ease-in-out;}
#main-header .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important; }
</style>
/* JS para menú plegable móvil Divi */
<script type="text/javascript">
(function($) {
      
    function setup_collapsible_submenus() {
        var $menu = $('#mobile_menu'),
            top_level_link = '#mobile_menu .menu-item-has-children > a';
             
        $menu.find('a').each(function() {
            $(this).off('click');
              
            if ( $(this).is(top_level_link) ) {
                $(this).attr('href', '#');
            }
              
            if ( ! $(this).siblings('.sub-menu').length ) {
                $(this).on('click', function(event) {
                    $(this).parents('.mobile_nav').trigger('click');
                });
            } else {
                $(this).on('click', function(event) {
                    event.preventDefault();
                    $(this).parent().toggleClass('visible');
                });
            }
        });
    }
      
    $(window).load(function() {
        setTimeout(function() {
            setup_collapsible_submenus();
        }, 700);
    });
 
})(jQuery);
</script>

Esta combinación de estilos CSS y JavaScript convertirán tu infumable menú eterno en móviles en algo mucho más fácil de usar, y desplegar, algo así…

Por defecto, el menú marcará los elementos padres de la navegación con un símbolo + a su lado a visualizarlo en un dispositivo móvil que, al pulsarlos, desplegará los submenús.

Al pulsar en el icono x se volverán a plegar.

Mucho más útil, fácil de usar.

Esto que lees es un contenido original de Ayuda WordPress - Recursos, themes, plugins y tutoriales en español y lo publicó Fernando primero aquí: Tutorial Divi: Menú móvil desplegable, extensible y plegable

Cómo desactivar pasarelas de pago según el método de envío

$
0
0

Hay muchos y diversos motivos por los que un gestor de un Ecommmerce puede querer desactivar pasarelas de pago específicas según el método de envío.

En este artículo vamos a ver cómo, mediante unas pocas líneas de código, puedes desactivar pasarelas de pago basándote en el método de envío elegido por el cliente en el momento del pago.

En este ejemplo desactivaremos la pasarela de pago ‘bacs‘ (transferencia bancaria) para el método de envío ‘local_pickup‘ (recogida local).

Para empezar necesitamos tener el ID tanto de la pasarela de pago como del método de envío.

Para saber los IDs de las pasarelas de pago puedes verlos en la sección de ajustes correspondientes a las pasarelas de pago disponibles y el método de envío. Solo tienes que ir a WooCommerce > Ajustes > Finalizar compra, abajo del todo, junto a las pasarelas verás sus IDs

Obtener los IDs de los métodos de envío es algo más complicado. Para ello debes abrir el Inspector del navegador e identificar el atributo value de cada botón radio disponible.

Así, por ejemplo, verás que el value del botón de Recogida local es local_pickup ,que viene a ser el ID de ese método de envío.

Ahora solo nos queda añadir el siguiente código a nuestro plugin de utilidades o al archivo functions.php del tema activo.

/**
 * Filtrar pasarelas de pago por metodo de envio
 */
function mis_pasarelas_disponibles( $available_gateways ) {
	global $woocommerce;
     
    if ( !is_admin() ) {
         
        $chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
         
        $chosen_shipping = $chosen_methods[0];
         
        if ( isset( $available_gateways['bacs'] ) && 0 === strpos( $chosen_shipping, 'local_pickup' ) ) {
            unset( $available_gateways['bacs'] );
        }
         
    }
     
return $available_gateways;
     
}

En este código verás que comprobamos si está seleccionado el método de envío local_pickup, y en caso de ser así entonces luego desactivamos la pasarela de pago bacs. Por supuesto, cambia estos IDs a los que quieras aplicar en tu caso particular.

Si quieres desactivar varias pasarelas de pago para un método de envío específico entonces copia la línea que empieza por unset y añade ahí las otras pasarelas de pago a desactivar para ese método de envío.

Esto que lees es un contenido original de Ayuda WordPress - Recursos, themes, plugins y tutoriales en español y lo publicó Fernando primero aquí: Cómo desactivar pasarelas de pago según el método de envío

Cómo desactivar el editor Gutenberg de WordPress

$
0
0

Bueno, aún no sabemos cuándo estará disponible el nuevo editor por defecto de WordPress,  Gutenberg, pero como está claro que vendrá sí o sí con WordPress 5.0, y a alguno he oído por ahí que no le viene bien, vamos a ver cómo desactivarlo.

Porque sí, Gutenberg mola mil, puede llegar a establecer un estándar en maquetadores visuales, pero ni le llega a la suela del zapato a Elementor, no digamos a Divi, y ni puede compararse, pues además parte del principio erróneo de ser un maquetador para entradas y … ¿cuántas veces hemos dicho que no se deben maquetar entradas?

Tantos años criticando a los maquetadores visuales por los shortcodes, cuando solo se usaban para portadas, landing y páginas específicas, casi nunca para entradas, y de repente Gutenberg aparece como editor por defecto para las entradas. ¿Alguien lo entiende?

Tampoco han tenido en cuenta que para una cosa realmente fácil, sin curva de aprendizaje, que hay en WordPress, el editor, van y lo cambian por un sistema de bloques.

Lo que provocará esto es que en las redacciones de los medios digitales no querrán actualizar, con lo que se genera un problema de seguridad.

En fin, un lío, así que al lío.

Cómo desactivar el editor Gutenberg de WordPress con una sola línea de código

Si no te da miedo andar con códigos, nada más fácil.

Solo tienes que copiar la siguiente línea de código y añadirla al final del archivo functions.php del tema activo o de tu plugin de personalizaciones.

add_filter( 'gutenberg_can_edit_post_type', '__return_false' );

Guarda los cambios y adios Gutenberg.

Cómo desactivar el editor Gutenberg de WordPress con un plugin

¿Que no te atreves o no te gusta andar con códigos?

Nada, no hay problema. He creado un plugin muy ligero, de solo 2kb de código, con el descriptivo nombre de No Gutenberg, que hace lo mismo. Solo tienes que instalarlo desde tu escritorio de WordPress.

Ve a Plugins > Añadir nuevo y busca por “no gutenberg“, lo instalas, lo activas y ya está, no tienes nada más que hacer.

Con cualquiera de los dos métodos desactivas totalmente el editor Gutenberg y tendrás tu editor de siempre por defecto.

Pasarás de que por defecto se cargue Gutenberg a que desaparezca y solo tengas, y de nuevo por defecto, tu editor de WordPress clásico.

Esto que lees es un contenido original de Ayuda WordPress - Recursos, themes, plugins y tutoriales en español y lo publicó Fernando primero aquí: Cómo desactivar el editor Gutenberg de WordPress


Oculta la pantalla de acceso de WordPress sin plugins

$
0
0

Una de las medidas básicas de seguridad en WordPress es ocultar la pantalla de acceso y/o registro de WordPress, para evitar ataques de fuerza bruta y, simplemente, ponérselo más difícil a los hackers.

El motivo

La causa por la que es importante ocultar la pantalla de acceso de WordPress es debido a que la mayoría de los hackers utilizan rastreadores que buscan direcciones del tipo /wp-login.php o /wp-admin/ accesibles en las que poner en marcha sus máquinas automáticas de detección y prueba de usuarios y contraseñas.

Al ocultar tu pantalla de acceso por algo que no sea el estándar de WordPress te quitas de en medio a miles de estos atacantes vagos que usan aplicaciones para hackear instalaciones de WordPress.

La(s) solución(es)

Una solución muy común para el administrador de WordPress es utilizar plugins de seguridad como iThemes Security o All in One WP Security, que incluyen utilidades para ocultar la pantalla de acceso, y no es mala solución.

Pero lo que yo te propongo hoy es conseguir lo mismo sin plugins, por si no necesitas las otras tropecientas utilidades de los plugins de seguridad.

El código

Lo que vamos a hacer es crear una redirección de la pantalla de acceso de WordPress a una URL de nuestra elección. Para ello nos valdremos del archivo .htaccess.

Búscalo en el directorio raíz de tu instalación de WordPress y ábrelo con tu aplicación favorita de FTP o desde el panel de tu alojamiento.

A continuación añade las siguientes líneas, mejor antes de donde están los rewrite de WordPress (#BEGIN WORDPRESS):

# BEGIN Ocultar acceso WP
RewriteRule ^milogin$ https://%{SERVER_NAME}/wp-login.php?key=123abc&redirect_to=https://%{SERVER_NAME}/wp-admin/index.php [L]

RewriteCond %{HTTP_REFERER} !^https://%{SERVER_NAME}/wp-admin
RewriteCond %{HTTP_REFERER} !^https://%{SERVER_NAME}/wp-login.php
RewriteCond %{HTTP_REFERER} !^https://%{SERVER_NAME}/login
RewriteCond %{QUERY_STRING} !^key=123abc
RewriteCond %{QUERY_STRING} !^action=logout
RewriteCond %{QUERY_STRING} !^action=lostpassword
RewriteCond %{REQUEST_METHOD} !POST
# END Ocultar acceso WP

Notas importantes

El código anterior es de ejemplo, así que hay cosas que debes cambiar:

  • En la línea 2 debes cambiar milogin por el slug de tu URL de acceso personalizada (acceso, entrada, lo que quieras). La idea es que tu URL de acceso será a partir de aquí https://tudominio.es/milogin, o lo que hayas elegido tú, por ejemplo, https://tudominio.es/acceso.
  • En las líneas 2 y 7 debes cambiar la key con 123abc por otra cosa. Es una clave oculta que no verán los hackers. La única regla es usar lo mismo en ambas líneas y usar solo letras y números.

Y ya está. Guarda los cambios y comprueba que funciona. Si tras guardar ves un error 500 en tu web será que algo has puesto mal en el código, repásalo y modifícalo.

Esto que lees es un contenido original de Ayuda WordPress - Recursos, themes, plugins y tutoriales en español y lo publicó Fernando Tellado primero aquí: Oculta la pantalla de acceso de WordPress sin plugins

Cómo crear una paleta de colores personalizada para el editor Gutenberg

$
0
0

Ya sabrás que no soy especialmente un gran fan del editor Gutenberg. No de su filosofía de introducir edición visual a WordPress, que sabes que sí, que creo que es necesario, sino del modo de implantarlo por narices, y de sus primeras versiones, como sustituto del editor por defecto en las entradas, un error garrafal.

Ahora bien, una cosa no quita la otra, y nos va a tocar, sí o sí, adaptarnos, así que mejor aprender cosillas, trucos, del editor Gutenberg, como este que te propongo hoy, no se si por convicción o porque me ha abducido José Ángel Vidania.

Pues bien, una de las curiosidades que incorpora el editor Gutenberg son las paletas de colores, que por defecto es así:

Lo que igual no sabes es que estas paletas de colores las puedes personalizar, ya sea porque usas una combinación especial en tu web, porque eres desarrollador de temas, o simplemente porque te gusta enredar.

En cualquiera de los casos, es muy fácil añadir tu propia paleta de colores. Solo tienes que editar el archivo functions.php del tema y añadir algo así:

/* Paleta de colores personalizada para Gutenberg */
add_theme_support( 'editor-color-palette',
	'#a156b4',
	'#d0a5db',
	'#eee',
	'#444'
);

Al guardar tus cambios lo que obtendrás es lo siguiente:

Lógicamente, en el código pon los colores (en hexadecimal) que quieras en tu paleta de colores. Aquí he optado por dos tonos de magenta, un gris claro y un gris oscuro (básicos).

Como ves, personalizar Gutenberg es muy fácil, y hay que agradecer al equipo de desarrollo la enorme documentación que está generando para este nuevo y flamante editor de WordPress, te guste o no.

Esto que lees es un contenido original de Ayuda WordPress - Recursos, themes, plugins y tutoriales en español y lo publicó Fernando Tellado primero aquí: Cómo crear una paleta de colores personalizada para el editor Gutenberg

Divi lanza la API para desarrolladores

$
0
0

Con la llegada de la versión 3.1, Divi ha sacado a la luz una completa API para desarrolladores que marcará el futuro de este maquetador visual, al facilitar enormemente la programación de módulos para el conocido y popular tema y constructor visual.

Divi Developer API

La nueva API tiene una inmensa documentación y tutoriales, así como  una utilidad de creación de extensiones para Divi para hacer más fácil hacer tus propios módulos de Divi.

La importancia de este movimiento es vital, pues abre la puerta a la creación de módulos de terceros y un enorme ecosistema alrededor del popular maquetador.

Con la nueva API puedes crear módulos y extensiones para Divi adecuados a tus necesidades o las de tus clientes. Además, usando un componente personalizado de React se puede mostrar una vista previa de tu módulo en el maquetador a medida que lo programas.

Compatibilidad

Ya existen montones de módulos de otros programadores para Divi, pero hasta ahora estos módulos no funcionaban bien en el modo visual de portada, y solo podían editarse en el constructor clásico.

Con esta nueva herramienta esos mismos módulos se pueden actualizar para que funcionen también en el editor visual, igual que en el clásico.

Aprende a programar con Divi

En cuanto a la documentación para desarrolladores, incluyen tutoriales paso a paso que te enseñan a crear tus propios módulos para Divi, además de ofrecer un vistazo completo de la API de Divi.

Aunque estés empezando con el desarrollo web, los tutoriales para principiantes te guían por todo el proceso.

La nueva herramienta de creación de extensiones

Con la nueva utilidad de creación de extensiones para Divi se incluye un modelo de creación rápida de módulos personalizdos para Divi.

Con un solo comando pones en marcha el entorno de desarrollo, instalas dependencias y creas una aplicación base de React con un plugin para WordPress que tiene todos los archivos y estructura que te permita registrarlo para usarlo con Divi y WordPress.

Además, produce un módulo básico que funciona desde el primer momento. A partir de ahí solo tienes que configurar tu extensión y configurar tu módulo. Cuando termines, con un solo comando optimizas tu extensión y la dejas lista para producción.

Esta nueva utilidad es de código abierto, y está basada en la aplicación Create React. Puedes usarla, copiarla, modificarla, lo que quieras.

Un ejemplo para aprender

Además de la utilidad de creación de extensiones, la gente de Elegant Themes también ha creado un ejemplo básico de extensión para Divi que puedes usar para aprender de él.

Es un ejemplo de cómo debe crearse un módulo para Divi. Si te gusta aprender revisando código te va a encantar.

Divi se ha preparado para el futuro

Las herramientas cerradas no tienen futuro, y si quieres tener futuro debes abrir tu código a otros. Es el modelo de Android frente al de Microsoft o Apple, y la nueva API y herramientas para Divi son un gran paso para abrir esta tecnología a otros y así hacer más grande aún el maquetador, llevándole a donde cada programador quiera llegar.

Un movimiento muy inteligente.

Esto que lees es un contenido original de Ayuda WordPress - Recursos, themes, plugins y tutoriales en español y lo publicó Fernando Tellado primero aquí: Divi lanza la API para desarrolladores

Cómo quitar las Google Fonts de Divi, Genesis y más temas

$
0
0

Como seguramente sabrás, hay muchos, muchísimos temas que cargan Google Fonts, a veces en exceso, pero hay que entenderlo, y es que para un desarrollador de temas es comodísimo cargar fuentes desde Google para hacer su tema más atractivo visualmente, sin tener que alojarlas en el tema, reduciendo su peso.

Ahora bien, esto tiene un problema, o varios.

Google Fonts y el WPO

Si has analizado tu web en cualquier servicio de medición de optimización y velocidad habrás visto que detectan la carga de recursos externos desde Google Fonts como un problema.

Esto es debido a que son llamadas externas que tu web hace para finalmente mostrar su contenido, desde recursos que no siempre tienen porque estar disponibles, y sí, es un problema.

Uno pensaría que ¡coño, si son de Google, cargarán rápido! Pero ¿y si Google borra mañana esa fuente por un problema de derechos, rentabilidad, o lo que sea? Y es solo un ejemplo.

También puede pasar que los servidores donde se alojan las Google Fonts tengan retardos de carga por cualquier motivo, lo que afectaría a la carga de tu web, pues habría recursos que no terminarían nunca de mostrarse/cargarse.

Así que lo mejor es alojar las fuentes localmente, o no cargarlas desde Google Fonts.

Google Fonts y la privacidad

Por si no lo sabías, resulta que si tu tema usa Google Fonts estás compartiendo las IPs de tus visitantes con Google. Vamos, que Google no pierde oportunidad de obtener información sobre nuestros usos de Internet en cualquier ocasión.

Y claro, si estás comprometido con la privacidad, no digamos desde la aparición del RGPD, deberías o informar a tus usuarios en tus políticas de privacidad de que eso está pasando, o simplemente evitar la carga de Google Fonts en tu web, y que se muestre con las fuentes del sistema del usuario.

¿Cómo desactivo la carga de Google Fonts?

Si lo tienes claro, vamos a ver cómo impedir la carga de Google Fonts, y en consecuencia la recuperación de datos privados de tus visitantes (IPs) con Google.

Lo que haremos, tanto para Divi como para cualquier otro tema, es utilizar la función de WordPress wp_dequeue_style, con la que evitaremos la carga de Google Fonts de la hoja de estilos CSS del tema.

Para ello necesitamos saber el nombre a incluir en el $handle de la función, y aquí tienes una lista de los temas más utilizados:

Tema Nombre de hoja de estilos con Google Fonts ($handle)
Twenty Twelve twentytwelve-fonts
Twenty Thirteen twentythirteen-fonts
Twenty Fourteen twentyfourteen-fonts
Twenty Fifteen twentyfifteen-fonts
Twenty Sixteen twentysixteen-fonts
Twenty Seventeen twentyseventeen-fonts
Genesis Sample genesis-sample-fonts
Extra extra-fonts
Divi divi-fonts

Una vez sabemos la función a utilizar y el $handle solo tenemos que añadir nuestro código al archivo functions.php del tema activo, así:

// Quitar Google Fonts del tema Divi
add_action( 'wp_print_styles', 'ft_dequeue_divi_fonts_style' );
function ft_dequeue_divi_fonts_style() {
      wp_dequeue_style( ‘divi-fonts' );
}

En el ejemplo anterior estamos evitando la carga de Google Fonts en Divi.

Para que veas otro ejemplo, en Genesis sería así:

// Quitar Google Fonts del tema Genesis Sample
add_action( 'wp_print_styles', 'ft_dequeue_genesis_fonts_style' );
function ft_dequeue_genesis_fonts_style() {
      wp_dequeue_style( ‘genesis-sample-fonts' );
}

Fácil ¿eh?

¿Prefieres usar un plugin?

Si no te animas con el código también puedes usar un plugin como Disable Google Fonts, pero solo si tu tema es alguno de estos: Twenty Twelve, Twenty Thirteen, Twenty Fourteen, Twenty Fifteen, Twenty Sixteen, Twenty Seventeen.

¿Cómo alojo localmente las Google Fonts?

Otra posibilidad, por supuesto, sería almacenar localmente las Google Fonts que use tu tema. De este modo mantienes totalmente la estética de tu tema al mismo tiempo que respetas la privacidad de tus visitantes de cara a Google.

En este caso el proceso pasa por descargar las fuentes de Google, alojarlas en tu servidor y cambiar las llamadas internas de la hoja de estilos, para que apunten a la nueva dirección donde están las fuentes, como ya vimos.

Es algo más complicado pero una buena solución en cualquier caso.

Esto que lees es un contenido original de Ayuda WordPress - Recursos, themes, plugins y tutoriales en español y lo publicó Fernando Tellado primero aquí: Cómo quitar las Google Fonts de Divi, Genesis y más temas

Cómo exportar emails de los comentarios de WordPress

$
0
0

En ocasiones habrás tenido que hacer limpia de tu base de datos o de tus usuarios, pero el problema es que pierdes unos contactos de gran interés.

Igualmente, si quieres enviar correos a tus visitantes que han comentado el proceso interno puede ser tedioso, y sería mejor enviarles un correo mediante un sistema de newsletter ¿no?

Pues vamos a ver un modo sencillo de exportar lo emails de tus comentaristas, para que puedas tenerlos en un formato más adecuado y limpio como para enviarles un correo o una newsletter, por supuesto con consentimiento previo.

Para ello vamos a utilizar un comando SQL así que iremos al panel del alojamiento y abriremos la aplicación PHPMyAdmin, que es el gestor de bases de datos.

Una vez dentro selecciona tu base de datos y ve a  la pestaña SQL

Ahí es donde ejecutaremos el siguiente comando SQL:

SELECT DISTINCT comment_author_email FROM wp_comments;

Donde deberás sustituir el prefijo por defecto del código (wp_) por el que tú uses.

En cualquier modo es fácil porque PHPMyAdmin tiene un buscador predictivo a medida que tecleas el nombre de una tabla.

A continuación pulsa el botón continuar, y te mostrará los resultados:

Solo te queda pulsar el enlace de Exportar de abajo de la lista y en la siguiente pantalla elegir el formato, por ejemplo CSV.

Y te exporta una lista super mona, para usarla a tu voluntad.

¿Ah, que prefieres un plugin?

Pues nada, aprendes menos pero existir existe, se llama Comments Emails, y es muy fácil de usar … y tirar, cuando lo hayas terminado de utilizar.

Esto que lees es un contenido original de Ayuda WordPress - Recursos, themes, plugins y tutoriales en español y lo publicó Fernando Tellado primero aquí: Cómo exportar emails de los comentarios de WordPress

Cómo desactivar el editor Gutenberg en tipos de contenido personalizados

$
0
0

El advenimiento del editor Gutenberg está cada vez más cerca, y queramos o no lo tendremos como característica principal de WordPress 5.0 así que más vale que nos vayamos preparando, para quererlo o para odiarlo.

Si lo amas no hay casi nada más que hablar, pero … algunos, discrepamos “un poco” del modo en el que nos han metido Gutenberg, así que no está de más tomar medidas e ir aprendiendo cómo controlar el bicho.

Si simplemente no lo quieres, ya te expliqué cómo desactivar Gutenberg completamente, pero si aún te lo estás pensando, pero tienes claro que hay tipos de contenido personalizados (los famosos custom post types) en los que no quieres que cargue, por motivos técnicos o lo que sea, aquí tienes la solución.

Solo tienes que añadir una función como esta a tu archivo functions.php del tema activo o a tu maravilloso plugin de funciones personalizadas:

//Desactivar gutenberg en CPT project
function ayudawp_disable_gutenberg_project($is_enabled, $post_type) {
	
	if ($post_type === 'project') return false; // cambia project por tu CPT
	
	return $is_enabled;
	
}
add_filter('gutenberg_can_edit_post_type', 'ayudawp_disable_gutenberg_project');

Como el mismo código indica, solo tienes que cambiar el tipo de contenido personalizado (CPT) del código por el tuyo en el que no quieras que se cargue Gutenberg.

Guardas los cambios y ¡conseguido! ¡Gutenberg controlado!

Esto que lees es un contenido original de Ayuda WordPress - Recursos, themes, plugins y tutoriales en español y lo publicó Fernando Tellado primero aquí: Cómo desactivar el editor Gutenberg en tipos de contenido personalizados

Cómo quitar el CSS adicional del Personalizador de WordPress

$
0
0

Desde WordPress 4.7 tenemos en el Personalizador la opción de “CSS adicional“, con la que añadir clases CSS personalizadas a nuestro sitio, y aunque es una utilidad fantástica si sabes CSS es un estorbo para el que no tiene ni idea o no quiere usarlo ni que ocupe espacio en el Personalizador.

Son muchas las situaciones en las que es posible que prefieras que no se muestre la opción de “CSS adicional” en el Personalizador.

Desde clientes de los que no te fías que anden retocando lo que no deben a colaboradores que se sentirán atraídos a modificar estilos de la web a la primera de cambio.

Así que vamos a ver varios modos de quitar la opción de “CSS adicional” del Personalizador de WordPress.

Elimina la opción de CSS adicional del Personalizador

Lo más rápido y sencillo es a añadir el siguiente código al archivo functions.php del tema (hijo) activo:

//Eliminando CSS adicional del personalizador
add_action( 'customize_register', 'ft_customize_register' );

function ft_customize_register( $wp_customize ) {

    $wp_customize->remove_control( 'custom_css' );
}

Con el código anterior quitas la utilidad, pero puedes ir un paso más allá para quitar la sección entera. Para ello debes sustituir la última línea de código por la siguiente, así:

//Eliminando CSS adicional del personalizador
add_action( 'customize_register', 'ft_customize_register' );

function ft_customize_register( $wp_customize ) {

    $wp_customize->remove_section( 'custom_css' ); //seccion entera fuera
}

Controlar qué perfil de usuario podrá ver o no el CSS adicional

Otra posibilidad es que lo controles por cada perfil de usuario. Para ello nada mejor que el plugin Members, una joya que uso desde siempre.

Solo tienes que editar los perfiles a los que quieras desactivar esta posibilidad y desmarcar los permisos de “HTML sin restricciones

¿Y si quiero que un perfil usuario tenga HTML sin restricciones pero no acceso al CSS adicional?

Bien, en este caso solo tienes que añadir la siguiente función a tu functions.php:

add_filter( 'map_meta_cap', 'ft_map_meta_cap', 10, 3 );

function ft_map_meta_cap( $caps, $cap, $user_id ) {

    if ( 'edit_css' === $cap ) {
        $caps = array( 'do_not_allow' );
    }

    return $caps;
}

En esta ocasión se modifica la asignación de permisos de modo que el gancho del filtro map_meta_cap, que es el que habilita para el HTML sin restricciones, no pueda editar CSS.

Esto que lees es un contenido original de Ayuda WordPress - Recursos, themes, plugins y tutoriales en español y lo publicó Fernando Tellado primero aquí: Cómo quitar el CSS adicional del Personalizador de WordPress


Consejos que deberías tener en cuenta si vas a desarrollar bloques para Gutenberg

$
0
0

Aunque no soy muy fan de cómo se ha decidido la implantación de Gutenberg, en realidad sí estoy muy interesado en el desarrollo en sí del nuevo editor de WordPress.

Es por ello que, como ando metido en harina para prepararme a lo que vendrá, voy a compartir contigo algunas de las cosas que he estado aprendiendo a la hora de desarrollar bloques para el nuevo editor Gutenberg de WordPress, así como la adaptación de los temas a Gutenberg.

Solo recordarte que ni soy programador de carrera ni un experto en Gutenberg (aún), simplemente voy aprendiendo a crear bloques para el editor.

Los siguientes trucos son cosas que he ido aprendiendo enredando e investigando en recursos como el mismo plugin Gutenberg el tema de base para Gutenberg, Gutenberg Best Practicesesta joya llamada Create Guten Block.

¿Nos ponemos?

¿Dónde incluyo los bloques, en el tema o en plugins?

Ya lo hemos comentado alguna vez, cuando hablábamos de si es mejor editar el functions.php o usar un plugin, y la regla base es que si algo afecta a la visualización piensa en el tema, y si añades funcionalidades usa un plugin.

Así que cuando pensamos en bloques aplicamos el mismo principio, y visto que la mayoría de los bloques añaden funcionalidades a WordPress en su conjunto, en una utilidad clave y base como es el editor, creo que tienen más sentido como plugins.

Es más, piensa por un momento… ¿Si cambio de tema perderé la funcionalidad que hace el bloque en mi contenido? La respuesta casi siempre será sí. WordPress ya no sabrá qué hacer con la información del bloque, guardada en la base de datos, pero asociada a un tema activo que ya no está.

Por el contrario, si tu bloque está en un plugin, o lo desactivas, o será agnóstico del tema activo, funcionará con todos.

Estructura de archivos de un bloque

Aunque siempre variará de desarrollador a desarrollador, y no hay una estructura de archivos estándar, sí que hay patrones a la hora de desarrollar bloques para Gutenberg.

Un plugin de bloques típico consiste de un archivo mi-plugin-de-bloques.php, utilizado para hacer enqueue de los bloques, y un directorio /bloques en el que alojar todos tus bloques.

Dentro del directorio /bloques puedes hacer subcarpertas para bloques específicos, como por ejemplo /bloque-personalizado. Y dentro del directorio /bloque-personalizado estarían tus archivos index.jseditor-styles.css y styles.css de tu bloque.

Visto lo anterior, para verlo más claro, hablamos de una estructura de este estilo:

wp-content/plugins/mi-plugin-de-bloques
├── mi-plugin-de-bloques.php
├── /bloques
	  ├── /bloque-personalizado // un bloque personalizado
		  ├── index.js // JS principal del plugin
		  ├── editor-styles.css // estilos para el editor
		  ├── styles.css // estilos para portada
	  ├── /otro-bloque-personalizado // otro directorio de bloques personalizados

Poniendo nombre a los bloques / namespace

Cuando registras un bloque, el nombre tienes que estructurarlo como namespace/nombre-del-bloque, y en nombre-del-bloque solo puedes usar minúsculas, números y guiones simples, además de que siempre debe empezar por una letra.

Por otro lado, namespace es el nombre de tu plugin. Luego en el ejemplo anterior namespace/nombre-del-bloque en realidad debería ser algo como mi-plugin-de-bloques/bloque-personalizado.

Traducciones

Si ya has publicado algún plugin o tema en WordPress.org ya deberías saber cómo prepararlos para traducción.

Al trabajar con bloques se hace prácticamente igual, a pesar de que los bloques se crean principalmente con JavaScript. Básicamente ten en cuenta que siempre debes hacer traducibles tus bloques, igual que tus plugins y temas, y además es fácil de hacer.

Ojo con los temas

Lo principal que debes recordar es que los bloques pueden incluir sus propios estilos, necesarios para que funcionen correctamente. Pero los temas pueden sobrescribir los estilos de los bloques, como en el ejemplo que vimos hace unos días.

Hay pocas cosas en Gutenberg que requieran compatibilidad con los temas, principalmente debido a la naturaleza de cómo está programado Gutenberg, y a la propia dificultad de los bloques de facilitar los estilos adecuados.

Los nuevos alineamientos ancho y completo

A este respecto lo más destacado que debes tener en cuenta son las nuevas opciones de alineamiento de imágenes alignfull y alignwide. Se pueden usar para imágenes, y también para bloques.

El problema a la hora de añadirlos a los bloques es que puede que no funcionen en algunos temas, especialmente en los que tengan barras laterales.

Añadir al tema activo la compatibilidad con los nuevos alineamientos es tan fácil como llamar a la función add_theme_support( 'align-wide' ); en el archivo functions.php de tu tema, así:

function ayudawp_setup_theme_supported_features() {
    add_theme_support( 'align-wide' );
}

add_action( 'after_setup_theme', 'ayudawp_setup_theme_supported_features' );

Luego no te olvides de añadirle estilos a los nuevos alineamientos en la hoja de estilos de tu tema.

Paletas de color de los bloques

Una de las cosas más chulas de Gutenberg es el selector de colores, que ofrece al desarrollador de temas control total sobre a qué colores puede cambiar el usuario para así ofrecer una paleta de colores consistente al crear el contenido.

Para incorporar compatibilidad de tu tema con esta funcionalidad, puedes añadirla, con tu paleta de colores personalizada, al tema activo añadiendo algo así al archivo functions.php:

function ayudawp_setup_theme_supported_features() {
    add_theme_support( 'editor-color-palette',
        '#a156b4',
        '#d0a5db',
        '#eee',
        '#444'
    );
}

add_action( 'after_setup_theme', 'ayudawp_setup_theme_supported_features' );

E incluso puedes ir más allá y desactivar el selector de colores personalizados de Gutenberg, para solo mostrar las opciones por defecto. Para lograrlo añade esto a tu archivo functions.php:

function ayudawp_setup_theme_supported_features() {
    add_theme_support( 'disable-custom-colors' );
}

add_action( 'after_setup_theme', 'ayudawp_setup_theme_supported_features' );

Advertencia: Si añades todas estas opciones puedes hacerlo en la misma función. No definas 3 veces ayudawp_setup_theme_supported_features o tendrás un feo error de PHP.

Resumiendo

Sé que no es mucho lo que te he contado, pero espero que hayas aprendido algo nuevo sobre Gutenberg y cómo crear tus propios bloques e integrarlos con tus temas.

Ya iremos viendo más guías y trucos para Gutenberg, y por supuesto siempre puedes dejar tus propios trucos y consejos para Gutenberg en los comentarios.

Esto que lees es un contenido original de Ayuda WordPress - Recursos, themes, plugins y tutoriales en español y lo publicó Fernando Tellado primero aquí: Consejos que deberías tener en cuenta si vas a desarrollar bloques para Gutenberg

Como modificar el CSS de tu WordPress sin utilizar un Child Theme

$
0
0

Seguro que más de una vez has tenido que modificar el código CSS de tu WordPress y has tenido miedo de perderlo todo al actualizar la versión tu WordPress.

Estoy seguro que después de mucho leer en internet al final has llegado a la conclusión de que la mejor solución para cambiar el CSS de tu WordPress sin perderlo con una actualización es mediante un Child Theme o tema hijo.

Pues bien, este proceso no es un tema sencillo y que requiere de unos conocimientos mínimos aunque haya plugins que lo hagan automáticamente.

Por ello hoy vengo a traerte un plugin con el que podrás modificar el CSS de tu WordPress sin que tengas que preocuparte de instalar temas hijos ni cosas raras. Solo necesitarás instalar el plugin y estarás listo para escribir líneas y líneas de código CSS.

El plugin del que te hablo es Simple CSS. Este plugin de wordpress actúa como una especie de tema hijo y da prioridad a esta hoja de estilos por encima del resto.

Una vez instalado el plugin solo tendrás que ponerte a escribir líneas de código en el nuevo plugin.

En caso de que alguna propiedad que hayas escrito en Simple CSS no sea respetada simplemente tendrás que añadir el código !important antes de finalizar cada propiedad.

Ejemplo:

.div {width: 800px !important;}

De esta manera te asegurarás que todas tus propiedades escritas en Simple CSS sean respetadas.

Además, con este plugin podrás hacer cosas tan interesantes como modificar el CSS de una página WordPress en concreto

plugin simple css

Para ello, simplemente tendrás que indicar la página en la que se modificara el CSS (ID) y posteriormente redactar el código CSS

.page-id-110 .div {width: 800px !important;}

Para conocer el ID de una página de WordPress simplemente tendrás que editar una entrada o página en wordpress y fijarte en la URL que aparece una vez estes editando.

En esta URL podrás ver el ID de la página ya que es el número que aparece tras el código post=

tudominio.com/wp-admin/post.php?post=3384&action=edit

También podrás modificar el CSS de la sección blog de WordPress mediante este código:También podrás modificar el CSS de la sección blog de WordPress mediante este código:

.blog .div {width: 800px !important;}

Cómo podrás comprobar existen mil y una manera de modificar el CSS de tu WordPress con este plugin incluso si usas algún maquetador visual (Divi, Elementor, Visual Composer).

Ten en cuenta que este plugin es el complemento perfecto para este tipo de maquetadores ya que permite modificar el CSS de cualquier parte de la web ahorrando recursos y optimizando tu WordPress al máximo sin necesidad de ningún Child Theme.

Esto que lees es un contenido original de Ayuda WordPress - Recursos, themes, plugins y tutoriales en español y lo publicó Borja Aranda Vaquero primero aquí: Como modificar el CSS de tu WordPress sin utilizar un Child Theme

Aprende WordPress mientras desayunas: Evita la instalación y desinstalación de plugins y temas

$
0
0

En este nuevo vídeo de la serie creada con SiteGround te explico un maravilloso truco que llevo años aplicando a webs de clientes para evitar que te anden instalando o desinstalando plugins y temas.

¡Dentro vídeo!

El código del que se habla en el vídeo es nada menos que este:

define('DISALLOW_FILE_MODS', true);

¡Que lo disfrutes!

La entrada Aprende WordPress mientras desayunas: Evita la instalación y desinstalación de plugins y temas la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Optimiza WordPress desactivando los pingbacks propios

$
0
0

Seguramente ya sabrás que los pingbacks son esos enlaces que nos avisan de que alguien nos ha enlazado, que normalmente aparecen entre los comentarios de tu blog, como otro comentario más, en este caso en forma de enlace a la publicación que nos ha enlazado.

Estos pingbacks pueden ser útiles para saber quien nos enlaza, y seguir la conversación que generó tu publicación. Hasta ahí bien.

Pero resulta que también se generan pingbacks entre las entradas de tu propio sitio, algo totalmente irrelevante, pues para auto enlazarse hay métodos mejores, como enlazar directamente en tu entrada, o incluso entradas relacionadas mediante algún buen plugin.

Además, estos pingbacks propios son otro proceso más de WordPress que, aunque innecesario, provoca un retardo en la carga de cada una de tus entradas, pues tu sitio tiene que comprobar si hay pingbacks en la base de datos, y si existen mostrarlos junto a los comentarios.

Dicho esto, ya habrás podido adivinar que es otra de esas funciones de WordPress que podemos desactivar para optimizar nuestro sitio, tanto en la carga de nuestras páginas como en el consumo de recursos del servidor.

¿Estás decidido?

Desactiva todos los pingbacks a la brava

Si tienes claro que no vas a usar los pingbacks, es más, que ni siquiera necesitas saber quién te enlaza, y en consecuencia no hacer comprobaciones ni mostrarlos en tu sitio y en tus comentarios, lo más fácil es desactivarlos del todo.

¡Y nada más fácil!

Simplemente ve al escritorio de tu WordPress, y en el menú Ajustes > Comentarios, desactiva la casilla denominada “Permitir avisos de enlaces desde otros sitios (pingbacks y trackbacks) en los artículos nuevos

Desactiva los self pingbacks (propios) con una función

Si solo quieres desactivar los pingbacks propios, o self pingbacks, no hay un ajuste en WordPress, pero puedes añadir la siguiente función al archivo functions.php de tu tema activo o a tu plugin de personalizaciones.

/* Desactivar self pingbacks */
function ayudawp_no_self_pings( &$links ) {
  foreach ( $links as $l => $link )
        if ( 0 === strpos( $link, get_option( 'home' ) ) )
            unset($links[$l]);
}

add_action( 'pre_ping', 'ayudawp_no_self_pings' );

Guarda los cambios y da igual como tengas el ajuste anterior de WordPress que hemos visto, no se cargarán los pingbacks propios.

Desactiva los self pingbacks (propios) con un plugin

Si no te sientes cómodo añadiendo o modificando códigos, no te preocupes, hay plugins para hacer esto mismo.

Si solo quieres esta funcionalidad concreta hay un plugin sin ajustes que hace exactamente lo que hemos visto con el código anterior.

Se llama No Self Ping, y solo hay que instalarlo y activarlo, sin necesidad de configurar nada.

Pero si prefieres optimizar aún más cosas de WordPress, tienes mi plugin también gratuito WPO Tweaks, que desde la versión 0.9.12, y también sin tener que configurar nada, incluye esta funcionalidad de desactivar los pingbacks propios.

 

La entrada Optimiza WordPress desactivando los pingbacks propios la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Cómo añadir un índice en la tabla options de WordPress y por qué deberías hacerlo

$
0
0

La tabla options (wp_options por defecto, o idealmente con tu prefijo personalizado) de WordPress es la que va acumulando información sobre cada uno de los plugins, ajustes y configuraciones, y más cosas, que vas instalando a lo largo de la vida de tu web.

Si a esto le sumamos que la mayoría de los plugins no eliminan líneas de esta tabla, verás que poco a poco se va convirtiendo en un monstruo con miles de líneas, que WordPress comprueba y lanza en cada carga de página.

Como ya podrás imaginar, una tabla options grande puede ralentizar enormemente tu web, puesto que tu WordPress debe hacer multitud de peticiones y lanzamiento de solicitudes antes de cargar cada página para cada visitante.

Ergo, si pudiésemos limitar esta cantidad de solicitudes tu web cargaría más rápido, al tener que realizar menos consultas ¿no es así?

El culpable: Autoload

El culpable de todo esto es el campo Autoload de cada línea de la tabla options, normalmente con el valor en Yes, o sea, que sí, que se carga automáticamente mediante la función wp_load_alloptions().

¿Cuál es el problema de Autoload?

Pues muy simple, que carga automáticamente toda opción de la tabla options, aunque:

  • La opción del plugin no necesite cargarse en cada página (Ejemplo: formulario de contacto que carga sus ajustes en toda la web cuando solo está en una página).
  • El plugin ya no esté instalado y activo.
  • El tema ya no esté activo.
  • El plugin debería haber creado sus propias tablas y no meter sus opciones en la tabla options

Y, el verdadero problema es cuando se autocarga demasiado pero ¿qué es demasiado?

Nota importante: En este artículo vamos a trabajar directamente con la base de datos. Antes de ejecutar ninguna consulta o tocar algo en la misma haz una copia de seguridad.

Ejecuta este comando SQL, puedes hacerlo en PHPMyAdmin de tu panel del hosting:

SELECT SUM(LENGTH(option_value)) as autoload_size FROM mi_prefijo_options WHERE autoload='yes';

Nota: Cambia el prefijo del ejemplo por el tuyo, no te olvides.

Pulsa en el botón Continuar o ejecuta la consulta SQL y obtendrás el tamaño de la consulta de todos los valores con autoload e bytes. Y la regla debería ser:

  • Si el resultado del autoload_size es mayor de 1 Mb (aprox. 1.000.000 bytes) deberías hacer algo para optimizar esto.

En el ejemplo de la captura el tamaño es ridículo, así que si tus resultados son por el estilo ya acabaste de leer el artículo, dedica tu tiempo a bloguear algo.

Si obtuviste un resultado por encima de 1Mb, o simplemente quieres dedicar un rato a aprender algo más, sigue leyendo.

Dicho esto, ¿no sería mejor poder definir qué se carga y cuándo en nuestra instalación de WordPress?

Crea un índice en la tabla options

Hay varias maneras de adelgazar la tabla options, pero vamos a ver principalmente una que ha demostrado ser tremendamente eficaz y fácil de aplicar.

¿Por qué es la mejor solución?

La mejor solución a tablas options enormes que ralentizan tu web es crear un índice de la tabla options. En pruebas en sitios con muchas líneas con Autoload la diferencia entre cargar la tabla con y sin índice devuelven unos resultados fuera de toda duda.

Por si no sabes inglés: en rojo tiempo de carga Autoload sin índice, en azul con índice.

También puedes ver cómo se redujo el tiempo de carga en un sitio tras añadir un índice:

Las mejoras de rendimiento y velocidad son brutales, especialmente con bases de datos grandes, y lo mejor de todo es que crear un índice es muy sencillo.

Comprueba el índice

Una buena prueba a realizar antes de crear el índice es ver cuántas columnas (opciones) tienen Autoload en Yes, o sea, que se cargan. Se haría así:

SELECT COUNT(CASE WHEN autoload = 'yes' THEN 1 END) FROM mi_prefijo_options;

Para luego las que no se cargan, las que tengan Autoload en No.

SELECT COUNT(CASE WHEN autoload = 'no' THEN 1 END) FROM mi_prefijo_options;

Los resultados se verán así:

La regla a aplicar sería la siguiente:

  • Si los valores en No superan el 60% del total  entonces no necesitas un índice.

Crear un índice con comandos SQL

Si te sientes cómodo, puedes crear el índice ejecutando un comando así:

CREATE INDEX autoloadindex ON mi_prefijo_options(autoload, option_name);

De nuevo, puedes cambiar el nombre del índice, autoloadindex en el ejemplo, y debes cambiar el prefijo de la tabla options por el que tú uses.

Crear un índice con WP-CLI

Si prefieres usar la interfaz de comandos de WordPress WP-CLI, lo harías así:

wp db query "CREATE INDEX autoloadindex ON $(wp db prefix --allow-root --skip-plugins --skip-themes)options(autoload, option_name);" --allow-root

Crear un índice con plugins

En el caso de que no quieras o no te atrevas con SQL, también hay un plugin que te ayudará en esta tarea de la creación del índice.

Se llama Index Autoload y no tiene ni siquiera ajustes, lo activas y listo.

Eso sí, aunque sea un plugin, la regla de hacer copia de seguridad de la base de datos sigue vigente, no se te olvide.

Este plugin crea el índice del Autoload igualmente.

Ya no quiero el índice

Como no hay nada como la libertad de elección, si en algún momento ya no quieres el índice puedes ejecutar este comando para borrarlo:

DROP INDEX autoloadindex ON mi_prefijo_options

De nuevo, recuerda cambiar el nombre del índice y el prefijo de la tabla por los tuyos.

Si usaste la opción de hacerlo con el plugin al desactivarlo y borrarlo se borra también el índice.

¿De verdad merece la pena?

Aunque no hay nada mejor que hace una prueba, te daré algunos consejos:

  • Si las opciones en Autoload de tu tabla options pesan más de 1Mb merece la pena
  • Si el Autoload Yes supera el 60% merece la pena
  • Si tienes una tabla options grande merece la pena

El resultado es reducir las consultas de WordPress a la tabla options en más de un 90% en muchos casos, lo que redunda en mejores tiempos de carga en tu web.


Para aprender más

Aquí te dejo unos recursos para seguir aprendiendo sobre este asunto:

La entrada Cómo añadir un índice en la tabla options de WordPress y por qué deberías hacerlo la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Viewing all 326 articles
Browse latest View live




Latest Images