Descubre cómo insertar los proyectos con el formato que se aplica en el S Theme, debajo de los productos en la home del L Theme mediante snippets.
Una de las ventajas de pertenecer al club de Código Genesis es que puedes dejar tus sugerencias para futuros tutoriales.
Por ejemplo, Carlos, uno de nuestros suscriptores, me dejó este comentario:
¡Hola! te traigo algunas sugerencias:
1.- Cambiar los productos del L theme por CPT, Páginas o entradas (pudiendo dejarlo como estan los productos o como el portfolio del S theme a ser posible)
2. – < … >Un saludo!
Dicho y hecho. 😉
En este caso voy a contestar a la primera pregunta: cómo mostrar los proyectos en la home del L Theme tal y como se visualiza el porfolio en la página principal del S Theme.
Este es el resultado final:
¿Vamos a por ello?
Pasos para agregar los proyectos modelo S Theme a la home del L Theme
1. Añade los proyectos a la home
Modifica el fichero front-page.php ubicado en la carpeta raíz del L Theme.
En este caso, te conviene dejar la sección de productos e introducir una nueva para los proyectos insertando el siguiente código:
Para ver este código y los otros 1953 snippets de esta web,
identifícate o suscríbete aquí.
Con este cambio, consigues que los proyectos se muestren bajo los productos en la home del L Theme.
Concretamente, este es el fragmento en el que indicas qué entradas quieres mostrar:
Para ver este código y los otros 1953 snippets de esta web,
identifícate o suscríbete aquí.
En este caso, los proyectos creados por AsiThemes son posts de la categoría con ID 10 (puedes descubrir cómo localizar la ID en este tutorial).
¿Prefieres enseñar un Custom Post Type (porfolio, eventos, podcasts…) en vez de un proyecto? Solo tienes que sustituir esa línea.
Si lo haces, recuerda cambiar el texto del botón que lleva a la página de archivos del CPT («Ver todos los proyectos») por uno personalizado para el tuyo.
2. Personaliza el CSS de los proyectos
Con el código superior consigues que aparezcan los proyectos en la home, pero te falta asignarles los estilos para que se vean como en el S Theme.
Para ello añade este bloque al final de style.css:
Para ver este código y los otros 1953 snippets de esta web,
identifícate o suscríbete aquí.
Ahora sí.
Al introducir estas líneas de CSS tus web presentará los proyectos tal y como lo hace la home del S Theme.
3. Ajusta el número de entradas
Si no aplicas ningún cambio, el número de entradas de proyectos será por defecto el mismo que elijas para los productos desde el personalizador.
¿Quieres escoger otra cantidad? Modifica la línea:
'posts_per_page' => $max_posts,por:
'posts_per_page' => 3,Y acuérdate de reemplazar el 3 por el número que desees. 😉
Conclusiones
Si te gusta cómo muestra el L Theme los productos, pero prefieres el diseño de porfolio del S Theme, ahora tienes la opción de combinar ambas estructuras en la home del L Theme.
Aunque está creado para una plantilla concreta, puedes usar este snippet de guía para modificar otros temas de AsiThemes.
¿Quieres que cree este tutorial para otro child theme? Dímelo en los comentarios para que prepare uno a tu medida.
Ventajas de ser suscriptor. 😉
