Todas las modificaciones para cambiar de HTTP a HTTPS en tu web
Repasaremos las modificaciones que hay que realizar en nuestro sitio para cambiar HTTP a HTTPS.
Realizaremos cambios en:
Backend de WordPress.
Base de Datos WordPress.
Google Analytics.
Search Console.
Adwords…
Cambiar dominio HTTP a HTTPS
Antes de realizar ningún cambio debes tener el certificado SSL instalado en tu servidor.
Consideraciones importantes antes de pasar de HTTP a HTTPS
Si trabajas con Adwords, para o suspende la campaña de Adwords. No te preocupes que va a ser poco tiempo, aproximadamente media hora.
Realiza una copia de la base de datos completa de tu WordPress.
Haz una copia de todos tus sitemap, los vamos a necesitar más tarde en el apartado de Search Console. Si no tienes sitemap de tus sitios hay herramientas online que te ayudan a crearlos. Es importante que no te saltes este paso si trabajas con Search Console.
Si tienes el plugin All in one WP Security desactívalo. Puede causar algún problema por la configuración de parámetro URL en la opción de Fuerza Bruta.
En algunos sitios el plugin: Divi Builder me ha ocasionado problemas durante el cambio. Lo mejor es desactivarlo mientras realizamos las modificaciones.
Primero: Cambios HTTP a HTTPS en los ajustes generales de WordPress
Entramos en el panel de administración de WordPress. En Ajustes >> Generales, modificamos la dirección HTTP de WordPress con la nueva dirección HTTPS. Hacemos lo mismo con la dirección de sitio, cambiando de HTTP a HTTPS. Guardamos los cambios y volvemos a entrar en el administrador.
Ahora mismo ya has convertido tu dominio en WordPress a HTTPS. Si entras en tu página ya puedes ver como el navegador advierte que la conexión es segura.
Segundo: Modificar enlaces internos HTTP a HTTPS. Enlaces que apuntan a nuestra web.
Cuando editamos post y páginas, cuando modificamos css, archivos PHP… solemos enlazar a diferentes recursos de nuestra propia página. Por un lado todos los enlaces a páginas internas deben cambiarse a HTTPS y todos los recursos que carguemos, como imágenes también.
Vamos a dividir el trabajo en dos partes. Primero vamos a modificar los enlaces que están en la base de datos, enlaces de páginas, post, biblioteca de medios… Después revisaremos todos los archivos de nuestro sitio: css, php…
Modificar enlaces HTTP en la base de datos de WordPress
Tenemos dos formas de cambiar HTTP a HTTPS en nuestra base de datos:
Ejecutar varias consultas MySQL en nuestra base de datos.
Instalar un plugin que realiza el trabajo de forma rápida y fácil.
Antes de seguir:
Vamos a realizar modificaciones importantes en base de datos. Pueden surgir algunos problemas que se solucionan con un respaldo de base de datos. Si no has realizado todavía una copia de seguridad de tu base de datos, este es el momento.
Consultas MySQL pasar de HTTP a HTTPS en base de datos WordPress
Para ejecutar las consultas MySQL debes tener acceso a tu administrador de base de datos. Debemos realizar múltiples consultas y modificaciones. En el ejemplo de hoy utilizaremos un plugin que nos ahorrará bastante trabajo.
Instalar el plugin Better Search Replace
En el repositorio de WordPress encontrarás varios plugins para realizar las modificaciones de HTTP a HTTPS en la base de datos de WordPress. Yo voy a hablar del plugin Better Search Replace que es el que estoy utilizando en todos los proyectos de mis clientes.
Después de la instalación verás en tu administrador de WordPress un nuevo menú:
El funcionamiento de este plugin es muy sencillo. Vas a encontrar tres pestañas dentro de la herramienta;
Búsqueda/Sustitución
Ajustes
Ayuda
Si entras en Ajustes y Ayuda verás que «ajustes» sirve para cambiar el valor de Max Page Size y «ayuda» para acceder a los foros de soporte. La opción del menú que nos interesa es: Búsqueda / Sustitución.
Primero: en el input «Buscar por» introduce la URL antigua de tu sitio, es decir la dirección con HTTP. Ejemplo: http://tusitio.com o http://www.tusitio.com
Segundo: en la opción «Sustituir por» la misma URL pero con HTTPS. Ejemplo: https://tusitio.com o https://www.tusitio.com
Tercero: Selecciona todas las bases de datos.
Cuarto: Si todavía no quieres que se realicen los cambios en tu base de datos y lo único que quieres es obtener los enlaces erróneos para revisarlos, activa «Ejecutar Simulacro». Para sobre-escribir la base de datos y cambiar de HTTP a HTTPS tienes que desmarcar esta casilla. Te aconsejo que primero hagas una prueba de simulacro y después ejecutes de nuevo el plugin con la casilla desactivada.
Quinto: Repite lo mismos pasos para tu dominio localizar urls antiguas con www y sin www. Si en primer paso seleccionaste http://tusitio.com, ahora haz la búsqueda con http://www.tusitio.com. En la opción «Sustituir por» no cambia la url.
Sexto: puedes eliminar el plugin.
Modificar enlaces HTTP en archivos
En tus archivos PHP, css … pueden quedar enlaces a tu sitio, a tu propia web que solicitan recursos HTTP o cargan páginas con HTTP.
Descarga tus archivos WordPress en tu ordenador empleando algún programa de transferencia FTP. Duplica la copia de la carpeta que has descargado para tener mayor respaldo de seguridad. Una copia la renombras por ejemplo «wordpress_viejo». Esta copia no la vamos a tocar. La guardamos por si al final de este proceso y después de subir los archivos modificados al Servidor Web vemos errores.
Con un editor de código realiza una búsqueda y sustitución múltiple en todos los archivos para http://tusitio.com y para http://www.tusitio.com.
La mayoría de estos editores permiten revisar los resultados antes de realizar ninguna modificación. Por ejemplo la captura de pantalla corresponde al editor: BBEdit. Si pulsas sobre Find All te muestra una lista de coincidencias encontradas que puedes revisar antes de pulsar Replace All.
Sube los archivos modificados al Servidor Web. Entra en tu web, vacía caché y repasa todas tus páginas en la medida de lo posible. Recuerda que si encuentras problemas has creado un respaldo de los archivos sin modificar «wordpress_viejo» que te permite recuperar tu web al estado anterior.
Tercero: Redirección 301 de HTTP a HTTPS en el archivo .htaccess
Vamos a añadir una redirección permanente 301 al archivo .htaccess de nuestro WordPress. Este archivo está alojado en la carpeta raíz de tu sitio. Si no tienes creado un archivo .htaccess puedes escribir un comentario y te explico como hacerlo.
Descarga el archivo y haz una copia de seguridad por si tienes problemas con el código. Abre el archivo y escribe las siguientes líneas dentro del archivo WordPress:
RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://tudominio.com/$1 [R,L]
Guarda los cambios y sube de nuevo el archivo a tu servidor web. Comprueba que puedes entrar sin problemas en tu página y navegar con ella.
Ya puedes volver a activar los plugins en tu WordPress.
Modificaciones HTTPS en Webmaster Tools
Cambios HTTPS en Analytics de Google
Si trabajas con G. Analytics debes indicar a esta herramienta que tu sitio ahora utiliza HTTPS. Una de las ventajas de esta modificación es que no perderemos los datos recogidos anteriormente por ANALYTICS cuando nuestro sitio se servía con HTTP.
Accede a tu cuenta de G. Analytics y abre el panel de administración. Tenemos que modificar las columnas PROPIEDAD y VISTA.
En la columna «Propiedad», pulsa sobre: «Configuración de la Propiedad». En URL predeterminada cambia de http a https y selecciona la vista predeterminada.
Guarda los cambios y accede a cada una de las columnas de VISTA que hayas creado. Pulsa sobre «Configuración de la vista» y cambia y cambia la URL del sitio web a HTTPS.
Configurar Search Console para HTTPS
Añadir todas las versiones del Sitio
En Search Console tenemos que añadir todas las versiones del sitio web, es decir crear dos nuevas propiedades:
una https://www.tusitio.com y otra https://tusitio.com
OJO => no elimines las anteriores versiones o propiedades creadas de http://tusitio.com y http://www.tusitio.com. En caso de no existir debes crearlas. Por cada sitio web tienes que tener 4 propiedades: HTTP+www, HTTP sin www, HTTPS+www y HTTPS sin www.
Debes ir a la «Página principal de Search Console» y añadir las nuevas propiedades. (Recuerda que para acceder a la Página Principal de Search Console puedes pulsar arriba a la izquierda sobre el nombre de la herramienta).
Seleccionar versión de sitio preferida
Después de crear las dos nuevas propiedades, vamos a una de ellas y pulsamos sobre la administración de propiedad (arriba derecha rueda dentada)
Pulsamos sobre «Configuración del Sitio» y seleccionamos el dominio preferido. Aquí tienes que seleccionar tu dominio con www o sin www según tus preferencias. Pulsa sobre «Guardar». En breve se aplicarán los cambios a la Propiedad.
Vuelve a la página principal de «Search Console» y selecciona la otra propiedad creada. De nuevo vamos a configuración del sitio y seleccionamos el mismo dominio preferido y guardamos los cambios.
Enviar los sitemap
Vamos a enviar dos sitemap a Search Console, el sitemap antiguo con HTTP y el nuevo con HTTPS. Abre la propiedad Search Console con la que trabajarás: HTTPS con o sin www según tu dominio preferido.
En el menú de la izquierda pulsa sobre rastreo y selecciona «sitemap». Ahora debes enviar los dos sitemap con las nuevas URLs bajo el protocolo HTTPS y con las URLs antiguas bajo el protocolo HTTP. De esta forma evitamos que Google detecte contenido duplicado y además le ayudamos en detectar los cambios y redirecciones a HTTPS.
Volvemos a nuestra cuenta de G. Analytics, pulsamos sobre administración y seleccionamos en la Columna Propiedad: «Configuración de Sitio«.
Recorremos la ventana derecha de opciones y casi al final encontramos: «Ajustar Search Console» pulsamos y se abre otra ventana con un botón para editar la vinculación. Cuando lo selecciones debes encontrar un listado de todas las propiedades que hemos creado en Search Console. Selecciona la propiedad adecuada con HTTPS y guarda los cambios.
Ya hemos terminado con Google Analytics y Search Console. Revisa las dos herramientas cada x días y si tienes alguna duda puedes escribir un comentario.
Cambios HTTPS en Adwords
Revisa tus anuncios y comprueba y modifica si es necesario la URL de destino de los anuncios. Después de realizar los cambios puedes activar nuevamente tus campañas.
Redes sociales, enlaces externos y más
Revisa la configuración de tus Redes sociales y modifica la URL que enlaza a tu sitio web, detalles de contacto y enlaces a tu sitio, por lo menos los de las publicaciones más importantes.
Si utilizas paypal, revisa sobre todo las URLs de retorno de compra, error…
Intenta contactar con aquellas páginas externas que apuntan a tu sitio y que son enlaces de calidad para avisarles del cambio de http a https.
Como último consejo repasa los plugins que utilizas en tu WordPress y las Herramientas externas para asegurar que realizas todas las modificaciones al cambiar HTTP a HTTPS en tu sitio.
Es un post muy largo y con muchas indicaciones, seguro que he olvidado algo. ¿Echas de menos algún dato importante?¿Has cambiado a HTTPS y has tenido algún problema?
En la mayoría de los casos cuando creamos enlaces dentro de nuestras páginas WordPress lo hacemos para enlazar a otras páginas de nuestro sitio. También los empleamos de forma habitual para enlazar con páginas de otras webs.
Hoy aprenderemos a crear anclas en HTML internas y externas:
anclas en HTML internas: enlaces a una parte concreta de la página html propia.
anclas en HTML externas: enlaces a secciones concretas de artículos o páginas de otro blog.
Anclas en HTML ejemplos
Una de las utilidades que tiene crear anclas a secciones de una misma página es elaborar un índice o menú de contenidos en tus artículos. Por ejemplo el que puedes ver al inicio de este post. Este tipo de enlaces también son importantes cuando queremos facilitar la navegación a una sección concreta de la página, por ejemplo al final del artículo, al principio…
Aquí puedes ver un ejemplo de código que te ayudará a entender como se crean anclas en HTML.
Si te fijas en el código, podemos distinguir dos elementos: un elemento HTML <a href=»#destino»> que actúa como enlace y otro elemento que hace de destino. El elemento que actúa como destino marca el lugar de la página a donde queremos saltar. Este elemento lo identificamos con un identificador ID (id=»destino»).
Pues bien, cuando en un enlace HTML no ponemos una URL normal y ponemos # y un identificador de elemento, estamos diciendo queremos enlazar a una parte concreta de nuestra página donde se encuentra creado un elemento HTML clasificado con es id. Es lo que conocemos como anclas HTML.
Además de anclas HTML que apuntan a secciones dentro de la misma página, como en el ejemplo anterior, también se pueden crear anclas enlaces que apuntan a una sección concreta de otra página distinta dentro de nuestra web. Encontrarás ejemplos de los dos tipos en este artículo.
Paso 1 – Cómo crear anclas enlaces internos en WordPress
El primer paso, para crear un link o enlace se hace igual que cuando creas un enlace a otra página de tu WordPress o a otra web. Es decir seleccionando el texto que aparecerá en el enlace y pulsamos sobre el icono «Insertar/Editar enlace».
1.- Seleccionamos el texto
2.- Pulsamos sobre el icono de crear link
Ahora en lugar de escribir una URL (http://loquesea) dentro del editor de enlaces, debemos escribir el ID del elemento al que queremos saltar con el símbolo # delante (este símbolo te sonará de css y sirve para indicar que nos referimos a un identificador).
Si cambias el editor de WordPress de modo Visual a modo HTML
verás que se ha creado el siguiente elemento <a>:
<a href="#ir-a-inicio">Creando mi primer ancla o enlace</a>
Paso 2 – Marcando en el HTML el destino del enlace
Para que el enlace creado salte a una sección concreta de la página lo único que tenemos que hacer es asignar el ID a un elemento HTML. Por ejemplo si quiero ir al principio;
Voy al primer párrafo de la página.
Cambio el modo visual del editor de texto a modo HTML.
Dentro de la etiqueta HTML (<p>,<h1>…) añado lo siguiente: d=»ir-a-inicio». El resultado sería algo así: <p id=»ir-a-inicio»>
Guardo o actualizo la página y compruebo que funcione correctamente.
Ahora debes editar la página destino: «crear-barras-laterales-sidebars-wordpress» y añadir el ID al elemento HTML que corresponda. Para ello sigue las indicaciones del punto 2 de este artículo.
Si queremos enlazar a una página de otra web sobre la que tenemos control actuaremos igual. Más o menos esta sería la estructura de la URL:
Si no tenemos control para editar y modificar la web, entonces solamente podemos crear anclas enlaces a secciones de página donde exista un elemento con un ID declarado. En el navegador podemos revisar el código fuente cualquier página web y seleccionar el elemento destino para observar si tiene un ID asignado y así poder crear nuestra ancla HTML externa. Obviamente si el administrador de la web a la que estamos apuntando, modifica en un futuro el ID, perderemos el enlace.
Cómo eliminar sidebar de temas o páginas en WordPress
En un post anterior, expliqué como podemos crear nuevos sidebar en nuestro tema y adjuntarlos a páginas, header, footer… Hoy vamos a explicar el caso contrario: «eliminar sidebar de temas o páginas que no utilizamos».
No es igual eliminar sidebar o barra lateral que eliminar «la llamada» a la barra lateral. En el primer caso el sidebar o barra lateral ya no existe en todo el tema. La barra lateral desaparece del administrador de WP y por lo tanto ya no estará disponible en Apariencia >> Widget. En el segundo caso la barra lateral (sidebar) puede existir en el tema pero borramos la función get_sidebar de una o varias páginas o templates para que no sea visible la barra lateral en dicha página.
Borrar código del sidebar del tema WordPress
De forma nativa los temas de WordPress incluyen diferentes áreas para añadir widget, estas áreas se conocen como «sidebar» o barras laterales. Si hay algún sidebar que no utilices, que tengas claro que no quieres utilizar y que además te molesta dentro de la edición, en Apariencia >> Widget puedes eliminarlo fácilmente:
1.- Si trabajas con un tema original simplemente localiza la función register_sidebar dentro de los archivos de tu tema y elimina el código. Recuerda que si actualizas el tema perderás los cambios. Para los que trabajan con temas hijos, pasar al siguiente apartado de este post.
Tienes que borrar algo similar a lo siguiente:
register_sidebar( array(
'name' => __( 'Main Sidebar', 'theme-slug' ),
'id' => 'sidebar-1',
'description' => __( 'Widgets in this area will be shown on all posts and pages.', 'theme-slug' ),
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
) );
Código eliminar sidebar o barra lateral en tema hijo
Para eliminar el sidebar añade al archivo functions.php de tu tema hijo el siguiente código:
function borrar_sidebar() {
unregister_sidebar('sidebar-2');
}
add_action ('widgets_init', 'borrar_sidebar', 11);
Debes modificar «sidebar-2» en este código por el ID de tu sidebar a eliminar.
Para buscar el ID del sidebar que quieres eliminar, debes localizar en tu tema los sidebar registrados. Un sidebar registrado emplea la función register_sidebar. Por lo tanto dentro de la carpeta wp-content/themes/temapadre realiza una búsqueda de esa función. Verás que por cada sidebar o barra lateral de tu tema hay una llamada a la función. Similar a la que te muestro a continuación:
add_action( 'widgets_init', 'theme_slug_widgets_init' );
function theme_slug_widgets_init() {
register_sidebar( array(
'name' => __( 'Main Sidebar', 'theme-slug' ),
'id' => 'sidebar-1',
'description' => __( 'Widgets in this area will be shown on all posts and pages.', 'theme-slug' ),
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
) );
}
Dentro del array de register_sidebar encontrarás el identificador o id. En el ejemplo ‘sidebar-1’.
Puedes declarar tantos unregister_sidebar como sidebars o barras laterales quieras eliminar. Puedes agrupar todas las llamadas a unregister_sidebar dentro de la misma función. Te lo voy a mostrar en el siguiente ejemplo.
Ejemplo eliminar sidebars del pie de página del tema TwentyTen
El tema Twenty Ten de WordPress lleva incorporados cuatro sidebars que se visualizan en el pie de página de la web.
Ahora veremos y analizaremos el código que sirve para eliminar los sidebars del pie en Twenty Ten:
//eliminar todos los sidebar del pie de pagina en TwentyTen
function remove_some_widgets(){
unregister_sidebar( 'first-footer-widget-area' );
unregister_sidebar( 'second-footer-widget-area' );
unregister_sidebar( 'third-footer-widget-area' );
unregister_sidebar( 'fourth-footer-widget-area' );
}
add_action( 'widgets_init', 'remove_some_widgets', 11 );
Analizando el código para borrar barras laterales
Vemos una función, ‘remove_some_widgets’, que agrupa todas las llamadas a unregister_sidebar. En total cuatro llamadas que se corresponden a los 4 sidebars que queremos borrar.
Para borrar un sidebar, se emplea la función: <?php unregister_sidebar( $id ); ?>. Esta función borra un sidebar previamente registrado en el tema. En concreto borra el sidebar que le indiquemos mediante un ID.
Por último con add_action( ‘widgets_init’… esperamos a que se registren todos los sidebar del tema y entonces llamamos a ‘remove_some_widgets’. El tercer parámetro de la función «11» lo usamos para asignar una prioridad y es muy importante si estás trabajando con un tema hijo. El archivo functions.php de un tema hijo se invoca antes que el del tema principal, lo que significa que nuestra llamada a unregister_sidebar () no logrará nada si no le indicamos que espere a la carga del padre reduciendo la prioridad a 11.
Si todo ha salido bien en Apariencia >> Widget ya no verás los widget eliminados.
Eliminar la llamada a sidebar de páginas o plantillas
En este caso el sidebar puede existir en el tema pero borramos la función get_sidebar de una o varias páginas o templates para que no sea visible en dicha página.
Borrar llamada a sidebar del pie de la web
Abre el archivo footer.php de tu tema original o tema hijo y elimina la llamada a get_sidebar(‘footer’); o similar.
<?php get_sidebar( 'footer' ); ?>
Comprueba si tienes que ajustar o eliminar elementos HTML en la hoja de estilos css.
Borrar llamada a sidebar header de la web
No es muy común que los temas inserten barras de widget en la cabecera de tu página. En caso de que tu tema las incluya, para eliminarlas procede como en el punto anterior abriendo el archivo header.php.
Borrar llamada a sidebar de páginas
Hay temas en WordPress que tienen ya plantillas creadas sin barras o sidebar tipo full-page.php o no-sidebar. Si tu tema tiene estas plantillas creadas puedes asignar esta plantilla a las páginas.
A veces esto no es posible, bien porque el tema no tiene un tipo de plantilla por defecto sin barra lateral o porque trabajamos con un tema hijo con plantillas creadas a medida para cada página.
Si trabajas con un tema hijo y tienes creadas plantillas personalizadas => abre la plantilla asignada a la página y elimina la llamada a get_sidebar.
Supongamos que quiero eliminar la «barra lateral izquierda» de mi página «Servicios».
Localizo la plantilla que utiliza la página «Servicios». Esta plantilla estará ubicada dentro de wp-content/themes/tema-hijo.
Por ejemplo page-servicios.php. Abro el archivo y borro la llamada al sidebar.
Guardo los cambios.
Realizo los ajustes necesarios css.
Hay un caso particular que es el archivo single.php. Este archivo es el encargado de cargar cada entrada de nuestro blog. A las entradas del blog no se les puede asignar plantillas de página. En este caso debes editar el archivo single.php y eliminar el sidebar. Los usuarios que trabajan en DIVI pueden desde la edición de los post activar o desactivar la barra lateral desde «Ajustes de publicación de Divi»:
Algunos desarrolladores crean una regla de estilos CSS para que el sidebar no sea visible, por ejemplo .sidebar{display:none}. Es una solución rápida y útil en caso de que no tengas acceso a tus archivos php, pero no es la mejor solución.
Cuando terminemos de eliminar los sidebars probablemente tengamos que eliminar HTML de nuestras páginas y modificar el CSS de los elementos. Puede ser necesario eliminar el div de barra lateral izquierdo o derecho, ampliar el ancho del elemento central…
Cada tema de WordPress es un mundo y técnicas hay cientos, aquí solamente he tratado algunas. Si quieres añadir algo a este artículo o necesitas que te explique otros métodos para eliminar slider de tu tema puedes escribir un comentario.
En el tutorial de hoy explicaré como crear barras laterales sidebars en nuestra web que podremos personalizar con widgets o shortcodes. Veremos que es un proceso rápido y sencillo que nos permite añadir a nuestro sitio tantas barras laterales o sidebars como necesitemos. Aprenderemos a crear barras laterales o sidebars e instalarlas en tu tema WordPress, en páginas, en la cabecera en el pie del tema…
La mayoría de los temas cuentan con un sidebar por defecto que normalmente se visualiza en un lateral de la página. Dentro de esta barra lateral solemos instalar los diferentes widgets que aportan mayor funcionalidad a la página; últimas entradas en el blog, lista de categorías… Si disponemos de un único sidebar o barra lateral significa que en todas las páginas de nuestro tema veremos los mismos elementos.
Es normal que en muchos proyectos esta información complementaria que queremos aportar no sea la misma. Por ejemplo en la página de contacto quizá es más lógico adjuntar en el lateral un listado de teléfonos, emails… en la página de blog, las últimas noticias, suscripción al newsletter… en la página de tienda, ofertas de productos, últimos productos vistos… Para lograr esto nada más sencillo que crear barras laterales o sidebars nuevos. Verás que fácil!
Antes de continuar vamos a aclarar un concepto. He llamado al artículo «Cómo crear barras laterales …» simplemente porque estamos familiarizados con este concepto. Realmente lo que vamos a conseguir siguiendo este post, es crear zonas en nuestra web para incluir widgets con distinta funcionalidad que podemos colocar en cualquier lugar de nuestras páginas; lateral, pie de página, cabecera…
Primero – Registrar la nueva barra lateral o sidebar
Lo primero que tenemos que hacer para crear una nueva barra lateral es registrarla. El registro del nuevo sidebar se puede realizar dentro del archivo functions.php de tu tema.
wp-content/themes/tutema/functions.php
La primera parte del tutorial difiere si trabajas con el theme original directamente o con un tema hijo. Mi recomendación como siempre es que trabajes con un tema hijo para no perder todos los cambios y mejoras que estés realizando en tu proyecto. Ya sabes que si actualizas el tema perderás los cambios. Instalar un tema hijo en tu WordPress es fácil y te ahorrará muchos disgustos futuros.
Si necesitas aprender a trabajar con un tema hijo puedes consultar los siguientes artículos de este blog: Plugins WP tema hijo
Primero voy a explicar los pasos a seguir para todos aquellos que trabajáis directamente sobre el tema instalado.
Crear barra lateral en un tema padre
Si trabajas con tu tema directamente, encontrarás que dentro del archivo ya existen sidebars creados (*usuarios del tema DIVI ir al siguiente punto). En este caso debemos buscar el código donde se encuentran dichos sidebars nativos y añadir nuestro código para crear la nueva barra lateral o zona de widgets.
Necesitas buscar dentro del archivo la función register_sidebar(). Encontrarás algo similar al código que te muestro:
Para añadir nuestra nueva barra lateral copiamos el código de register_sidebar, modificamos el nombre y el ID y lo añadimos dentro de la función antes del cierre de llave. En este caso lo vamos a llamar sidebar-tienda:
Repitiendo este proceso puedes crear tantas barras o sidebars como requiera tu proyecto.
Ahora ya tenemos registrado en nuestro tema un nuevo sidebar. Si entras en el administrador de WordPress en Apariencia >> Widget verás tu nueva barra creada. Aunque aún no podemos utilizar si puedes comprobar que el proceso ha sido correcto.
El nombre del sidebar se corresponde con el ‘name’ => ‘Tienda’, que hemos declarado al registrar la barra lateral.
Crear barra lateral en un tema hijo
Abre el archivo functions.php del tema hijo y añade el siguiente código:
Puedes añadir tantas funciones register_sidebar() como necesite tu tema.
Ahora ya tenemos registrado en nuestro tema un nuevo sidebar. Si entras en el administrador de WordPress en Apariencia >> Widget verás tu nueva barra creada. Aunque aún no puedes utilizar este sidebars vamos a comprobar que el proceso ha sido correcto.
Crear barras laterals sidebars en DIVI
ATENCIÓN USUARIOS TEMA DIVI: Los usuarios del tema DIVI, no necesitan añadir ninguna línea de código al tema. Con Divi los nuevos sidebars se crean desde el administrador de WordPress. Si tienes instalado el tema DIVI debes ir a Apariencia >> Widget y crear barras laterales sidebars, como te muestro en esta imagen.
Lo único destacable es que Divi ya tiene asignados a las barras laterales nativas del tema los IDs: 1, 2, 3, 4 y 5. Así que no utilices ninguno de estos números como nombre del widget. Después de escribir un nombre pulsas sobre el botón crear y actualizas el backoffice para ver la nueva barra lateral que has creado. No necesitas hacer NADA de lo que describo en este artículo. Nos vemos en el siguiente post!
Si tienes curiosidad encontrarás las barras laterales o sidebars dentro del archivo sidebars.ph en la siguiente ruta: wp-content/themes/Divi/includes/functions/sidebars.php. Aquí te muestro parte del código en sidebars.php del tema DIVI
Segundo – crear archivos PHP para cada nuevo sidebar
Dentro de tu tema encontrarás algún archivo tipo sidebar.php. Vamos a copiar este archivo y sobre-escribir el mismo.
Abre el archivo de tu tema sidebar.php y lo guardas con el nombre sidebar-tienda.php (el mismo que el ID que hemos asignado a la barra lateral). Ahora dentro del archivo vamos a modificar el código. Lo único que tenemos que cambiar es las referencias al ID dentro del archivo. Es decir donde pone ‘sidebar-1’ poner ‘sidebar-tienda’. Al finalizar recuerda guardar el archivo dentro de la carpeta de tu tema.
Encontrarás dos funciones; is_active_sidebar() y dynamic_sidebar(), en las dos tienes que escribir el nuevo ID. La primera función comprueba si el sidebar está activo, es decir si tiene widgets asignados. Si es así, la siguiente función comprueba que está registrado el sidebar y que se puede mostrar.
Debes repetir este proceso con cada nueva barra lateral o sidebar que hayas creado.
Tercero – llamar a las nuevas barras creadas en las plantillas del tema
Cada nueva barra lateral que has creado puede visualizarse en distintas páginas o secciones de tu tema. Abre la plantilla o plantillas de tu tema donde quieres colocar la barra lateral. Añade el siguiente código que llama a la función get_sidebar(). Esta función carga la template o archivo que le pasamos como parámetro. En nuestro ejemplo queremos que cargue la plantilla sidebar-tienda.php. Para que funcione correctamente le pasamos el nombre del archivo sin la palabra sidebar, es decir ‘tienda’. La función get_sidebar($name) ya está implementada para buscar archivos que comienzan con sidebar-{$name}.php:
<?php get_sidebar('tienda'); ?>
OJO la llamada a la función se realiza pasando el nombre del archivo que hemos creado sin la palabra sidebar (sidebar-tienda.php).
Debes tener en cuenta que si quieres que la sección de widgets se visualice en el lateral de la página entonces debes realizar la llamada dentro del div lateral:
Si quieres que aparezca en el pie de página debes modificar el archivo footer.php de tu tema, o el archivo header.php si la sección de widgets aparece en la cabecera.
Referencias – Funciones para trabajar con sidebar en WordPress
Si tienes dudas sobre la diferencia entre get_sidebar y dynamic_sidebar, encontrarás una explicación en el siguiente artículo de este blog:
Como desarrolladores de aplicaciones, tenemos claro que una de las fases o funciones de nuestro trabajo, consiste en depurar errores de programación. Cuando trabajamos en WordPress y un plugin o tema producen un error podemos activar el modo DEBUG. Con el modo DEBUG activado, veremos los errores en WordPress y depuraremos el código. Ya verás que sencillo es.
WordPress cuenta con un «sistema propio de depuración de errores PHP». Este sistema está pensado para simplificar el proceso de depuración y estandarizar el código de plugins, temas y core de WordPress.
Normalmente como programadores necesitamos activar el modo DEBUG en algunos momentos:
fase de desarrollo de nuestro propio código.
actualizaciones, instalaciones o eliminación de plugins, temas, versiones de WordPress..
cuando observamos lentitud en nuestra web.
salidas inesperadas de consultas a la base de datos…
Vamos a ello:
Primero abriremos el archivo wp-config.php que se encuentra en la raíz de tu instalación WP. Vamos a trabajar con este archivo. Modificaremos y añadiremos algunas constantes para activar el modo DEBUG. De esta forma ya podemos acceder a los errores y trabajar en un entorno de depuración.
Activar el modo DEBUG
WP_DEBUG es una constante PHP que permite activar o desactivar el modo de depuración de WordPress. El valor por defecto de esta constante que se encuentra definida en el archivo wp-config.php es «false».
Este valor inicial «false» define el comportamiento por defecto de WordPress. De esta forma sólo muestra en pantalla errores graves, fatales, y/o muestra una pantalla en blanco.
Para activar el modo DEBUG y hacer un seguimiento de los errores, abrimos el archivo wp-config y buscamos la constante WP_DEBUG:
define('WP_DEBUG', false);
modificamos false asignando el valor: true
define('WP_DEBUG', true);
¿Qué es lo que hemos conseguido? al activar la variable se mostrarán todos los errores graves y leves, avisos de funciones obsoletas, noticias de PHP… esto nos permite depurar el código y modificar funciones. Pero OJOsólo debemos trabajar así en la fase de desarrollo, cuando la web todavía no es pública.
PROBLEMA: Cuando activamos el modo DEBUG los errores y avisos se muestran en pantalla dentro del HTML. Esto significa que son visibles para todos los usuarios que visiten nuestra web. Pueden provocar alerta en los usuarios y romper el sitio.
SOLUCIÓN: para solucionar este problema lo mejor es recoger todos los errores y avisos en un archivo tipo log. Este archivo se guarda dentro de una carpeta de nuestro sitio y podemos acceder a él para ver y solucionar nuestros errores de programación.
Registrar los errores PHP en un archivo LOG
Volvemos al archivo wp-config y vamos a añadir nuevo código debajo de WP_DEBUG.
Primero: añadir constante WP_DEBUG_LOG
define('WP_DEBUG_LOG', true);
WP_DEBUG_LOG se encargada de volcar todos los errores dentro de un fichero. Este fichero se llama debug.log y lo encontrarás dentro de la carpeta wp_content/debug.log.
Esta constante es complementaria de WP_DEBUG y para que funcione correctamente WP_DEBUG debe permanecer activada (true).
Ahora ya tienes almacenados todos los errores de la web en un único archivo y podrás acceder al mismo para ver y depurar los errores PHP de WordPress. Pero CUIDADO los errores se siguen mostrando en pantalla.
Segundo: añadir constante WP_DEBUG_DISPLAY y init_set
Vamos a añadir código al archivo para evitar que muestre los errores en pantalla y no interrumpir la carga de página:
WP_DEBUG_DISPLAY muestra (true) o oculta (false) los errores en pantalla.
Por último para mejorar el funcionamiento podemos establecemos con init_set la directiva display_errors a false.
Código completo de depuración en wp-config
// Activar modo WP_DEBUG para mostrar errores
define('WP_DEBUG', true);
// Volcar los errores en el archivo /wp-content/debug.log
define('WP_DEBUG_LOG', true);
// No mostrar errores y avisos en pantalla y seguir la carga de pagina
define('WP_DEBUG_DISPLAY', false);
@ini_set('display_errors',0); / * Idealmente, esto debería establecerse en php.ini, si tiene acceso *
Es aconsejable que al terminar de depurar errores PHP comentes esta parte de código. También te recomiendo eliminar el archivo debug.log. Como se vuelca todo en este archivo se crean miles de líneas que al cabo del tiempo son difíciles de seguir. Así que lo mejor que puedes hacer es: comentar el código y eliminar el archivo debug. La próxima vez que necesites mostrar y depurar errores en WordPress lo único que tienes que hacer es quitar los comentarios.
Mostrar y depurar errores de archivos js y css de WordPress
Cuando modificamos archivos JavaScript o CSS integrados en WP y necesitamos depurar errores podemos usar la constante: SCRIPT_DEBUG
define('SCRIPT_DEBUG', true);
Definiendo SCRIPT_DEBUG a true obligamos a WordPress a cargar las versiones extendidas de estos archivos. Normalmente WordPress carga versiones simplificadas o mínimas de estos archivos en un entorno de producción.
Mostrar y depurar errores de la Base de Datos
Otra opción interesante es el seguimiento de las consultas SQL de la base de datos. Si añadimos a nuestro archivo de configuración la constante:
define('SAVEQUERIES', true);
Conseguiremos almacenar todas las consultas en un array. Además de los datos, el array también guarda el tiempo de ejecución y la función que provocó la consulta.
*Para que funcione SAVEQUERIES, WP_DEBUG debe estar activada.
El array se almacena en una variable global: $wpdb->queries.
Ahora que tenemos salvados los datos, vamos a recorrer el array y analizar el contenido. Para este propósito usaremos la función PHP: print_r($wpdb->queries)
En el footer de nuestra tema añadimos el siguiente script PHP:
<? php
if (current_user_can ('administrator')) {
global $ wpdb;
echo "<pre>";
print_r ($ wpdb-> consultas);
echo "</ pre>";
}
?>
IMPORTANTE:SAVEQUERIES afecta negativamente al rendimiento del sitio. Cuando termines de depurar las consultas modifica el valor true a false.
Función depuración código propio
Cuando creamos script de código propios o desarrollamos un plugins y temas, a menudo necesitamos hacer un seguimiento del código. PHP cuenta con varias funciones para el manejo de errores. Si añades la siguiente función en el archivo que quieres depurar:
Todos los errores se registraran en un archivo llamado errors.log. Para depurar los errores puedes abrir el archivo desde tu editor de código preferido.
PROBLEMA: ahora tienes dos archivos de depuración que manejar.
SOLUCIÓN: volcar todos los errores en el archivo debug.log.
Vamos a trabajar con el archivo functions, alojado en wp-content/themes/tu-tema/functions.php (mejor si trabajas con un tema hijo). Dentro del archivo añadiremos una función, creada por Stu Miller desarrollador de WordPress.
Abre el archivo functions.php y copia pega el siguiente código:
A partir de ahora cuando necesites hacer un seguimiento de tu código, debes llamar a la función write_log con
write_log('COMIENZA DEPURACION DE CODIGO PROPIO');
write_log($lo_que_quieras_registrar);
Explicación del código
Función write_log
Si la función write_log no existe, crea la función. Comprueba si el modo DEBUG está a true (activado). Si se da esta condición, se comprueba si el parámetro que pasamos a la función ($lo_que_quieras_registrar) es una array o un objeto. En caso de array u objeto se emplea para la salida de errores print_r (necesaria para recorrer este tipo de variables). Si no es array ni object simplemente se escribe el resultado en el archivo.
Observamos que se emplea la función PHP de registro de errores: error_Log, encargada de enviar los mensajes de error.
En caso contrario, WP_DEBUG false, la función termina.
Llamada a la función
La primera línea de código sirve para escribir en el archivo debug.log la frase: «COMIENZA DEPURACION DE CODIGO PROPIO». Es útil para encontrar el error dentro del archivo debug. Luego llamamos a la función enviando lo que queremos depurar.
Ya hemos terminado. Ha sido fácil verdad? Con estas indicaciones podrás revisar todo el código de WordPress y propio para depurar los errores. Recuerda al finalizar comentar el archivo config.php con todas las constantes modificadas.
WordPress ofrece un conjunto amplio de constantes muy útiles para un desarrollo avanzado. Si quieres conocer hasta donde puede llevarte el desarrollo de WordPress trabajando con constantes puedes leer el siguiente artículo de mi blog: Constantes de WordPress
Problema shortcode se ejecuta al principio de la página y no en su lugar
Solucionar el problema shortcode ejecución al principio de página. Si hemos creado un shortcode y al invocarlo este se ejecuta al principio de nuestra página, debemos revisar el código del shortcode. El problema más común que produce que el shortcode no se ejecute en el espacio asignado es la falta del return en la función.
Vamos a explicar este error y su solución.
NOTA: si te interesa aprender a crear shortcodes te recomiendo el siguiente artículo de este blog:
Ejemplo de shortcode que se ejecutará al principio de página
Para entender mejor el problema, vamos a ilustrarlo con un ejemplo. Abre el archivo functions.php de tu tema y copia y pega el siguiente código.
[php] add_shortcode(‘saludo’, ‘muestra_saludo’);function muestra_saludo(){ echo «Hola soy un shortcode que se muestra al principio»; } [/php]
Ahora vamos al administrador de WordPress, selecciona uno de tus post ya creados y pulsa sobre «editar». Hacia la mitad o al final del texto, en la ventana de edición, pegamos el siguiente código:
[saludo]
De esta forma indicamos que se ejecute el shortcode.
En el FrontEnd pulsa sobre el post que hemos modificado. Observarás que el código se ejecuta al principio de la página y no a mitad o al final que es donde hemos llamado al shortcode.
El problema es que al crear el shortcode hemos utilizado «echo» en lugar de «return»
Ejemplo de shortcode que soluciona el problema
Modifica el shortcode para que devuelva una variable con la sentencia «return».
[php] add_shortcode(‘saludo’, ‘muestra_saludo’); function muestra_saludo(){ $saludo=»Hola soy un shortcode que se muestra bien»; return $saludo; } [/php]
Realiza el procedimiento anterior de seleccionar un post y llamar al shortcode. Observarás que el shortcode se ejecuta en el lugar indicado.
Entender la diferencia entre return y echo te ayudará a entender mejor el problema de un shortcode que se ejecuta al principio de la página:
Borrar pingbacks almacenados en base de datos de WordPress
En este artículo aprenderemos a borrar pingbacks que tenemos almacenados en nuestra base de datos y a desactivar esta característica de nuestro WordPress.
¿Qué son los pingbacks y trackbacks?
Pingbacks y trackbacks son notificaciones entre sitios web, se crean automáticamente. Una de sus funciones es permitir a los administradores de sitios recibir un aviso cuando una página externa enlaza a uno de sus post o ha sido mencionado en algún artículo. WordPress y otras herramientas utilizan esta tecnología.
Los pingbacks, en WordPress se almacenan como comentarios de tipo «pingbacks». Se generan cuando algún blog enlaza a alguna entrada o post de tu WP. También se generan cada vez que creas enlaces internos desde tus post (self-ping).
Los pingbacks se muestran en el administrador de WordPress dentro de la sección comentarios. También se muestran en las entradas del blog, junto con los comentarios de tus usuarios.
¿Por qué debo eliminarlos y no permitir que se creen?
En primer lugar, debes analizar el tipo de pingbacks que recibes. El problema de los pingbacks es que en la mayoría de las ocasiones son SPAM. Si te encuentras con este tipo de pingbacks lo mejor es eliminarlos. Te voy a dar una cifra, uno de mis últimos proyectos consiste en el rediseño y modificación de un WP, realizando el primer análisis de mejoras del sitio, me he encontrado con lo siguiente:
y la respuesta a tu pregunta es, sí, todos son SPAM.
Otro problema es que cada vez que enlazas a artículos propios, por cada enlace se crea un pingback. Terminarás acumulando tantos pingbacks que te resultara un engorro.
Desactivar la opción de recibir Pingbacks – Ajustes de Comentarios
Antes de eliminar los pingbacks almacenados en la base de datos, vamos a configurar WordPress para que no permita que se creen y almacenen nuevos pingbacks.
Debes entrar en el administrados de WP y en Ajustes >> Comentarios desactivas la segunda opción: «Permitir avisos de enlaces desde otros sitios (pingbacks…)»
Ajustes por defecto de las entradas
Después de desactivar la opción, guarda los cambios.
En WordPress únicamente se puede trabajar con esta característica de forma global, es decir, se desactiva para todos los pingbacks y trackbacks. Si algún pingback es de calidad no lo podas mostrar. Si quieres desactivar únicamente los pingbacks propios (enlaces entre tus post), debes activar la opción «Permitir avisos de enlaces…» y añadir el siguiente código a tu archivo functions.php
Al final del artículo tienes información sobre un plugin que desactiva los pingbacks propios.
Eliminar pingbacks almacenados en la base de datos
Desactivar la opción de pinbacks, no elimina los pingbanks antiguos. Vamos a ver dos formas de borrar los pingbacks de la Base de Datos. La primera accediendo a nuestro administrador de base de datos, phpMyAdmin o similar y ejecutando una sentencia SQL. La segunda instalando un plugin.
Eliminar desde el administrador de Base de Datos
Entra a tu administrador de bases de datos. Yo trabajo con el administrador MySQL phpMyAdmin, por lo tanto explicaré el proceso empleando esta herramienta.
Accede a la base de datos donde están almacenados los post y páginas del WordPress donde quieres eliminar los pingbacks. Si sólo trabajas con un sitio web encontrarás una única base de datos. Pincha sobre el nombre de la base de datos para seleccionarla.
Copia de seguridad de la base de datos
Primero vamos a realizar una copia de seguridad de la tabla que vamos a modificar. Como los post y páginas de WordPress se almacenan en la tabla wp_post, pulsamos sobre el nombre de la tabla y luego sobre el menú superior: “exportar”
Guardamos la copia en nuestro pc o servidor, de esta forma, si tenemos algún problema podremos recuperar todos los post y páginas.
Ejecutar sentencia para eliminar pingbacks
Cuando termines de realizar la copia vuelve a la base de datos y pulsa sobre la pestaña SQL.
Dentro de la ventana de edición SQL copia y pega la siguiente sentencia:
DELETE FROM wp_comments WHERE comment_type = 'pingback';
Si también quieres eliminar los trackback, la sentencia a ejecutar es la siguiente:
DELETE FROM wp_comments WHERE comment_type='trackback' OR comment_type='pingback'
No self Ping es un plugin WordPress para desactivar los pingbacks propios, es decir aquellos que se generan cuando enlazamos a otra entrada de nuestro post. Su uso es tan sencillo como instalar el plugin y activarlo. Después de la instalación verás que en Ajustes >> Comentarios hay un nuevo apartado donde puedes introducir algunas URL de sitios adicionales, además del propio, que no quieres que creen pingbacks. Por ejemplo otros WP propios de distinto dominio.
Después de la instalación de AMP en tu sitio, Google irá indexando las páginas dinámicas AMP. En esta fase es muy importante realizar la corrección de errores AMP Search Console. Debemos entrar cada pocos días a esta herramienta y realizar un seguimiento de los errores de nuestra página para solucionar los mismos.
Una página AMP sin validar no tiene sentido. Dicho esto vamos a ir corrigiendo los distintos errores arrojados por Search Console.
Si todavía no tienes AMP en tu web WordPress te invito a que leas el siguiente tutorial, encontrarás una guía paso a paso que te ayudará a conseguirlo:
Al día siguiente de instalar AMP en mi WordPress Google había indexado 7 páginas y no había encontrado ningún error.
A los tres días las páginas indexadas eran 18 y se detecta un error grave y otro no importante. Vamos a ir analizando a lo largo de un tiempo todos los errores que detecte Search Console para solucionarlos.
Comenzamos…
Corrección de errores AMP Search Console: atributo «item» prohibido en etiqueta <pre>
Entramos en la herramienta Search Console y vamos a: Apariencia en el buscador >> Acelerated Movil Page
Veremos una pantalla con el número de páginas indexadas y las páginas que contienen errores.
En este caso observamos que Google a indexado 18 páginas AMP y ha encontrado problemas graves en una de ellas. El problema importante que ha encontrado es una etiqueta HTML prohibida o que no se usa correctamente.
Ahora que tenemos identificado el problema vamos a ver cual es la página que provoca este error grave.
En el listado de incidencias en el lado derecho pulsamos sobre «>>» para acceder a la página que provoca el error.
Hemos identificado la página que causa problemas. En esta ventana debemos pulsar de nuevo sobre el símbolo «>>«. Al pulsar accedemos a una ventana de información. En esta nueva ventana encontramos más información sobre el error. Si te fijas en la parte baja, en «detalles», nos explica que el error lo esta causando el atributo «item». Este atributo no puede aparecer dentro de una etiqueta «pre». Si pulsamos sobre el botón «Probar página» se ejecuta una herramienta de test AMP que nos dirá la línea concreta donde se encuentra el problema. Vamos a ello.
Solucionar el error
Esperamos a que la página pase el test y observamos la información completa del error. En este caso el error se produce al utilizar el Constructor Divi junto con el plugin Tiny. La solución es copiar todo el texto de la entrada y pegarlo en el editor por defecto de WordPress.
Ya tenemos identificado el error en la línea 385 del post: /entradas-personalizadas-en-wordpress.
Análisis del error: es producido por el plugin TinyMCE cuando inserto código fuente. Crea un dato estructurado de tipo Code y lo llama dentro de la etiqueta <pre>. Para soluciona esto o bien quitas la etiqueta <pre> y <code> que genera el plugin eliminando los datos estructurados o cambias la estructura de HTML del plugin.
Volver a Validar
Si ya tienes solucionado el error debes volver a pasar la página por el test AMP. De nuevo en la herramienta de Search Console pulsamos: «Probar página»
Una vez obtenida la validación puedes enviar la página a Google. Ahora toca esperar.
SEGUIMIENTO ERROR: se detecta el día 7 de julio, se corrige el día 9 de julio, el día 10 de julio Search Console ya válida la página y desaparece el error.
Corrección de errores AMP Search Console: atributo «height» vacío
Tenemos que abrir el archivo wp-content/pluggin/accelerated-mobile-pages/includes/vendor/amp/includes/sanitizers/class-amp-img-sanitizer.php
busca la función private function adjust_and_replace_node( $node ), y reemplaza la función por el siguiente código:
Guarda los cambios en el archivo y vuelve a validar.
Volver a Validar
Si ya tienes solucionado el error debes volver a pasar la página por el test AMP. De nuevo en la herramienta de Search Console pulsamos: «Probar página»
En el artículo de hoy explicaré todos los pasos que he realizado para configurar AMP en WordPress. El artículo es bastante extenso pero te garantizo que al finalizar el mismo tendrás tu sitio AMP listo.
La idea es hacer un tutorial muy práctico, una guía paso a paso que podéis seguir fácilmente para configurar AMP en WordPress.
Respecto a la teoría y conceptos sobre AMP, explicaré de forma breve algunos conceptos y facilitaré enlaces a sitios para todos los que queráis profundizar más en el tema.
Breve introducción a AMP
¿Qué es AMP?
AMP, Accelerated Mobile Pages es una iniciativa de código abierto desarrollada por Google. El principal objetivo de AMP es ofrecer contenido optimizado para móviles que cargue instantáneamente en cualquier parte. La finalidad es mejorar la experiencia de usuario.
AMP crea versiones dinámicas optimizadas de las páginas de tus entradas que serán las que se muestren en los dispositivos móviles. Para cada una de las entradas de tu blog tendrás dos versiones, la versión normal y la AMP. La versión optimizada hace que las páginas se carguen de manera casi instantánea.
A día de hoy Google está premiando los sitios que implementan esta tecnología. Las páginas AMP se posicionan mejor en los primeros resultados de búsqueda orgánicos realizados desde dispositivos móviles.
Página del blog sin AMP
Página del blog con AMP
Tutorial Práctico – Pasos para configurar AMP en WordPress
Para configurar AMP en WordPress vamos a instalar dos plugins diferentes. Ambos plugins son necesarios y realizan funciones diferentes.
Con el primero instalaremos la tecnología AMP en nuestros sitios. Con el segundo podremos realizar cambios de diseño, añadir una landing Page y mucho más.
Paso 1.- Instalar Plugin AMP de Automattic
El primer plugin que vamos a instalar es el plugin AMP de Automattic. Con AMP de Automattic podemos configurar AMP en WordPress en un minuto.
Automattic es la empresa de software creadora de WooCommerce, Akismet, Jetpask, WordPress.com, Gravatar… «Gracias a ello nuestra vida laboral es más fácil».
Para instalar el plugin vamos a Plugins >> Añadir Nuevo y escribimos como palabra clave en el buscador de plugins «AMP». Instalamos en plugin.
Una vez instalado el plugin debes actualizar tus enlaces permanentes para configurar AMP en WordPress.
Vamos a Ajustes >> Enlaces permanentes. Selecciona el tipo de enlaces y haz click en el botón Guardar cambios.
¡Y eso es todo! No necesitas realizar ninguna configuración opcional.
El plugin AMP genera para todas las entradas de tu sitio versiones dinámicas compatibles con AMP. El plugin sólo añade la versión AMP a las páginas de tus entradas no trabaja con el resto de páginas estáticas.
Para probar la versión AMP del sitio web, agrega /amp/ al final de cada URL. Por ejemplo, si la URL de tu entrada es https://laprogramaciondehoy.com/configurar-amp-en-wordpress/, la versión AMP es https://laprogramaciondehoy.com/configurar-amp-en-wordpress/amp/. Puedes acceder desde el navegador para revisar el nuevo aspecto de tus páginas.
EL plugin solo crea contenido AMP dinámico pero no lo muestra automáticamente a tus usuarios cuando lo visitan desde un dispositivo móvil. Esto lo gestionan los consumidores de AMP como el buscador Google.
Para evitar la duplicidad de contenido las páginas creadas con AMP llevan el link rel=»canonical» hacia la página original.
Modificar el aspecto de las páginas AMP
Puedes realizar modificaciones mínimas desde el personalizador AMP. Para acceder al personalizador, ve a Apariencia >> AMP.
Solo puedes variar el color y fondo de cabecera, color de los enlaces y contraste de color.
Para realizar otras modificaciones de estilo tendrás que trabajar directamente sobre el archivo style.php que se encuentra ubicado dentro de la carpeta del plugin: wp-content/plugins/amp/templates/style.php. Esta opción no es recomendable porque al actualizar el plugin perderás los cambios.
Al revisar tus páginas /amp/ habrás observado que no contienen muchos de los elementos de tu web. Falta el logo, menú de navegación, redes sociales, los datos estructurados, no podemos editar reglas CSS… Para configurar nuestras páginas AMP debemos instalar un nuevo plugin.
Paso 2.- Instalar Plugin AMP for WP
AMP for WP nos permite añadir a nuestras páginas AMP un menú de navegación, logo, seguimiento de Google Analytics, reglas de estilo CSS personalizadas, iconos sociales… y además es compatible con Yoast SEO. Es un plugin imprescindible, un gran plugin que nos ayuda a personalizar nuestras páginas AMP.
Para instalar el plugin vamos a Plugins >> Añadir Nuevo y escribimos como palabra clave en el buscador de plugins «AMP for WP«. Instalamos en plugin.
OJO: El plugin AMP for WP solamente funciona si tienes instalado el plugin de Automattic. Si no es así, para completar la instalación te pedirá que lo instales.
Finalizada la instalación encontrarás en el backoffice de WordPress un nuevo menú «AMP», desde el que accederemos a las opciones de configuración:
Opciones de Configuración de AMP for WP
Configuración de AMP for WP en la versión 0.9.54.2
*la configuración del plugin puede variar según la versión que tengas instalada
Antes de continuar con este tutorial te comento que el equipo de AMP for WP ha preparado un archivo con las opciones de configuración ideales para el plugin.
Llegados a este punto tienes dos opciones:
Opción 1: instalar las opciones de configuración recomendadas.
Opción 2: seguir el tutorial e instalar las opciones que creas más convenientes para tu sitio.
Encontrarás toda la documentación sobre el plugin, acceso a foros de soporte, tutoriales, documentos para desarrolladores… Además de extensiones para el plugin como la extensión de WooCommerce o la de ACF (Advanced Custom Fields). Desde esta pestaña se accede a las siguientes opciones de configuración:
General
LOGO: subir un logo a las páginas y configurar su tamaño.
AMP on Pages: te permite activar y desactivar AMP en todas las páginas. Si modificas esta opción debes actualizar tus enlaces permanentes. Dessde Ajustes >> Enlaces permanentes. Selecciona el tipo de enlaces y haz click en el botón Guardar cambios.
Individual AMP Page (Bulk Edit): si activas la opción a «Show by Default» (mostrar por defecto) se creará una versión dinámica AMP de todas tus páginas. Si vas a cualquier entrada de tu blog y abres la ventana de edición, verás un nuevo panel (Ver AMP para la página actual?):
Por defecto en todas tus páginas aparecerá la opción «Mostrar» seleccionada. Puedes ocultar individualmente cada página que no quieras convertir a AMP desde aquí.
Por el contrario la opción «Hide by Default» (ocultar por defecto) no crea ninguna página AMP. En el panel de edición de tus páginas y post verás marcada la opción «Ocultar». Puedes mostrar individualmente cada página que quieras convertir a AMP activando sobre «Mostrar» y actualizando la página.
Homepage
De forma determinada la opción AMP en la página principal del sitio se encuentra habilitada.
Si pulsas sobre el logo o página inicio en tu sitio AMP verás dicha página. La página inicio está formada por las últimas entradas de tu blog.
Si deseas cambiar esta página y asignar una página estática de tu WP: activa «Front Page – Custom AMP front page» y seleccionar una página.
Te aconsejo que no actives esta opción si tú página de inicio tiene muchos elementos dinámicos. Mi blog esta creado con Divi y la página inicio está llena de este tipo de elementos. En AMP es un auténtico desastre que no tiene ni pies ni cabeza.
Ante esta situación tenemos tres posibilidades:
. Dejar la página que viene activada por defecto con las últimas entradas de tu blog.
. Crear una nueva página de inicio para AMP. El problema es que está página puede ser indexada con la versión no AMP.
. La mejor opción utilizar el «Page Builder». Te explico su funcionamiento en el siguiente punto.
Page Builder
Con el constructor de página vamos a poder trabajar con un área nueva de widget AMP que podemos asignar a una página estática. La finalidad de esta funcionalidad es mostrar contendido alternativo para una página de nuestra web. Hemos hablado en el punto anterior de los problemas de las Landing Page en AMP. Para solucionarlo debes activar esta opción. Trabajar creando contenido dentro del Page Builder y asignar este contenido a la página principal.
Si un usuario accede a tu página principal en el ordenador visualizará la página NO AMP (la de siempre). Si un usuario entra desde el móvil verá los contenidos que has creado dentro del Page Builder.
En un principio esto puede parecer un poco confuso así que vamos a explicarlo paso por paso.
Cómo trabajar con Page Builder
1.- Lo primero que vamos a hacer es activar el constructor:
Guardamos los cambios.
2.- En nuestro administrador de WordPress vamos a Apariencia >> Widget. Verás que tienes una nueva área de Widgets para las páginas AMP y cuatro módulos para widgets.
Nueva área para widgets
Nuevos módulos widgets
3.- Vamos arrastrando y editando los módulos que nos interesen dentro del Page Builder.
4.- Cuando termines de editar el «Page Builder» debemos ir a Páginas del WordPress y localizar nuestra página principal Landing Page.
Pulsa sobre editar página. Verás una nueva opción de edición: AMP Page Builder. En el desplegable selecciona Page Builder (AMP) y actualiza la página para que se guarden los cambios.
5.- Vuelve al menú del punto anterior. Selecciona como página inicio la página que has editado con el Builder.
Fantástico no!! Ya podemos ir creando nuestra página de inicio.
Añadiendo elementos dentro de los módulos puedes crear tarjetas de contacto, Llamadas a la acción, texto estático…
Además del «Page Buider» al instalar el plugin AMP for WordPress se han creado dos áreas de widget más. Sirven para agregar contenido en la parte de arriba y de abajo del loop de entradas. Esto es útil en caso de que quieras dejar como página por defecto la página de entradas el blog.
Design
La primera opción sirve para ordenar los elementos de los post: título, autor, fecha…
Abre un Personalizador AMP (tipo el de los themes) donde puedes editar y ordenar los elementos arrastrando las cajas.
A continuación tenemos un Selector de diseño. Por defecto vienen definidos tres diseños diferentes. El diseño uno y dos no tiene opciones de configuración. Son diseños muy limpios que puedes modificar con CSS y el personalizador del plugin AMP Atittude.
Por el contrario el diseño tres te permite modificar el esquema de colores, añadir un slider… Puedes realizar pruebas con los tres tipos de diseños y decidir cual se adapta mejor a tu web NO AMP.
Si necesitas añadir reglas CSS para cualquiera de los tres diseños puedes escribirlas en la caja correspondiente.
Single
Como su propio nombre indica sirve para configurar las opciones de visualización de las entradas individuales de nuestro blog.
La primera opción se refiere a los iconos sociales fijos de página. Conocidos como iconos pegajosos que permanecen en alguna parte de la página y no desaparecen aunque el usuario haga scroll. No son los iconos sociales que insertamos dentro del contenido del archivo single.php
Advertisement
Puedes publicar anuncios adsense en seis lugares posibles: debajo de la cabecera (se verá en todas las páginas), debajo del pie de página(se verá en todas las páginas), encima y debajo del content de cada post. Encima o debajo del title de cada post.
Tienes varios tamaños para asignar a cada anuncio.
Con la opción de pago además: puedes insertaranuncios de cualquier red de AD entre el contenido en tamaños diferentes. Cuando insertas el anuncio dentro del contenido puedes seleccionar el número de párrafos de contenido anteriores al anuncio.
Otra de las características de la extensión son los anuncios que se quedan fijos en la cabecera de la página aunque el usuario haga scroll. Encontrarás toda la información sobre esta extensión en la siguiente página de AMP for WP.
Menu
Nos permite crear los menús de navegación para nuestro sitio AMP. Uno para la cabecera de la web y otro para el pie de página.
Lo primero que hacemos es pulsar sobre la pestaña «Link».
Al pulsar sobre «link» nos lleva a Apariencia >> Menús >> Gestionar lugares del backoffice de nuestro WordPress.
Junto a los menús de nuestro theme, vemos los dos nuevos menús AMP, que debemos configurar.
Para asignar el menú de cabecera y pie de nuestro sitio AMP podemos seleccionar uno de los menús existentes en nuestra web o crear nuevos menús para la web AMP.
Después de asignar o crear nuevos menús, guardamos los cambios y volvemos a AMP >> Menús
Por último para que las páginas estáticas de nuestro sitio se visualicen como AMP debemos activar «Auto Add in Menu URL«, esto añade a nuestras páginas /amp/ al final de la URL para que se carguen como páginas AMP.
Pulsa sobre «Save Changes» para guardar y activar los menús en AMP.
Social
La pestaña social nos permite enlazar a nuestras redes sociales. Para alguna de ellas te pedirá datos de identificación que debes rellenar.
SEO
Principalmente sirve para integrar el plugin Yoast SEO en las páginas AMP.
Analytics
Desde el menú Analytics podemos añadir los códigos de seguimiento de nuestro proveedor de Analytics. La lista de proveedores de Analítica es sorprendente. Aunque la gran mayoría trabajamos con Google Analytics. Si trabajas con otra herramienta además de Google puedes añadir aquí todos los proveedores con sus claves correspondientes.
La lista de proveedores de analíticas soportado por el plugin es la siguiente:
Google Analytics
Segment Analytics
Piwik Analytics
Quantcast Measurement
comScore
Effective Measure
StatCounter
Histats Analytics
Yandex Metrika
Chartbeat Analytics
Para activar el seguimiento de páginas AMP en Google Analytics:
Seleccionamos como proveedor Google Analytics.
Ahora vamos a nuestro panel de administración de la herramienta de Google y para copiar el ID de seguimiento. (dentro de G Analytics >> administrador >> configuración de la propiedad o G Analytics >> administrador >> información de seguimiento >> código de seguimiento)
Pegamos el código de seguimiento en el input correspondiente.
Los usuarios que trabajan con Tag Manager además, deben configurar la siguiente propiedad:
Structured Data
En esta sección configuramos los datos estructurados para Google. En concreto nos referimos a los datos estructurados de tipo Article(marcado: schema.org)
Hay que añadir el logotipo de datos estructurados predeterminados para la web. Este logotipo no será visible en ninguna parte de nuestro sitio web, lo hacemos para que los datos estructurados no generen errores en Search Console.
Otro de los errores comunes que se produce en los datos estructurados tipo Article es la falta de imagen destacada. Para evitar esto desde la configuración de datos estructurados podemos añadir una imagen que aparecerá en todas las entradas que no tengan imagen destacada.
Guarda los cambios cuando tengas editados todas las opciones.
Contact Form
En las páginas AMP desaparecen todos los formularios. Si trabajas con el plugin Contact Form 7 en WordPress desde aquí puedes activar el soporte para los formularios. Se trata de una extensión de pago que instala un plugin: «Contact Form 7 for AMP» que te permite crear nuevos formularios compatibles.
Todavía no tengo información suficiente de las opciones que hay para crear formularios compatibles con AMP. En principio me parece buena idea disponer de por lo menos un formulario de contacto en la web AMP. Así que veo esta extensión necesaria. Además la extensión trabaja de forma libre aunque no instales AMP for WP.
Notifications
Las dos funciones principales de «Notifications» son:
Otra de las opciones de el menú es activar en todas las páginas AMP una notificación de texto, por ejemplo Política de Cookies. Puedes enlazar el texto a la página de Política de Cookies utilizando la etiqueta HTML <a> y el atributo «href». Una vez aceptada la política de cookies la barra desaparece del sitio AMP.
Para terminar pulsa sobre el botón «Save Changes».
Comments
Hay un problema con los comentarios en nuestras páginas AMP. Ya hemos hablado que con esta tecnología los formularios desaparecen. Si un usuario quiere dejar un comentario en tu blog y pulsa sobre «Dejar comentario» será redirigido a la página SIN AMP.
Para permitir que tus usuarios puedan comentar directamente en tus páginas AMP lo primero es tener activado HTTPS en tu sitio y después pagar una extensión del plugin.
Otra opción del menú comments sin coste alguno, es que permite activar los sistemas de comentarios de Disqus y de Facebook en caso de que trabajes con ellos en tu sitio.
Para guardar las modificaciones pulsa sobre el botón «Save Changes».
Translation Panel
Probablemente ya te has dado cuenta que en las versiones de tus páginas AMP hay varios textos en inglés. La etiqueta de «Navigation» para acceder al menú. Fecha y autor de la publicación… Desde el menú Translation puedes editar fácilmente todas las traducciones.
Recuerda pulsar sobre «Save Changes» para guardar las traducciones.
Advance Settings
Con las opciones avanzadas sirven para habilitar AMP en las páginas de Categorías y Etiquetas.
Otra opción es hacer que todos los usuarios que navegan desde el móvil sean redirigidos a las páginas AMP. Ya hemos explicado que son los consumidores de contenido AMP como Google los que deciden si estás páginas son visibles o no. Activando esta opción cualquier usuario de móvil con independencia del buscador que utilice verá tus páginas AMP.
Yo en principio la dejo desactivada hasta que diseñe correctamente mi Landing Page en AMP. En un primer momento que Google las indexe y decida ya que esto nos conviene. Pero por otra parte deseo ofrecer una mejor experiencia a los usuarios y eso significa crear una buena landing AMP.
RTL support es para activar la lectura de derecha a izquierda requerida en algunos idiomas.
Link to Non-AMP page in Footer: para activar o desactivar el link del pie de página que permite a los usuarios ir a la web NO AMP.
En Configuración Avanzada podemos añadir código HTML en la cabecera y pie de nuestra web AMP. Si no quieres tener problemas de validación puedes utilizar validator.ampproject.org para chequear el código HTML antes de guardar los cambios.
Facebook Instant Articles
Soporte para el plugin de Atittude Facebook Instant Articles. Hablaré de este plugin en otra ocasión.
2. Extensions
Listado de extensiones gratuitas y de pago para añadir al plugin AMP for WP.
Extensión para Contact Form 7: En las páginas AMP los formularios desaparecen. Si quieres mantener el formulario de contacto en tus páginas para móviles y estos están implementados con dicho plugin una solución es comprar esta extensión.
Una extensión GRATUITA y muy importante es la de WooCommerce. AMP no tiene soporte para los sitios de comercio pero con esta extensión convertirás tus páginas de tienda en AMP.
Además encontrarás extensiones para los siguientes plugins: Advanced Custom Fields, Custom Post Type, Star Ratings …
3. Fix AMP Errors
Las páginas AMP pueden reportar errores. Después de unos días de la configuración AMP en tu sitio debes revisar en Search Console las páginas que Google va indexando. Es probable que encuentres errores en alguna de las páginas y que estás no pasen la validación.
El equipo de AMP for WP puede ayudarte a resolver estos errores. Tienen un servicio de soporte con distintas modalidades de pago: mensual, trimestral y semestral. Tienes toda la información en la siguiente página: Soporte de errores AMP for WP
Imagen de la web de AMP for WP
En el siguiente artículo de mi blog estoy desarrollando una guía con todos los errores AMP Search Consola de mi página y la solución a dichos errores. Si te interesa el artículo: Corrección de errores AMP Search Console – Validación AMP
4. Report an Issue / Request a Feature
Si has llegado hasta aquí estarás de acuerdo conmigo en que AMP for WP es un GRAN PLUGIN. Pues hay más… además detrás de este gran plugin hay un gran equipo con el que puedes colaborar. Y como una imagen vale más que 1000 palabras…
Para importar el archivo primero pulsamos sobre «Import from File»
Se abrirá un nuevo input. Dentro del input debes pegar el siguiente código:
{"last_tab":"","opt-media":{"url":"","id":"","height":"","width":"","thumbnail":""},"ampforwp-custom-logo-dimensions":"0","opt-media-width":"190","opt-media-height":"36","amp-on-off-for-all-pages":"1","amp-pages-meta-default":"show","ampforwp-homepage-on-off-support":"1","amp-frontpage-select-option":"0","amp-frontpage-select-option-pages":"2","ampforwp-title-on-front-page":"0","ampforwp-homepage-posts-image-modify-size":"0","ampforwp-homepage-posts-design-1-2-width":"100","ampforwp-homepage-posts-design-1-2-height":"75","ampforwp-homepage-posts-design-3-width":"330","ampforwp-homepage-posts-design-3-height":"198","amp-on-off-support-for-non-amp-home-page":"0","amp-analytics-select-option":"1","ga-feild":"UA-XXXXX-Y","sa-feild":"SEGMENT-WRITE-KEY","pa-feild":"#","amp-quantcast-analytics-code":"","amp-comscore-analytics-code-c1":"1","amp-comscore-analytics-code-c2":"","amp-use-gtm-option":"0","amp-gtm-id":"","amp-gtm-analytics-type":"","amp-gtm-analytics-code":"","amp-design-selector":"3","amp-opt-color-rgba-colorscheme":{"color":"#F42F42","alpha":"1","rgba":"rgba(244,47,66,1)"},"amp-opt-color-rgba-headercolor":{"color":"#FFFFFF","alpha":"1","rgba":"rgba(255,255,255,1)"},"amp-opt-color-rgba-font":{"color":"#fff","alpha":"1","rgba":"rgba(255,255,255,1)"},"amp-opt-color-rgba-headerelements":{"color":"#F42F42","alpha":"1","rgba":"rgba(244,47,66,1)"},"amp-design-3-featured-slider":"1","amp-design-3-category-selector":"","amp-design-3-search-feature":"0","amp-design-2-search-feature":"0","amp-design-1-search-feature":"0","ampforwp-callnow-button":"0","enable-amp-call-numberfield":"","amp-opt-color-rgba-colorscheme-call":{"color":"#0a89c0","alpha":"1","rgba":"rgba(10,137,192,1)"},"amp-design-3-credit-link":"1","amp-design-3-author-description":"1","amp-design-3-date-feature":"0","css_editor":"/******* Paste your Custom CSS in this Editor *******/","ampforwp-seo-meta-description":"0","ampforwp-seo-custom-additional-meta":"","ampforwp-seo-yoast-meta":"1","ampforwp-seo-yoast-description":"0","ampforwp-robots-archive-sub-pages-sitewide":"0","ampforwp-robots-archive-author-pages":"1","ampforwp-robots-archive-date-pages":"1","ampforwp-robots-archive-category-pages":"1","ampforwp-robots-archive-tag-pages":"1","ampforwp-auto-amp-menu-link":"0","enable-amp-ads-1":"0","enable-amp-ads-select-1":"2","enable-amp-ads-text-feild-client-1":"","enable-amp-ads-text-feild-slot-1":"","enable-amp-ads-2":"0","enable-amp-ads-select-2":"2","enable-amp-ads-text-feild-client-2":"","enable-amp-ads-text-feild-slot-2":"","enable-amp-ads-3":"0","enable-amp-ads-select-3":"2","enable-amp-ads-text-feild-client-3":"","enable-amp-ads-text-feild-slot-3":"","enable-amp-ads-4":"0","enable-amp-ads-select-4":"2","enable-amp-ads-text-feild-client-4":"","enable-amp-ads-text-feild-slot-4":"","enable-amp-ads-5":"0","enable-amp-ads-select-5":"2","enable-amp-ads-text-feild-client-5":"","enable-amp-ads-text-feild-slot-5":"","enable-single-social-icons":"1","enable-single-next-prev":"1","ampforwp-single-select-type-of-related":"2","ampforwp-number-of-related-posts":"3","enable-single-facebook-share":"0","amp-facebook-app-id":"","enable-single-twitter-share":"1","enable-single-twitter-share-handle":"","enable-single-gplus-share":"1","enable-single-email-share":"1","enable-single-pinterest-share":"1","enable-single-linkedin-share":"1","enable-single-whatsapp-share":"1","enable-single-twittter-profile":"1","enable-single-twittter-profile-url":"#","enable-single-facebook-profile":"1","enable-single-facebook-profile-url":"#","enable-single-pintrest-profile":"1","enable-single-pintrest-profile-url":"#","enable-single-google-plus-profile":"0","enable-single-google-plus-profile-url":"","enable-single-linkdin-profile":"0","enable-single-linkdin-profile-url":"","enable-single-youtube-profile":"1","enable-single-youtube-profile-url":"#","enable-single-instagram-profile":"0","enable-single-instagram-profile-url":"","enable-single-VKontakte-profile":"0","enable-single-VKontakte-profile-url":"","enable-single-reddit-profile":"0","enable-single-reddit-profile-url":"","enable-single-snapchat-profile":"0","enable-single-snapchat-profile-url":"","enable-single-Tumblr-profile":"0","enable-single-Tumblr-profile-url":"","amp-structured-data-logo":{"url":"","id":"","height":"","width":"","thumbnail":""},"amp-structured-data-placeholder-image":{"url":"","id":"","height":"","width":"","thumbnail":""},"amp-structured-data-placeholder-image-width":"700","amp-structured-data-placeholder-image-height":"550","amp-enable-notifications":"","amp-notification-text":"This website uses cookies.","amp-accept-button-text":"Accept","amp-use-pot":"0","amp-translator-show-more-posts-text":"Show more Posts","amp-translator-show-previous-posts-text":"Show previous Posts","amp-translator-top-text":"Top","amp-translator-non-amp-page-text":"View Non-AMP Version","amp-translator-related-text":"Related Post","amp-translator-navigate-text":"Navigate","amp-translator-on-text":"On","amp-translator-next-text":"Next","amp-translator-previous-text":"Previous","amp-translator-footer-text":"All Rights Reserved","amp-translator-categories-text":"Categories: ","amp-translator-tags-text":"Tags: ","amp-translator-by-text":"By","amp-translator-published-by":"Published by","amp-translator-in-designthree":"in","amp-translator-view-comments-text":"View Comments","amp-translator-leave-a-comment-text":"Leave a Comment","amp-translator-at-text":"at","amp-translator-says-text":"says","amp-translator-Edit-text":"Edit","amp-translator-ago-date-text":"ago","amp-translator-archive-cat-text":"Category: ","amp-translator-archive-tag-text":"Tag: ","amp-translator-show-more-text":"View More Posts","amp-translator-next-read-text":"Next Read: ","amp-translator-search-text":" You searched for: ","amp-translator-search-no-found":" It seems we can't find what you're looking for. ","ampforwp-search-placeholder":"Type Here","ampforwp-disqus-comments-support":"0","ampforwp-disqus-comments-name":"","ampforwp-disqus-host-position":"1","ampforwp-disqus-host-file":"","ampforwp-number-of-comments":"10","ampforwp-archive-support":"0","amp-mobile-redirection":"0","amp-rtl-select-option":"0","amp-footer-link-non-amp-page":"0","amp-header-text-area-for-html":"","amp-footer-text-area-for-html":"","redux-backup":1}
Pulsa sobre «Import» y después sobre «Save Changes». Ya tienes guardada la configuración del plugin. Para terminar sólo tienes que configurar: el Logo, Analytics, Social y los Datos estructurados.
Otra de las opciones interesantes es la exportación del archivo de configuración, cuando tu plugin este correctamente configurado deberías hacer una copia de este archivo. En caso de problemas futuros podrás configurar AMP en WordPress en un minuto.
Para exportar el archivo pulsa sobre «Donwload data File» y guarda.
Consideraciones finales
Ya has conseguido configurar AMP en WordPress. Ahora debes revisar todas las páginas para las que has activado AMP y repasar una por una para realizar mejoras de estilo o código. Verás que hay páginas que no visualizan todo el contenido. En otras el contenido se imprime de forma muy diferente al original. Igual te llevas alguna sorpresa no muy agradable.
AMP for WP está en continuo movimiento, si observas algún contenido desactualizado en esta guía puedes comentarlo y añadiré los cambios en el artículo. Recuerda que vas a enfrentarte a errores de validación que tienes que solucionar, parece laborioso tener AMP en tu web pero te aseguro que merece la pena. Te dejo un post que puede ayudarte con los problemas de validación: Solución a algunos errores AMP.
Vamos a profundizar un poco más en la creación de datos estructurados. En el artículo de hoy implementaremos tarjetas enriquecidas en WordPress. Si bien existen múltiples plugins para WordPress que crean código para datos estructurados, vamos a explicar como conseguir esta funcionalidad sin uso de plugins. Sólo código script tarjetas enriquecidas insertado directamente en los archivos PHP.
Si necesitas situarte en el contexto, puede ser interesante que primero revises el artículo de introducción a las Rich Cards de este mismo blog: Como crear tarjetas enriquecidas
Vamos a trabajar con el vocabulario schema.org y el formato JSON-LD por ser la práctica recomendada por Google.
Pasos para crear el código script tarjetas enriquecidas
Definiendo el tipo de Datos Estructurados adecuados para tu web
El contenido de tu blog va a marcar el tipo de datos estructurados que debes implementar. Una web de venta de libros, debe crear tarjetas enriquecidas para libros. Si hablas en tu blog de conciertos de música, las tarjetas enriquecidas más adecuadas de implementar son las de tipo eventos. Si hablas de libros y conciertos entonces, deberas crear scripts para ambos tipos.
Antes de comenzar con nuestro ejemplo, te conviene repasar los tipos de datos estructurados que puedes crear. Revisa la página developers.google.com donde encontrarás información sobre los distintos datos estructurados.
Comparando los campos necesarios en las tarjetas enriquecidas con los campos de nuestras entradas en WordPress
Cada tipo de tarjeta enriquecida mantiene una estructura diferente con un conjunto de atributos o propiedades diferentes.
Por ejemplo, las tarjetas enriquecidas para cursos tienen la siguiente estructura:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Course",
"name": "Introduction to Computer Science and Programming",
"description": "Introductory CS course laying out the basics.",
"provider": {
"@type": "Organization",
"name": "University of Technology - Eureka",
"sameAs": "http://www.ut-eureka.edu"
}
}
</script>
Propiedades Requeridas y Propiedades Recomendadas
Cada tipo de tarjeta enriquecida tiene un conjunto de propiedades requeridas (obligatorias) y propiedades recomendadas u optativas.
Dentro de las propiedades requeridas encontramos las palabras reservadas de JSON-LD @context, @type… que definen el contexto vocabulario con el que vamos a trabajar y el tipo de datos. En nuestro caso:
También son propiedades requeridas aquellas propiedades que definen las características mínimas del dato estructurado. Por ejemplo el tipo «Event» tiene un nombre «name», localización, fecha inicio… El tipo «Course» nombre y descripción…
Las propiedades requeridas cumplen varias funciones. Por un lado son necesarias para que los datos estructurados se consideren como tal y se muestren en los resultados de búsqueda. Por otro lado definen claramente el tipo de dato.
Datos Estáticos y Dinámicos
En JSON-LD las palabras reservadas (comienzan con @) por ejemplo @contex, @type contienen información estática
esta información no depende del contenido de nuestra entrada en WordPress. En general context no va a variar ya que siempre trabajamos con schema.org. Type indica el tipo de tarjeta que vamos a emplear; curso, evento, persona, libro…
Sin embargo; «name», «description»… son datos dinámicos que dependen de cada post o entrada de nuestro WordPress. Es fácil deducir que «name» equivale al título de nuestra entrada, «description» puede ser el contenido o el resumen de la misma…
En resumen: según el tipo de tarjeta enriquecida que queramos crear debemos preparar nuestros post con los campos personalizados o custom fields apropiados para la correcta implementación de la misma. Como mínimo debemos tener tantos campos personalizados como propiedades requeridas necesite la tarjeta enriquecida.
Código script Tarjetas Enriquecidas para Eventos
Vamos a comenzar ya con la implementación de código en nuestro WordPress. El código script tarjetas enriquecidas que vamos a crear será de tipo Evento.
La estructura de la Tarjeta Enriquecida
Primero vamos a analizar la estructura de nuestra tarjeta. En el ejemplo siguiente observamos las propiedades de una tarjeta enriquecida que describe un concierto de Jazz.
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Event",
"name": "Jan Lieberman Concert Series: Journey in Jazz",
"startDate": "2017-04-24T19:30-08:00",
"location": {
"@type": "Place",
"name": "Santa Clara City Library, Central Park Library",
"address": {
"@type": "PostalAddress",
"streetAddress": "2635 Homestead Rd",
"addressLocality": "Santa Clara",
"postalCode": "95051",
"addressRegion": "CA",
"addressCountry": "US"
}
}
}
</script>
Al ser una tarjeta tipo «Evento», las propiedades requeridas son: location, location.adress, name y startDate.
Creando los Custom Fields necesarios
Como mínimo nuestro post de eventos tiene que tener los campos necesarios para rellenar todos los datos de las propiedades requeridas. Existen campos definidos en WordPress que podemos aprovechar para las tarjetas enriquecidas por ejemplo name será el título de nuestro post. Sin embargo hay otros campos que no son útiles, fecha de publicación del post no es lo mismo que la fecha del evento… Cuando sucede esto lo más apropiado es añadir campos personalizados a nuestros post.
Otro detalle a tener en cuenta es que si nuestra web trata sobre eventos, libros, cursos… debemos ser capaces de diferenciar entre los diferentes tipos de post. Podemos hacer esta distinción de varias maneras, por ejemplo trabajando con categorías diferentes o creando custom post types o entradas personalizadas.
Si ya tenemos nuestros tipos de post diferenciados el siguiente paso es crear los campos personalizados adecuados. Existen distintos métodos para conseguir esto, hoy vamos a trabajar con un plugin que nos permite crear de forma rápida y segura los custom fields para eventos. Vamos a trabajar con Advanced Custom Fields.
Crearemos varios campos personalizados:
Fecha inicio y hora de inicio (si desconocemos la hora de inicio ponemos únicamente la fecha)
Lugar (local donde se celebra el evento)
Dirección (datos de la dirección física por ejemplo, calle y número)
Código Postal
Población
Ciudad
País
Nuestro código script Tarjetas Enriquecidas para insertar en el archivo php
Una vez creados los campos personalizados podemos crear los post de tipo evento y añadir la información necesaria. Esta información se imprimirá en la tarjeta con la función:
<?php the_field('nombre del campo'); ?>
OJO: the_field(‘nombre del campo’); es una función del plugin Advanced Custom Fields. Si estás utilizando la creación de campos personalizados de la ventana de edición de los post, entonces para llamar a los campos personalizados debes usar la función:
<?php echo get_post_meta(get_the_id(), 'nombre del campo', true); ?>
Finalmente el código script tarjetas enriquecidas completo tendrá la siguiente apariencia:
Se puede colocar en cualquier lugar del cuerpo o cabecera de la página. El problema de los script es que afectan a la velocidad de carga de la página. Cuanto más abajo de la misma coloquemos el código menos afecta la velocidad de carga. El archivo recomendado para insertar el código es el archivo footer.php. Inserta el código antes de la etiqueta de cierre del cuerpo </body>
El footer se ejecuta para todas las páginas, por eso es necesario indicar que el código se ejecute solo cuando se trata de un post y además el post pertenece a la categoría Evento (‘category_name’ => ‘evento’). Si has creado una entrada personalizada tipo Evento el filtro debe ser ‘post_type’ => ‘evento’.
En mi caso tengo creada una categoría tipo Evento. El código quedaría así:
En algunas ocasiones debemos esperar algunos días para que Google rastree las páginas nuevas o modificadas. Si la herramienta de prueba no detecta la tarjeta enriquecida indicando la URL del post, puedes probar copiando y pegando el fragmento de código. Abre el post que quieres comprobar, coloca el ratón en un punto libre de la pantalla. Pulsa el botón derecho del ratón y selecciona: «Ver código fuente de la página». Localiza al final de la página el código creado. Copia el código y en https://search.google.com/structured-data/testing-tool selecciona «Fragmento de código»
Algunas consideraciones
Para crear tarjetas enriquecidas con código en WordPress debemos tener en cuenta lo siguiente:
Cada tipo de datos estructurados tiene una finalidad y no los podemos utilizar sin atender a las directrices de Google.
Dentro de los datos estructurados están las tarjetas enriquecidas o Rich Cards.
Las tarjetas enriquecidas sirven para marcar semánticamente diferente tipo de contenido.
Cada tipo de tarjeta; evento, curso… se compone de unas propiedades requeridas y otras opcionales.
El formato adecuado para crear estas tarjetas es JSON-LD siguiendo las directrices de schema.org
Al ser JSON-LD un script afecta a la velocidad de carga de la página por lo tanto es mejor colocar el script al final de la misma.
Aunque en principio las tarjetas enriquecidas están funcionando para un tipo limitado de contenidos (recetas, películas, restaurantes…), en un futuro estos serán ampliados, Google está trabajando y experimentando con tarjetas para nuevos tipos de contenido.
Podemos crear las tarjetas enriquecidas trabajando con código como en este tutorial o instalando diversos plugins.
Contact Form 7 carga JS y CSS sólo en páginas con formularios
Contact Form 7 es un plugin para crear formularios en WordPress. Con más de un millón de descargas activas se ha convertido en uno de los complementos imprescindibles en el desarrollo de nuestros sitios web. Con cada nueva actualización el plugin ofrece mejoras y mayor funcionalidad. Son múltiples sus bondades pero en este artículo nos centraremos en una pequeña pega: Contact Form 7 carga los archivos js y css en todas las páginas de WordPress.
En la configuración predeterminada de Contact Form 7, carga los archivos JS y CSS en todas las páginas, aunque la página en cuestión no tenga insertado un formulario. Realizar peticiones al servidor con llamadas a archivos que no son necesarios perjudica la velocidad de carga de nuestras páginas. Lo más lógico es cargar estos archivos sólo en las páginas donde tengamos implementado un formulario, es decir en las páginas donde usemos Contact Form 7.
Vamos a realizar algunas modificaciones en los archivos de WordPress para cargar el js y css únicamente en las páginas de nuestra web que manejan formularios.
Voy a explicar dos métodos diferentes: la decisión de que método emplear para evitar la carga de archivos del plugin Contact Form, depende de tus preferencias a la hora de trabajar con WP y de la configuración de tu sitio.
Método 1: Trabajando con archivos de configuración y templates de página
ADVERTENCIA: las prácticas que vamos a ver en el Método 1 sólo se pueden realizar si tu WordPress trabaja con distintas plantillas o templates para cada página. De lo contrario es imposible habilitar la carga de javascript y css en las páginas con formularios. Si tu WordPress no carga distintas plantillas para cada página, debes emplear el Método 2. Te recomiendo que leas el artículo entero para poder entender las características de cada método.
Si no sabes que template o plantilla carga cada página de tu sitio, puedes insertar un pequeño código en el archivo header.php de tu tema. Este código te devuelve el nombre de la plantilla que está utilizando cada página:
El método 1 consiste en eliminar primero la carga de archivos de forma general del WP y luego cargar los archivos directamente desde la plantilla de la página, por ejemplo contacto.php… Este método es interesante si tienes pocas páginas en todo tu sitio que usen formularios y cada página llama a una plantilla.
Paso 1: no cargar JavaScript y CSS de Contact Form 7 en ninguna página
Lo primero que vamos a hacer es eliminar la carga de js y css de todas las páginas, de todo el WP. Tienes dos formas de conseguirlo:
Modificar el archivo wp-config.php, independientemente de la versión del plugin Contact Form puedes realizar las modificaciones en wp-config.php
La declaración de estas constantes esta dentro de los archivos del plugin, por lo tanto no las busque en wp_config. Por defecto estas constantes se encuentran en el archivo del plugin iniciadas a «true» e indican Contact Form 7 carga JS y CSS siempre. Si cambiamos el valor de las constantes a false estamos indicando justo lo contrario: «que no se cargue ni js ni css para ninguna página».
Si tienes curiosidad puedes ver la declaración e inicialización de estas variables en el archivo wp-content/plugins/contact-form-7/wp-contact-form-7.php. Aproximadamente en la línea 7 encontrarás el siguiente código:
if ( ! defined( ‘WPCF7_LOAD_CSS’ ) ) {
define( ‘WPCF7_LOAD_CSS’, true ); }
if ( ! defined( ‘WPCF7_AUTOP’ ) ) {
define( ‘WPCF7_AUTOP’, true ); }
Modificar el archivo functions.php
Antes de utilizar este método comprueba la versión de Contact Form 7 que tienes instalada. Si la versión es 3.9 o superior podemos deshabilitar la carga de JavaScript y CSS añadiendo código al archivo functions.php del tema que tengas activo.
Localiza el archivo en la siguiente ruta wp-content/themes/tutema/functions.php y añade lo siguiente:
Cualquiera de las dos maneras empleadas evitan la carga de JavaScript y CSS en tu web.
Con esto, hemos evitado que los archivos JS y CSS del plugin Contact Form se carguen por defecto en todas las páginas de nuestra web. Ahora, lo lógico es llamar a estos archivos en las páginas que tengamos formularios. Al emplear este primer método ya avisamos que para llamar de nuevo a los archivos íbamos a modificar cada página una por una. Esto implica que cada página de mi WP con formularios tiene que tener una plantilla diferente: contacto.php, inscripcion.php, matricula.php… si no es tu caso, si en tu blog se carga la misma plantilla para todo, por ejemplo: page.php, recuerda que este método no sirve. En tu caso debes pasar al método 2.
Paso 2: carga de archivos JS y CSS en las páginas con formularios
En mi sitio tengo formularios en la página de inicio, en la página presupuesto y en la página contacto. Además cada página carga una plantilla diferente: inicio.php, contacto.php… Por lo tanto puedo modificar las plantillas que trabajan con esas páginas.
Abre la template de tu página contacto, por ejemplo, contact.php y copia este código al inicio del archivo. Es muy importante que cuando copies el código lo hagas antes de la llamada al wp-head de la página.
<?php
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
wpcf7_enqueue_scripts();
}
if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
wpcf7_enqueue_styles();
}
?>
Ya hemos explicado al principio del artículo que estos métodos sólo funcionan cuando cada página tiene plantillas independientes. Si tu página de Contacto utiliza la misma plantilla que una o varias páginas de tu sitio realizar estas acciones no va a ser eficiente. Vamos a ver un segundo método para estos casos.
Método 2: Añadir script en functions.php, solo cargar JS y CSS en páginas con formularios
El segundo método consiste en añadir un script o función a php para indicar a WP que solo cargue los archivos JS y CSS de Contact Form en las páginas que tienen insertado algún formulario.
Vamos a ver dos script diferentes, uno indicando nosotros el nombre de las páginas que tienen formularios, y otro más evolucionado cortesía de jclconsultor.com, que detecta automáticamente que páginas o entradas tienen un formulario Contact Form 7 instalado.
Script 1 – Indicando nombre/slug de cada página
Abrimos el archivo functions.php de nuestro tema y copiamos y pegamos el siguiente script:
function deregister_cf7_js() {
if ( !is_page(array( 'contacto', 'presupuesto', 'index' ) )) {
wp_deregister_script( 'contact-form-7');
}
}
add_action( 'wp_print_scripts', 'deregister_cf7_js' );
function deregister_ct7_styles() {
if ( !is_page(array( 'contacto', 'presupuesto', 'index' ) )) {
wp_deregister_style( 'contact-form-7');
}
}
add_action( 'wp_print_styles', 'deregister_ct7_styles');
Modifica el array de la función por las páginas de tu web. Es decir array(‘contacto’…) Recuerda que la función «is_page» funciona con IDs, slug o nombre de páginas.
El código trabaja de la siguiente forma: si la página a cargar no escontacto, presupuesto o inicio entonces no cargar ni el JS ni CSS de Contact Form 7. Lógicamente si la página es contacto o alguna de las que tiene formularios, como las variables iniciales estaban a «true», se cargan los archivos. (explicado en método 1)
Script 2 – Detección automática de páginas con formularios Contact Form 7
Este script detecta que páginas tienen formulario. Si la página tiene formulario entonces carga los archivos correspondientes. En caso contrario no llama al JS ni al CSS del plugin.
Este código trabaja añadiendo un filtro al contenido (the_content) de la página.
if (!is_admin() && WPCF7_LOAD_JS) {
if (!function_exists('jclconsultor_wpcf7_scripts')){
function jclconsultor__wpcf7_scripts($content) {
$pos=strpos($content,'class="wpcf7"');
if ($pos===false){
if (WPCF7_LOAD_JS){
wp_deregister_script('contact-form-7');
wp_deregister_style('contact-form-7');
}
}
return $content;
}
add_filter('the_content','jclconsultor_wpcf7_scripts',99999);
}
}
Fijaros como trabaja este script. Mediante la función php «strpos» busca la cadena class=»wpcf7″ dentro del contenido de la página. Esta es la clase que añade Contact Form a todos los formularios. Si encuentra la cadena dentro del contenido de la página, quiere decir que en esa página hay un formulario. En este caso la variable $post almacena un valor. Si no encuentra nada $pos será false, en nuestro caso indica que no hay formulario dentro de la página. Si es falso, entonces no cargaremos los archivos JS y CSS.
Los dos métodos y funciones que hemos visto, resultan bastante interesante. Aunque el primer método es más engorroso y necesitas tener plantillas diferentes para cada página, creo que es el que más mejorará la rapidez de la web. En el segundo método en las funciones empleamos filter y action, que según creo se ejecutan de forma lineal, si es así la velocidad se verá afectada. ¿Qué opinas?
Eliminar párrafos vacíos que se insertan en la edición de los post en WordPress
Con un par de funciones PHP podemos eliminar párrafos vacíos que se insertan en la edición de los post en WordPress.
Probablemente te suene familiar esta situación. Cuando editamos un post vamos corrigiendo y realizando mejoras sobre la edición. Esto provoca que insertemos párrafos vacíos en el contenido de los post. En principio, no es ningún problema pero puede afectar al diseño de nuestro sitio. Los párrafos vacíos finales de los contenidos de los post a menudo crean espacios demasiado grandes entre los elementos de información de nuestra página.
No tiene mucho sentido ir post por post, abrir la ventana de edición y borrar uno por uno cada párrafo vacío. Lo más útil es adjuntar una función en los archivos .php que limpien el contenido antes de mostrarlo por pantalla.
Código PHP para eliminar HTML <p>&nsbp;</p> del final del content de un post
Las siguientes líneas de código las copiaremos y pegaremos en el archivo single.php y en todos los archivos de WordPress (páginas…) donde queramos limpiar los párrafos vacíos del contenido.
El código sirve para quitar la entidad <p>&nsbp;</p> pero realizando modificaciones en el mismo puedes conseguir limpiar otras etiquetas.
Lo ideal es que trabajes sobre un tema hijo. Que modifiques el archivo dentro del tema hijo para no perder los cambios con las actualizaciones del tema.
Editar archivo single.php
El archivo single.php lo encontraremos siguiendo la ruta:
wp-content/themes/tutema/single.php
abre el archivo con tu editor y busca la función PHP the_content();
Vamos a sustituir the_content(); por las siguientes líneas de código PHP:
Lo primero que hemos hecho es guardar todo el contenido del post en una variable llamada $contenido.
Si te fijas hemos empleado get_the_content() y no the_content() para cargar la variable. La explicación es la siguiente: the_content() lo que hace es un «echo» del contenido de un post, es decir, se utiliza para escribir sobre pantalla y no sirve para almacenar contenido en variables. Por el contrario get_the_content() obtiene el contenido del post y lo almacena en la variable. La función get_the_content() tiene un problema: el contenido pierde las etiquetas HTML. Para solucionarlo debemos aplicar un filtro.
En la siguiente línea aplicamos un filtro sobre la variable $contenido. Con este filtro recuperamos los párrafos de las líneas. Es necesario aplicar este filtro sino nuestra función principal no tendrá nada que limpiar.
Por último con str_replace reemplazamos todos los párrafos vacíos (<p>&nsbp;</p>) por ‘ ‘ del contenido del post. Esta función se utiliza para reemplazar un string por otro string dentro de una cadena. Si necesitas modificar un string con expresiones regulares puedes emplear la siguiente función:
Se puede realizar la búsqueda y reemplazo de caracteres dentro de un string utilizando expresiones regulares. Para utilizar expresiones regulares empleamos la función: preg_replace
Un ejemplo del uso de preg_replace para quitar todos los espacios innecesarios dentro de una cadena:
<?php
$cadena = 'cadena varios espacios';
$cadena = preg_replace('/\s\s+/', ' ', $cadena);
// El resultado 'cadena varios espacios'
echo $cadena;
?>
Esta Web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información Política de cookies RechazarSeleccionar ajustesAceptar
Política de cookies
Resumen de privacidad
De estas, las cookies que se clasifican como necesarias se almacenan en su navegador, ya que son esenciales para el funcionamiento de las funcionalidades básicas del sitio web. También utilizamos cookies de terceros que nos ayudan a analizar y comprender cómo utiliza este sitio web. Estas cookies se almacenarán en su navegador solo con su consentimiento. También tiene la opción de optar por no recibir estas cookies. Pero la exclusión voluntaria de algunas de estas cookies puede afectar su experiencia de navegación.
Las cookies necesarias son absolutamente esenciales para que el sitio web funcione correctamente. Esta categoría solo incluye cookies que garantizan funcionalidades básicas y características de seguridad del sitio web. Estas cookies no almacenan ninguna información personal.
Las cookies funcionales ayudan a realizar ciertas funciones, como compartir el contenido del sitio web en plataformas de redes sociales, recopilar comentarios y otras funciones de terceros.
Las cookies de rendimiento se utilizan para comprender y analizar los índices clave de rendimiento del sitio web, lo que ayuda a brindar una mejor experiencia de usuario a los visitantes.
Las cookies analíticas se utilizan para comprender cómo interactúan los visitantes con el sitio web. Estas cookies ayudan a proporcionar información sobre métricas, el número de visitantes, la tasa de rebote, la fuente de tráfico, etc.
Cookie
Duración
Descripción
_ga
2 años
Utilizada por Google Analytics para distinguir a los usuarios.
Importante: Google Analytics no almacena información personal sobre los usuarios del sitio web.
_gat
10 minutos
Utilizada por Google Analytics para limitar el porcentaje de solicitudes..
Importante: Google Analytics no almacena información personal sobre los usuarios del sitio web.
_gat_gtag_UA_69079662_1
1 minute
Utilizadas por Google para distiguir al usario.
_gid
1 day
Instalada por Google Analytics, la cookie _gid almacena información sobre cómo los visitantes usan un sitio web, al mismo tiempo que crea un informe analítico del rendimiento del sitio web. Algunos de los datos que se recopilan incluyen el número de visitantes, su fuente y las páginas que visitan de forma anónima.
Las cookies publicitarias se utilizan para proporcionar a los visitantes anuncios y campañas de marketing relevantes. Estas cookies rastrean a los visitantes en los sitios web y recopilan información para proporcionar anuncios personalizados.
la primera parte de la estructura URL indica la página destino:
la siguiente parte indica la sección concreta dentro de la página a la que debe llevar el enlace:
Aquí tienes un enlace de prueba:
Para evitar la duplicidad de contenido las páginas creadas con AMP llevan el link rel=»canonical» hacia la página original.
