WordPress práctico: Creación básica de temas

Estructura de los templates asociados al blog

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Para empezar vamos a trabajar con la plantilla single.php, que sirve para definir la estructura HTML de los contenidos salidos del blog. Trabajar con este archivo supone aplicar cambios sobre muchas partes del sitio a la vez, con lo cual es un buen sitio donde empezar a dar aspecto a los contenidos.

Transcripción

Trabajaremos en este capitulo con la parte más importante de WordPress, que es el blog. Vamos a ver cómo formatear las entradas del blog. Tenemos páginas, tenemos varias entradas de blog distintas, podemos entrar en cualquiera de ellas y podemos ir comparando un poco los distintos contenidos que tenemos dentro. Aquí tenemos toda esa página, en la cual podemos ver que tiene, por un lado, un título, información sobre ese post, luego debajo tenemos lo que es el texto de ese post que va a ir hasta la parte del final y a partir de ese momento, además, pues se van a añadir una serie de enlaces de menús con categorías, etc., etc., etc. Vamos a ver cómo se traduce esto en la plantilla que se ocupa de generar los contenidos de los posts. Esa plantilla va a ser la single.php. Voy a abrirla, y vamos a estudiar un poco cómo está montada. De entrada se va a cargar el header. El get header, es el que se ocupa de ello. Ese header que es el que hemos definido, el que hemos editado previamente, header.php. A partir de ese momento empieza a generar esos contenidos y me está creando un div con identificador primary que es el content area, dentro de aquí es donde vamos a añadir todos esos contenidos. De hecho, después de añadir todo lo que es el contenido en este content area, añadirá, por un lado, el sidebar utilizando el método get sidebar y, por otro lado, el footer, utilizando get footer. Así que a mí lo que me interesa está todo aquí dentro. Todo en este div, ¿y qué es lo que tenemos dentro de este div? Bueno, pues yendo por partes, tendremos, sobre todo, que es lo más importante: un loop. Aquí podemos verlo, un loop que se está ejecutando y que va a servir para repetir una y otra vez los contenidos que tenga que cargar. En este caso, lo que está haciendo es, mientras encuentre diferentes posts, quiero que me pinte ese post. Después de hacer todo ese bucle y que me pinte ese post. El siguiente paso es añadir el contenido del post. En segundo lugar, la navegación para ese post. Y, en tercer lugar, todos los comentarios. Esto lo hace también de una manera especial. Está utilizando una condicional y me está preguntando si hay comentarios abiertos con comments open, me va a preguntar si eso es así, y luego me va a recuperar el número de comentarios, en caso de que haya, y solo en caso de que haya, entonces, lo que va a hacer va a ser ejecutar comments template que me va a devolver la plantilla que pinta esos comentarios. Es importante pensar en que esta función comments open, funciona aquí dentro pero no funcionaría, por ejemplo, aquí fuera en esta parte del código. Eso es porque, en realidad, todos estos métodos the post navegation van a funcionar siempre que se haya definido este the post, esa función the post. O sea, solamente van a funcionar dentro de este while. Explicado de otra manera, cuando yo tengo un bucle while que está generando una función the post ese the post es el que va a añadir posibilidades de pintar elementos que van a ser por un lado el post navigation o los comentarios, este comments template. Hay otra cosa, también, aquí importante y es que para los contents no ha estado utilizando un content por defecto, sino que está utilizando el método get template part que va a servir para buscar un template dentro de la ruta que se especifica después. Que en este caso es en template parts. Voy a buscarlo... en template parts, aquí lo tengo, y dentro de el content. Y no solamente ese content, en realidad, tengo varios contents distintos. Tengo varias plantillas, content, content search, content páge o content none. Cada una de ellas va a servir para definir cómo se tiene que pintar un tipo concreto de contenidos. Y eso es lo que se está añadiendo con este get post format. Aquí estoy recuperando si es none, si es page, si es search, etc. Esta es otra función que tiene sentido siempre que esté dentro del loop. Este bucle que se va a utilizar para pintar todos los contenidos, se utiliza muchísimo; en WordPress, se habla muchísimo de él y se identifica siempre con eso, con el nombre del loop. Bien, pues, si ahora abro este content aquí dentro vemos que tenemos una estructura más allá. Tengo por un lado, la estructura que envuelve todos estos contenidos, que es la de article. O sea, aquí tengo artículos, y dentro de cada uno de esos artículos estoy añadiendo, primero una etiqueta header y después de una etiqueta header, estoy añadiendo lo que es el contenido de esa entrada y por último, además, un footer. Así que, cuando añadamos estilos relacionados con el header y con el footer tenemos que tener mucho cuidado porque esas etiquetas se están utilizando en más partes. Así que habrá que definir bien qué footer y qué header es el que quiero modificar utilizando esos estilos. Por otro lado, también estoy utilizando post class, the ID, the title, una serie de métodos que tienen también sentido dentro de este content, ya que ese content de esa plantilla está siendo invocada dentro del loop. Si la pusiese fuera, también perdería su significado. Así que vamos a necesitar ese loop para poder recuperar el identificador del post. De hecho, aquí se puede ver que así me va a generar artículos que van a tener un identificador, o sea, un atributo ID que va a ser post, y luego el identificador. Por otro lado, va a añadir todas las clases asociadas a ese artículo en concreto. Estas clases sirven para distinguir, por ejemplo, posts de páginas o de categorías. Luego por otro lado, vamos a ver que, en caso, de que sea solamente uno, me permite añadir el título como un h1 pero en caso de que estemos trabajando en páginas que no sean únicas, pues, entonces, me va a añadir el título pero con un h2, en vez de con un h1. Así de esa manera, voy a tener un encabezamiento distinto cuando estoy en la página de detalle de ese post a cuando estoy en la página principal. Este será un h1 y, en cambio, en el bucle que se va a generar, este va a ser un h2. Esa va a ser básicamente la diferencia. Continúo moviéndome más abajo, tenemos más información, por ejemplo, el permalink. O sea, el link que sirve para hacer clic en el rótulo irme a la página de detalle. Aquí vemos un ejemplo más de cómo, efectivamente, esta es la forma de construir los encabezamientos, los títulos para los posts dentro de páginas en las que sale un listado de posts y luego, bueno pues, por último estoy comparando para que en caso de que el tipo de post sea un post, pues que además añada los metadatos relacionados con ese post. En la parte del entry component, aquí es donde realmente se va a pintar el post y eso se va a recuperar con el método the content. Eso me recupera todo el contenido. Luego después los enlaces de paginación, o sea, antes, después y demás. que se recuperan con este wp link page... y, por último, recuperaríamos el footer para este contenido. Como vemos, es una estructura compleja pero entendiéndola bien vamos a poder hacer casi cualquier cosa sin necesidad de grandes complicaciones. Lo verdaderamente importante aquí es recordar varias cosas: la primera, que para añadir posts tenemos el loop, este loop se utiliza constantemente pero constantemente en todas las plantillas. En segundo lugar, que dentro de ese loop en realidad podemos pintar una página o podemos pintar varias. La diferencia entre una cosa y otra será en la pregunta de si es uno o si es varios. O sea, es is single. Y en caso de que sea uno podemos ver que bueno pues lo que hace es añadir un h1, o sea, estamos especificando qué quiero que me pinte para cuando es un post de un solo elemento o cuando es un post de varios en el que se añaden todos esos enlaces y demás. Y luego también, muy importante el que para añadir el contenido se utiliza este método the content. Luego el resto de elementos ya son funciones para añadir links y demás que podemos utilizar o no, incluso podemos tener esta estructura de header o de article o podemos saltárnosla.

WordPress práctico: Creación básica de temas

Aprende a dar un nuevo aspecto a tu página de WordPress, creando un tema desde cero usando como base las plantillas Underscore y dándole aspecto a nuestro gusto.

4:16 horas (48 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:11/08/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.