Desplazamiento hacia arriba

Resources Wp

Project Type: WordPress

En este proyecto real intentaremos monetizar una web de descargas de plugins y plantillas de WordPress con el método de afiliación y publicidad AdSense.

Introducción

La idea de crear este proyecto fue la posibilidad de implementar en WPFácil proyectos reales que me sirvieran para mi y para vosotros, ya que lo que pretendo es que podáis seguir paso a paso como voy creando mis propios sitios.

En ResourcesWP vamos a tratar de hacer la típica web que te puedes encontrar en google cuando estás buscando una plantilla o un plugin en concreto. Si, esa página que te aparece la descripción del plugin y más a bajo aparecen dos botones, uno para ver la demo y otro para “descargar”. No se trata de una web con contenido Nulled, si no más bien enlazar con afiliaciones a la página de compra del tema, como por ejemplo themeforest. También trataremos de añadir publicidad con AdSense, siempre y cuando no estemos infringiendo las normass, yo pienso que no, pues ni va a ser una web engañosa, ni con contenido ilegal.

La finalidad de este artículo no es explicar todo como si fuera un curso, más bien es para que hagáis un seguimiento de mis proyectos y de paso ver como los creo, los plugins que uso y como maqueto en general las páginas, también os puede servir de idea para vuestros propios proyectos.

Proceso de creación

El tema que vamos a usar para crear el sitio va a ser Hello, los que conozcáis el tema ya sabéis como lo vamos a trabajar… Si! Con el gran plugin Elementor 2 Pro, ese plugin que se ha convertido en el rey de los maquetadores web para WordPress.

Vamos a usar este tema porque trabajaremos íntegramente con Elementor, y este tema nos brinda… No nos brinda nada, por eso mismo, es tan ligero que no tiene esas librerías de estilos tan pesadas como las que estamos acostumbrados a ver en otros temas, y además, no necesitamos más. De eso se trata, un tema limpio, que pese lo menos posible, porque ya nos encargaremos de cargarlo añadiendo los Widgets de Elementor, que son bastante pesados.

También usaremos varios plugins de la casa Crocoblock, como por ejemplo JetEngine, con esto vamos a crear nuestro propio diseño de archivos (Listings) para mostrar todas las entradas de una manera totalmente personalizada, además de poder crear custom post types y añadir campos personalizados para hacer aún más fácil el añadido de los recursos.

Adicionalmente, para automatizar un poco el proceso de subida de productos afiliados, instalaré el plugin Content Egg, y así poder conectar la tienda de Envato con mi código referido y mostrar productos de envato automáticamente.

Referencias

Como este tipo de webs es un mundo nuevo para mi, me dispongo a buscar un buen puñado de páginas de ese tipo, y así copiar tener una idea más aproximada de lo que vamos a hacer y ver como lo han hecho otros.

En todo proyecto que se precie, es importante mostrar al mundo el nombre de tu marca. No siempre va a ser necesario crear un logo, pues en WordPress podríamos mostar solamente un texto, como hacemos aquí en WPFÁCIL.

En este caso, he optado por tonos morados y rojizos ya se llevan bastante en este 2020, dará un aire de frescura y modernidad a nuestra web. ResourcesWp, o Recursos WordPress, se refiere al material que podemos utilizar en nuestras páginas creadas con WordPress.

Maquetación con Elementor 2 Pro + JetEngine

Y es ahora cuando llega lo interesante, maquetar el sitio desde 0. Como el tema Hello de Elementor no tiene practicamente nada, trabajaremos sobre un lienzo vacío, por tanto vamos a tener que crear nuestro propio menú, header, plantilla de archivos de entradas, plantilla single post… entre otros.

Menú y header

Bien, pues empezaremos de arriba a abajo, comenzaremos con el menú, logo y header:

Video: Proceso creación header con Elementor

Thumbnail

En este vídeo, os explico paso a paso como he ido creando el header para colocar el menú en todas las páginas del sitio con Elementor.

Bueno, luego lo he retocado un poco por mi cuenta, por que si no se iba a hacer un video interminable y cada vez que voy a hacer un cambio hago una captura de pantalla.

El menú tal cual es responsive, pero se puede mejorar para posicionar mejor el menú estilo burguer, pero eso ya os lo explicaré en algún tutorial de la web.

Mi header consta de 3 partes, en la izquierda he posicionado el logo, luego en el centro el menú y en la derecha había puesto un grupo de iconos para las redes sociales, pero lo he cambiado por un buscador, ya que da más juego para este típo de sitios web. Además, no va a tener redes sociales… Así que tampoco es que me interese mucho tener esos iconos.

Plantilla central

Ahora voy a crear la plantilla central del tema, y cómo? pues como siempre lo hago yo. Crearé la página de inicio y una vez la tenga acabada guardaré la plantilla para importar el diseño en las siguientes páginas.

Lo primero que voy a hacer antes de ponerme a editar con Elementor, es cambiar el color de fondo. Lo voy a hacer a través de CSS personalizado, ya que así no he de modificarlo cada vez en todas las paginas, y si en algún momento quiero cambiarlo, solo he de modificar una línea de código CSS.

El código que he añadido en CSS Personalizado es el siguiente:

body {
	background-color:#EFEFEF;
	}

