Cómo crear un sitio web dinámico desde cero con WordPress

Parecería que los sitios estáticos han pasado a la historia y que los dinámicos, fáciles de desarrollar, los han sustituido para siempre. Pero con la llegada de distintos generadores de sitios estáticos y frameworks especiales, el debate sobre qué tipo de sitio es más óptimo se ha avivado con renovado vigor.

Este artículo mostrará las diferencias entre sitios web estáticos y dinámicos. También proporcionará algunas ideas sobre la creación de un sitio web dinámico utilizando el plugin JetEngine y el tema Astra.

¿Qué es un sitio web dinámico?

Los sitios web dinámicos constan de páginas dinámicas, como plantillas modificables. Estos sitios web se adaptan a un usuario concreto en función de diversas características, como la ubicación, la hora del día y la interacción con el usuario.

Los ejemplos más llamativos de sitios dinámicos son las páginas basadas en contenido sistemas de gestión (CMS).

En esta categoría también puede encontrar tiendas en línea, foros, sitios web de reseñas y otras plataformas que permiten a los usuarios interactuar con ellos.

Las páginas dinámicas se crean bajo demanda cada vez que un usuario entra en la página. Las páginas incluirán marcadores de posición para elementos específicos que también se cargarán bajo demanda.

La ventaja es que siempre puede mostrar el contenido más reciente cada vez que un usuario abre una página.

Sitios web dinámicos frente a sitios web estáticos

Antes de comparar los sitios web dinámicos y estáticos, aclaremos qué es un sitio web estático.

Los sitios estáticos tienen la misma apariencia y el mismo contenido para todos los visitantes.

A menudo, los sitios con un mínimo de páginas o contenidos que no requieren actualizaciones periódicas son estáticos, es decir, páginas de servicios comerciales o productos, catálogos de productos, directorios de documentación técnica y páginas sobre nosotros.

Sin embargo, puede añadir algunos elementos dinámicos (comentarios, cuentas de usuario, búsqueda) a dichas páginas utilizando herramientas de terceros.

¿Cómo funcionan las páginas dinámicas?

Cuando el visitante entra en una página dinámica, el servidor encuentra la página deseada y la envía al intérprete.

A continuación, el intérprete construye la página utilizando la plantilla y la concilia con los elementos dinámicos de la base de datos. A continuación, la página vuelve al servidor y éste la envía al navegador del usuario para que la muestre.

El intérprete utiliza Java, PHP, ASP y otros lenguajes de programación para procesar las páginas en el lado del servidor.

Cuando hablo de páginas web estáticas, me refiero a que al solicitar una página estática en un navegador, el servidor proporciona inmediatamente la página HTML terminada en su forma original.

Además de HTML, para las páginas estáticas sólo se utilizan CSS y JavaScript, lo que garantiza una carga rápida.

Funcionalidad

Una de las principales características de los sitios dinámicos es la separación del diseño (plantilla), el sistema de tratamiento de la información (motor) y el contenido.

Al conectar un sitio dinámico a una base de datos, puede solicitar fácilmente información de forma organizada y estructurada para crear y mostrar contenidos en función de sus necesidades.

Los sitios web dinámicos ofrecen una amplia gama de características funcionales.

Para los usuarios, se trata de la posibilidad de registrarse y autenticarse, guardar información personal, buscar en el sitio, rellenar formularios, crear una tienda en líneay otras interacciones.

Proporciona flexibilidad en la construcción de sitios, ya que los CMS suelen permitir que varios usuarios trabajen con el sitio a la vez (especialistas en SEO, autores, editores y otros). Los usuarios pueden gestionar completamente el sitio sin tener que sumergirse en la codificación.

A su vez, puedes interactuar con sitios web estáticos pulsando los enlaces y rellenando los formularios.

Las páginas estáticas son una buena opción para sitios web informativos, páginas de empresas, sitios de folletos, etc., ya que pueden ser eficaces a la hora de proporcionar a los usuarios los detalles necesarios con rapidez.

Coste

