Ingeniería inversa de WordPress: cómo replicar un sitio de WordPress

Este sitio web se ve tan bien. Ojalá tuviera una web así.

¿Te suena familiar?

Ese es el pensamiento de casi todos los blogueros cuando ven un sitio web, que hace alarde de una interfaz de usuario genial, colores, fuentes, etc.

Me he visto en la misma situación varias veces y sabía que había que hacer algo. Entonces, seguí adelante e hice mi investigación.

Más específicamente, encontré herramientas que pueden decodificar un sitio web, revelando todos los secretos subyacentes que lo impulsan.

En esta publicación, comparto mi estrategia de ingeniería inversa de WordPress y una lista de herramientas que puede usar para replicar cualquier sitio de WordPress.

Pero Shafi, ¿por qué WordPress? Tu puedes preguntar.

La razón es bastante simple. WordPress es uno de los sistemas de administración de contenido más populares y funciona con el 28,6% de todos los sitios web en Internet.

Sorprendentemente, cada día se lanzan 50 000 sitios de WordPress más ( fuente ) y sitios populares como TechCrunch, Disney, Sony, etc. usan WordPress para ejecutar su sitio ( fuente )

Espero que eso responda a su consulta.

[click_to_tweet tweet=”Cada día se lanzan 50,000 blogs de WordPress y se vuelve importante tener un gran diseño y funcionalidad. Aquí hay 5 pasos para copiar cualquier blog de WordPress. #WordPress #OceanWP #WordPressFacts” quote=”¿Sabía que cada día se lanzan 50 000 nuevos blogs de WordPress? #WordPressFacts”]

¿Listo para rodar? Empecemos.

Paso 0: Verifica si el sitio está usando WordPress

Lo viste venir, ¿no?

Por supuesto, lo primero que debemos hacer es verificar si nuestro sitio favorito usa WordPress. Si no es así, no tiene sentido seguir esta estrategia y seguirá rascándose la cabeza en pasos posteriores.

Para verificar qué sistema de administración de contenido (CMS) impulsa un sitio web, usaremos WhatCMS.org , una herramienta en línea gratuita.

El uso de la herramienta es sencillo, copie el sitio web que se probará, ingréselo en el cuadro del sitio web provisto y presione enter.

La herramienta ejecutará conjuntos de algoritmos y proporcionará un resultado que muestra qué CMS está utilizando el sitio web.

Paso 1: Copiar el diseño

El siguiente paso obvio es comprobar qué tema de WordPress está utilizando el sitio en cuestión. Para que lo sepas, hay al menos diez mil temas diferentes de WordPress gratuitos y premium disponibles para usar, lo que brinda a los propietarios de sitios web suficientes opciones.

Además, muchos propietarios de sitios web utilizan un tema desarrollado a medida que podría ser una versión personalizada de un marco o un tema codificado desde cero.

Para verificar qué tema de WordPress se está utilizando, puede usar WPThemeDetector.com , otra herramienta gratuita.

La herramienta es avanzada y detecta fácilmente el tema o el marco subyacente (incluso si está oculto), algo que no es posible con otras herramientas similares como WhatWPThemeIsThat.com.

Además de detectar el tema, la herramienta también brindará más información sobre el desarrollador, cuántos otros sitios lo usan y enlaces oficiales.

¿Qué hacer si el sitio usa un tema personalizado?

Como se mencionó anteriormente, es muy posible que algunos sitios utilicen un tema personalizado desarrollado desde cero. En tales casos, la herramienta anterior no será de mucha ayuda.

Pero no se haga ilusiones, puede lograr el mismo diseño de sitio web usando una combinación de temas de OceanWP y creadores de páginas como Elementor.

OceanWP es fácilmente el tema más personalizable con el que te hayas encontrado y golpeado con un creador de páginas, tan intuitivo y fácil de usar como Elementor, te da todo el poder en tu mano.

Literalmente, puede arrastrar y soltar componentes prefabricados, ajustar el tamaño/color, agregar algunos ajustes de CSS y obtener un diseño casi similar.

Paso 2: ¡Consiga las funcionalidades correctas!

Bien, entonces tienes los diseños correctos y tu sitio de WordPress recién creado se ve similar. Pero, no es nada sin funcionalidades similares o debería decir complementos.

Un sitio de WordPress promedio funciona con al menos 10 complementos diferentes, cada uno de los cuales proporciona una funcionalidad única.

Su sitio web ideal también utiliza múltiples complementos para tener esa funcionalidad elegante y experiencia de usuario. Además, es una buena idea obtener información sobre los complementos, ya que habrían probado varios complementos antes de conformarse con uno específico.

Aunque es difícil obtener una lista exacta de los complementos que se utilizan (muchos desarrolladores ocultan el nombre y la información), scanwp.net puede recuperar la información de manera eficiente.

También encuentra el enlace oficial para complementos disponibles en el repositorio de WordPress y si es gratuito o no.

Paso 3: No olvides la experiencia de lectura

Como se explica aquí , la fuente que se usa puede afectar la forma en que el individuo responde a un contenido.

En el experimento anterior, el primer grupo de personas (con fuente fácil de leer) estimó que la tarea tardaría 8,2 minutos en completarse. Mientras que el segundo grupo (con fuente difícil de leer) estimó la friolera de 15,1 minutos.

Esa es una gran diferencia y tiene mucho sentido. Si le resulta difícil leer la instrucción, su mente la procesará más lentamente y, por lo tanto, un tiempo de estimación alto. Definitivamente, lo que quieres para tu blog.

Si desea una experiencia de lectura similar, debe intentar usar la misma fuente que usa ese sitio. Puede detectar fácilmente qué fuente está usando la extensión WhatFont Chrome de un sitio .

Instale la extensión, visite el sitio (preferiblemente una página de artículo), haga clic en el botón de extensión WhatFont (disponible en la esquina superior derecha de la pantalla) y desplace el cursor sobre el texto.

No solo obtiene la fuente exacta, sino también el tamaño de la fuente, el estilo, el peso y un enlace a la fuente web de Google para descargarla.

Paso 4: ¿Alguien dijo color?

Una vez más, los colores son algo que se relaciona con la psicología humana y los expertos sugieren utilizar una paleta de colores óptima basada en el nicho del sitio web.

Según Kissmetrics , los colores afectan el comportamiento de compra y, según el tipo de audiencia, debe elegir un esquema de color adecuado.

Aunque puede echar un vistazo y obtener el esquema de color utilizado por su sitio web favorito, tiene más sentido obtener el tono de color exacto y el código hexadecimal.

ColorCombos.com tiene una herramienta en línea que puede capturar las paletas de colores utilizadas por una página web. Solo tiene que ingresar la URL de la página y presionar enter.

En unos segundos, obtendrá una lista de todas las paletas de colores que se usan con frecuencia en el sitio web con código hexadecimal y una opción para descargar el esquema de colores.

Paso 5: Velocidad del sitio web

Estoy bastante seguro de que la primera buena impresión que tuvo sobre el sitio se debió a la velocidad de carga. No importa qué tan bueno sea el diseño o la interfaz de usuario, si se carga en 3 o 4 segundos o más, habrá cerrado la pestaña y nunca regresado.

El alojamiento web es una de las razones principales detrás de un buen tiempo de carga y probablemente se pregunte qué alojamiento se está utilizando para impulsar este sitio. Si no puede obtener la respuesta navegando por el sitio (en la mayoría de los casos, estará escrita en el pie de página), puede usar la herramienta de HostAdvice.com para obtener el proveedor de alojamiento.

A diferencia de otras herramientas que solo usan Nameserver para detectar el host web, esta herramienta puede revelar el host oculto en caso de uso de CDN.

Sin esta herramienta, nunca hubiera sabido que OceanWP.org está alojado en Google Cloud Platform combinado con CloudFlare CDN (eso explica el tiempo de carga súper rápido)

Además, puede ver los planes de alojamiento y las reseñas de los usuarios directamente en la misma página.

Conclusión

¡Ahí tienes!

Ahora eres un asesino secreto que puede aplicar rápidamente ingeniería inversa a un sitio web de WordPress y replicarlo directamente desde el diseño hasta las funcionalidades del sitio web.

Si hay algo más que desee en su sitio pero no pudo encontrar cómo se hace, considere comunicarse directamente con el propietario del sitio. En la mayoría de los casos, lo guiarán hacia la fuente de la funcionalidad o el desarrollador que la escribió.

¿Tienes alguna herramienta secreta que uses para replicar un sitio web de WordPress? Me encantaría escuchar sobre eso. Deja un comentario y podemos discutirlo. Asegúrate de compartir este artículo con tus amigos amantes de WordPress a quienes les pueda resultar útil.