Pasos para la creación de un blog.

1. Práctica 7. Agregando un Blog
Objetivo de la Práctica
Al término de la práctica el alumno habrá creado una sección de blog (noticias) en el sitio web.
Importancia del Blog en un sitio web
Un blog dentro de un sitio web es una sección donde se muestran artículos con una estructura
cronológica que se actualiza regularmente y suelen tratarse de un tema en particular. Un blog es
importante para un sitio web, ya que permitirá al sitio web ser encontrado por los motores de
búsqueda, como Google. Una de las funciones de Google es encontrar sitios web que coincidan
con las palabras clave que un usuario busca. Así que, si el sitio tiene artículos que relaciona a una o
varias palabras que buscan los usuarios, existe mayor probabilidad que Google muestre el sitio
web como resultado, beneficiando al sitio con un mayor número de visitas al sitio web.
En esta práctica se va crear una sección en el sitio web que sea un Blog y se mostrará funcionalidad
adicional en la barra lateral con ayuda de widgets
Parte 1. Obteniendo una noticia relacionada
a) Busca en Internet una noticia relacionada a tu idea de negocio que le aporte información
útil a los usuarios que visiten tu sitio web. Por ejemplo, si tu sitio es de venta de ropa, un
artículo relacionado serían las tendencias de moda de otoño.
b) Ten a la mano el contenido de dicho artículo porque se pegará en el sitio web.
c) En caso de no encontrar noticias relacionadas, utiliza el siguiente sitio web para generar
contenidos: http://es.lipsum.com/
Parte 2. Creando la categoría
a) Acceder a Cloud 9 y abrir el proyecto en WordPress en el panel de administrativo y la
vista de usuario
b) En el panel administrativo, dirígete al menú Entradas Categorías, verás una pantalla
como sigue:

2. c) En la sección Añadir nueva categoría, captura en el campo Nombre la palabra Blog o
Noticias o cómo quieres distinguir a tu bitácora de artículos
d) Da clic en el botón Añadir nueva categoría
Debes ver la nueva categoría en el listado de la misma página:
Parte 3. Agregando un nuevo artículo.
a) Una vez agregada la categoría, dirígete al menú EntradasAñadir nueva. Se
presentará una página parecida a cuando se dan de alta páginas al sitio web

3. b) Agrega un título, que corresponda al nombre de la noticia reservada en la Parte I de la
práctica, en el campo “Introduce el título aquí”; en el caso de ejemplo, el artículo se
titulará: Los diseños más trendy para este verano.
c) Agrega copiando y pegando el texto del artículo en la sección del editor, si requiere
algún formato el texto apóyate de las opciones del editor para darle formato. Para
que sean visibles los controles del editor asegúrate dar clic en la pestaña Visual
d) En la barra de la derecha, encontrarás una sección llamada Categorías, selecciona la
categoría Blog, creada en la Parte 2 de la práctica.

4. e) En la misma barra de la derecha, encontrarás al final de la página la sección Imagen
Destacada
Da clic en la liga “Asignar imagen destacada”, te aparecerá otra pantalla, donde podrás
ver las imágenes que se han subido en prácticas pasadas. Selecciona una imagen y da
clic en el botón “Asignar imagen destacada”.
Al final la sección Imagen Destacada luce con la imagen seleccionada.
f) Por último, en la barra lateral, encontrarás al inicio la sección Publicar, da clic en el
botón Publicar
Hasta este momento se ha creado un artículo, pero no es visible en la vista de usuario,
puedes corroborarlo actualizando tu página de vista de usuario y no estará disponible
el punto de menú de tu sección de Blog.
Es necesario agregarlo en el menú y se agregará en la siguiente parte de la práctica.
Parte 4. Crear un menú y añadir una página

5. a) Dentro de la administración del tu sitio, ahora dirígete al menú Apariencia Menús, verás
un pantalla como la siguiente:
En esta sección puedes personalizar los menús, puedes quitar páginas, agregar páginas,
personalizar enlaces, etc.
b) Justo debajo de la pestaña Editar Menús, da clic en la opción crea un nuevo menú, se
abrirá una nueva pantalla.
c) Agrega un nombre en la opción Nombre del menú, por ejemplo, MenuPrincipal y da clic en
“Crear menú”, se habilitarán más opciones
d) Justo del lado izquierdo de la pantalla, tienes una sección llamada Páginas, selecciona la
página Inicio (o como la llamaste que corresponde a tu Página Principal) y selecciona el
botón Añadir a menú
e) Al dar clic se agregará a la sección derecha la página, como sigue

6. f) En la misma sección izquierda, ahora descolapsa la sección Categorías
Ahora verás la Categoría que se creó en la parte 1 de la práctica (llamada Blog o
Noticias), selecciona la Categoría Blog y da clic en el menú Agregar al menú
a) Se agregará la categoría Blog en las opciones del menú, selecciona la opción Primary y
al final da clic en el botón Guardar menú.