No hay nada inequívoco en dynamcoste de los sitios web estáticos e icAsí que no espere una respuesta clara del tipo "un sitio web dinámico es más barato que uno estático".

Todo dependerá principalmente del propio sitio:

• La plataforma y el constructor de sitios que utiliza
• La forma en que está construido
• Contenido
• El nivel de competencias de los usuarios
• La necesidad del trabajo de un programador o desarrollador web, etc.

Antes se podía decir que los sitios web estáticos necesitaban más dinero para su mantenimiento.

Pero ahora, puede utilizar WordPress, HTML y generadores de sitios estáticos para crear páginas web estáticas de forma rentable y rápida.

Motores de búsqueda

No existe una gran diferencia entre las páginas web estáticas y las dinámicas en términos de SEO. El hecho de que unas páginas web sean estáticas y otras dinámicas no significa que un determinado tipo de sitio web sea significativamente mejor para los motores de búsqueda.

Uno de los puntos a los que hay que prestar atención son las URL. Si hablamos de páginas web estáticas, funcionan "naturalmente". La organización de las URL en carpetas sigue la organización de tu sitio web. Esto significa que cada página tiene una sola URL, etc.

En el caso de las páginas web dinámicas, Rendimiento SEO depende de cómo organice su sitio web: debe garantizar que sus URL sigan la estructura del sitio web.

Por tanto, asegúrese de que las URL sean fáciles de usar.

Otro punto crítico para el SEO es la velocidad de la página, así que haga que su sitio web dinámico o estático sea lo más rápido posible.

Por último, pero no por ello menos importante, todos los motores de búsqueda prefieren sitios web actualizados con regularidad y con contenido fresco.

Las páginas web dinámicas son mucho más cómodas de renovar que las estáticas.

Velocidad del sitio web

Las páginas estáticas se cargan más rápido que las dinámicas. Es un hecho.

El servidor web sólo tiene que copiar el archivo de la página, añadir cualquier formulario o elemento y enviarlo al navegador. El procesamiento es mínimo y se consumen menos recursos del servidor.

Las páginas dinámicas deben ser creadas por el CMS antes de ser enviadas al navegador del usuario. Hay que copiar la plantilla de la página y buscar cada elemento dinámico en la base de datos e inyectarlo en la página.

Sólo entonces puede enviarse al navegador del usuario.

A pesar de la complejidad añadida, si utiliza un tema de WordPress ligero y construir correctamente su sitio web, puede hacer mucho para minimizar los retrasos en la tramitación.

Cómo crear un sitio web dinámico con Astra y JetEngine

Puedes construir un sitio web rápido y totalmente responsable fácilmente si utilizas las herramientas adecuadas. En este caso, el tema Astra de WordPress y el plugin JetEngine.

Cómo instalar el tema Astra

Hay varias formas de instalación del tema Astra.

Si eres suscriptor de Crocoblock, puedes encontrar Astra en el Asistente de instalación.

1. Paso 1. Inicie sesión en su cuenta Crocoblock y abra el panel de control.
2. Descargue el archivo ZIP que contiene el asistente de instalación.
3. Cargue el Asistente de instalación en WordPress e inícielo.
4. Busca Astra en la página del asistente de instalación de Crocoblock y selecciónalo.
5. Elige el tema hijo para asegurar tus cambios CSS. Una vez finalizado el asistente de instalación, el tema Astra estará instalado y listo.

La segunda forma de instalar el tema Astra es cambiar el tema en el menú Apariencia.

1. Ir a Apariencia > Temas en el panel de administración.
2. Busque Astra Theme en la lista y haga clic en Instale botón.

Pulse Activar y espere a que se complete la instalación.

Puede que no encuentres el tema Astra entre las opciones. En este caso, vaya a https://wpastra.com/ y descárgatelo.

A continuación, podrás subirlo a WordPress.

1. Para ello, seleccione Apariencia > Temas.
2. Encuentre "Añadir nuevo". Se le redirigirá a otra página en la que podrá encontrar el "Subir tema" botón.
3. Sube el ZIP con Astra Theme, haz clic en "Instalar ahora"y luego ir a por el "Activar" botón.

