Cómo Hacer Una Página

Hacer una Web Profesional con Wordpress

  • Mi Cuenta
  • Contacto
  • Curso GRATUITO de WordPress
  • Suscribirse (10€/mes)
Estás aquí: Inicio / CSS / Crear filtros de post con pestañas en WordPress (Vídeo)

Crear filtros de post con pestañas en WordPress (Vídeo)

junio 27, 2017 Por Oscar martin 7 comentarios

Hola chicos,

Un alumno de la zona premium me ha preguntado como podíamos hacer una página de recursos en la que pudiéramos filtrar por tipo de recurso.

Aquí tienes el tutorial en vídeo:

Suscríbete a mi canal:  

El resultado final será algo como la siguiente pantalla:
filtros tabs recursos

Para hacerlo he usado 3 elementos: 2 plugins y css personalizado.

Los plugins que vamos a necesitar son:

  • Tabby Responsive Tabs
  • List category posts

El plugin Tabby Responsive Tabs nos va a permitir añadir pestañas de forma sencilla en nuestra página web. Tan sólo tendremos que añadir unos shortcodes para añadir las pestañas.

El plugin List category posts nos va a permitir añadir en cada una de las pestañas el contenido de una determinada categoría.

Es decir al pulsar en cada pestaña van a aparecer los post de una categoría en concreto.

Para que no tenga la típica forma de pestaña y el resultado sea la imagen de arriba lo que vamos a hacer es modificar las hojas de estilo.

Se puede mejorar el CSS que yo he usado es el siguiente. Tendréis que añadirlo en Apariencia –> Personalizar –> Css adicional

body.page-id-533 {
    background-color: #f7f7f7;
}

.tabcontent ul.lcp_catlist li{
float: left;
width:32%;
margin:5px;
list-style-type: none;
font-size:15px;
background:white;
padding:10px;
}

.responsive-tabs .responsive-tabs__panel {
border:0px !important;
padding: 0px !important;
background: #f7f7f7 !important;
}

.responsive-tabs .responsive-tabs__list__item {
color: grey !important;
border: 1px solid #cacaca !important;
font-size:14px!important;
padding:10px 30px !important;
margin-bottom:20px !important;
}

.responsive-tabs .responsive-tabs__list__item--active{
color: #f4633e !important;
border: 1px solid #f4633e !important;
}

.responsive-tabs ul.responsive-tabs__list{
margin:0px !important;
}

.entry-content ol, .entry-content ul {
  margin-left: 0px;
}

.button{
border-radius: 47px;
background: #f4633e;
font-size: 12px;
text-decoration:none;
}

.page-id-533  h4{
color:#f4633e;
font-weight: normal;
}

Ahora tan sólo tenemos que crear una página y añadir dentro los shortcodes que vamos a usar para que aparezca el contenido:

En mi caso ha sido el siguiente:

[tabby title="TODO"]

    [tabby title="DOMINIO"]
    • Añadir Filtros en Cualquier Tipo de Contenido en el Backend de WordPress

      WordPress es un gestor de contenidos muy completo, pero lo mejor de WordPress no es todo lo que trae de serie, sino que puedes seguir ampliándolo con Plugins o si tienes conocimientos programando.

      Y esto amigos es la grandeza del Software Libre 🙂

      El caso es que ...

    • Nuevo Curso de Gravity Forms

      Curso Gravity Forms

      Hola Chicos,

      Hoy os traigo un curso que muchos de vosotros me habéis pedido. Un curso de Gravity Forms, el plugin para crear formularios por excelencia, mi amado Gravity Forms.

      Gravity forms es el plugin más completo ...

    • Cambiar el Logotipo de WordPress en la Pantalla de Login

      Hola chicos qué tal!!!

      En este tutorial vamos a ver cómo podemos cambiar el logotipo que aparece en la página de login en la zona de administración de WordPress. Cambiar el logotipo que viene por defecto por el de tu empresa es una buena idea para hacer marca 🙂

      Aquí tienes el tutorial en vídeo:

      Suscríbete a mi canal:  

      ...
    • Crear carpetas para administrar Páginas y Entradas mucho más fácil en WordPress

      Cuando tenemos muchas Páginas y Entradas en WordPress se puede hacer complicado administrarlas.

      Veremos que fácil es solucionarlo gracias al plugin gratuito Wicked Folders

      Aquí tienes el tutorial en vídeo:

      Suscríbete a mi canal:  

      ...
    • Tutorial Admin Columns Pro

      Cuando estamos administrando WordPress nos pasamos media vida en la página de todas las entradas. Y cuando queremos estamos haciendo ciertas tareas repetitivas que sólo se pueden hacer editando el artículo nos preguntamos si podemos hacer todas esas tareas sin salir del listado de todas las entradas. Pues si, ...

    • Programar un Widget por Fechas para que sólo aparezca en la fecha elegida

      Hola Chicos,

      En este tutorial vamos a hacer visible un plugin sólo en una determinada fecha.

      ¿Para que querríamos hacer esto? Imaginar que queréis añadir las farmacias de guardia de cada día y que sólo aparezca la del día en cuestión. Si somos capaces que aparezca de forma automática esta información puede hacernos la vida mucho más ...

    • Cómo quitar las etiquetas de los campos en Gravity Forms

      Hola Chicos,

      Hoy os traigo un tutorial muy corto pero muy útil si estás usando el Gravity forms para crear tus formularios.

      Si has intentado quitar las etiquetas de los campos, habrás visto que no viene esa opción.

      En este vídeo ves como lo puedes hacer:

      Suscríbete a mi ...

    • Crear filtros de post con pestañas en WordPress (Vídeo)

      Hola chicos,

      Un alumno de la zona premium me ha preguntado como podíamos hacer una página de recursos en la que pudiéramos filtrar por tipo de recurso.

      Aquí tienes el tutorial en vídeo:

      Suscríbete a mi canal:  

    Carrito

    Categorías

    Contenido Premium

    ¿Quieres Aprender WordPress y Ganar dinero? Cópiame

    ¿Necesitas Ayuda?

    • Contacto
    • Blog

    Más Información

    • Condiciones de Uso
    • Condiciones generales de venta
    • Aviso Legal
    • Pólitica de Privacidad
    • Política de cookies

    Buscador

    Funciono con el Theme Genesis · Acceder

    Este sitio web instalará en tu navegador cookies analíticas y publicitarias propias y de terceros si continúas navegando.
    Encontrará más información en nuestra Política de Cookies...Configuración de CookiesAceptar
    Privacy & Cookies Policy

    Privacy Overview

    This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
    Necessary
    Siempre activado
    Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
    Básicamente el blog no funcionará bien si no están activas.
    Estas cookies son:
    - Comprobación de inicio de sesión.
    - Cookies de seguridad imprescindibles.
    - Saber si ya has aprobado/rechazado las cookies.
    Non-necessary
    Esta web utiliza las siguientes cookies adicionales:
    - Mautic: Recordar si ya estás suscrito al boletín de noticias.
    - Google Analytics: un servicio de analítica web desarrollada por Google, que permite la medición y análisis de la navegación en las páginas web.
    GUARDAR Y ACEPTAR