Aprende en este post a crear sitios web de una sola página utilizando nuestro theme Blogpocket Sustie y la aplicación Local (antes «Local by Flywheel»).
A finales de 2019, en Blogpocket tuvimos una idea genial: crear un theme de WordPress a partir del cual un usuario final pudiese crear un sitio web desde cero, incluido el diseño. Proporcionábamos una home vacía y en blanco para rellenarse con bloques de Gutenberg.
Partimos del theme Sample, un hijo de Genesis Framework, al cual le quitamos todos aquellos elementos que pudiesen distraer al usuario final y lo denominamos Blogpocket Nineteen (como homenaje al 19º aniversario de Blogpocket.com). Desarrollamos el sitio Lanzatu.blog como plataforma de aprendizaje del editor de bloques, incluyendo la descarga del theme y toda la información para poner en marcha un sitio de WordPress con Blogpocket Nineteen.
El theme Blogpocket Nineteen es el complemento ideal para construir de manera eficiente una web optimizada.
Pero éramos conscientes de que solo servía si se pertenecía al ecosistema de Genesis Framework. Así que desarrollamos Blogpocket Sustie, basado en el theme Susty de Jack Lennox. También se puede descargar en Lanzatu.blog.
Blogpocket Sustie posee las mismas funcionalidades que Blogpocket Nineteen, con la única gran salvedad de que es para todos los públicos (fuera del entorno Genesis).
Características del theme Blogpocket Sustie
Recordemos ahora las características del theme Blogpocket Sustie:
La versión actual es la 4.2.0 (22 de marzo de 2021) con las siguientes funcionalidades:
- Ligera, minimalista y ecológica, orientada a Gutenberg.
- Estilo y «look and feel» basado en Susty de Jack Lennox, a su vez basada en Underscores.
- Menú BOOTSTRAP NAVWALKER (predeterminado) o JACK LENNOX (opcional).
- Folio en blanco en la home para que la diseñes con Gutenberg a tu gusto.
- Un widget de bienvenida opcional en la página del blog y un widget de bienvenida opcional en los posts individuales.
- Área de widgets «After Entry» en la página individual de los posts.
- De 1 a 4 widgets opcionales en el footer de todas las páginas excepto en la home.
- Capacidad para crear un microblog instalando el plugin Blogpocket-Nineteen-Microblog (opcional) y añadir icono identificativo del formato de post (opcional) instalando el plugin Blogpocket-Nineteen-Post-Format-Image.
- Área personalizable con bloques de Gutenberg en un escritorio despejado.
- 13 patrones de bloques listos para usar.
- Instrucciones en CSS personalizado para cambiar el color de branding de los enlaces.
No confundir con el concepto de theme starter
Blogpocket Nineteen y Blogpocket Sustie no son themes starter, entendiendo éstos como esqueletos cuyo propósito es servir de punto de partida para desarrollar con código otro theme de WordPress.
El concepto encaja perfectamente con el Método Blogpocket porque se trata de facilitar al usuario final un theme con un folio en blanco en la home. El usuario solo tiene que instalar Blogpocket Nineteen (con Genesis) o Blogpocket Sustie en un WordPress inicial optimizado siguiendo las directrices del Método Blogpocket y diseñar la home (y el resto de páginas) con bloques de Gutenberg.
Si tenemos en cuenta que crear dicha web inicial optimizada en rendimiento, seguridad, SEO y legalidad obedece a unos pasos muy precisos y a la utilización de una herramientas muy concretas, según el Método Blogpocket; crear un sitio web de WordPress de manera eficiente y optimizada se reduce a conocer el fabuloso (y sencillo) mundo de los bloques de Gutenberg. ¡Y eso está al alcance de cualquiera con un mínimo de formación!
De alguna manera, con Blogpocket Nineteen y Blogpocket Sustie nos adelantamos a la edición del sitio completo.
Con la FSE se pone todo el proceso de creación y diseño de todo el sitio web en el editor de WordPress. Y esa es la idea principal de Blogpocket Nineteen y Blogpocket Sustie, mientras llega la edición del sitio completo.
Sitios web de una sola página
Una función práctica de Blogpocket Sustie es crear sitios web de una sola página. El objetivo de este tipo de páginas es lanzar páginas de aterrizaje (landing pages). Esto no es nada nuevo y se han ofrecido muchas herramientas y soluciones para hacerlo. Por ejemplo, WP Landing Kit es muy interesante y su fundamento consiste en crear múltiples landing pages, incluso con distintos nombres de dominio asociados, dentro de la misma instalación de WordPress. Yo mismo lo tengo implantado en antoniocambronero.com 😉
Si estás en WordPress.com, Automattic ha lanzado su theme Blank Canvas, un theme hijo de Seedlet, para hacer sitios web de una sola página. Nos satisface mucho ver cómo nuestra idea de un theme con páginas en blanco para rellenarse con bloques de Gutenberg es adoptada por empresas tan importantes. Eso significa que era una buena idea 😉
Pero con Blogpocket Sustie (y también con Blogpocket Nineteen si estás en Genesis) es posible hacerlo muy fácilmente. Si ya es fácil crear un sitio web completo ¡cómo no va a serlo también con una sola página!
Cómo hacerlo
Te enseñaré a hacerlo, a continuación, de dos maneras y dependiendo de si quieres probarlo en tu hosting o en tu ordenador. Preferiblemente, yo lo haría primero en mi ordenador y luego lo pasaría al entorno de producción en mi servicio de alojamiento web.
Crear un sitio web de una sola página en hosting
Para ello, puedes crear un WordPress en un subdominio o en un staging.
Una vez que tengas preparado y funcionando tu WordPress inicial, debes instalar y activar Blogpocket Sustie.
Después, instala los siguientes plugins:
- Editor Plus. Podrás aplicar estilo CSS a todos los bloques sin saber CSS 😉
- Fullwidth Page Templates. Para tener varios formatos de páginas, entre ellos el ancho completo o el ancho completo sin cabecera ni footer, ideal para landing pages 😉
- Genesis Blocks. Unos layouts sencillos pero impresionantes para que te inicies en aplicar diseño a tu web.
- Reusable Blocks Extended. Para crear bloques reusables y para llevar widgets con bloques de Gutenberg a las áreas de widgets preparadas en el theme (Apariencia > Widgets).
Una vez estén esos plugin activos, crea una página nueva denominada «Home» y en «Atributos de página» elige la plantilla «FW Fullwith No Header Footer». Eso eliminará la cabecera y el footer, dejando la página en blanco.
Y, finalmente, añade bloques de Gutenberg a tu gusto y diseña la landing page. El plugin Genesis Blocks proporciona una serie de layouts en los que inspirarte.
Crear un sitio web de una sola página en tu ordenador
El proceso es idéntico a hacerlo en un hosting. Sin embargo, debes disponer del software necesario para implantar un servidor web. Hay muchas aplicaciones que hacen eso en Mac, Windows y Linux. Pero a mí me gusta una muy fácil de utilizar y con la que consigues una instalación de WordPress con un clic. Se trata de Local (antes llamada «Local by Flywheel»).
En Blogpocket se elaboró un ebook explicando el funcionamiento de Local. Descárgalo directamente aquí.
Una vez que tengas instalada la aplicación Local y arrancada, crea un sitio nuevo desde este blueprint (modelo) que hemos construido para ti.
Local posee la función de crear nuevos sitios a partir de un modelo (blueprint) en formato zip. El archivo blueprint no es más que el conjunto de archivos y carpetas necesarios para que Local maneje un sitio web. Cualquiera puede crear un blueprint a partir de una de las instalaciones de WordPress en Local.
En MacOS, una vez que hayas descargado el blueprint, es necesario ubicarlo en ~/Users/[tu usuario]/Library/Application Support/Local/blueprints (Si no encuentras esta carpeta, primero debes hacer que los ficheros ocultos sean visibles presionando CMD+SHIFT+Punto; y luego -si aún así no está- creando la carpeta).
Para Windows, sigue las instrucciones aquí.
Entra al administrador de WordPress con usuario admin y contraseña admin. Si vas a mostrar tus pruebas en Internet, habilitando la opción correspondiente, cambia tus credenciales, nunca uses admin/admin.
Con este modelo tendrás todo preparado (el theme Blogpocket Sustie instalado y activado, los 4 plugins indicados en el apartado del hosting, configuracion básica y página home preparada a ancho completo) para diseñar tu landing page con Gutenberg. Incluso contiene 13 patrones de bloques que hemos creado para ayudarte en los primeros pasos.
En el vídeo, que abre este apartado, se explica en detalle el funcionamiento de Local para crear un sitio web de una sola página.
Conclusiones
Blogpocket Nineteen (Genesis) y Blogpocket Sustie son un trampolín hacia la FSE (Edición del sitio completo), la nueva función de WordPress para centralizar elaboración de contenidos y diseño de la web en el editor de bloques.
Es una idea que se nos ocurrió a finales de 2019 para proporcionar a los usuarios finales un mecanismo fácil y rápido para crear y diseñar de manera eficiente sitios web de WordPress. Aquí hemos particularizado para crear sitios web de una sola página pero es aplicable a cualquier tipo de web.
Necesitamos feedback, por favor.
Deja una respuesta