También puede encontrar Astra Theme a través de la página Buscar temas bar.

Cuando actives Astra Theme, lo verás en tu Temas.

¡Enhorabuena! ¡Astra Theme está instalado en WordPress!

Ahora pasaré a otro paso: elegir la plantilla de inicio.

Elegir la plantilla

El primer mensaje que verás después de instalar Astra será éste:

Haga clic en Comenzar para activar Starter Templates.

Una vez finalizado el proceso, tendrás que elegir el constructor de páginas:

Después de elegir el que más le convenga, será redirigido a la página Starter Templates donde verás la lista de plantillas gratuitas y premium.

Haz clic en la plantilla que quieras incorporar. Yo utilizaré "Montaña".

En la ventana abierta, busque tres botones: Vista previa del sitio, Importar sitio completo, Importar plantilla "Inicio".

Decida si necesita toda la funcionalidad de la plantilla o algunas partes de ella. Yo optaría por el sitio completo.

Haga clic en el botón correspondiente para iniciar la importación.

El siguiente paso es elegir su finalidad:

Se te pedirá que introduzcas tu nombre, pero puedes saltarte este paso.

Una vez importada la plantilla, puede empezar a crear su sitio web dinámico.

Características principales del tema Astra

La principal característica de Astra es su facilidad de uso y flexibilidad. Es adecuado para sitios web de todo tipo, desde blogs hasta tiendas WooCommerce.

El tema también ocupa menos de 50 KB, por lo que las páginas se cargan rápidamente (especialmente si se configuran el almacenamiento en caché, la compresión gzip y las imágenes optimizadas).

Otras características esenciales son:

• Puedes personalizarlo todo con constructores de páginas de arrastrar y soltar como Elementor o utilizar el editor nativo de WordPress.
• Todas las plantillas son responsive y se visualizan perfectamente tanto en ordenadores como en smartphones.
• Puede realizar cambios rápidamente en todo el sitio web utilizando el personalizador. Acceda a él en Apariencia > Personalizar en el panel de control de WordPress. Todo lo que cambies en el sitio web aparecerá en la vista previa en tiempo real, para que siempre sepas cómo quedará tu sitio antes de publicarlo.
• Dispone de varias herramientas de personalización. Puedes cambiar los colores primarios del tema, modificar el diseño de las páginas, utilizar Google Fonts y mucho más. Incluso hay opciones para configurar el pie de página, la barra lateral, el título, etc.

Puede configurar globalmente aspectos como la tipografía para que su sitio web tenga un aspecto uniforme. Esto significa que no tendrás que cambiar las fuentes en cada página.

O puede que desee desactivar una barra lateral o un pie de página en varias páginas sin tener que acceder a cada una de ellas individualmente.

Además, es fácil cambiar cómo se muestran las barras laterales, incluir migas de pan o incluso modificar los mensajes, el título y los metadatos del blog, los comentarios, la categoría y el autor.

Para ello, dispone del Plugin Astra Bulk Edit. Ayuda a ahorrar tiempo a la hora de ajustar la configuración de los metadatos, como la barra lateral y la posición del título de su sitio web. Permite aplicar los cambios simultáneamente a cientos de páginas si es necesario.

Astra permite configurar los encabezados de página de forma dinámica. Cambiarán dependiendo del contenido que necesites mostrar allí. Por ejemplo, pueden ser números de teléfono, enlaces a redes sociales o CTA.

Además, es posible que desee establecer cómo mostrar los encabezados en el sitio web. Por ejemplo, establezca un encabezado específico para una página de inicio que solo se muestre cuando un visitante con un rol específico haya iniciado sesión.

¿Qué es el plugin JetEngine?

JetEngine es un plugin de contenido dinámico que le ayuda a crear sitios web complejos, diseñar estructuras de sitios web avanzadas, implementar funcionalidades dinámicas y diseñar todo de forma rentable.

Para instalar JetEngine, necesitará el programa Asistente de instalación Crocoblock.

