Cómo optimizar LCP, FID y CLS con herramientas como GTmetrix para mejorar el rendimiento de tu sitio web
1. Introducción a los Core Web Vitals en WordPress
En la búsqueda continua de mejorar la experiencia de usuario y el posicionamiento en motores de búsqueda, Google ha establecido tres métricas clave conocidas como Core Web Vitals:
Largest Contentful Paint (LCP)
First Input Delay (FID)
Cumulative Layout Shift (CLS)
Para quienes utilizamos WordPress, optimizar estas métricas puede parecer un desafío, pero es esencial si deseamos mejorar PageSpeed y asegurarnos de que nuestro sitio se mantenga competitivo. Además, con herramientas como GTmetrix, podemos diagnosticar y solucionar los principales cuellos de botella que afectan el rendimiento.
En este artículo, aprenderás cómo superar la barrera del 90/100 en PageSpeed, además de conocer técnicas y recomendaciones prácticas para Core Web Vitals WordPress. Si luego de leerlo buscas un servicio profesional de optimización de rendimiento, ¡no dudes en contactarnos!
2. ¿Qué son los Core Web Vitals y por qué son tan importantes?
Los Core Web Vitals son el conjunto de métricas definidas por Google para medir la experiencia de usuario de un sitio web. Estas métricas son consideradas fundamentales ya que impactan directamente en la percepción de velocidad, capacidad de respuesta y estabilidad visual de la página.
LCP (Largest Contentful Paint):
Qué mide: El tiempo que tarda el elemento con mayor contenido en cargarse dentro de la ventana de visualización (por ejemplo, una imagen destacada o un gran bloque de texto).
Por qué es importante: Un LCP lento da la sensación de que el sitio tarda demasiado en cargar el contenido principal, afectando la experiencia de usuario.
Objetivo: Para una buena experiencia, el LCP debe ser inferior a 2.5 segundos.
FID (First Input Delay):
Qué mide: El tiempo que transcurre desde la primera interacción del usuario (clic, toque en pantalla, etc.) hasta que el navegador responde.
Por qué es importante: Si un usuario hace clic en un botón y el sitio tarda en reaccionar, habrá una sensación de lentitud en la interacción.
Objetivo: El FID debe ser menor a 100 ms.
CLS (Cumulative Layout Shift):
Qué mide: La suma de los cambios de diseño inesperados que ocurren mientras la página se está cargando (por ejemplo, cuando el texto o un botón cambian de posición de pronto).
Por qué es importante: Si un usuario va a hacer clic en un enlace y este de pronto se mueve, la experiencia se vuelve frustrante.
Objetivo: El CLS recomendado es menor a 0.1.
Cuando tus Core Web Vitals están en valores óptimos, tu sitio no solo brinda una mejor experiencia, sino que también es favorecido por Google para un mejor posicionamiento.
3. Cómo medir los Core Web Vitals en WordPress
Antes de optimizar, necesitamos diagnosticar el estado actual de nuestras métricas. Existen varias herramientas gratuitas que nos muestran datos detallados:
PageSpeed Insights (PSI)
Ofrece puntajes para móvil y escritorio.
Desglosa el rendimiento por métricas (LCP, FID, CLS, entre otras).
Da recomendaciones puntuales de mejora.
GTmetrix
Permite analizar el tiempo de carga real y el tamaño total de la página.
Muestra su propia puntuación de rendimiento y datos de Core Web Vitals (LCP, TBT que sirve como indicador de FID, CLS).
Muy útil para detectar scripts y recursos externos que ralentizan la web.
Search Console (Informe de Core Web Vitals)
En la pestaña “Experiencia” dentro de Google Search Console se encuentran datos de campo (Field Data) reales de los usuarios que visitan tu sitio.
Permite identificar problemas a nivel global de tu sitio y no solo de páginas individuales.
Una vez que sepas dónde están los principales cuellos de botella, podrás priorizar las acciones de optimización.
4. Estrategias de Optimización para LCP (Largest Contentful Paint)
El LCP se ve directamente afectado por los recursos que el navegador debe cargar en el inicio. Estas son algunas estrategias para mejorar el LCP en WordPress:
Optimización de imágenes
Comprime y redimensiona las imágenes al tamaño adecuado.
Usa formatos modernos como WebP (WordPress 5.8+ soporta WebP de forma nativa).
Implementa Lazy Loading para retrasar la carga de imágenes que están fuera de la vista inicial.
Uso de un Hosting de calidad
Escoge un hosting con buenos tiempos de respuesta (TTFB bajo).
La ubicación del servidor puede influir; considera un CDN para servir contenido a usuarios de distintas partes del mundo.
Minificación y concatenación de recursos
Minifica archivos CSS y JavaScript para reducir el tamaño de carga.
Combina archivos cuando sea posible para disminuir las solicitudes al servidor.
Precarga de fuentes y elementos críticos
Si usas fuentes personalizadas, puedes precargarlas (preload) para acelerar su disponibilidad.
Identifica el contenido principal (hero image o título principal) y asegúrate de que su carga sea prioritaria.
Plugins de caché y optimización
Soluciones como WP Rocket, W3 Total Cache, o LiteSpeed Cache pueden mejorar significativamente los tiempos de carga.
Configura las opciones de “cache de página”, “optimización de base de datos” y “lazy load de imágenes” de forma adecuada.
5. Estrategias de Optimización para FID (First Input Delay)
El FID está relacionado con la velocidad de respuesta al interactuar con la página. Un FID elevado suele ser causado por un exceso de scripts o un JavaScript pesado que bloquea el hilo principal (main thread).
Reducir la carga de JavaScript
Desactiva o elimina plugins innecesarios que agreguen scripts de gran tamaño.
Usa la técnica de Defer o Async para cargar JavaScript de manera asíncrona.
Segmenta scripts críticos y diferidos para que no bloqueen la interacción inicial.
Evitar el uso excesivo de animaciones
Transiciones CSS y animaciones en JavaScript mal configuradas pueden añadir retardos.
Revisa si son realmente necesarias o si pueden implementarse de forma más ligera.
Optimizar la cadena de renderizado
Evita el render-blocking CSS y JavaScript.
Carga primero el contenido necesario para la vista inicial y difiere el resto.
Un plugin de optimización puede ayudarte a configurar esto sin necesidad de tocar el código.
Actualiza a la versión más reciente de PHP
Las últimas versiones de PHP ofrecen mejoras significativas de rendimiento.
Asegúrate de que tu hosting sea compatible y que todos tus plugins sean estables en esa versión.
6. Estrategias de Optimización para CLS (Cumulative Layout Shift)
El CLS mide la estabilidad visual de la página mientras se carga. Los saltos inesperados de contenido afectan negativamente la experiencia de usuario.
Reserva de espacio para imágenes y ads
Define siempre las dimensiones (width y height) para imágenes, videos y banners.
Esto evita que el navegador reajuste el diseño al cargar cada elemento.
Si usas AdSense u otras redes publicitarias, considera un contenedor con espacio fijo.
Evita la inyección tardía de contenido
Elementos como pop-ups, banners o formularios que aparecen de pronto deben gestionarse con cuidado.
Implementa scripts de forma que no causen desplazamientos bruscos.
Usa fuentes de forma eficiente
Las fuentes personalizadas pueden generar un salto de estilo si tardan en cargarse.
Configura la opción de “swap” en CSS (font-display: swap) para que el texto sea legible con la fuente del sistema mientras se carga la fuente personalizada.
Verifica en múltiples dispositivos
Tu sitio podría verse estable en un escritorio, pero inestable en móvil.
Analiza el CLS en pantallas pequeñas para asegurarte de no tener elementos que se muevan de forma inesperada.
7. Uso de GTmetrix para Optimizar Core Web Vitals
Si bien PageSpeed Insights es la herramienta más popular para medir estas métricas, GTmetrix ofrece información complementaria muy valiosa:
Waterfall Chart (diagrama de cascada)
Muestra cada solicitud (CSS, JS, imágenes, etc.) y el tiempo que tarda en cargarse.
Identifica si hay scripts externos muy pesados o lentos (ej. redes publicitarias o widgets).
Indicadores Adicionales
GTmetrix incluye TBT (Total Blocking Time), métrica relacionada con el FID.
También analiza el uso de CDN, la configuración de caché del navegador y más.
Comparación de versiones
Puedes comparar el rendimiento de tu sitio antes y después de aplicar optimizaciones.
Esto te ayuda a validar el impacto real de los cambios realizados.
Recomendaciones de configuración
GTmetrix te sugiere optimizaciones específicas, como comprimir imágenes, habilitar compresión GZIP, evitar redirecciones innecesarias, etc.
8. Pasos Prácticos para Superar 90/100 en PageSpeed
Lograr más de 90 puntos en PageSpeed Insights es un objetivo alcanzable si se siguen buenas prácticas. A continuación, un listado de acciones rápidas que suelen tener gran impacto:
Seleccionar un tema WordPress ligero
Los temas multipropósito suelen incluir muchas funcionalidades innecesarias.
Opta por temas minimalistas y bien codificados como GeneratePress, Astra o Kadence.
Configurar un plugin de caché de forma adecuada
Utiliza WP Rocket, W3 Total Cache o LiteSpeed Cache y sigue sus guías de configuración.
Activa opciones de minificación, concatenación y carga diferida de scripts.
Optimizar imágenes con un plugin especializado
Plugins como Imagify, ShortPixel o Smush pueden comprimir imágenes en lote.
Configura la conversión automática a WebP cuando sea posible.
Uso de CDN (Content Delivery Network)
Servicios como Cloudflare o KeyCDN distribuyen el contenido a través de sus servidores globales, reduciendo la latencia y mejorando el rendimiento.
Además, ofrecen seguridad y protección contra ataques DDoS.
Revisión periódica de plugins
Desactiva plugins que no utilices.
Busca alternativas más ligeras o con mejor reputación de rendimiento.
Monitoreo continuo
Revisa tus métricas periódicamente con PageSpeed Insights y GTmetrix.
Aplica mejoras de forma incremental y mide el impacto de cada cambio.
9. Beneficios de Contratar un Servicio Profesional de Optimización
Lograr un excelente rendimiento en WordPress a veces requiere profundos ajustes de servidor, depuración de códigos y configuraciones avanzadas. Un servicio profesional de optimización te aporta:
Diagnóstico personalizado: Cada sitio es único; los expertos identificarán cuellos de botella específicos en tu web.
Configuración óptima de plugins: No todos los sitios requieren las mismas reglas de caché, minificación o lazy load.
Ahorro de tiempo: Evitarás la curva de aprendizaje y los errores típicos al realizar pruebas sin experiencia.
Mantenimiento y soporte: Una vez optimizado, se hace un seguimiento para asegurar que los cambios se mantengan en el tiempo.
Si tu objetivo es alcanzar y mantener una puntuación superior a 90 en PageSpeed, así como una experiencia de usuario impecable, contar con un equipo especializado es una inversión que se traduce en mejores conversiones y posicionamiento en buscadores.
10. Conclusión
Los Core Web Vitals en WordPress son hoy un factor clave para ofrecer una gran experiencia de usuario y mejorar tu posicionamiento SEO. Herramientas como GTmetrix y PageSpeed Insights facilitan la medición y permiten identificar los puntos críticos que debes abordar.
Para mejorar PageSpeed y acercarte (o incluso superar) el deseado 90/100, enfócate en:
Mantener un LCP menor a 2.5s con optimizaciones de imágenes, hosting de calidad y estrategias de precarga.
Reducir al máximo el FID optimizando y posponiendo la ejecución de JavaScript.
Asegurar un CLS por debajo de 0.1 reservando espacio para todos los elementos e inyectando el contenido de forma estable.
¿Necesitas ayuda profesional para optimizar tu sitio y aprovechar al máximo los Core Web Vitals? Nuestro equipo de expertos en rendimiento está listo para ofrecerte soluciones a medida, garantizando una mejora significativa en las métricas de tu sitio y, sobre todo, en la experiencia de tus visitantes. ¡Contáctanos y comienza a ver resultados reales en la velocidad y efectividad de tu web!
Aquí tienes una breve descripción de la historia de cada uno de los 16 navegadores web mencionados anteriormente:
1.-WorldWideWeb: Creado por Tim Berners-Lee en 1990, WorldWideWeb fue el primer navegador web. Fue diseñado para funcionar en el sistema operativo NeXTSTEP.
2.-Mosaic: Creado por Marc Andreessen en 1993, Mosaic fue el primer navegador web gráfico y uno de los primeros navegadores populares. Fue el primer navegador en mostrar imágenes en línea y permitir la navegación por pestañas.
3.- Netscape Navigator: Lanzado en 1994, Netscape Navigator fue uno de los primeros navegadores web populares. Fue el primer navegador en incluir soporte para JavaScript y CSS.
4.-Internet Explorer: Desarrollado por Microsoft, Internet Explorer se convirtió en uno de los navegadores más utilizados durante los años 90 y principios de los 2000. Fue el navegador web predeterminado en el sistema operativo Windows.
5.- Opera: Creado por Jon Stephenson von Tetzchner y Geir Ivarsøy, Opera se lanzó en 1996 y se hizo popular por su rapidez y funciones avanzadas. Fue el primer navegador en incluir navegación por pestañas y bloqueo de ventanas emergentes.
6.-Mozilla Firefox: Lanzado en 2004, Mozilla Firefox es un navegador web de código abierto desarrollado por la Fundación Mozilla. Se caracteriza por su velocidad y seguridad, y es uno de los navegadores más utilizados en la actualidad.
7.-Safari: Desarrollado por Apple, Safari se lanzó en 2003. Se enfoca en la velocidad y la privacidad, y es el navegador web predeterminado en los dispositivos Apple.
8.-Google Chrome: Desarrollado por Google, Google Chrome se lanzó en 2008. Se caracteriza por su rapidez, estabilidad y amplias capacidades de personalización. Es uno de los navegadores web más utilizados en la actualidad.
9.-Microsoft Edge: Desarrollado por Microsoft para reemplazar a Internet Explorer, Microsoft Edge se lanzó en 2015. Se caracteriza por su rapidez y seguridad, y utiliza el motor de renderizado Chromium de Google.
10.-Brave: Basado en Chromium, Brave se lanzó en 2016 y se enfoca en la privacidad y la seguridad. Bloquea anuncios y rastreadores de forma predeterminada y permite a los usuarios ganar criptomonedas viendo anuncios.
11.-Vivaldi: Creado por antiguos desarrolladores de Opera, Vivaldi se lanzó en 2016 y se enfoca en la personalización y la eficiencia. Permite a los usuarios personalizar la interfaz de usuario y las teclas de acceso rápido.12
12.-Tor Browser: Desarrollado por el Proyecto Tor, Tor Browser se enfoca en la privacidad y la seguridad. Utiliza la red Tor para ocultar la dirección IP del usuario y proteger su privacidad.
13.-Epic Browser: Epic Browser se enfoca en la privacidad y la seguridad, bloqueando anuncios y rastreadores de forma predeterminada. También incluye una herramienta de proxy para proteger la privacidad del usuario.
14.-Maxthon: Creado por Chen Qingzhou en 2002, Maxthon se enfoca en la rapidez y la eficiencia. Utiliza el motor de renderizado Trident de Internet Explorer y el motor de renderizado WebKit de Google Chrome. Se hizo popular en Asia y es uno de los navegadores web más utilizados en China.
15.-SeaMonkey: Desarrollado por la comunidad de Mozilla, SeaMonkey es un paquete de aplicaciones que incluye un navegador web, un cliente de correo electrónico, un editor HTML y más. Fue creado como una alternativa de código abierto a Netscape Communicator.
16.-Pale Moon: Creado por el desarrollador Moonchild Productions, Pale Moon se basa en el código fuente de Mozilla Firefox pero se enfoca en la eficiencia y la personalización. Incluye características que se han eliminado de Firefox, como soporte para extensiones antiguas y barras de herramientas personalizadas.
Es importante destacar que esta lista no es exhaustiva y que hay muchos otros navegadores web disponibles en la actualidad, algunos de los cuales se centran en características específicas, como la privacidad, la eficiencia o la accesibilidad.
Un algoritmo es una serie de pasos o instrucciones que seguimos para resolver un problema o realizar una tarea específica. Es como una lista que te dice qué hacer y en qué orden hacerlo, para que llegues al resultado que deseas.
Piensa en un algoritmo como una receta de cocina. Imagina que quieres hacer una pizza. No mezclas todos los ingredientes al azar; sigues los pasos en un orden preciso: primero haces la masa, luego agregas los ingredientes, y finalmente horneas. El resultado es una pizza deliciosa, ¡y todo gracias a que seguiste los pasos!
Imagina que un chef quiere crear un pastel delicioso. No solo mezcla los ingredientes al azar, sino que sigue una receta, un conjunto de pasos en un orden específico, para asegurarse de que todo quede perfecto. Al igual que el chef, un algoritmo funciona de manera similar: es un conjunto de instrucciones que deben seguirse en un orden preciso para resolver un problema o realizar una tarea. Los algoritmos se usan en muchas cosas que usamos a diario, como en las búsquedas de Google, los videojuegos, y hasta cuando pedimos comida por una app
Algoritmos en la vida diaria
Los algoritmos no solo se usan en cocina; también están en nuestro día a día. Cuando amarras tus zapatos, sigues un algoritmo: primero haces un lazo, luego cruzas los cordones, haces otro lazo y tiras. Incluso cuando decides cómo llegar a la escuela, podrías seguir pasos: sales de casa, doblas en una calle, sigues derecho hasta llegar.
Algoritmos en tecnología y computadoras
En las computadoras, los algoritmos son fundamentales porque les dicen cómo realizar tareas. Por ejemplo:
Buscar en Internet: cuando buscas algo en Google, un algoritmo analiza millones de páginas para encontrar la respuesta que necesitas.
Jugar un videojuego: cada acción en un videojuego, desde que presionas un botón hasta el movimiento del personaje, sigue una serie de instrucciones específicas.
¿Por qué son importantes los algoritmos?
Los algoritmos son importantes porque hacen que las cosas sean más fáciles y eficientes. Sin ellos, las computadoras no sabrían qué hacer, y nuestras actividades diarias serían más complicadas. Nos ayudan a seguir una secuencia para completar tareas de manera ordenada y rápida.
Ejemplo de algoritmo: Preparar un sándwich
Aquí tienes un ejemplo sencillo de un algoritmo para hacer un sándwich de jamón y queso:
Toma dos rebanadas de pan.
Coloca una rebanada de queso sobre una de las rebanadas de pan.
Coloca una rebanada de jamón sobre el queso.
Pon la otra rebanada de pan encima.
¡Listo! Tienes un sándwich.
Cómo crear tus propios algoritmos
Crear un algoritmo es tan fácil como pensar en pasos claros y específicos. Puedes intentar escribir un algoritmo para tareas como cepillarte los dientes, vestirte en la mañana o hacer tu tarea. A medida que creces y aprendes más, estos pasos se vuelven más complejos, como en la programación de computadoras.
En resumen
Un algoritmo es como una receta o un conjunto de instrucciones para hacer algo de manera organizada y eficiente. Sin algoritmos, muchas de las cosas que usamos, como juegos, aplicaciones, o búsquedas en Internet, no funcionarían. Los algoritmos hacen posible que las computadoras y muchas otras herramientas realicen tareas complejas de manera rápida y precisa.
Al escritorio de wordpress lo podemos dividir en 3 zonas para hacer más rápida la explicación, ya que no es nada difícil de entender, y así hacer más sencillo todo esto.
Escritorio WordPress
En el escritorio WordPress encontrarás que en la parte superior tienes estos elementos:
Esta parte en la que vas conociendo tu escritorio wordpress, es donde aparece el nombre de tu sitio. Si das clic te mandará a la vista principal de tu página
Aquí puedes añadir páginas, entradas, imágenes y video.
Al pasar el cursor o dar clic, se abriran las opciones de editar tu perfil y cerrar sesión
En la zona del escritorio podemos hacer borradores por si se te ocurre algo y deseas anotarlo para que no se te olvide. También puedes dar un vistazo a las entradas, las páginas, y llevar el control de los comentarios que hagan en tus publicaciones.
En la barra de la izquierda se encuentra el menú, donde podrás ver los siguientes elementos:
Inicio: te llevará al inicio del escritorio wordpress (la misma vista que tienes en la imágen)
Actualizaciones: aquí podrás ver las actualizaciones disponibles para los compelementos que tengas
Entradas: aquí puedes añadir y administrar las entradas que tengas
Medios: sirve para añadir imágenes, videos y archivos. También puedes ver los que ya tienes agregados.
Páginas: aquí puedes administrar las páginas que tengas y añadir nuevas.
Comentarios: en esta zona podrás llevar el control de los comentarios que hagan en tus publicaciones
Apariencia: en apariencia puedes ver los temas instalados, hacer cambios en tu página, ver los widgets (pequeños programas para añadir funciones), administrar los menús, y editar los temas.
Plugins: aquí puedes ver los plugins (aplicaciones que ayudan a mejorar wordpress) instalados, añadir nuevos y activarlos o desactivarlos
Usuarios: en usuarios puedes ver y añadir nuevos usuarios (ya sean personas registradas en tu página o las que te ayudan a administrar wordpress) también puedes asignar el rol que tendrá cada usuario
Herramientas: puedes exportar e importar tablas de datos, exportar datos personales o borrarlos.
Ajustes: aquí puedes hacer ajustes generales de wordpress, ya sean de escritura, lectura, comentarios, medios y enlaces.
Cerrar menú: esto simplemente ocultará todo el menú.
Para poder instalar WordPress y testear nuestra página web de forma gratuita primero debemos instalar un servidor local, lo cual haremos en tan solo 9 pasos.
En este caso se usara Xampp, ya que es un servidor independiente (software libre) que utiliza una base de datos MySQL en la que se almacenará nuestra página y el servidor web Apachenecesario para la ejecución del sitio.
1.- Procederemos a ingresar a la página oficial de Xampp para comenzar la instalación y bastará con hacer clic sobre la versión que necesites (Windows, Linux y OS) para que la descarga comience automáticamente.
2.- Una vez descargado haremos clic derecho al instalador y lo ejecutaremos como administrador.
3.-Se mostrara la siguiente ventana, solo haremos clic al botón de next para comenzar la instalación.
4.-Aquí se muestran los componentes de Xampp que se pueden instalar. En esta ocasión solo necesitamos dejar marcada la parte de Apache, MySQL, PHP y phpMyAdmin y clic al botón de next.
5.- En este apartado elegiremos la ubicación donde se instalara Xampp. La versión de Windows ya trae por defecto la carpeta que se muestra. Haremos clic al botón next.
6.- La siguiente ventana solo nos dice si queremos saber mas sobre los módulos de Bitnami. Desmarcamos la opción y daremos clic al botón de next.
7.- Nos avisará que la instalación ya está lista para ejecutarse, basta con hacer clic en next. aparecerá otra ventana con el progreso de la instalación.
8.- En algún momento aparecerá un aviso del cortafuegos para permitir el acceso de Apache a las redes privadas o publicas. esto puede surgir si no hemos instalado Apache anteriormente. Simplemente daremos clic en permitir acceso.
9.- Cuando finalice la instalación se mostrará la siguiente ventana que nos dará una opción por si queremos iniciar Xampp. daremos clic al botón de finish y terminaremos la instalación.
Ahora que ya está instalado xampp, veamos las configuraciones basicas que estaremos usando para poner en marcha el servidor y crear nuestra primera base de datos
Al abrir xampp por primera vez, pedirá que selecciones un idioma, y solo tienes entre ingles y aleman, lo recomendable seria ponerlo en ingles pero si sabes aleman pues adelante.
Ya dentro del programa tendremos la siguiente interfaz.
Las partes que están numeradas son las que vamos a usar
1.- El botón de start nos servira para iniciar el servidor y la base de datos (hacer clic en los dos)
2.- El botón admin nos mandará la página de phpmyadmin para crear y administrar nuestra base de datos
3.- El botón Config abrirá la configuración del servidor o la base de datos
4.- El botón Quit te sacará del programa, pero antes de salir debes apagar el servidor y la base de datos haciendo clic nuevamente en los botónes de start.
Arrancar Xampp
1.- Da clic a los botones de start para iniciar el servidor y la base de datos. Notarás que se pondrán en color amarillo y pasarán a ponerse verdes que es cuando ya esta listo para usarse. Haz clic al botón de admin para ir a la página de phpmyadmin
2.- Cuando aparezca la siguente página, debes dar clic al apartado que dice phpmyadmin. Si por alguna extraña razón no te deja ingresar, pon en la barra de direcciones localhost/phpmyadmin y das enter para que te deje accesar.
3.- Este será el lugar donde llevarás el control de las bases de datos que vayas creando. Para crear una, sólo da clic al apartado que dice bases de datos.
4.- Enseguida aparecerá un apartado donde tendrás que poner el nombre de tu base de datos, una vez hecho esto bastará con dar clic al botón de crear, y tu base de datos quedara lista. Las tablas de tu base de datos serán creadas una vez que hayas instalado wordpress
INSTALAR WORDPRESS
Una vez terminada la instalación y configuración del servidor local, podemos proceder con la instalación de wordpress, pero primero te daré una breve explicación:
wordpress es un cms, como dije anteriormente, especializado en diseñar diferentes tipos de páginas web a base de plantillas prediseñadas ya sea gratuitas o de pago, que se pueden editar con maquetadores como visual composer, entre otros. Para una explicación mas detallada ve al siguiente enlace
Existen por lo menos 4 formas de instalar wordpress, ya sea directamente de tu hosting (la más fácil), desde wordpress.org, mediante ftp, y de forma local como lo haremos ahora y esta es una de las mas sencillas.
1.- Para comenzar la instalación ingresaremos a wordpress daremos clic al botón “get wordpress” que se encuentra en la parte superior izquierda de la página
2.- Nos abrirá otra página, tendremos que dar clic en descargar wordpress
3.-Una vez descargado el archivo rar lo vamos a copiar.
4.- Buscaremos nuestro disco local y daremos clic.
5.- Dentro de las carpetas del disco local buscaremos la de Xampp y daremos doble clic.
6.-Ahora buscaremos la carpeta que dice htdocs y daremos doble clic.
7.- Ya dentro de htdocs crearemos otra carpeta. Recuerda que tiene que ser el mismo que pusiste en tu base de datos de lo contrario no funcionará la instalación.
8.-En este caso he puesto el nombre de “musica” a mi carpeta. Daremos doble clic.
9.-Dentro de esta pegaremos el archivo rar que copiamos y lo extraeremos.
10.- Cuando se descomprima nos aparecerá una carpeta llamada wordpress, hacemos doble clic en ella.
11.-Selecciona todo el contenido y copiarlo. Regresa a la carpeta anterior para poder pegarlo.
12.- Cuando termines de pegarlo recuerda eliminar el archivo rar y la carpeta descomprimida.
Acceder a WordPress
13.- Terminado esto nos dirigiremos al navegador y en la barra de direcciones escribiremos “localhost/musica/wp-admin” en lugar de poner música como lo he hecho yo, tu debes poner el nombre que asignaste a tu base de datos.
14.-La dirección nos abrirá la pagina de instalación de wordpress. Primero pedirá que seleccionemos un idioma, elije el que sea de tu país, aunque lo recomendable sería poner español en general por posibles problemas de compatibilidad.
15.- Abrirá el siguiente apartado. Da clic al botón de “vamos a ello”
Creación del usuario de WordPress
16.- En este apartado pedirá los datos de conexión de la base de datos.
1.- Pon el nombre de tu base de datos.
2.– En usuario pon root. Esto es para todo las instalaciones, tanto la tuya como la mía.
3.- En contraseña eliminas lo que tenga y lo dejas en blanco
Los demás recuadros se quedan tal y como están, ya solo haz clic en el botón de abajo.
17.- Aparecerá un mensaje diciendo que que ya está listo. Haz clic al botón.
18.- En el siguiente recuadro pedirá la información de usuario.
1.- Pon el nombre que tendrá tu sitio web. Puedes poner el que tu quieras, ya no es necesario que pongas el de tu base de datos.
2.- Escribe un nombre de usuario. En mi caso puse “erick”
3.- quita la contraseña que tiene por defecto y pon la tuya. Como es una instalación local entonces puedes usar una contraseña débil.
4.- En caso de que uses una contraseña débil te aparecerá un recuadro que te pedirá confirmar el uso de la contraseña débil
5.- El correo electrónico no es necesario ponerlo, pero si gustas puedes ponerlo.
Recuerda guardar bien el nombre de usuario y la contraseña, ya que con estos podrás ingresar al escritorio de wordpress.
Da clic al botón de Instalar wordpress.
Iniciar Sesión
19.- El siguiente recuadro dirá que ya está instalado wordpress, ya solo da clic al botón de acceder.
20.- Aquí solo tendrás que poner el usuario y la contraseña que asignaste en el paso anterior.
21.- Y listo, ya tienes acceso al escritorio de wordpress. Si quieres saber como se ve tu página web, pasa el cursor sobre el apartado que tiene el nombre de tu página y haz clic en ver sitio.
22.- Tu sitio se verá mas o menos así. Tiene este aspecto ya que no hay ningún tema instalado,pero eso lo haremos en otro tutorial.
Recuerda que cada vez que quieras ingresar al escritorio de wordpress debes encender xampp para que se pueda ejecutar la base de datos, de lo contrario no podrás acceder. Como lo dije al principio, esto es una instalación local, así que puedes hacer modificaciones a tu sitio sin la necesidad de Internet.
Si quieres hacer otra página entonces tendrás que hacer otra instalación de wordpres, así que por cada página es una instalación de wordpress y otra base de datos de xampp (ya no necesitas instalar xampp de nuevo). Ve al siguiente post para ver la estructura de una página.
Felicidades, ya con esto queda terminada la instalación de wordpress y xampp. Ve al siguiente artículo para seguir conociendo wordpress.
Por si aún no lo has notado, cada página web que te encuentras tienen una estructura básica que ayuda a los diseñadores o programadores web a diferenciar cada zona y dónde va cada elemento. Por ello a continuación veamos una breve explicación de cual es la estructura de una pagina web.
ESTRUCTURA DE UNA PAGINA WEB
Header
1.- El header o encabezado, se ubica en la parte superior de la página web y es donde por lo principal van el logo, los menus, contacto, y lo que quieras agregar o quitar.
Body
2.- El body o cuerpo, es la parte central y es donde ira todo el contenido que vayas agregando.
Footer
3.- El footer o pie de página, se ubica en la parte inferior de la pagina y por lo regular contiene información sobre fecha de creación o derechos de autor.
Sidebar
En algunos casos encontraras que algunas paginas contienen un sidebar o barra lateral, este es otro elemento que llegan a tener algunos temas, y por lo general contienen menús, contacto, entradas, etc. Estos serían los elementos que están en la estructura de toda página web.
También puedes consultar la estructura de una pagina web con html aquí.
Ahora veamos cada uno de estos elementos en una página web real, para que te quede más claro.
– En el caso de la página de tomalaweb esa pequeña zona es el header, y aparecen los apartados de tienda, blog, productos, nosotros y el logo.
– El footer de esta misma página no tiene tantos elementos, y aparece al final como ya te habia comentado. Como podrás imaginar, el boby se encuentra entre estos dos elementos.
