Armando nuestra primer nota de blog

Clase 7 de 13 • Curso de Creación de Blogs con WordPress

Maia Victoria Harendorf

student•

Gutenberg me hace acordar mucho a Notion, que belleza.

Notion para tomar los apuntes de los cursos de Platzi y WordPress para documentar nuestros avances y compartirlo orgullosos con el mundo.

Yonathan Herrera

student•

Confirmo, Notion es increíble!

María del Carmen Trad González

student•

Gracias por la aportacion de Notion, saludos

Orlando Jose Altamiranda Piñango

student•

Mucha gente ha sido reacia a utilizar Gutenberg (me incluyo) y actualmente todavía los hay, incluso prefieren usar el editor clásico, aunque hay que reconocer a Gutenberg como una gran herramienta, tanto para crear, como personalizar el contenido en WordPress. Excelente clase, me pareció muy interesante. Últimamente me incliné más por usar Elementor y Divi, pero voy a empezar a aprender Gutenberg, esta clase me convenció de lo interesante que puede ser.

Cristian Ramanzin

teacher•

Gutenberg es una herramienta muy poderosa. Además estate a atento que se viene un Curso de Creación de Bloques en Gutenberg para WordPress. 😶

Orlando Jose Altamiranda Piñango

student•

Sensacional noticia 😎 Estaré muy al pendiente...

octavio molina

student•

si estas empezando desde cero con wordpress este curso es un desastre

Miguel Angel Albizures Veliz

student•

Que fácil es insertar lo bloques:

Cristian Ramanzin

teacher•

Los bloques son amor 💚

Andrés Soret Chacin

student•

🤩👌

Roberto Ballinas Hernández

student•

Tip:

Cuando agreguen un link desde la caja de herramientas, SÍ activen "Abrir en una nueva pestaña" para que la página se dirija a otra pestaña diferente a la de su sitio. Así provocarán que los usuarios se queden en su sitio, no se vayan "afuera" y se distraigan con otros contenidos. Eso les puede provocar fuga de atención de los visitantes.

Cristian Andres Espinel Londoño

student•

Excelente Roberto y no solo eso muchas veces uno se pierde y pierde el hilo donde iba

Roberto Ballinas Hernández

student•

Exactamente, Cristian. Así ayudas a tus lectores a que no se pierdan los detalles de tus contenidos.

Cesar Alfredo Llacta Quispe

student•

No me gusto la forma de explicar del docente me parece desordenado borra a cada rato, recomendaría tenga algo ya preparado para las personas que están iniciando recién con el tema.

Aldo Miguel Ortiz Parodi

student•

6. Armando nuestra primer nota de blog

Wodpress usa Gutemberg como editor de posts por defecto, este trabaja en base a bloques.

Es muy interesante el avance de WordPress hacia su objetivo el cual es el Full Site Editing. E inclusivo he visto que han agregado un curso al respecto, espero que con esta carrera esté listo para trabajar haciendo sitios WordPress con temas personalizados.

Andrés Soret Chacin

student•

Muchas gracias por el aporte compañero 😁👍

Marcos Monteverde

student•

tus resumentes son oro!

Luis Alberto Bautista Santos

student•

Para este proyecto de wordpress trabajare un pagina que comenzara a darle vida a mi marca personal:

https://www.albasan.live

Les agradecería que un poco de su importante feedback

Luz Mazo Bedoya

student•

Super chevere, y tiene "Esta web utiliza cookies propias... " cómo lo hiciste?

Sebastián Pascali Pasquale

student•

Esta muy bien, pero tiene demasiado texto

Alfredo Castro

student•

Armando nuestra primer nota del blog

Ahora que ya sabemos crear una entrada, sabemos como gestionar Etiquetas y Categorías, pero aún no hemos visto cómo generara contenido dentro de nuestras Entradas. Para esto, WordPress usa un editor visual que se llama Guntenberg, el cual ya viene instalador con el código fuente de WordPress.

