Crear un sitio web dinámico avanzado utilizando complementos de WordPress

Como desarrollador de sitios web WordPress, probablemente necesites mostrar frecuentemente un conjunto de información de manera repetida en el sitio web que estés desarrollando. Por ejemplo, si estás trabajando en un sitio de venta de automóviles, necesitarás mostrar mucha información sobre cada vehículo en una tarjeta que se exhiba entre otras tarjetas en la página principal, o en la página individual de cada automóvil. En este caso, necesitarás crear una página dinámica avanzada en el sitio para poder mostrar esta información, lo que te ahorrará tener que crear una página estática separada para cada vehículo que exhibas. WordPress, como sistema de gestión de contenidos, te ayuda a crear un sitio web con páginas que sean una combinación de estáticas y dinámicas. Pero ¿cuál es la diferencia entre sitios web estáticos y dinámicos? ¿Y cómo podemos crear un sitio WordPress dinámico y avanzado? Esto es lo que descubriremos en este artículo.

La diferencia entre sitios web estáticos y dinámicos: Los sitios web estáticos recibieron su nombre por el código fijo que poseen. Si el programador o desarrollador del sitio no realiza cambios en el código, nada cambiará en el sitio. Los sitios estáticos generalmente tienen un número fijo y limitado de páginas predeterminadas, y estas páginas tienen la misma apariencia y contenido para todos los visitantes del sitio. El contenido no cambia en respuesta a las acciones que realiza el usuario en el sitio. Los sitios web estáticos se escriben típicamente en HTML y lenguajes de programación como CSS y JavaScript, ya que su contenido no requiere modificaciones frecuentes. Son sitios pequeños que no requieren mucho tiempo, esfuerzo o dinero para construirse. Los sitios web estáticos solo almacenan las páginas estáticas reales del sitio, sin usuarios, comentarios, publicaciones o ningún tipo de interacción con el sitio. Algunos ejemplos de páginas estáticas son la página de inicio, servicios, acerca de nosotros y contáctenos.

Los sitios web dinámicos, por otro lado, son interactivos porque muestran su contenido de diferentes maneras a cada usuario según su interacción con el sitio, su ubicación geográfica y otros factores. Los sitios dinámicos se desarrollan con lenguajes de programación como PHP y ASP.NET, que dependen de bases de datos avanzadas, además de HTML, CSS y JavaScript. La página principal de un blog es uno de los ejemplos más famosos y simples de páginas dinámicas, ya que su contenido cambia según los nuevos artículos que se añaden, mostrándose generalmente en orden cronológico de más reciente a más antiguo en la página del blog.

En consecuencia, los sitios web que utilizan sistemas de gestión de contenidos como WordPress se consideran sitios dinámicos. Sin embargo, si queremos crear algo más grande y complejo que una página de blog, como un sitio de exhibición de automóviles o libros, necesitaremos complementos que nos ayuden a crear un sitio WordPress dinámico avanzado. Mejores complementos para crear sitios WordPress dinámicos: Hay varios complementos que te ayudan a crear un sitio WordPress completamente dinámico o con características específicas para crear un sitio dinámico. Los más famosos de estos complementos son los siguientes: Complemento Advanced Custom Fields (ACF): Un complemento muy popular de la empresa WP Engine para crear sitios WordPress dinámicos, que ofrece la capacidad de crear campos de forma gratuita, además de características avanzadas de pago como campos repetibles, bloques, página de opciones y más.

Complemento Toolset: Un complemento de pago para crear sitios WordPress dinámicos

sin versión gratuita disponible. El complemento funciona principalmente con el editor Gutenberg, permitiéndote crear tipos de publicaciones personalizados y campos personalizados, además de establecer relaciones entre publicaciones, plantillas y páginas de archivo personalizadas. También está integrado con WooCommerce. Complemento Pods: Un complemento gratuito que te permite agregar campos personalizados a los tipos de publicación predeterminados en WordPress (páginas y artículos) y también a las taxonomías predeterminadas (categorías y etiquetas). Con el complemento Pods también puedes crear un tipo de publicación personalizado y agregarle un conjunto de campos personalizados. Complemento JetEngine: JetEngine es un complemento que ayuda a crear sitios WordPress dinámicos avanzados, con más de 15 características dinámicas, aunque no es necesario usar todas estas características al mismo tiempo. En este artículo nos enfocaremos en explicar este complemento para crear un sitio WordPress dinámico.

