A día de hoy los sitios web creados con WordPress suponen casi el 40% a nivel mundial, esto demuestra que conocer esta herramienta es de vital importancia si queremos estar al día en cuanto a desarrollo web se refiere, es por eso que hoy usaremos el lenguaje PHP para personalizar funcionalidades en WordPress.
WordPress nos ofrece una amplia gama de recursos los cuales añadir a nuestro sitio web desde widgets que vienen preinstalados con los temas hasta un sin fin de plugins que hacen de nuestro sitio una web llena de vida y totalmente diferente al resto.
Pero sin embargo, a veces toda esta amplia gama puede no satisfacer nuestra necesidad de que este pequeño espacio que Internet tenga algo que se diferencie de los demás y lo haga único.
Es por ello que hoy te traigo PHP un lenguaje de programación del lado del servidor, muy parecido por su sintaxis a otros lenguajes como JavaScript, con la capacidad de dar ese ajuste necesario para que consigamos ese toque de exclusividad dentro de Internet.
En esta entrada veremos como crear unos botones con el nombre de las categorías del blog, que al pulsarlos hará que se despliegen todas las entradas disponibles que contenga esa categoría mejorando la experiencia de usuario de una manera fácil e interactiva.
Instalando el plugin Content views
Vamos a apoyarnos en un plugin externo a nuestra web para poder realizar este proyecto, Content views es un plugin que nos permite modificar la manera en la que se ven las entradas en la página de inicio de nuestro blog. Aunque este plugin es de pago, usaremos la versión gratuita que será más que suficiente para nosotros.
A continuación te dejo en el enlace el sitio oficial del plugin para que puedas instalarlo por ti mismo: https://wordpress.org/plugins/content-views-query-and-display-post-page/
Una vez instalado y activado nos iremos a la pestaña que se nos generará en nuesta barra lateral del área de administración y seleccionaremos ADD NEW.
Aquí configuraremos como queremos que se vean nuestras entradas, en mi caso he creado una vista con cada categoría de mi blog de esta manera:
Ahora es muy importante que copiemos los Shortcodes que se han generado ya que serán necesarios en el futuro.
Modificando nuestra vista principal con PHP
Una vez hayamos terminado de configurar todas nuestras vistas en función del criterio que deseemos es hora de añadirlo a nuestra página pricipal.
Para ello vamos a Apariencia ->Editor de archivos de tema y hacemos click en el archivo index.php.
Este archivo contiene nuestra vista principal cuando buscamos la url de nuestra web y como puedes averiguar podemos configurarlo a nuestro gusto gracias al lenguaje PHP.
PHP para personalizar funcionalidades en WordPress.
Primero crearemos una lista con el nombre de todas las categorías que tenemos en nuestro blog, en mi caso es:
$lista_categorías=["Arduino","Python","Industria 4.0","Electrónica"];A continuación y con la ayuda del bucle ForEach creamos los botones iterando la lista:
foreach($lista_categorías as $categoría){
echo '<button class="category-button" data-categoria="'.$categoría.'">'.$categoría .'</button>';
}Ahora crearemos unos bloques div que no se verán en primera instancia en el navegador, aquí pegaremos los shortcode de las vistas antes creadas.
<!-- Contenedores para los shortcodes de cada categoría (ocultos por defecto) -->
<div id="contenido-categorias" style="margin-top:2rem;">
<div id="Arduino" class="category-content" style="display:none;"><?php echo do_shortcode("[shortcode_1]"); ?></div>
<div id="Python" class="category-content" style="display:none;"><?php echo do_shortcode("[shortcode_2]"); ?></div>
<div id="Industria 4.0" class="category-content" style="display:none;"><?php echo do_shortcode("[shortcode_3]"); ?></div>
<div id="Electrónica" class="category-content" style="display:none;"><?php echo do_shortcode("[shortcode_4]"); ?></div>
</div>Seguidamente, nos ayudamos de JavaScript para modificar el DOM de la web y hacer que se muestren las entradas seleccionadas por categorías:
<script>
document.addEventListener('DOMContentLoaded', function() {
const buttons = document.querySelectorAll('.category-button');
buttons.forEach(button => {
button.addEventListener('click', function() {
const categoria = this.getAttribute('data-categoria');
document.querySelectorAll('.category-content').forEach(content => {
content.style.display = 'none';
});
document.getElementById(categoria).style.display = 'block';
});
});
});
</script>Por último y para que el diseño nos quede responsive y pueda verse bien independientemente del tamaño de la pantalla, añadimos algo de CSS:
<style>
@media (max-width: 550px) {
.botones {
display: flex;
flex-wrap: wrap; /* Permite que los botones se envuelvan en varias filas */
justify-content: space-between; /* Espacio entre los botones */
}
.botones button {
width: 48%; /* Ajusta el ancho de los botones para que quepan dos por fila */
margin-bottom: 2rem; /* Espacio entre las filas */
}
}
</style>Guardamos los cambios y listo ya tendremos nuestra página de inicio totalmente dinámica. A continuación te dejo un vídeo donde se explica esto de una manera más visual.
Hasta aquí la entrada de hoy ¿Qué te ha parecido? Si te gusta este tipo de contenido déjamelo saber en los comentarios, esto me ayudará a crear más, si quieres ver como me ha quedado puedes hacerlo en este enlace nos vemos en la siguiente entrada 😀
