Modificar un tema de forma correcta: Cómo crear plantillas específicas

Clase 19 de 52 • Curso de Creación de Temas y Plugins en WordPress

Resumen

En este video te muestro cómo puedes hacer modificaciones a las plantillas que instalas en tu sitio de WordPress. Una cosa que tienes que tener muy en cuenta es que en las plantillas todo es susceptible de ser cambiado, por lo que podemos crear cosas muy buenas e impresionantes.
Ahora bien, si te interesa ver cómo puedes modificar el código puedes descargar los archivos de la plantilla y hacer modificaciones al código.

José Alberto Ortiz Vargas

student•

Les dejo el link de la imagen del avión 😉

José Alberto Ortiz Vargas

student•

http://image.flaticon.com/icons/png/128/59/59919.png

Juan Carlos Acosta Chanamé

student•

gracias

Gabino Alberto Ortiz Barrio

student•

Me esta desesperando un poco este curso, en verdad me interesa conocer a fondo Wordpress pero hasta ahorita siento que el instructor da demasiadas cosas por sentado y le falta explicar mas despacio que esta haciendo en cada paso y porque lo hace de esa manera, es decir, en este video me surgieron un monton de dudas que creo era correcto que se hubieran explicado a detalle, como por ejemplo:

1.- ¿Como hace wordpress para jalar automaticamente el archivo category.php y el de category-viajes.php? Entiendo que debe haber una estructura que los jala, pero ¿No hubiera sido mejor explicar primero eso y ver como es el proceso interno para entender mejor el funcionamiento de wordpress?

2.- Explicar porque se agrego la categoría de viajes en esa parte especifica del código.

3.- Explicar que hace a nivel código la función post_class(), solo la pone y no dice ni porque ahi ni nada.

No se que opinen, o si soy yo al que me esta faltando background necesario para este curso, pero hasta ahorita siento que son dudas que esperaría que me explicaran mas facilmente en un curso en el que estoy teniendo que investigar mucho por fuera y se supone que para eso pagas, para no tener que andar en otro lado buscando...

o tal vez todo esto lo explica a detalle mas adelante y me estoy adelantando, ojala y sea asi

Jhon Carlos Colorado Angulo

student•

Hola entiendo tu frustración a mí también me tocó leer e investigar para poder entender muchas cosas. La verdad debieron haber un curso más básico antes de este.

Ahora recuerda que éste es nuestro mundo, debemos estar actualizado porque la tecnología cambia mucho por lo tanto nos toca leer la documentación de dichos lenguajes de programación o alguna modificación que hacen en alguna actualización. Apoyo tu opinión pero también recuerda que debemos investigar un poco más. No nos podemos quedar con lo que nos dan solo en la clase.

Diego Forero

Team Platzi•

post_class() permite agregar clases adicionales a un articulo.

Cesar David Ramírez Dimaté

student•

De hecho existe un problema grave cuando explica eso en el vídeo. Él lo coloca de la siguiente manera en la clase single.php:

<div id="primary" class="content-area <?php post_class(); ?>">

Al momento de inspeccionar el elemento se puede visualizar que el profesor toma es en base la clase category-viajes que ya está definida en el <article> (sin necesidad de colocar el post_class()), y es acá donde toma los estilos. Pero si se revisa bien donde se colocó esto (que fue en el <div id="primary") es acá donde el post_class() rompe con la estructura del atributo class="". Entonces… ¿cómo se debe utilizar de manera correcta el post_class()?

Luis Antonio Agapito Gamarra

student•

el post_class() debió usarse por fuera del class=" … " , como si fuera otro atributo más

JUAN PABLO CALDERON PRECIADO

student•

Hola, yo tuve un pequeño problemita al practicar ese capítulo, al entrar a una categoría, me mostraba como “página no encontrada”. Pero me fui a “Ajustes de los enlaces permanentes” y lo configuré como “Nombre de Entrada” (que te da urls más amigables). Y con eso funcionó. Aunque es un tip muy simplón, espero que a alguien le sirva…

Alan Rodriguez

student•

Me pasaba lo mismo y esto me sirvio perfectamente.
Gracias

Jorge Ossa

student•

Excelente tu aporte!! me pasaba lo mismo. Gracias.