Puedes revisar estos complementos, las experiencias de los usuarios con ellos, las características que ofrecen a cambio de la suscripción mensual que cuestan, y elegir el más adecuado para construir un sitio dinámico profesional. Tomaremos uno de estos complementos como ejemplo: JetEngine, por las valiosas características que ofrece en la construcción de un sitio dinámico, y revisaremos algunas de las características que puedes obtener. Es importante aclarar que el valor que obtendrás de las características necesarias es más importante que la herramienta en sí. En general, a través de los sitios dinámicos, hay varias características valiosas que te permiten controlar de manera más efectiva cómo se muestra tu contenido de forma personalizada, mostrando lo que deseas a los visitantes del sitio de manera valiosa. Las características más destacadas que impulsan a los propietarios de sitios a usar complementos de sitios dinámicos son las siguientes: 1.

Crear un tipo de publicación personalizado (Custom Post Type): Una publicación personalizada es un nuevo tipo de publicación que creamos en WordPress para agregar datos e información en una sección dedicada. Como todos sabemos, hay un tipo de publicación predeterminado (Artículos/Posts) en WordPress, que siempre se usa para crear el blog del sitio. Aunque el sitio no necesite un blog actualmente, es mejor mantener el tipo de publicación predeterminado reservado para uso futuro del blog. Por ejemplo, si tienes un sitio de venta de automóviles, puedes crear un tipo de publicación específico para los vehículos. 2.

Crear campos Meta personalizados: A través del complemento JetEngine, podemos crear campos Meta personalizados para cualquier tipo de publicación en el sitio, ya sea para publicaciones de artículos o para cualquier tipo de publicación personalizado que hayamos creado. Cada campo contiene datos específicos. Por ejemplo, en un sitio de automóviles, puedes crear un campo para la marca del automóvil, otro para el color del vehículo, y así sucesivamente. 3.

Crear taxonomías personalizadas: Las taxonomías son muy importantes en cualquier sitio para organizar el contenido, y puedes aprender cómo usarlas en tu sitio y cómo crear taxonomías personalizadas a través de este artículo, donde mencionamos varios complementos para crear taxonomías personalizadas. Por lo tanto, a través de complementos dinámicos, puedes crear taxonomías personalizadas para todos los tipos de publicaciones, ya sean las existentes previamente como "Artículos" o las que hemos creado. 4.

Crear una cuadrícula de listado (Listing Grid): Además, con la gran cantidad de contenido, necesitarás crear un listado que recopile los datos que ingresaste en el tipo de publicación personalizado en una sola lista que personalices como desees, como tamaño de fuente, colores, etc. Luego, mostrar esta lista como una cuadrícula (Grid) en cualquier lugar del sitio de la forma que desees, teniendo control total sobre la personalización de esta lista, como el número de columnas y filas, el tamaño de cada tarjeta y otras propiedades.

Hay varios tipos de

sitios dinámicos avanzados que requieren este tipo de personalizaciones, como: Sitios de exhibición de automóviles nuevos y usados en venta Tiendas de venta de libros Sitios de películas Sitios de reservas como clínicas médicas, boletos aéreos y similares Uso del complemento JetEngine: Explicaremos en este artículo el complemento JetEngine como ejemplo de un complemento valioso que te ayuda a crear un sitio dinámico. Sin duda, el objetivo es obtener características excelentes para crear un sitio dinámico que te ayude a personalizar la presentación de contenido extenso, siendo más importante que la herramienta en sí, ya que esta puede cambiar con el tiempo. JetEngine es parte de la familia de complementos Jet desarrollados por la empresa Crocoblock, especializada en desarrollar complementos que amplían las capacidades de WordPress y las herramientas de construcción de sitios como Gutenberg, Elementor y Bricks. Para instalar JetEngine, debes pagar una de las suscripciones de Crocoblock. Puedes obtener una suscripción solo para JetEngine, que cuesta $43 por sitio anuales o $88 para un número ilimitado de sitios anuales.

Después de suscribirse a uno de los planes, ve a tu página de cuenta en Crocoblock y haz clic en el botón Descargar junto al nombre del complemento para descargarlo en tu computadora. Ahora puedes instalar el complemento en WordPress. Si necesitas más información sobre cómo instalar un complemento de WordPress, puedes consultar el artículo "Cómo instalar y activar correctamente un complemento de WordPress en tu sitio". Prueba de creación de un sitio WordPress dinámico: Ahora supongamos que queremos crear un sitio web especializado en libros, y necesitamos una forma de agregar libros de manera organizada al sitio, además de crear una sección en la página principal que muestre tarjetas con información general sobre los libros, como el título del libro, el nombre del autor, el número de páginas y la imagen de la portada.