Después de introducir el código de licencia, debe elegir la instalación JetPlugins para obtener el plugin JetEngine por separado.

Encuentre JetEngine y haga clic en la casilla correspondiente para seleccionarla de la lista.

A continuación, pulse la tecla Continuar para proceder a la instalación.

Verás el plugin en el panel de control de Croco y en la parte izquierda del panel de administración.

Principales características del sitio web dinámico JetEngine

El plugin JetEngine tiene todo lo necesario para crear un sitio web dinámico. Proporciona 15 funciones dinámicas para desarrollar una estructura web compleja, pero no es necesario utilizarlos todos a la vez.

Dependiendo de la finalidad del sitio web, es razonable empezar por lo básico y ver si es necesario añadir algo más.

Vamos a crear un blog sencillo con reseñas de libros.

Tipos de entrada personalizados

Empezaré con Creación de Custom Post Types (CPT), el principal medio de estructurar el contenido de su sitio web, y la característica básica de proporcionar contenido dinámico.

En su panel de administración, seleccione Tipos de entrada > Añadir nuevo.

Nombre su CPT. El slug del tipo de entrada se creará automáticamente.

También puede rellenar las Etiquetas:

Cuando termine, pulse la tecla "Añadir tipo de entrada" botón. ¡Listo!

Ahora, añadamos algunas reseñas de libros. Busca el "Añadir nueva reseña de libro" y haz clic en ella para crear un comentario.

Inserte el texto y las imágenes necesarias, incruste el vídeo si dispone de una reseña en vídeo y pulse el botón "Publique".

Añada tantas entradas como necesite antes de proceder a crear Meta Boxes personalizados.

Metacuadros personalizados

Necesitaré campos personalizados para añadir algunos detalles extra sobre las entradas. En mi caso, serán el título del libro, el autor, el número de páginas, la imagen y el género.

Ir a JetEngine > Meta Box > Añadir nuevo. Introduzca la información necesaria en Ajustes generales.

A continuación, añada los metacampos necesarios para su CPT. Yo he añadido 5, pero puedes añadir los que quieras.

Después, adjunté el Meta Box recién creado al CPT.

En Ajustes generalesEn el CPT, usted necesita elegir el CPT que hizo para asegurarse de que la meta box se aplique. Tengo un Book Review, así que habilité este meta box al Book Review CPT.

No olvides guardar los cambios.

Luego, fui a mi primer post de reseña de libros y rellené los detalles sobre cada libro en los meta campos que creé antes.

Debe repetir este procedimiento para cada entrada.

Los campos personalizados garantizan que si cambias algunos detalles, se aplicarán automáticamente cada vez que se muestre la entrada de la reseña de tu libro en el sitio web.

Así no tendrá que saquear todo el sitio para encontrar la reseña concreta y hacer los cambios allí.

Parrilla de anuncios dinámica

Ahora vamos a organizar todas las reseñas en una cuadrícula de listado clara y a mostrarlas en la página de inicio.

Ir a JetEngine > Listados > Añadir nuevo. Elija su CPT para la opción "From Post Type", dé un nombre a su listado para identificarlo fácilmente.

Elige Bloques (Gutenberg) y pulse Crear elemento de listado. Se le redirigirá a la página en la que puede empezar a crear el diseño de su anuncio.

Las principales características dinámicas que he utilizado son Imagen dinámica, Campo dinámico, Enlace dinámicoy Meta dinámica.

Empecemos añadiendo Imagen Dinámica a este diseño. Como fuente, elegí la etiqueta que añadí previamente a mi meta campo. El tamaño de imagen que puse es mediano.

No olvide poner Metadatos como fuente para obtener todos los detalles necesarios.

Introduzca los campos necesarios, organícelos para encontrar los más atractivos y pulse el botón Actualización botón.

Visualización de la parrilla de listados en la página de inicio

El siguiente paso es mostrar la cuadrícula del listado con todas las reseñas. Para ello, debe elegir la página en la que desea mostrar la cuadrícula.

