Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

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

Paginación de los post con WordPress

¡Prueba gratis durante 10 días

nuestros 1289 cursos !

Prueba gratis Mostrar modalidades de suscripción
Para terminar, vamos a trabajar sobre la paginación de los post. Esta consiste en los botones que sirven para moverse entre los distintos post, y también entre las páginas de resultados cuando estos son más que los que se admiten en una sola página.

Transcripción

En este vídeo vamos a hacer un ejemplo de cómo podemos hacer modificaciones basándonos en funciones de WordPress y, aplicando de manera creativa etiquetas, veremos cómo podemos conseguir efectos muy interesantes. Para hacer esto es ideal trabajar sobre el menú de navegación de los posts, o sea, para ir al siguiente y al anterior. Podemos ver que el sistema de navegación que viene con Underscore bueno, pues es prácticamente nulo. Vamos a ver cómo podemos formatear esto. Me voy a ir al código y dentro del código, bueno, necesito saber cómo se ha creado ese sistema de navegación. Voy a irme a la plantilla single, que es la plantilla que se está utilizando para mostrar esa página y voy a buscar esa navegación dentro de este single. Y aquí tengo una función que se llama the_post_navigation. Cualquier función de este estilo que encontremos, podemos buscar una referencia sobre ella. Podemos irnos al navegador y, dentro de él, hacer una búsqueda sobre ese the_post_navigation y aquí, bueno, pues me dice que podemos utilizar un array, que dentro de él, bueno, pues aquí podemos ver que hay una serie de argumentos, incluso tenemos un ejemplo de uso. Esto es muy práctico, porque ahora yo puedo copiar ese ejemplo de uso y aplicarlo donde quiera. La forma de cambiar esto debería ser utilizando una función aparte, quiero decir, podría hacer las modificaciones pertinentes aquí mismo, directamente, pero es mucho más elegante aplicar esas modificaciones en una función para que si luego quiero eso quiero utilizarlo en algún otro template, lo pueda utilizar y no tenga que copiar y repetir ese código. Así que mi siguiente paso va a ser irme a la carpeta inc, y dentro de esa carpeta inc, en template-tags, voy a añadir al final una función. Una función que se llame mitema, guión bajo, y voy a pegar el mismo nombre que tenía. En realidad, el nombre que le ponga no tiene importancia lo que pasa es que, bueno, es una buena práctica utilizar las convenciones de WordPress y, en este caso, pues pone el nombre del tema, guión bajo, y luego lo que vaya a añadir. Más que nada, para que el nombre de esta función luego no pueda pisar a la función raíz que haya en otra parte de la aplicación. Por eso, siempre es aconsejable poner este mitema adelante para que no haya problemas. Bueno, pues el siguiente paso sería sustituir esto que pone aquí por esto, quiero decir, hacer una llamada a esta función desde el template donde quiero realmente que se haga, así que guardaré. Ahora ya estoy llamando aquí dentro, y desde aquí dentro puedo llamar a la función directamente y, en mi caso, llamarla con parámetros. Esos parámetros me los podría improvisar, pero es mucho más cómodo también venirme a la documentación copiarme el ejemplo de uso, volverme de nuevo al código y hacer los cambios dentro de él. Para simplificarlo, voy a eliminar todo el resto de contenidos y solamente voy a elegir cuál es el texto que tiene que aparecer para el previo y para el siguiente. De hecho, en vez de "prev chapter", bueno, pues voy a poner aquí "anterior" y, en "next chapter", voy a poner "siguiente". Para que esto sea más completo todavía, incluso puedo pues aplicarle un elemento que sirva de envolvente y, así, puedo añadirle una etiqueta span al principio y una etiqueta span al final. Esto podría haberlo hecho aplicando cualquier otro elemento, un div o cualquiera que me apeteciese cualquier otra etiqueta, pero me viene bien utilizar este span. Voy a sustituir las clases apropiadas, post-prev y post-next-container, y voy a guardarlo. Lo guardo. Como estoy haciendo modificaciones sobre archivos .php, tendré que recargar la página, y aquí vemos ya muestra "Anterior" y "Siguiente", lo que pasa es que todavía tengo que hacer mucho más para que esto quede un poco elegante. Voy a inspeccionar este elemento y me voy a buscar cómo se crea. Aquí tengo una clase nav-next y, de hecho, un poco más arriba tengo la clase nav-previous, o sea, que puedo utilizar esas clases para formatear el primero y el segundo, y, luego, dentro vemos que tenemos este span con la clase post-next-container que he añadido. Para resumir, tenemos un montón de posibilidades de formateo gracias a esta estructura que he creado. Voy a mantener este Inspeccionar, voy a hacerlo un poco más pequeño. Voy a abrir el editor de código y lo voy a poner también un poco más pequeño para ver ahora sobre la marcha, los cambios que voy a ir haciendo. Esos cambios los tendré que hacer dentro de archivo sass. Hay diferentes sitios donde podría hacerlos. En mi caso, pues me parece que lo más lógico es dentro de navigation, en menus. Aquí dentro esto, bueno, es una decisión completamente subjetiva, pero a mí personalmente me parece que como esto es un menú lo suyo es irme al final de esos menús y crear, bueno, el primer selector que voy a utlizar. Ese selector es el selector nav.links. El selector nav-links, con k que envuelve tanto al nav-previous como al nav-next. Dentro de ese nav-links, ahora puedo añadir los distintos selectores para las distintas clases. Voy a seleccionar uno de estos elementos. Esto es para el div contenedor, y dentro del logo voy a tener otro span. Este div contenedor quiero que esté separado un poco de los laterales. Y voy a hacer que todos estos, que tanto este como el nav-previous, pues tenga un aspecto un poco especial, así que, de entrada, le estoy diciendo que tenga margen a la izquierda y a la derecha para que aparezcan un poco separados. Aquí vemos cómo aparecen ya un poco separados. Y, luego, por otro lado, a ambos les voy a aplicar estilos para que tengan un aspecto de caja, un aspecto más de botón. Aquí lo podemos ver. ¿Qué hice? Bueno, pues he añadido un poco de padding; he hecho que tenga border para que así aparezca una caja alrededor; ese border con el border-color, propio del skin que le estoy aplicando, he hecho que tengan un ancho de 200 píxeles, pero que en caso de que la ventana sea más pequeña y no quepan, pues que entonces, que tengan un ancho máximo del 50 % y así llegarán a estar pegados, pero no llegarán a tocarse de hecho aquí igual debería de poner un 40 %, y luego les he aplicado un tamaño de letra un poco más pequeño para que quede mejor. Puedo aplicarle más clases. Por ejemplo, puedo hacer modificaciones sobre esos span que he añadido, que no los he añadido sin pensarlo, los he añadido porque también me interesa el que el texto que aparece aquí dentro tenga solamente una línea, y aparezca con unos puntos para indicar que hay más texto, así los dos tendrán el mismo alto y será mucho más bonito. Así que le estoy pidiendo que tenga a white-space:nowrap, que tenga texto over-flow: ellipsis, y con eso consigo que aparezcan los dos puntos, pero como es un span, además le tengo que decir que tenga un display: block y que tenga un overflow: hidden para que aparezcan ocultos los elementos que queden fuera. Le doy un ancho del 100 % para que ese span vaya de lado a lado y, cuando aplique esos estilos, vemos que ya lo tengo colocado sobre una sola línea. En realidad, me apetece más que tenga dos líneas. Esto lo voy a poder hacer dentro del template-tags, o sea, aquí en realidad puedo complicar el código de estos tags todo lo que quiera. Entonces, por ejemplo, voy a ampliar ya la ventana. Bien, pues puedo hacer que este anterior... ...esté dentro de una etiqueta strong... ...y, además, puedo hacer que haya un break que separe lo que es el siguiente o el anterior del siguiente elemento. Copio de nuevo, pego, guardo; tendré ahora que recargar el navegador; y ya tengo formateados perfectamente estos botones. Como podemos ver, es original y es bastante atractivo como queda.

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.