Usaremos el complemento JetEngine para crear el sitio con los siguientes pasos: 1. Crear un tipo de publicación personalizado para libros desde el panel de control de WordPress: Ve a JetEngine y selecciona Post Types. Haz clic en la pestaña Agregar nuevo. Aparecerá la página Agregar nuevo tipo de publicación. Ahora le daremos un nombre al tipo de publicación en la sección Configuración general, que será "Libros". Luego le asignaremos un "slug" amigable, que será "books". Este nombre contiene solo números y letras en inglés y se usa en la URL. Para asignar un icono específico al tipo de publicación, abrimos la sección Configuración avanzada, vamos a Icono de menú y hacemos clic en el icono de chincheta, aparecerá una lista desplegable con un gran número de iconos, de los que seleccionamos uno apropiado para el tipo de publicación, de esta manera: Llegamos a la sección más importante que es Campos Meta, donde agregaremos campos personalizados para la publicación. Para crear un campo de nombre, por ejemplo, hacemos clic en el botón Nuevo campo Meta. En el campo Etiqueta escribiremos "Nombre del libro" y en el campo "Nombre/ID" escribiremos "book-name". Mantendremos la opción "Campo" en Tipo de objeto, y en "Tipo de campo" seleccionaremos "Texto" de la lista desplegable.

Agregaremos dos nuevos campos de la misma manera: "Nombre del autor" y "Número de páginas", para que el total de campos que hemos agregado sea tres: Después de terminar de agregar todos los campos que necesitamos, hacemos clic en el botón "Agregar tipo de publicación" en la parte superior. Una vez que hacemos clic en el botón "Agregar tipo de publicación", se actualizará el panel de control de WordPress. Encontraremos que el nuevo tipo de publicación "Libros" aparece en la barra lateral del panel de control de WordPress debajo de Comentarios. Ahora podemos agregar nuevas publicaciones dentro de Libros de la misma manera que agregamos nuevas publicaciones en la sección Artículos. Por supuesto, la página principal de Artículos no se verá afectada por las publicaciones de Libros, ya que no aparecerán allí. En cambio, nosotros elegimos dónde queremos mostrar las publicaciones de Libros en la página que deseemos, y podemos mostrarlas como una lista de tarjetas como veremos en breve. 2.

Crear campos adicionales en la publicación de Libros: Ahora queremos agregar un campo personalizado para colocar la imagen de portada del libro. Decidí no agregar este campo en el primer paso para poder usar la característica Meta Boxes en JetEngine, que agrega el mismo tipo de campos que agregamos en el primer paso. La diferencia aquí es que esta característica agrega campos únicos a cualquier tipo de publicación preexistente como "Artículos" o uno creado previamente como "Libros" sin necesidad de crear un Tipo de publicación personalizado (CPT) desde cero. Para agregar el campo, hacemos clic en Meta Boxes desde el menú de JetEngine y luego hacemos clic en el botón Agregar nuevo. Damos un nombre al conjunto de campos que crearemos (podemos crear uno o más campos en este conjunto), que será "Imágenes". Seleccionamos el lugar (publicaciones, taxonomías o usuarios) donde queremos agregar los campos de la lista desplegable "Meta Box for" y en nuestro caso aquí, agregaremos los campos a la sección de Publicaciones (Posts). En la sección "Condiciones de visibilidad", seleccionamos el tipo de publicación en el que habilitaremos los campos (Habilitar para tipos de publicación), en nuestro caso, el tipo de publicación es "Libros" que creamos hace poco en el primer paso.