Elegiré la página de inicio y la editaré con Elementor.

Encuentra el Rejilla de listado y arrástrelo donde sea necesario.

Después de esto, tienes que elegir la plantilla de listado que has creado antes. Yo elijo mi plantilla de listado de ficción:

Como puedes ver, ahora las reseñas de libros están organizadas en la cuadrícula.

Pulse el botón Actualización y echemos un vistazo a lo que tenemos.

Parece un poco simplista, pero siempre puedes utilizar las funciones de estilización de Elementor o la aplicación gratuita JetStyleManager para Gutenberg para que sea llamativo y se adapte a sus gustos.

Otras funciones dinámicas de JetEngine

He creado un sitio web dinámico sencillo utilizando las funciones esenciales, pero debes saber que JetEngine es más que eso.

El plugin proporciona herramientas para ir mucho más allá de algunos sitios elementales. Qué proporciona JetEngine y cómo podemos mejorar este blog de reseñas de libros con otras funciones dinámicas?

• Añadir almacenes de datos. Gracias al módulo Data Store de JetEngine, los usuarios pueden crear colecciones directamente en la cuenta del sitio web.
• Configurar las relaciones de puestos. Puedo crear posts sobre los escritores, hacerlos padres y relatar reseñas de sus novelas como si fueran infantiles.
• Añadir taxonomías y términos. Un instrumento más para estructurar el contenido del sitio web. Por ejemplo, podría añadir una etiqueta a cada reseña -Ficción, Drama, Documental- para que los visitantes lean reseñas del género concreto.

Otras funciones dinámicas de JetEngine, como el creador de gráficos y tablas, el bucle de consulta ampliado, los glosarios, el campo personalizado repetidor, la página de opciones y otras, ofrecen más capacidades para crear cualquier tipo de sitio web: tienda en línea, sitio web de hotel o directorio avanzado de WordPress.

Los mejores ejemplos de sitios web dinámicos creados con Astra y JetEngine

Veamos algunos ejemplos sorprendentes de sitios web dinámicos creados con el tema Astra y JetEngine (y algunos otros plugins de Crocoblock).

El primer ejemplo es themummasecret realizado por Thor Solutions. Los desarrolladores utilizaron los campos personalizados de JetEngine para ampliar las fichas de producto con detalles adicionales y aplicar cabeceras de página dinámicas de Astra.

Thor Solutions también utilizó JetWooBuilder y JetTabs.

El segundo es EAF de Tommy Callaghan y Manna Design. Los desarrolladores utilizaron el tema Astra, JetEngine para los CPT y meta boxes para añadir atributos a los artículos del blog (fecha, autor).

También se utilizaron JetElements, JetTabs y JetThemeCore.

Otro ejemplo Llamas y rosas por Thomas Anderson.

Además del tema Astra y JetEngine, el desarrollador utilizó JetElements, JetWooBuilder y JetTricks.

Resumen

Eso es todo para nuestro estudio de caso sobre la creación de páginas web dinámicas con Astra y JetEngine. Como puede ver, los sitios web estáticos frente a los dinámicos es una batalla desigual porque tienen propósitos diferentes.

En una palabra, tanto los sitios web dinámicos como los estáticos tienen sus características particulares y funcionan bien en distintos nichos.

Astra está diseñado para ofrecer impresionantes velocidades de carga de página y, al mismo tiempo, un aspecto asombroso. Puede crear un sitio web enorme con imágenes, mensajes, diseños personalizables, funciones de arrastrar y soltar y mucho más sin tocar una línea de código.

Añadiendo JetEngine, usted cree su sitio web más estructurado y fácil de gestionar, ampliar su funcionalidad y mostrar el contenido de forma dinámica.

Así pues, el combo ofrece posibilidades prácticamente ilimitadas para desarrollando blogstiendas en línea, sitios web empresariales, sitios web inmobiliarios y muchos otros.

Si alguna vez has creado un sitio web dinámico utilizando Astra y JetEngine, ¡no dudes en compartirlo con nosotros!