Cada vez que os vaya enseñando un video, iremos saltando cosas obvias que habremos visto en otros videos, por lo que no os puedo mostrar el 100% de todos los pasos si ya los habiamos visto anteriormente.

En este video os explico como he creado la página de inicio, la que me servirá para copiar en todas las demás páginas y tener una plantilla homogénea.

Aún no la podemos terminar ya que falta el contenido, que más adelante lo veremos, y es una parte fundamental para nuestro diseño, no, no voy a poner un Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo metus, aliquet vitae scelerisque at, porttitor rutrum ipsum. Praesent vehicula scelerisque nulla, feugiat dignissim nisi aliquam porttitor. Maecenas sed commodo enim, ac hendrerit sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam hendrerit rutrum dolor vel lobortis. Vivamus facilisis massa turpis, a consequat enim placerat pharetra. Vestibulum et pretium lacus. Sed egestas massa interdum, suscipit odio at, iaculis dui. Vale, en este caso si me hacía falta rellenar el bloque de texto 🙂

Video: Creación de la plantilla central y página de inicio

Thumbnail

El footer

Y como no podía faltar en estas 3 fases de maquetación… El footer, esa sección que va debajo del todo y que casi nadie mira, donde aparecen los enlaces de políticas de privacidad y de cookies que practicamente nadie lee, donde suele aparecer la información de la empresa que a nadie le interesa, y sobre todo, donde casi siempre hay un Newsletter al que nadie se suscribe…

Bueno, poniéndonos serios, todo esto lo digo yo porque es justo lo que yo no hago, pero seguramente hay alguien que le resulta de interes. Así que esto es lo que vamos a hacer en esta última sección de maquetación.

Video: Creación del footer

Thumbnail

En este caso he copiado el contenido del header, pues quería mantener las mismas proporciones y medidas de ancho de la página entre otras cosas.

Simplemente he cambiado el contenido del footer, he añadido la información de copyright y los enlaces a las políticas de privacidad y cookies.

Diseño del blog: Single page, archivo y listings

Como estamos usando la plantilla Hello de Elementor, vamos a tener que crear también las partes dinámicas del sitio, es decir, las single page, los archivos, el diseño de como se muestran las entradas en los archivos… Pero todo esto es muy fácil haciendo uso combinado de Elementor 2 Pro y JetEngine.

Creando la Single page

En esta parte voy a crear la single page, es básicamente la parte del tema donde se va a mostrar nuestro artículo. A parte del diseño, también voy a añadir campos personalizados con JetEngine, así poder rellenar luego zonas de la entrada como el precio del plugin, la tienda donde lo venden, un botón con una demo, un botón con enlace de descarga, la versión… etc

Video: Creación Single Page
Thumbnail

Diseñando el listing de las entradas

Ahora que ya he creado algunas entradas con diversos plugins y temas, es hora de diseñar nuestro listing. El listing no es más que el diseño de los cuadros donde se van a mostrar las entradas. Estos cuadros los podemos reutilizar las veces que queramos, así que los usaré tanto para la sección del blog, para las categorías y para la página de inicio.

Video: Creando nuestro listing de entradas
Thumbnail
Video: Diseñando Grid de archivos
Thumbnail

Diseñando la página de archivo de categorías

Ahora es el turno de diseñar la página de archivos de las categorías, y así poder mostrar las diferentes categorías con el estilo que he hecho en la web.

Video: Creando diseño de categorías
Thumbnail

Páginas de Política de privacidad y cookies

Para finalizar este proyecto voy a crear las páginas de política de privacidad y cookies. Para esto, voy a instalar un plugin llamado Adapta RGPD ya que es muy fácil de usar y es perfecto para páginas simples.

Adapta RGPD

Una vez instalado y activado este plugin, voy a configurarlo con un formulario muy sencillo de usar. Tan solo hay que rellenar el formulario con algunos datos que nos pide, y nos generará una página de política de privacidad, cookies y legales.

Quizá algún día haré un tutorial sobre este plugin, ya que es una buena herramienta para crear una política de privacidad y cookies de manera muy fácil. Por el momento os he puesto unas capturas de lo que trae el plugin.

Ahora simplemente voy a enlazar estas páginas ya generadas a los enlaces de política de privacidad y política de cookies de mi footer.

Tan fácil como editar el texto que ya tenía hecho sobre las políticas, y añadir un enlace hacia ellas, añadiendo también un nofollow, ya que no voy a indexar las páginas de políticas en los buscadores, y no quiero que la araña de google pase por esa página.

Finalizando el proyecto

Al principio de este proyecto dije que intentaría monetizar el sitio con Adsense, pero por el momento, hasta no tener unas buenas estadísticas en el sitio, no lo voy a hacer. Así que dejo esta parte para un futuro, cuando vea que hay tráfico web en mi sitio.

También comenté que los enlaces de los temas y plugins serían de afiliados. He usado las herramientas de Envato Market Affiliate Program para crear los enlaces de los plugins y temas de Codecanyon y Themeforest.

Y bien, esto es todo… Si, hay muchas cosas que no he explicado, pero si lo hiciera, este proyecto me llevaría mucho tiempo, mientras lo hago y describo paso a paso. La idea es que podáis ver como trabajo y os pueda servir de inspiración para vuestros proyectos.

resources wp