En este caso para el ejemplo vamos a copiar una entrada de un Blog de Platzi
WordPress detecta si estamos copiando y pegando enlaces o alguna otra cosa, pero de todos modos hay que asegurarnos de que se haga correctamente

Gutenberg - Editor de bloques

Si no vamos a copiar texto, sino que vamos a trabajar directamente con Gutenberg, tenemos que presionar el ícono de + para agregar un nuevo bloque.

💡 Para deshacer cambios desde el editor también podemos utilizar el atajo: Ctrl + z

Bloques

Al agregar un nuevo bloque nos va a mostrar algunas opciones por defecto:
- Bloque de: Párrafo, Imagen, Encabezado.
Gutenberg se maneja con bloques, bloques de contenido:
- Por ejemplo, si queremos poner un encabezado, elegimos el bloque de Encabezado → en este caso para poder utilizar desde el h1 al h4.
- Párrafo → texto plano
- Lista → para listar elementos
- Clásico → editor clásico de WordPress que se utilizaba antes de que se agregara Gutenberg

Patrones

Además de los bloques, también tenemos patrones de diseño, es decir, la plantilla nos sugiere columnas o tipos de formato de contenido.

Básicamente, son como plantillas con acomodos de información de determinada manera

Trabajando con Gutenberg

Podemos ir copiando y pegando texto o párrafos de algún otro sitio web, Gutenberg lo que va a hacer es detectar los estilos o las estructuras de cada elemento del párrafo y los va a traer tal cual.
Cada párrafo que copiamos y pegamos en Gutenberg se agrega como un bloque más
Para colocar la imagen, utilizamos el bloque de imagen:
- Subir → subir archivo desde el equipo
- Biblioteca de medios → (recomendado) para administrar todas nuestras imágenes y medios cargados previamente a WordPress, en este apartado podemos reutilizar las imágenes
- Insertar desde una URL → copiar URL de la imagen que queremos colocar
- Una vez que cargamos la imagen, Gutenberg nos da algunas opciones:
  - aplicar un filtro, alinear la imagen, poner un link, recortar, ponerle texto, reemplazar por otra imagen
  - Si seleccionamos el botón ⚙, podemos aplicar efectos de marco a la imagen, como ponerla en círculo, óvalo, etc.
    - Podemos modificar también el tamaño de la imagen.
      
      💡 Cuando cargamos una imagen a WordPress redimensiona la imagen 4 veces: Miniatura, Medio, Grande, Tamaño completo

💡 Es importante colocar el texto alternativo a nuestra imagen para temas de accesibilidad

Para insertar un vídeo en Gutenberg lo podemos hacer de 2 maneras:
- ++bloque HTML personalizado++ → es decir, pegar un bloque de HTML y que WordPress lo renderice por nosotros
- Para pegar este bloque, tenemos que ir al vídeo en YouTube y desde ahí seleccionar la opción Compartir > Incorporar video → copiamos el código y lo pegamos en Gutenberg
```
<iframe width="560" height="315" src="https://www.youtube.com/embed/Gw2ISACieqs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
```
Pero existe otra manera más rápida de compartir un vídeo de YouTube, Gutenberg tiene un bloque de YouTube, y con esta opción solo tenemos que colocar la URL del vídeo
Si copiamos y pegamos todo el texto que falta, incluidos encabezados e imágenes, WordPress incrusta los elementos tal cual como no los estamos copiando.
- En el caso de la imagen, tenemos el detalle que hace referencia al Blog de Platzi, osea que la imagen no se encuentra en nuestra biblioteca de medios.
  - Pero podemos agregar esa imagen a la biblioteca si damos clic en los 3 puntos y seleccionamos la opción de Reemplazar > Subir
  La podemos subir directamente o agregar la imagen a la biblioteca de medios

Javier Andrés Sánchez Bermúdez

student•

