TUTORIAL DE WORDPRESS - TRABAJAR CON UN THEME

Hola esta estrada del blog forma parte del material de trabajo de los cursos de Diseño Web, eCommerce y community manager de la Casa de la Cultura de Torrejón de Ardoz.

Permanecerá abierta hasta el día del fin del plazo de matrícula, el 16 de septiembre, en Casa de la Cultura de Torrejón de Ardoz.

Vamos a trabajar con un Theme de Wordpress.

Para crear una entrada o post de porfolio vamos a Porfolio > Add New

Nombramos el post de forma que el nombre sea significativo y relacionado con el contenido.

En la columna de la derecha vamos a subir la Imagen destacada.

La subimos desde nuestro ordenador. Procuramos que tenga un tamaño similar al de la captura, ya que Wordpress lo ajustará mejor, y si tiene que hace algún escalado lo hará.

Una vez subida la Imagen destacada, En la columna de la derecha le asignamos una de las categorías de portfolio que hayamos en Portfolio > Categorías de Porfolio 

Las entradas de portfolio, tienen un pequeño texto de una línea o dos bajo el título, que nos da una pista del contenido del post. Ese texto lo introducimos en el campo Extracto que está en la columna central.

Una vez que entramos en el post, vemos una ficha a la derecha. Estas fichas que da el template no se adaptan a tu negocio, por lo que he tenido que programarlas yo. He tenido que manipularlas de forma que en el apartado Portfolio Información de la columna central, en el campo Autor escribes el nombra del producto, y en el campo Cliente una brevísima descripción del producto. Así la ficha queda adaptada a tu producto.

El slug es el enlace permanente de la página, en el que se han sustituido los espacios por - y no tiene caracteres no permitidos.  En la captura lo vemos en amarillo y puede ser editado con el botón editar que tiene a su derecha.

Yo le voy a añadir la palabra desfibrilador, porque sé que la necesitaré.

Más abajo te he instalado un plugin llamado Yoast, cuyo módulo gratuito (tiene otros de pago) te ayudará en el SEO.

Fíjate que aparecen unas marcas en rojo que debemos corregir.

Por ejemplo, nos dice que la palabra clave está en la url y vemos que sí está. Es la corrección del slug que hie antes.

Como nos faltan algunas cosas, vamos a ir completándolas. En las capturas ves el botón que expande las herramientas de trabajo ahora que vamos a insertar el texto. Nos interesa la de Texto plano, ya que vamos a pegar el contenido copiando y pegando desde Word.

Pegamos el texto en el campo del contenido de la entrada.

También pegamos la meta descripción en su campo correspondiente.

Vamos viendo cómo el SEO de la entrada va mejorando.

En la columna de la derecha vemos el círculo verde del SEO de la entrada.

Si queremos ir viendo cómo va nuestro trabajo, actualizamos y previsualizamos. pero de momento seguimos con un botón importante, el que nos permite añadir shortcodes. Los shortcodes son códigos preparados para poder trabajar sin tener que manipular o crear scripts.

Abro un poco de espacio al comiendo del post para insertar un short code que nos prepara el theme que estamos usando.

Con este shortcode vamos a insertar un comienzo atractivo a nuestra entrada de portfolio. Nos fijaremos en el código sustituyendo trozos de shortcode del por nuestro contenido.

Actualizamos y previsualizamos con Vista previa de los cambios.

Vemos la entrada, bajo la Imagen destacada.

Podemos ir configurando nuestro post yendo y viniendo de una parte a otra de nuestros paneles, ya que muchas veces iremos probando cosas. Para ello en Porfolio vemos nuestro post con unas columnas que nos dicen el estado de algunas configuraciones. Con el botón editar podemos entrar en el post y seguir trabajando en él en cualquier momento o editarlo en cualquier momento. La practica y el trabajo en el curso nos irán dando pistas y trucos. Por ejemplo, editando la fecha de los post los ordenamos, ya que wordpress por defecto sitúa los post más recientes en primer lugar. Si queremos poner en primer lugar un post antiguo, basta con actualizar su fecha.