Agregamos los campos que necesitamos haciendo clic en el botón Nuevo campo Meta de la misma manera que agregamos campos en el primer paso. En nuestro ejemplo aquí, agregaremos solo el campo "Imagen de portada". 3. Mostrar información de libros como tarjetas en la página principal del sitio: Después de crear nuevas publicaciones de libros, usaremos los datos de estos libros para crear un listado que recopile estos datos en forma de tarjeta. Aquí es necesario tener instalado el constructor de sitios Elementor para crear y personalizar este listado de manera destacada y profesional. Una vez más, desde el panel de control de WordPress, iremos a la sección JetEngine, luego a Listados, y hacemos clic en el botón Agregar nuevo. Aparecerá la ventana Configurar elemento de listado, ajustamos sus opciones de la siguiente manera: Seleccionaremos la fuente (Listing source) como "Publicaciones" (Posts). Seleccionaremos el tipo de publicación (From post type) como "Libros" de la lista desplegable. Daremos un nombre al listado (Listing itemname) que será "Tarjeta del libro". Seleccionaremos Elementor como editor del listado (Listing view). Luego hacemos clic en el botón Crear elemento de listado. Tan pronto como hacemos clic en el botón Crear elemento de listado, se abrirá la página del listado "Tarjeta del libro" en el editor Elementor. Ahora insertaremos un conjunto de elementos de listado (widgets), comenzaremos con Dynamic Field, que insertaremos tres veces para mostrar "Nombre del libro", "Autor" y "Número de páginas". Luego insertaremos el elemento Dynamic Image para mostrar "Portada del libro", así:

Después de formatear los textos e imágenes de la manera adecuada, hacemos clic en el botón "Actualizar" en la parte inferior para guardar los cambios: Ahora crearemos una cuadrícula del listado que creamos en el paso anterior, y mostraremos esta cuadrícula en cualquier página que deseemos, que sea la página principal.

Desde el panel de control de WordPress vamos a la sección de páginas y hacemos clic en "Edit with Elementor" para abrir la página de inicio con el editor Elementor. Luego insertaremos el elemento de cuadrícula de listado (Listing Grid) en el lugar que deseamos de la página. Accedemos al editor de Listing Grid y en la sección de contenido, seleccionamos el listado (Listing) "tarjeta de libro" que creamos anteriormente. Luego elegimos el número de columnas (Columns Numbers) como 3 para que el listado se muestre de esta forma. De esta manera hemos creado un tipo de contenido personalizado y lo mostramos como una cuadrícula de listado personalizada en la página de inicio del sitio. Por supuesto, el ejemplo que implementamos es muy simple y estas características pueden aprovecharse para crear un sitio web dinámico bastante avanzado.

Preguntas y respuestas sobre sitios web dinámicos ¿Son mejores los sitios estáticos o los dinámicos? Esto depende del objetivo del sitio y los recursos disponibles. Muchas personas e incluso empresas pueden necesitar un sitio web informativo simple, en cuyo caso los sitios estáticos podrían ser una mejor opción para ellos. Sin embargo, otras personas prefieren los sitios dinámicos porque pueden administrarlos y realizar modificaciones en el futuro, además de la posibilidad de mostrar el contenido de forma interactiva.

¿Afecta si el sitio es estático o dinámico a su velocidad? Sí, los sitios estáticos son más rápidos que los dinámicos, y esto es natural porque los sitios dinámicos requieren que el servidor procese los datos antes de enviar la página.

¿Los sitios estáticos son más costosos o los dinámicos?

Depende del sitio en sí, ya que el costo varía según el método de construcción y el contenido. No hay una respuesta clara, especialmente con la disponibilidad de sistemas de gestión de contenido como WordPress, que ha reducido significativamente el costo de crear un sitio dinámico. Sin embargo, si comparamos el costo de un sitio dinámico avanzado con un sitio estático simple, sin duda el último será más económico. ¿Se considera JetEngine un constructor de sitios? No, el complemento no construye páginas en WordPress, pero está completamente integrado con Gutenberg y Elementor, lo que ayudará a crear sitios con grandes funciones y características.

¿Cuál es el impacto de JetEngine en el rendimiento del sitio? Ningún complemento, por muy destacado que sea, está libre de algunos inconvenientes. JetEngine causa un ligero ralentamiento del sitio porque el marco de trabajo utilizado en JetEngine es algo pesado. Sin embargo, con una experiencia simple en optimización de WordPress, se puede reducir el impacto de este problema.

Conclusión

En este artículo hemos aprendido sobre los sitios web dinámicos y la diferencia entre ellos y los sitios estáticos. También conocimos el complemento JetEngine y cómo utilizar sus características más importantes. Como hemos visto, es un complemento muy poderoso que contiene muchas características que nos ayudan a crear sitios WordPress dinámicos organizados y avanzados, que se pueden administrar fácilmente al mismo tiempo.