Aporte mi resumen de la clase: WordPress usa un editor visual que se llama Gutenberg, el cual ya viene instalado con su código fuente, por lo cual no es necesario instalar ningún plugin. En entradas vamos a añadir una nueva, Allí tenemos la opción de copiar y pegar en el caso que tengamos nuestro escrito en un documento externo, o tenemos la opción de escribir directamente en WordPress. Dando clic al botón de más, vamos a encontrar bloques con diferentes opciones (párrafo, imagen, encabezado). Gutenberg se maneja con bloques de contenido. En la parte superior de la pantalla vamos a encontrar otro signo más con muchas opciones de bloques de contenido o patrones de diseño predeterminados que la plantilla nos sugiere. En el bloque de imagen vamos a encontrar las opciones de subirlas por medio de una url de la imagen en internet, o subirla directamente desde la computadora, o desde la biblioteca de medios que es la más recomendada, por que nos da la opción de administrar esas imágenes. Una vez subida la imagen nos va a dar la opción de recortar, añadir texto, remplazar etc. Desde las opciones del engranaje nos va a permitir darle un estilo a la imagen y lo más importante podemos incorporar el texto alt, que nos sirve para darle una descripción de la imagen y nos ayuda con el posicionamiento SEO.

Hay dos opciones de subir un video de YouTube. Una utilizando el bloque de HTML personalizado, para ello vamos al video en YouTube y en la opción de compartir vamos a incorporar y copiamos el HTML (inframe). La otra opción y que es la más rápida es usando directamente el bloque de YouTube donde solamente me va a pedir la url.

Nancy Sandoval

student•

Hola compañeros, hice este blog para una empresa, les dejo aquí el link, cuéntenme que tal les parece

https://chavja.com/2022/05/23/whatsapp-marketing/

Loraine Mercedes Badillo Hernandez

student•

Excelente

Maritza Pacheco Cuno

student•

Super!

Alexander Rojas Roa

student•

🛠💻 Las nuevas actualizaciones de Wordpress está genial .con su versión de Gutenberg la hace más amigable.

Aunque me parece complicado hacer el SEO cuando llegue abrir Wordpress, pero es una buena opción para abrir un Blog.

Sinceramente, abrir un Blog en: Wordpress, Ghost, Notion y Substack se han convertido en tendencias y buenas opciones.

Pero Wordpress me ha impactado y emocionado para crear un Blog.

Juan Alexander Rodríguez Pérez

student•

Elementor también es otra forma de amor WP!

Pol Valle

student•

RECUERDA!! ++Texto Alt++: atributo que ira dentro del codigo cuando se genere, serviera tanto para:

Accesibilidad
Posicionamiento

Henry Jeffersson Salinas Arenas

student•

me encanto la clase, estoy usando wp desde local sin pagar que bien

Alfredo Gómez Delgado

student•

Personalmente prefiero WP Bakery Builder, es pago y lo incluyen los temas pagos... no me gustó Gutenberg o Elementor

Oswaldo Sánchez Salazar

student•

Hola, se menciona que Wp detecta el "copy-paste" de otros blogs, esta misma función lo hace cuando el copy-paste se desde Word de Of?

Cristian Ramanzin

teacher•

Hola, Si pero los hace con los formatos de texto. Te recomiendo tener tus borradores en https://www.notion.so/. Si los copias desde ahí no tendrás problemas.

Jose Guillermo Rojas Paredes

student•

Genial, es muy genial

Jorge Cardozo

student•

Así va quedando mi blog, bastante básico pero ya lo iré mejorando :)

https://elblogdejack.wordpress.com/

Luz Mazo Bedoya

student•

te quedó muy chevere, con todas las entradas!

Millaray Madariaga

student•

Dejaré un dato extra para los casos de Youtube

Puedes copiar y pegar el link de Youtube, y al guardarlo , se carga solo :)
También si usas word o documentos de Google, copias y pegas todo. Solamente debes editar la estética, y listo

Andrés Soret Chacin

student•

Muchas gracias por el aporte compañero 😁👍