Seguimos editando. En la columna central desactivamos los comentarios, ya que en un portfolio, en este trabajo, no queremos comentarios.

Trabajar con el texto es relativamente sencillo con las herramientas. Vamos marcando textos en negrita, por ejemplo.

Podemos gestionar la jerarquía de los textos desde la opción párrafo. Esta jerarquía es muy importante, ya que además de valor visual, tiene importancia semántica para los buscadores y eso es algo que trabajaremos a conciencia en los cursos de diseño web, ecommerce y community manager. Lo que aquí nos muestra como Título 1, Título 2, ...  En código html5 son os encabezados <h1>, <h2>,... Pero eso lo veremos más en profundidad durante el curso.

Todos los tempates / themes suelen proporcionar shortcodes para separar visualmente contenidos. En este template elijo Divider Fancy.

Así nos aparece el shorcode en nuestra área de trabajo [divider_fancy]

Previsualizamos y lo vemos bajo el texto de los datos del desfibrilador.

Podemos ir trabajando usando ese shorcode para separar los contenidos a los que añadimos negrita, o espacios, o encabezados/títulos.

La parte del precio final la embelleceremos de nuevo con el shortcode Headig2 que usamos al principio.

Lo manipulamos como hicimos al principio. Cambiamos el color por un azul similar al del logo. Es el azul más parecido que nos proporciona, aunque por código css podríamos darle el azul exacto, pero eso dependerá de la soltura que cojamos durante el curso. Los alumnos de diseño web lo harán sin problemas, los de ecommerce y community manager la veremos...

Vemos el resultado.

Vamos a insertar imágenes. Nos situamos donde queremos insertarla y usamos el botón Añadir objeto.

Seguimos los pasos y buscamos la imagen en nuestro ordenador.

Si es necesario, con el botón editar, el del lapicero, le damos un tamaño.

Previsualizamos.

Podemos insertar imágenes usando columnas. Elegimos una zona de trabajo entre dos segmentos en la que hay un texto. Queremos insertar dos imágenes antes de ese texto. Nos situamos con el cursor donde queremos insertarlas. 

La mayoría de los templares se basan en grids (rejillas) de 12 columnas. Podemos trabajar usando estos sistemas, pero los buenos templates, los de pago, normalmente, proporcionan shortcodes que nos ayudan a organizar nuestro contenido en columnas. Lo mejor es hacer pruebas. Yo he decidido ordenar las imágenes usando shortcodes de 3 columnas y dejando que fluya el texto.

Vamos al botón de shortcodes y en Column Shortcodes insertamos uno de 3 columnas dentro del cual insertaremos una de las imágenes, como vimos antes.

Y haremos lo mismo con la segunda imagen.

Previsualizamos.

Así está bien. El espacio gris de la derecha es el sidebar,  que en esa zona ya no tiene contenido.

Una vez maquetado el post, hemos de repasar los elementos multimedia para ajustar su SEO

Vamos a Medios, y editaremos las imágenes que hemos usado en el post.

El texto alternativo es necesario, ya que tiene relevancia SEO. Ha de ser coherente con el contenido del post.

Igual que hicimos con el post, trabajaremos los campos que nos muestra el plugin Yoast para dejar correcto el SEO de las imágenes.

Tenemos que hacer lo mismo en cada una de las imágenes del post.

Ahora vamos a publicar una entrada en el blog de la página relacionada con esta entrada de porfolio.

Vamos a Entrada > Añadir nueva. Creamos una y la titulamos. 

Trabajamos las Categorías y las etiquetas, creándolas si es necesario.

Buscamos el plugin Yoast en la columna central para trabajar el SEO como hicimos antes.

Maquetamos.

Añadimos la imagen destacada.

Embellecemos.

Vemos la entrada.

Y así aparece en el blog.

Esta entrada permanecerá pública hasta el final del plazo de matrícula en la Casa de la Cultura de Torrejón, el 16 de septiembre.

Saludos.