WordPressium creando una experiencia de tipo medio

Lo que vas a crear

Si ha visitado artículos en Medium, conoce sus líneas limpias y legibles. Los artículos se cargan rápido y se leen fácilmente en teléfonos, tabletas y computadoras de escritorio. Aquí hay una muestra de uno de mis artículos de Medium, Shining Light on Internet Rage:

En este tutorial, lo guiaré a través de la selección de temas y complementos para convertir su sitio de WordPress en una experiencia de tipo Medio. También nos centraremos en la funcionalidad. Le guiaré a través de los complementos que muestran el tiempo de lectura, y cómo puede permitir al usuario seleccionar texto y comentarios en línea o compartirlo en Twitter..

Aquí hay un ejemplo de la presentación de Medium de los tiempos de lectura esperados:

Aquí hay un ejemplo de la característica de selección, comentario y compartición de Medium:

Aquí hay un ejemplo de comentarios en línea en otro de mis artículos de Medium:

Empezando desde cero

Si desea crear un sitio completamente nuevo, puede seguir mi guía visual para la instalación de WordPress aquí. También te puede interesar la plataforma de blogs de código abierto Ghost, que describí a principios de este año en Tuts +. Para este ejemplo, realmente voy a migrar el sitio de Ghost que construí en la pieza anterior a una experiencia de WordPress similar a Medium.

Esto es lo que mi antigua página de inicio de Ghost resultó tener un tema similar a Medium llamado Ghostium:

Si desea adaptar su sitio existente, simplemente siga adelante mientras exploramos los temas y complementos de tipo medio.

Temas que se parecen a un medio

Para este tutorial, instalaré el "Léame Tema de WordPress" de Readme disponible en Theme Forest, una compañía de la red Tuts +, por $ 48 (fue mi elección, no Tuts +).


Si está dispuesto a pagar por un tema, es posible que también desee revisar estos tres:

  • WPMedium $ 47
  • Array's Medium $ 69 
  • Aesop Story Engine (ejemplo) (complemento) (complemento gratuito, complementos de pago). Estoy planeando escribir un tutorial de Tuts + sobre Aesop en el futuro. Mira la página de mi instructor o sígueme en Twitter @reifman para ver las actualizaciones.

También hay una variedad de excelentes temas de WordPress de inspiración gratuita. Aquí hay unos excelentes redondos:

  • 13 temas de WordPress gratuitos de inspiración media (WPMU)
  • 9 temas de WordPress de estilo medio (WP Superstar)
  • Los 11 temas de WordPress más parecidos a los medios (dígito fuente)

De estos, puedes comenzar por revisar Fastr de Kanishk Kunal. Él alberga una demostración aquí. Aquí hay una captura de pantalla de Fastr:

Si encuentra un tema gratuito que le guste, publique su experiencia en el hilo de comentarios a continuación para que otros lectores se beneficien..

Instalando y Configurando Readme

Puede comprar el tema Readme en ThemeForest y luego descargar el archivo .zip de WordPress desde el sitio.

Visita tu panel de WordPress, y haz clic Apariencia> Temas> Agregar nuevo> Cargar.

Al igual que con cualquier tema de WordPress, hay una gran cantidad de configuración específica del sitio y una interfaz de usuario específica del tema para trabajar. Como estos van, Readme es relativamente limpio. Tiene un simple cuadro de diálogo con pestañas para la mayoría de las configuraciones:

También ofrece una variedad de diseños agradables, como su opción de mampostería:

Puede ver cómo configuré mi sitio terminado en breakups.io. Este es mi diseño de portada:

Aquí hay una página de historia:

Me gusta como salió. Si tuviera más contenido, podría haber optado por el diseño de mampostería.

Complementos de tipo medio

Ahora, saltemos a los complementos de tipo medio: seleccionar texto y compartir, tiempo de lectura y comentarios en línea.

Selecciona Texto y Comparte

El complemento gratuito Selection Sharer de Hans van Gent le permite agregar selección de texto, correo electrónico y Twitter para compartir en su sitio. Es fácil de instalar y funcionó perfectamente para mí desde el primer momento..

Esto es lo que parece en mi sitio cuando seleccionas texto y lo compartes. También puedes intentarlo:

Me impresionó lo bien que funcionó sin ninguna configuración. Una alternativa es el complemento gratuito de Quotable que ofrece selección y tweet..

Me preocupo un poco por la capacidad de descubrimiento de esta característica, pero cada vez que alguien vaya a copiar texto, lo descubrirá..

Tiempo de leer

Como puede ver en las imágenes anteriores, el tema Léame proporciona un tiempo de lectura incorporado. Sin embargo, hay opciones de plugin si eliges otro tema.

El complemento de Tiempo de lectura gratuito muestra el tiempo para leer y una barra de progreso en la publicación.

También hay algunas bibliotecas abiertas de Jquery que hacen lo mismo si quieres integrar las tuyas. p.ej. El tiempo de lectura de Michael Lynch.

Comentarios en línea

Lamento decepcionar, pero resulta que no puedes hacer fácilmente todo lo que hace Medium. Los comentarios en línea son difíciles de recrear, ya que dependen de una gran cantidad de soporte de temas. WP Tavern exploró este tema más a fondo. Se decidieron por el complemento gratuito de Comentarios en línea. Pero ninguna de las soluciones que vieron proporcionó una gran experiencia de usuario. 

Al final, elegí quedarme con mi favorito, el complemento gratuito Disqus, aunque no ofrece capacidad en línea en este momento.

Lecturas sugeridas

Ahora, vamos a dar un paso más allá de Medium y agregar algo genial que The New York Times haga bien: el siguiente complemento de lectura sugerido. El complemento gratuito UpPrev muestra una promoción de sobrevuelo a la publicación anterior, siguiente o aleatoria en su sitio:

Dado que los blogs personales a menudo tienen una alta tasa de rebote, por ejemplo, los lectores hacen clic para alejarse después de leer un artículo, upPrev puede ayudar a mantener a las personas en el sitio. Aunque uso widgets para elementos recientes y populares, me gusta el concepto de usar un paso elevado animado para promocionar una pieza específica.

UpPrev tiene un sencillo cuadro de diálogo de configuración de complementos y me funcionó fácilmente:

Puede elegir cómo upPrev selecciona el contenido para presentar, por ejemplo, anterior, aleatorio o relacionado, con el complemento Yet Another Related Posts (YARPP):

Esto es lo que parece a medida que se desplaza hacia la parte inferior de una página en breakups.io:

Para concluir

Espero que hayas disfrutado este post. Medium y WordPress son plataformas emocionantes y es genial cuando podemos tomar las cosas que nos gustan de una e implementarlas en otra. También es interesante cuando encuentras cosas como comentarios en línea que aún son difíciles de hacer en WordPress. Medium hace mucho bien y el equipo de WordPress tiene mucho trabajo por hacer..

Por favor, siéntase libre de publicar correcciones, preguntas o comentarios a continuación. Intento participar en las discusiones. Me interesaría especialmente su experiencia con temas y / o complementos alternativos. También puedes contactarme en Twitter @reifman o enviarme un correo electrónico directamente. Si te ha gustado este tutorial, visita la página de mi instructor para ver mis colecciones de otros tutoriales..

enlaces relacionados

  • Medio
  • Léame "Tema de WordPress legible"
  • Plugin de WordPress: Tiempo de lectura
  • Plugin de WordPress: Selección de partícipes
  • Plugin de WordPress: upPrev
  • Siguiendo con Ghost (Tuts + Code)