7. b) Dirígete a la vista de usuario, actualiza la página web y verifica que en el punto de menú
tengas la opción Inicio y Blog

8. c) Dentro de la vista de usuario, da clic en el menú Blog y asegúrate de que tu artículo
está disponible
d) Asegúrate que en tu menú Blog este visible la imagen que asignaste a tu artículo, el
título un texto breve. Al dar clic sobre al título, puedes acceder a todo el contenido del
artículo
e) Agrega una nueva entrada, apóyate de la parte 3 de la práctica, para que puedas
apreciar como agregan los artículos de forma cronológica. Al publicar tu nota, verifica
los efectos que tuvo en tu vista de usuario en tu menú Blog. Debes ver algo similar:

9. Notarás que la barra lateral, se muestra funcionalidad adicional como: cuadro de búsqueda,
entradas recientes, comentarios, archivos, categorías, etc. Estas funcionalidades son posibles
gracias a los widgets, en la siguiente sección se aprenderá a personalizar la barra lateral con ayuda
de widgets.

10. Parte 5. Integración de widgets en barra lateral.
a) Dirígete al menú Apariencia  Widgets, del lado izquierdo verás funcionalidades que se
pueden añadir al sitio web llamadas Widgets, unas vienen integradas con Wordpress y
otras se agregan con plugins. Del lado derecho verás las secciones en el sitio web donde se
pueden mostrar las funcionalidades de widgets disponibles en tu tema, en el caso del
tema Flash, se pueden agregar en la barra lateral derecha e izquierda ( Right Sidebar, Left
Side Bar) y en la pie del sitio (Footer).
Wigdets disponibles Sección del sitio donde pueden ser
visibles los widgets
b) En la sección Right Sidebar, verás widgets precargados, que son los disponibles en tu vista
de usuario en tu menú Blog (Buscar, Entradas Recientes, Comentarios Recientes, Archivos,
Categorias, Meta).
Vista Administrador de Widgets

11. Vista de Usuario en Sección Blog
c) Para borrar widgets, sólo es necesario descolapsar el widgets y tendrás disponibles el link
borrar.
d) Borra los widgets, dejando sólo disponible Buscar y entradas recientes.
e) Actualiza tu vista de usuario para ver los efectos que tuvo

12. f) Para agregar nuevos widgets en la barra lateral, puedes arrastrar los widgets disponibles a
la sección del Right Sidebar, o bien, dar clic sobre el widget, seleccionar la barra donde se
quiere agregar y dar clic en Añadir widget
g) Agrega los siguientes widgets a la barra lateral ( Right Sidebar)
 SiteOrigin Contact Form
 Video
 SiteOrigin Call to action

13. h) El widget SiteOrigin Contact Form, muestra un formulario, al descolapsarlo puedes
personalizar: el título, los campos y el diseño. Cambia al menos el título para que esté en
español, al final del widget encontrarás el botón Guardar para aplicar los cambios en la
vista de usuario
i) El widget Video muestra un video, que puede ser alojado en servidor o disponible en
desde una url, al descolapsar el widget muestra las configuraciones Título y Añadir Video:
Personaliza el título y agrega un video disponible en Youtube, al dar clic en Añadir Video,
se abrirá una pantalla, del lado izquierdo tienes la opción Insertar desde URL y puedes
pegar la url del vídeo de Youtube, al final dar clic en Añadir al widget, una vez insertado el
video, dar clic en el botón guardar del widget

14. j) El widget SiteOrigin Call to action, permite crear un mensaje y un botón, descolapsa el
widget y te mostrará las opciones a configurar: Título, Subtítulo, Cuestiones de diseño,
Configuración del botón, etc. Captura al menos un título y configura el botón (texto,
color, color de texto, url) para que te redirija a una sección de menú de tu sitio web.

15. Al final da clic en el botón del widget Guardar para ver los efectos en la vista de usuario, que se
verá algo similar.
Con las tareas realizadas previamente, la barra lateral fue posible personalizarla con la
funcionalidad de los widgets, dirígete a la vista de usuario, actualiza tu página de blog y al final tu
barra debe verse similar a:

16. Parte 6. Personalización de Píe de Sitio (Footer) con widgets.
a) Ahora personaliza el footer con ayuda de widgets, como lo realizaste en la parte 6 con la
barra lateral, ahora agrega widgets en Footer Side Bar 1
Nota: Para lograr la estructura deseada (columnas y filas), puedes apoyarte del widget
Layout Builder y el armado es similar al armado de páginas con el plugin Page Builder.
El footer es de contenido y diseño libre.
b) De forma opcional, reafirma tus conocimientos en cambiar diseño, al menos el color de
fondo del pie de página a través de hojas de estilo. Obtén es código css asociado con
ayuda de Herramientas de Desarrolladores, personalízalo y colócalo en
AparienciaPersinalizarCSS Adicional