Enrique Alexis Lopez Araujo

student•

Porque para poder ver la imagen dentro de category-nombre.php tuve que entrar al header.php y agregar la referencia del css

<link rel="stylesheet" href=/wordpress/wp-content/themes/twentyseventeen/style.css>

Esa parte no se ve cuando se agrega la imagen

Enrique Alexis Lopez Araujo

student•

tuve que agregar tambien el id, entonces en la linea que va en el header.php queda asi:

<link rel="stylesheet" id="twentyseventeen-style-css" href=/wordpress/wp-content/themes/twentyseventeen/style.css>```

Cesar David Ramírez Dimaté

student•

Que raro, no deberías tener que hacer eso.

Edward Hurtado Hurtado

student•

Si no les sale el avioncito, hagan ctrl+shift+r para vaciar cache y recargar, en chrome y opera

Jhosep Pérez

student•

He estado días buscando porque no surtía efectos los cambios en el css. Era por eso T.T "Nos has salvado, estamos agradecidos".

Sebastian Meneses

student•

Gracias esto me funciono dos años después XD

Guido Arce

student•

Estuve investigando un poco y al parecer, cuando añadimos una categoría a un artículo, automáticamente se agrega la clase category-[CATEGORY_NAME] y no hace falta utilizar la función “post_class” que según la documentación de WordPress, se utiliza para agregar clases adicionales de esta manera
<?php post_class(’[CLASS_NAME_TO_ADD]’) ?>

Jhon Carlos Colorado Angulo

student•

Tienes razón, ya hice la prueba y me funcionó. Gracias.

Irma Davila

student•

Hola, estuve pataleando un poquito para ver el avión al dar clic en el artículo. Pero se me resolvió borrando la clase viajes y dejando solamente category-viajes:

/* CUSTOM */

.category-viajes {
	background: url('http://image.flaticon.com/icons/png/128/59/59919.png') no-repeat top right;
}

Guido Choque

student•

Muchas Gracias, me ayudo muchísimo.

Jairo Merea Dueñas

student•

Me ayudo, luego quise ver porque no me salía como lo explicó el profesor y era porque había puesto el nombre en otro lado y no en el class; en mi caso lo estoy probando con la categoría testing

!-- #Content -->
<div id="Content">
	<div class="content_wrapper testing">

		<!-- .sections_group -->
		<div class="sections_group">```

Braulio Toledo

student•

Si el avión no aparece solo debes presionar ctrl + shif + r asi actualizas y borras la memoria caché.

Daniel Forero

student•

No puedo creer, que sólo era esto! Me salvaste! gracias.

Linda Luna

student•

A mi no me funcionó. Sigue sin aparecer el avión.

Gabriel Astudillo Roca

student•

Si el avion no carga y aparentemente todo esta correcto, el problema esta en la cache del navegador. (Ctrl+F5 Chrome y FireFox)

Daniel González

student•

Todo muy bien, pero se debió crear un child theme y modificar esté en lugar del tema original.

Yomar Esteban Miranda Sarmiento

student•

Para crear una plantilla especifica para una categoria es necesario realizarlo de la siguiente manera:
category-nombreCategoria.php

Marcelo Montagné

student•

Si no ven el cambio en el estilo vacíen la caché

Brayan Jeshua

student•

Para Añadir estilos a una categoría en específico, se puede crear un archivo en el tema category-{nombredelacategoria}.php y hacer el codigo modificando extructura, diseño o lo que sea. En single.php el div con id=”primary” se le puede añadir un <?php post\_class() ?> para ver datos interesantes de cualquier articulo al inspeccionar

Yone Moreno Jiménez

student•

Crear plantillas. Para ello creamos un articulo. Nos creamos un category.php. Podemos hacer que la categoria solo funcione con la nueva categoria viajes. Creamos category-viajes.php. Creamos una clase viajes y le añadimos una imagen de fondo desde css.

Usamos la función post_class() para obtener informacion extra del articulo. Además le añadimos la imagen de avión a la clase category-viajes para que en la lista de artículos se vea el avión.

Sebastian Meneses

student•

¿Alguien que me diga si los vídeos se le están cortando antes de terminar o sera una falla en mi cuenta?

Esteban Casallas

student•

Al principio me pasaba lo mismo, pero cambiando el servidor del vídeo se soluciono !

Massimo Di Berardino

student•

Hola Sebastian, ¿probaste cambiando el server del video?

Julio Enrique Chávez García

student•

que puedo hacer si no leee la imagen cuando la pongo en el style.css

Roger Carlos Ariel Alba

student•

Hola, Julio

¿No te carga la imagen? o ¿no aplica el estilo a la imagen? En el primer caso asegurarte de que usas la ruta correcta. En el segundo, puedes agregar un ID o clase especifico para asegurarte de que llegas a la imagen.

Saludos

Jorge Cruz Perez

student•

Checa el cache, precisamente revisando otros comentarios estaba las respuesta, saludos :)

Jhosep Pérez

student•

A alguien mas le pasa que no se le aplican los estilos? No importa lo que haga no cambia nada. Y estaba siguiendo un curso de wordpress de otra plataforma donde tenia que hacer algo parecido y no funciono. No entiendo porque pasa.

Diego Forero

Team Platzi•

Revisa la consola del navegador para ver si esta tomando los estilos y están siendo sobreescritos por los estilos propios del tema.

Gregorio Vargas Miranda

student•

Si estas visualizando con Chrome, verifica que no sea la cache del navegador que no se refresca. Chrome te muestra rápido las cosas, pero es porque obtiene lo minimo posible, lo demás se saca de la cache.

PEDRO

student•

A partir de este vídeo nació mi amor por el profe jajajajajajaja lo adiaba hasta que llegue a este video jejejejejej gracias profe.

Pablo Díaz

student•

Un aporte: tuve problemas para poner al avión, lo solucioné borrando el historial y el caché, luego recargas la página y listo. No tengo idea por qué pero funciona xd

Modificar un tema de forma correcta: Cómo crear plantillas específicas

Introducción al curso

¡Actualizamos este curso!

¿Qué podemos hacer con WordPress?

¿Debería crear un sitio desde cero o usar un template de WordPress?

¿Por qué aprender WordPress?

Introducción a WordPress y WordPress.org

Conociendo WordPress

WordPress como un blog

WordPress como un CMS

WordPress como un framework

WordPress en el futuro

Repasando WordPress

¿Qué debes hacer antes de comenzar?

Instalar WordPress en un hosting con Softaculous

Instalar WordPress en un servidor con acceso SSH

Instalar WordPress en un servidor con acceso FTP

Instalar WordPress en un servidor con WP-cli

Instalar WordPress en local

Proyecto - Instalación Inicial

Temas en WordPress

Instalar un tema en WordPress

Modificar un tema de forma correcta: La estructura de archivos

Modificar un tema de forma correcta: Cómo crear plantillas específicas

Modificar un tema de forma correcta: Los template parts

Modificar un tema de forma correcta: El archivo functions.php

Utilizar temas hijos y aplicación al proyecto

Gestión de usuarios

Gestión de usuarios básica

Restricción de contenidos

Creación de nuevos roles de usuario - aplicado al proyecto

Maquetadores visuales

Usando Divi como maquetador visual

Aplicar Visual composer en maquetación visual

Usar Gutenberg como maquetador visual

Utilizar WordPress como CMS o como Framework

Custom Post Types - CPT de viajes adaptable a nuestro proyecto

Custom Fields

Formatear tu CPT para mostrarlo en Frontend

Aprender a utilizar la REST API de WordPress

Creación de plugins en WordPress

Plugins básicos que deberíamos utilizar

Jetpack

ManageWP

Plugins de caché

Cookie Law Info

Really Simple SSL

Yoast SEO

Updraft Plus

Cómo crear un plugin

Proyecto - darle diseño y contenido a nuestro sitio

Proyecto - despublicar entradas con Post Expirator y cierre

Contenido Bonus

Seguridad en WordPress

Convierte tu instalación local en un entorno de testing con distintas versiones de PHP

WooCommerce

Instalación de WooCommerce

Configuración básica de WooCommerce

Configuraciones de compra y correos electrónicos en WooCommerce

Crear productos para tienda virtual

Proceso de venta y Pasarelas de Pago

Productos variables

¿Qué es Sensei?