Navegación web por clusters sin orbital theme

Navegación web por clusters sin orbital theme GRATIS

Seguro que has leído acerca de la importancia de la estructura silo. Pues la navegación web por clusters es la puesta en diseño. Con los cluster vas a lograr un estilo visual para tu página web que mejora y mucho la experiencia de usuario. Vas a matar dos pájaros de un tiro: mejorar tu interlinking y mejorar la experiencia de tus usuarios. Los cluster de contenidos son todo lo opuesto a la navegación clásica a la que estamos acostumbrados. Es hora de pensar fuera de la caja.

Qué es navegación por clusters

Existen varias maneras de que tus usuarios naveguen por tu web. Puedes poner unos menús de navegación muy chulos, con múltiples niveles anidados y estar muy contento contigo mismo. Eso es la navegación clásica que te encontrarás en la inmensa mayoría de las webs.

O la otra opción es que pongas en marcha la navegación por clusters. Que no es sino una serie de imágenes que ilustran las categorías y entradas de tu web. Con esto conseguimos crear cluster de contenidos que agrupan la temática de nuestra web y mejoran nuestro posicionamiento SEO.

Ventajas de los clusters de contenidos

Además de suponer una puesta en práctica inmediata de la arquitectura SILO, son de gran ayuda para el usuario. Pero sobre todo tienen una gran ventaja: son ideales para los usuarios de dispositivos móviles. Porque ese bonito y currado menú que te curraste para tu web, simplemente desaparece en el móvil. Queda oculto y, con él, todo tu trabajo de organizar la navegación de tu sitio.

  • Facilitan la navegación por tu sitio web, en oposición a la navegación web clásica de menús desplegables
  • Son mucho más fáciles de usar de cara a la experiencia de usuario.
  • Incrementan la tasa de páginas vistas por sesión
  • Las imágenes incitan al clic, los textos mucho menos

Y todo esto, por una regla muy sencilla, una imagen vale más que mil palabras.

Si has oído hablar de silos, cluster de contenidos y navegación web por clusters entonces habrás oído hablar de orbital theme. El famoso tema de Romuald Fons.

Orbital theme.

Este tema de WordPress, orbital theme, implementa de series varias características de la arquitectura SILO. Algunas de ellas son las páginas pilar y la navegación web por clusters.

Se trata de un tema de pago creado por Romuald Fons. Según nos cuenta su autor optimizado para SEO. Tema que recomienda, como no podía ser de otra manera, para su infalible método FLOTA de la famosa armada digital.

Y no me extraña, 30 webs a 99 € son muchos euros. Yo también lo recomendaría ¿tú no? El caso es que a mí, como a ti, no me sobran 99 €. Y si te sobran ya sabes, compra orbital theme sin dudarlo. Es un tema ligero y sencillo y tiene navegación web por clusters. Que a mí personalmente me gusta cómo queda.

Y cómo de lo que trata este silo es de SEO artesano, vamos a ver cómo lograr los clusters de navegación sin recurrir a orbital theme. Y sin gastar un céntimo.

Las tres maneras de lograr la navegación por clusters. Caso práctico

No solo vamos a ver cómo implementar clusters de navegación de una forma. Ni de dos. Vamos a hacerlo de tres maneras distintas. Al lío con un ejemplo práctico de cómo crear un cluster de contenidos sin tener que recurrir al theme orbital de Romuald Fons.

Usando la galería de WordPress y WP Custom Gallery Links

Esta es la manera más complicada de dar forma a nuestros cluster de contenidos. Vamos a crear un cluster de tres elementos. Supongamos que tenemos tres post que queremos destacar en nuestra web. O que queremos mostrar tres entradas relacionadas con otra que acabamos de escribir. O simplemente que hemos creado una página pilar y que queremos facilitar la navegación desde ella al resto del SILO.

La forma más fácil de montar nuestro cluster es haciendo uso de la galería de wordpress y de un plugin que se llama WP Gallery Custom Links. Esta funcionalidad viene de serie en orbital theme. Imagino que un simple copiar y pegar del código. Lo único que hace es añadir la posibilidad de poner un link a las imágenes que forman parte de una galería

La idea es que nos quede algo así:

Para ello no tenemos nada mas que añadir una galería después de añadir el plugin. WP Gallery Custom Links nos habrá añadido una nueva opción a nuestras imágenes. Esta opción no es otra que la de añadir un enlace a nuestra imágenes. Jugando con el título de cada una de las imágenes y poniendo un poco de html en él, conseguiremos el efecto deseado. Nuestras opciones de la  galería quedarían así:

cluster de contenidos custom gallery links

Navegación web por clusters con Content Views

Veamos otra manera distinta de lograr la navegación por clusters con un nuevo plugin. en este caso se trata de Content Views. El resultado que queremos lograr es este:

Como cualquier plugin de wordpress añade funcionalidades a nuestro sitio web. En este caso lo vamos a aprovechar para disponer de vistosos clusters de contenidos. Una vez instalado nos aparece en la barra derecha de nuestro WordPress. Seleccionamos add view. Añadimos las ids de los posts que queremos mostrar y elegimos la manera de mostrarlos. Los ajustes detallados los podéis ver en las siguientes capturas:

Navegación web por clusters artesanal

Ya lo sabéis, lo mío es el posicionamiento SEO artesano. Así que vamos a crear un plugin para WordPress. No, no me he vuelto loco. Y no, no tengas miedo. Te lo voy a poner a huevo, todo muy sencillo y con explicaciones detalladas. Incluso vas a poder descargar los archivos de la versión preliminar del plugin. No te voy a aburrir en la teoría de crear un plugin para wordpress ni nada por el estilo. Vamos a ir directos y al grano siguiendo con nuestro tutorial de navegación web por clusters.

Si ves cualquier página creada con orbital theme, verás que ofrece la posibilidad de crear algo como esto, que no es otra cosa que un cluster de contenidos. Esta es la apariencia del cluster en la versión para escritorio:

navegacion web por clusters orbital theme

Como puedes ver, no tiene nada que ver con los aburridos menús de la navegación clásica. Cuando pasas el ratón por encima tiene un bonito efecto. ¿A qué te entran ganas de hacer clic en las imágenes? Además es totalmente mobile friendly, puedes ver como luce en versión mobile:

navegacion web por clusters orbital theme movil

¿A qué lo quieres? Pues vamos a hacerlo. Nuestro plugin consta de dos archivos dentro de una carpeta. Un archivo php que se encargará de devolver la lista de posts que quieres destacar. Y un archivo css que será el encargado de poner todo muy chulo y apetecible para el usuario de nuestra página web. También se podría lograr el mismo efecto creando un tema hijo, pero con el sistema del plugin nos vale para muchas webs sin repetir el proceso.

Así que el contenido de los dos archivos es el siguiente:

<?php /* Plugin Name: pedropablomoral.com cluster Plugin URI: https://www.predropablomoral.com/ Description: Plugin básico de navegación web por clusters Version: 1.0 Author: pedropablomoral.com Author URI: https://www.predropablomoral.com/ License: GPL2 License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: pedropablomoral.com Domain Path: /pedropablomoral-cluster {Plugin Name} is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 2 of the License, or any later version. {Plugin Name} is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with {Plugin Name}. If not, see {License URI}. */ // Lo primero es cargar la hoja de estilos de nuestro plugin add_action('init', 'register_script'); function register_script(){ wp_register_style( 'new_style', plugins_url('/css/pedropablomoral-cluster.css', __FILE__), false, '1.0.0', 'all'); } add_action('wp_enqueue_scripts', 'enqueue_style'); function enqueue_style(){ wp_enqueue_style( 'new_style' ); } // Navegacion por cluster // Añadimos el shortcode add_shortcode ('pedropablomoral_cluster','pedropablomoral_cluster'); function pedropablomoral_cluster( $atts ){ ob_start(); $atts = shortcode_atts( array( 'id' => '', 'columnas' =>'3', ), $atts ); $ids=explode(',', $atts['id']); $args = array( 'post__in' => $ids ); $the_query = new WP_Query( $args ); echo '<div class="flex flex-fluid">'; while ($the_query -> have_posts()) : $the_query -> the_post(); echo '<article id="post-'.get_the_ID().'" class="featured-item-'.$atts['columnas'].'" > <div class="featured-wrapper"> <a href="'; echo esc_url( get_permalink() ); echo '" rel="bookmark">'; if( has_post_thumbnail() ) { the_post_thumbnail('thumbnail-featured'); } the_title( '<h3 class="entry-title">', '</h3>' ); echo '</a> </div> </article>'; endwhile; echo '</div>'; wp_reset_postdata(); return ob_get_clean(); }

 

Y el css que hace la magia, absténgase puristas, está sin depurar y hay clases repetidas, lo sé. Pero hace su trabajo, que no es otro que dotar de estilos visuales a nuestros cluster de contenidos.

.flex {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
  }
  
  .flex .right {
    margin-left: auto
  }
  
  .flex .left {
    margin-right: auto
  }
  
  .flex-fluid {
    margin-right: -1rem;
    margin-left: -1rem
  }
  
  .flex.reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
  }
  
  .featured-item {
    -ms-flex-preferred-size: 33.33333333% !important;
    flex-basis: 33.33333333% !important;
    max-width: 33.33333333% !important;
    position: relative;
  }
  
  .featured-item .featured-wrapper {
    position: relative;
    min-height: 360px
  }
  
  @media (max-width: 48rem) {
    .featured-item .featured-wrapper {
      max-height: 200px;
      min-height: 200px;
      overflow: hidden;
      padding: 1rem;
    }
  }
  
  .featured-item a {
    display: block
  }
  
  .featured-item a:after {
    content: "";
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.9)));
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.9) 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear
  }
  
  .featured-item a:hover:after {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 136, 204, 0)), to(rgba(0, 136, 204, 0.6)));
    background: linear-gradient(to bottom, rgba(0, 136, 204, 0) 0%, rgba(0, 136, 204, 0.6) 100%);
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear
  }
  
  .featured-item img {
    border: none;
    width: 100%;
    height: 100%;
    position: absolute;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%
  }
  
  .featured-item .entry-title {
    position: absolute;
    bottom: 0;
    padding: 1rem;
    margin: 0;
    color: white!important;
    z-index: 10;
    width: 100%;
    font-size: 2rem
  }
 
 
  @media (min-width: 48rem) {
    .featured-item {
      padding: 1rem;
    }
    .home .featured-item {
      margin-top: 2rem
    }
    .featured-item-2 {
      -ms-flex-preferred-size:49%;
      flex-basis:49%;
      max-width:49%;
      padding: 0.50rem;
    }
    .featured-item-3 {
      -ms-flex-preferred-size: 32%;
      flex-basis: 32%;
      max-width: 32%;
      padding: 0.333rem;
    }
    .featured-item-4 {
      -ms-flex-preferred-size: 24% !important;
      flex-basis:24% !important;
      max-width: 24% !important;
      padding: 0.25rem !important;
    }
    .home .featured-item-2 {
      margin-top: 2rem
    }
    .home .featured-item-4 {
      margin-top: 2rem
    }

  }
  @media (max-width: 48rem) {
    .featured-item-2 {
      -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
      max-width: 100%;
      padding: 0.50rem;
    }
    .featured-item-3 {
      -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
      max-width: 100%;
      padding: 0.333rem;
    }
    .featured-item-4 {
      -ms-flex-preferred-size: 100% !important;
      flex-basis:100% !important;
      max-width: 100% !important;
      padding: 0.25rem !important;
    }

  }
  
  @media (min-width: 48rem) {

  }
  
  .featured-item-1 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
    position: relative
  }
  


  
  @media (min-width: 48rem) {
    .featured-item-1 {
      -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
      max-width: 100%
    }

  }
  
  @media (min-width: 48rem) {
    .home .featured-item-1 {
      margin-top: 2rem
    }
  }
  
  [class^="featured-item-"] .precio {
    position: absolute;
    top: 0;
    padding: 1rem;
    margin: 0;
    color: #d10074;
    z-index: 10;
    width: 100%;
    font-size: 2rem;
    text-align: right;
  }
  
  .featured-item-4 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
    position: relative
  }
  
  [class^="featured-item-"] .featured-wrapper {
    position: relative;
    min-height: 360px
  }
  
  @media (max-width: 48rem) {
    [class^="featured-item-"] .featured-wrapper {
      max-height: 200px;
      min-height: 200px;
      overflow: hidden
    }
  }
  
  [class^="featured-item-"] a {
    display: block
  }
  
  [class^="featured-item-"] a:after {
    content: "";
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.9)));
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.9) 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear
  }
  
  [class^="featured-item-"] a:hover:after {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 136, 204, 0)), to(rgba(0, 136, 204, 0.6)));
    background: linear-gradient(to bottom, rgba(0, 136, 204, 0) 0%, rgba(0, 136, 204, 0.6) 100%);
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear
  }
  
  [class^="featured-item-"] img {
    border: none;
    width: 100%;
    height: 100%;
    position: absolute;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%
  }
  
  [class^="featured-item-"] .entry-title {
    position: absolute;
    bottom: 0;
    padding: 1rem;
    margin: 0;
    color: white !important;
    z-index: 10;
    width: 95%;
    font-size: 2rem
  }
  /* Fin de Navegación por clusters */

El css se ubica dentro de una carpeta llamada css. Empaquetáis el archivo y la carpeta css en un zip y lo subis a vuestro wordpress como un plugin más. Y eso es todo, el resultado después de añadir este shortcode lo puedes ver justo debajo. Cuando instales y actives mi plugin para wordpress de cluster de contenidos, solo tendrás que sustituir el ‘*’ por la letra ‘o’ para que el shortcode funcione. El siguiente ejemplo creará un cluster de navegación de entradas con las ids 748,804 y 823

[pedropabl*moral_cluster id="748,804,823"]

Si queréis que vuestro cluster de navegación web sea de páginas, tenéis que usar el siguiente shortcode, sustituyendo el “*” por una “o”

[pedropabl*moral_cluster_paginas id=”tus, ids, separadas, por, comas”]

Además de lo que trae el theme orbital, le he añadido una opción adicional. Podemos organizar nuestro cluster de navegación en las columnas que deseemos, desde 1 hasta 4. Lo que  da mucho más juego y versatilidad al plugin de navegación web por clusters. Un par de ejemplos mas de cluster de contenidos  con dos columnas y cuatro (sustituyendo el ‘*’ por la letra ‘o’):

[pedropablom*ral_cluster id="748,804,823,587" columnas="4"]
[pedropablom*ral_cluster id="748,804,823,587" columnas="2"]

Y hasta aquí hemos llegado. Hemos visto que podemos implementar la navegación web por clusters en nuestro sitio sin gastar los 99€ del orbital theme. Además, si manejamos varias páginas web, el ahorro se multiplica. Si no quieres meterte en berenjenales, te dejo el archivo zip listo para subir e instalar a tu sitio.

pedropablomoral_plugin_cluster

Te recomiendo además que te suscribas, porque voy a añadir más funcionalidades, incluidas la de mostrar el mismo estilo en productos de woocommerce. Así que déjame tu email y te aviso cuando esté listo.

Navegación web por clusters sin orbital theme
4.9 (98.33%) 24 votos

Esta entrada tiene 80 comentarios

  1. Muchas gracias por el articulo. Lo pondré en mi sitio web. La verda que llegue por casualidad a tu web, por lo que me llamó mucho la atencio el titulo del post. Saludos y muchos exitos

    1. Muchas gracias a ti David por el comentario.

  2. Hola nuevamente yo. Tengo un problema, el plugin funciona bien en mi blog personal, pero en mis otros blogs no funciona, solo me muestra el shortcode. Me podrias ayudar con ello, lo haz probado en otros blogs?

    1. Hola David, ¿en los ajustes de plugins te sale como activado?.
      Lo tengo en al menos 4 sitios más con 4 temas distintos y no me ha dado problemas.

  3. Hola, he probado el plugin y encontré algunos problemas:
    1º- instalo el plugin como zip, añado el shortcode, cambio los id de los artículos y no pasa nada, solo muestra el shortcode, ¿debo añadir algo más o con instalar el plugin es suficiente?
    2º La web que pone en el plugin está mal; los enlaces van a predropablomoral.com Se coló una R.
    3º Pone el comentario de que vas a añadir cosas nuevas y que nos suscribamos.. fui incapaz de encontrar donde suscribirme.
    4º Me intente poner en contacto por privado, y tampoco encontré forma, pero al hacerlo con el comentario, supongo que ya da igual.

    Lo he probado en generatepress a la última versión.
    El plugin está activo.
    El shortcode usado fue: [pedropabl*moral_cluster id=”299,15,4,12,25″]
    Lo he probado en http://www.acertijosweb.com

    PD. Acabo de encontrar para suscribirme al enviar el comentario.

    1. Hola David, gracias por tu comentario.
      Vamos por partes:
      1. Además de instalarlo hay que activarlo
      2.Gracias por el aviso, en cuanto pueda lo corrijo
      3. Acabo de cambiar el tema y aun tengo que volver a mostrar el formulario, solo aparece en algunas entradas. Pero de nuevo gracias por el aviso. comentarios que ayudan como el tuyo dan gusto
      4. Se me ha pasado poner que hay que quitar el asterisco. Yo lo coloco el asterisco para que, precisamente muestre el shortcode y no lo interprete porque con las etiquetas pre no funciona.
      Gracias de nuevo por todas tus observaciones

    2. David me gustaría saber cómo has modificado el CSS para que te aparezca diferente, además veo que te aparece un extracto. No sé si es por qué en vez de páginas como yo uso lo utilizas con post.
      A parte quería comentar a Pedro solo me deja usarlo si pongo 3 id de página, si le meto más no funciona

  4. Ok esta noche lo pruebo y te digo como va.

    PD. Soy un David diferente al de los primeros comentarios, que ya es casualidad 🙂

  5. No esperé a la noche, pero no doy con ello
    el plugin está activado, lo desactive y volví a activar y puse lo siguiente:

    [pedropablomral_cluster id=”41,415″ columnas=”2″]

    [pedropablmoral_cluster id=”41,415″]

    Y nada, aunque los shortcodes son diferentes no se si será normal.

    1. Hola David, gracias y perdona que no me haya explicado bien. Prueba esto:
      [pedropablomoral_cluster id=”41,415″ columnas=”2″]

      [pedropablomoral_cluster id=”41,415″]

  6. Ahora si va bien.
    Con entradas se muestra perfecto, pero cuando le doy el ID de una pagina de categorías ( que no tiene imagen destacada ) no se muestra la imagen lógicamente. Hay alguna manera de añadir imágenes destacadas a paginas de categorías para que se muestren en tu plugin?

    1. Me alegro de que funcione. Debería dejarte poner imagen destacada en páginas. Si no te sale la opción cuando las estés editando, comprueba pulsando arriba en opciones de pantalla que tienes la opción de mostrarlo marcada. Te he mandado un email con la captura de pantalla que por aquí no puedo ponerla

      1. Si en paginas y entradas no hay problemas, pero en categorías no está esa opción.
        He googleado un poco y se puede poner modificando código y haciendo no se cuantas cosas más, buscaré algún plugin o pensaré en modificar la estructura de la web.

  7. Hola Pablo,

    Muchas gracias por el buen aporte de este post. He probado con las indicaciones que mencionas antes, y no me aparecen los cluster. El plugin está instalado y activado, pero la llamada del shortcode no enlaza nada.

    Agradezco tu gentil respuesta 😉

    1. Hola Erika, gracias por tu comentario.
      Asegurate de que las ids de las entradas que quieres mostrar son las correctas. Si no existen las ids de las entradas no muestra nada.

  8. Buenas tardes, Pedro.
    Antes que nada, agradecerte el aporte del plugin. Da gusto topar con gente como tú por la red.
    He intentado utilizar el plugin pero no consigo que funciona.
    Hago lo siguinete y no me va:
    – Me descargo el archivo en zip de tu web y lo subo como un plugin.
    – Lo activo.
    – Selecciono las imágenes destacadas para cada una de las páginas.
    – Añado el shortcode para mostrar el cluster. Concretamente lo siguiente: [pedropablomoral_cluster id="1545,1574,1564"]. He probado también de la manera que le dices a David en un comentario [pedropablomoral_cluster id=”1545,1574,1564″], pero tampoco hay manera de que salga.
    No sé si me habré saltado algún paso o estaré haciendo alguna cosa mal, pero no encuentro la manera de hacerlo funcionar.
    Muchas gracias por la ayuda!!

    1. Buenos días Félix, gracias por tu comentario.
      En teoría lo estás haciendo todo bien. Después de ver tu problema y el de otros usuarios, creo que he dado con la tecla.
      ¿estás intentando hacer un cluster de páginas? Imagino que si. Esta versión del plugin solo admitía cluster de navegación de entradas.
      No obstante, acabo de subir una nueva versión. En teoría bastaría con borrar la antigua, subir la nueva y activarla.
      El shortcode para mostrar un cluster de navegación de páginas sería, en tu caso, el siguiente:
      [pedropablomoral_cluster_paginas id="1545,1574,1564"]
      Pruébalo y me cuentas

  9. Hola, Pedro!
    Antes que nada, muchas gracias por la modificación en el plugin 🙂
    Sí, tienes razón, estaba intentando hacer un cluster de páginas.
    He seguido los pasos que me comentas en tu comentario y todo funciona!! Ahora ya tengo un cluster precioso en mi página con las imágenes de cada una de ellas.
    Lo único, que al seleccionar imágenes destacadas, estas se muestran en la parte superior derecha de la página y me rompe la maquetación que ya tenía hecha.
    Voy a investigar un poco a ver si everiguo como hacer que no se muestren, y si encuentro la solución os comento por si alguien tiene el mismo problema.
    Muchas gracias de nuevo, crack!
    Un saludo!

    1. Gracias a ti por los comentarios. Si me pasas un enlace de una entrada te intento pasar el CSS personalizado que tienes que añadir para ocultarla y que no te descuadre.

  10. Hola, Pedro.
    Agradezco tu ayuda con el CSS, pero al final lo he conseguido de otra manera.
    He añadido el último código del post que dejó aquí abajo al archivo functions.php y arreglado (por si alguien tiene el mismo problema). A mí me ha funcionado en Generatepress, a lo mejor en otros temas es otro cantar.
    https://generatepress.com/forums/topic/remove-post-image-from-code/

    Muchas gracias, el plugin va genial y la adaptación al móvil es fantástica 👏👏

  11. No me deja hacerlo. No se como tengo que empaquetar ni como crear los archivos css y php. He intentado instalarlo y no me ha dejado.

    1. Hola anonimo, gracias por tu comentario. Tan solo tienes que descargar el archivo .zip que hay en la entrada. Lo instalas como un plugin más de wordpress con añadir plugin -> subir plugin. Lo activas y ya puedes montar tus clusters de navegación.

      1. No lo encuentro. Donde esta el archivo zip ? Yo solo veo el codigo…

        1. Vale si ya lo he encontrado, pero a la hora de insertar el código del cluster pues luego en la pagina no me sale nada. Y el plugin esta instalado y activado. Copio el texto que me dijiste cambiando la id de los posts, y poniendole la o en vez del * y no me sale nada… Ayudame por favor.

          1. Hola anónimo, el plugin funciona para páginas y entradas. No hace, de momento, clusters de navegación de categorías ni de etiquetas ni de productos de woocommerce. Si está instalado y activo debería funcionar sin problemas. yo lo uso en una docena de wordpress. Si quieres pon la url en la que lo estas intentando hacer funcionar y dime a qué altura estás insertando el shortcode y debería mostrarse tu cluster de navegación y miro a ver que puede estar pasando.

  12. Saludos Pedro, antes de nada agradecer tu aporte, me ha venido fantástico para mi web, pero tengo una duda si fueras tan amable de responder. ¿como podría cambiar el color del efecto y el tamaño de los clusters? he visto que has puesto la linea de codigo ¿habria que cambiar algo ahi? si es asi dime que valores serian, muchas gracias.

    1. Hola Josmu, gracias por tu comentario. Me alegro de que te haya venido bien para tu web. Vamos a ver, lo primero que en tu tema de wordpress veo que estamos desaprovechando espacio. Imagino que por algún tema de margenes o padding.
      Para que realmente te salgan cuatro columnas debes modificar esta parte del cess y dejarla así
      @media (min-width: 48rem)
      .featured-item-4 {
      -ms-flex-preferred-size: 24% !important;
      flex-basis: 23% !important;
      max-width: 24% !important;
      padding: 0.25rem !important;
      }
      En cuanto a cambiar la altura de los clusters de navegación, se hace en esta parte del css
      [class^=”featured-item-“] .featured-wrapper {
      position: relative;
      min-height: 200px;
      }
      Te recomiendo que añadas imágenes destacadas, y veas el efecto completo, antes de tocar el css que corresponde a los efectos.
      Has elegido un nicho complicado. Suerte

  13. Hola pedro. A ver si me ayudas a una cosita. Cada vez que añado una imagen destacada para que se previsualice en los cluster, cada vez que clico para ir a la página, sale la imagen destacada al principio del post y de una manera muy fea. Si me dices como puedo quitar para que salga en la página, o poder ponerla donde yo quiera o algo por favor… Mediante código o un plugin o lo que sea. Y si es mediante código, donde lo edito en el mismo panel de generatepress (ya que es el tema que utilizo).
    He intentado mediante uso códigos que he visto en internet pero es que no pasa nada, sigue igual.
    Muchas gracias de antemano.

    1. Hola Javi, gracias por tu comentario. Cuando estés editando la entrada, hay una opción del generate press que se llama diseño de pantalla. Allí hay una pestaña que pone desactivar elementos. Dale a desactivar featured image y la imagen se mantendrá en los clusters de navegación, pero dejará de mostrarse en esa entrada en cuestión.
      También debería estar la opción en el personalizador.
      A las bravas pasme la url y te digo el css personalizado que debes añadir para ocultarla.

      1. Pero son páginas lo que quiero editar. el enlace es deoroweb.com
        Gracias por la respuesta !!

        1. Hola Javi, prueba a añadir esto en tu css personalizado

          .page-header-image, .page-header-image-single {
          line-height: 0;
          display: none!important;
          }

          1. Pero donde lo añado? en el mismo wordpres ?

          2. Es que cuando lo añado en el css de style.css al final, no hace ningún efecto, sigue saliendo la fotos en la entrada.

          3. Hola Javi, es mala idea tocar los estilos del tema. Cualquier modificación hazla creando un tema hijo. Aquí te explico como hacerlo:

            Crear tema hijo en wordpress

            No obstante, cuando estés logueado como admin, al visualizar la página te sale una barra arriba del todo. Ahí pulsa en personalizar y te saldrá un menú a la izquierda. Una de las opciones de ese menú es css personalizado. Añade allí el código que te he puesto y me dices si funciona.

  14. Muchas gracias pedro, me funciona a la perfección. Me has hecho avanzar mucho.
    Y una preguntita, es posible cambiar el diseño del cluster ? Me refiero a añadirle alguna mini descripción en cada apartado del cluster, bajarle la opacidad al color negro… ?
    Muchas gracias !!

    1. Gracias a ti Javi por comentar. Así si algún usuario tiene un problema similar encontrará su duda respondida.
      Lo de añadir la descripción, lo tengo en mente, añadiendo un parámetro al shortcode que lo permita. Es fácil, pero tengo que ponerme a ello.
      Lo de la opacidad te invito a que pruebes. Solo tienes que abrir las herramientas para desarrolladores y enredar con los parámetros de este estilo que te dejo en negrita:

      [class^=”featured-item-“] a:after {
      content: “”;
      background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.9)));
      background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.9) 100%);

      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-transition: all 0.3s linear;
      transition: all 0.3s linear
      }

  15. Llevaba ya unos días buscando este CSS, y te doy las gracias x ello. Mañana mismo lo pruebo a ver q tal, a ver si va todo bien.

    X cierto q la inserción d tantos adds en el artículo relentiza bastante la carga y pega saltos, aunque es sólo mi opinión, tal vez a los demás no les pase. De nuevo, agradecerte este artículo.

    salu2,

    E.

    1. Gracias Emilio por tu comentario y por tu opinión. Justo en este post de los cluster de navegación estoy teniendo problemas con los dichosos ads (Creo que ya lo he solucionado)
      Si tienes algún problema con el código de los clusters con imágenes vuelve y nos comentas a ver si puedo ayudarte

  16. Hola de nuevo,

    Probado y va perfecto. Muchas gracias Pedrooo!!

    En mi caso lo estoy probando con dos columnas y va muy bien, lo recomiendo.

    Me suscribo a la lista de correo.

    Posibles mejoras xa el plugin (q va a ser éxito seguro):
    – Tal vez un menú para personalizar todo? (Color de sombreado, nº de columnas, color del texto…)
    – Q sirva tb xa hacer banners para la misma web, o dicho de otra manera, q en vez de q coja y seleccione un trozo de imágen destacada, puedas seleccionar una imagen con la medida que prefieras.
    – Posibilidad fácil de controlar el tamaño del cluster o banner.

    X cierto Pedro lo de la relentización en la navegación era dsd móvil cndo me dió problemas. Ahora estoy en Pc y va bien.

    De nuevo, gracias.

    salu2

    1. Gracias Emilio por tus comentarios. El menú de administración como lo pides creo que lo trae el theme orbital. Tengo pensado ponérselo, pero de momento, está al final de la lista de características a implementar. La verdad que poniendo las opciones como me dices quedaría muy profesional. A ver si saco tiempo de algún sitio y lo implemento. Porque yo como lo tengo me apaño más o menos, ya que es un poco artesano.
      Gracias de nuevo y me alegro que te haya funcionando.

      1. Ya te digo q funciona muy bien. Estuve varios días probando plugins con efecto mousehover, y el tuyo es sencillo y eficaz, cosa que al final ha hecho que sea el que instale. Pedro ya te digo que si haces lo mismo pero para poner banners, instalo tu plugin en varias webs, y creo sinceramente q si lo publicitas bien, puede tener éxito. Y encima respondes con prontitud, algo q se agradece.

        He rellenado el campo web q hay a la hora de emitir respuestas x si te apetece echarle un vistazo xa ver como queda.

        salu2 y gracias

        1. Hola Emilio, claro que le echo un vistazo a la web, y si el backlink aunque sea nofollow te ayuda a completar un perfil natural mejor. Imagino que hayas hecho un buen keyword research. Tiene mucho curro dar de alta todos los artículos en woocomerce.
          Si me permites un par de tips. El texto de la home yo lo cortaría en “, joyería y artículos para el hogar”. Y pondría el cluster de navegación justo ahí. Luego el resto del texto y después las categorías. Así el usuario no tiene que hacer scroll para hacer clic.
          Por otro lado, veo que eres fiel al modelo de calaveras. Para mí gusto no pasa nada si los enlaces a las categorías contiene la keyword (camisas de estrellas, lámparas de estrellas). Ten en cuenta que quieres posicionarte para esas búsquedas y la home es la parte de tu web que más autoridad pasa al resto. Prueba en un par de ellas a ver si mejora el posicionamiento de esas páginas en concreto.
          Y tercero, aún puedes exprimir bastante más el interlinking.
          Espero que no te haya molestado mi opinión, es deformación profesional

  17. Estimado Pedro, en primer lugar muchas gracias por este plugin tan útil. Quisiera consultar sobre 2 temas:

    1.- Donde puedo suscribirme para enterarme de nuevas actualizaciones a este plugin.

    2.- Ocupo el shortcode para páginas de esta forma: [pedropablomoral_cluster_paginas id="102,126,95,146,128,131,133"] pero al verlas en la web, no me aparecen en ese orden, si no que se ordenan en número correlativo, es decir: [pedropablomoral_cluster_paginas id="95,102,126,128,131,133,146"]. ¿Cómo podría solucionar eso?

    1. Hola Julio muchas gracias por tu comentario.
      He habilitado el formulario de suscripción en la barra lateral. Así puedes suscribirte y enterarte de cuando actualizo el plugin de navegación por clusters.
      En cuanto a la segunda pregunta, me lo anoto y trato de implementar la opción de que se mantenga el orden introducido en los clusters.

  18. Hola, por casualidad he llegado a tu página buscando navegación por cluster, lo que sucede es que creo que algo estoy haciendo mal, el pluging no se instala, me sale error que ” No se ha podido descomprimir el paquete. No se encontraron plugins.”, he creado el .css y el .php, al php le puse el nombre index y al css pedropablomoral-cluster como lo vi en el php, pero no se si tengo que poner algunas cosas más, es primera vez que ” hago” un pluging.
    Si me pueden orientar un poco estaré agradecido

    1. Hola Luis muchas gracias por tu comentario. Prueba a descomprimir el archivo zip del plugin de navegación por clusters en tu equipo. Subelo a tu instalación de wordpress a la carpeta plugins. Asegúrate que tiene los permisos correctos. y, por último, desde la administración de wordpress activa el plugin. yo lo hago así en todas mis webs. Espero que te sirva de ayuda.

      1. Así lo he hecho, una consulta adicional, el pluging solo consta de 2 archivos cierto? uno que está metido en la carpeta que es el css y el otro que es el php, esos 2 los tengo en una carpeta y esa carpeta la subo o comprimo y eso se supone que es el pluging o hay algún archivo o varios archivos más.
        Esa es mi duda, he visto otros pluging y tienen mas archivos y carpetas.
        Espero que me puedas contestar.
        Saludos y muchas gracias por contestar.

        1. Hola luis, exacto. El plugin de navegación por clusters consta solo de dos archivos. El que lleva la carga de programación y la hoja de estilos.

  19. Saludos desde Noruega Pedro! Hace un mes que he me he metido en todo lo que es WordPress, webs, SEO,… Ojalá hubiera encontrado tu post antes, ya que compré el Theme orbital principalmente por los clústers…
    Pero ayer hice una web nueva (con Customizr) y encontré esta pagina donde explicas lo de tu plugin.
    Lo que yo quiero hacer es que en una entrada principal (lo que seria una pagina pilar) quiero que se muestren cluster de sub-entradas (por ejemplo, una entrada principal de “deporte” y que en el cluster se muestren entradas de “futbol”, “baloncesto”,… . Mi pregunta es:
    – Para poder poner los clusters necesito que la entrada principal (o pagina pilar) sea una entrada o una pagina?
    Lo he probado siendo una entrada, colocando [pedropablomoral_cluster id=”144″] y no me aparece la entrada con esa ID (de hecho no me aparece nada, ni el shortcode.
    Gracias por tu trabajo!!

    1. Hola Marta, muchas gracias por tu comentario. Si el post con id=144 es una entrada debería mostrartelo. Si se trata de una página, el plugin de navegación por clusters no lo mostrará porque con ese shortcode solo busca en entradas, no en páginas. Si quieres mostrar páginas el shortcode a utilizar sería [pedropablomoral_cluster_paginas id="144"]. Pruébalo y me cuentas. Si no funciona seguimos investigando hasta conseguirlo.

      1. Buenas!! Ya está, ya se pueden ver los clústers.
        Pero ahora surge otro problema: tengo 3 entradas para que se vean en clusters en la entrada principal. Pero solo se me muestran dos de las tres entradas del cluster. el shorcode es este:
        [pedropablomoral_cluster id=”270,305,200″  columnas="3"]
        Da igual el orden en el cual ponga el ID de las entradas; sólo me muestra las dos últimas entradas del shortcode (en éste caso la 305 y 200)
        He probado en colocar sólo 2 entradas en el shortcode, pero entonces sólo me muestra la última entrada que he colocado en el shortcode en el clúster.
        [pedropablomoral_cluster id=”305,200″ ] Con éste shortcode sólo me muestra la entrada con ID 200
        Finalmente he probado en colocar un shortcode con sólo un ID y no muestra nada.

        Ahora si que no sé por donde seguir jajajaja
        Gracias por tu trabajo nuevamente

        1. Hola Marta, gracias a ti por tu comentario. Es muy extraño lo que comentas, he repasado el código del plugin y no veo nada raro. ¿Las tres ids corresponden a entradas de wordpress? ¿No hay ninguna página entre esas ids?

  20. Gracias por tu interés, pero no me funciona, de verdad que no se lo que puedo estar haciendo mal. Pero de todos modos gracias por el tiempo que te tomaste en responder.

    Saludos y gracias

    1. Hola Luis, ¿quieres mostrar entradas o páginas?

  21. Buenas! Funciona genial muchas gracias! Queria preguntarte si es posible añadir más de 10 paginas en el mismo shortcut. Esto me sucede en muchos otros casos como seria amazon associates, pero no sabria ver en que parte del codigo se limita ese valor… muchas gracias y saludos!

    1. Hola Sergi, muchas gracias por tu comentario. Ese limite de 10 es el que tiene por defecto wordpress para las querys. Este mes espero actualizar por completo el plugin de navegación web por clusters, porque ya tengo un poco más de tiempo y lo quitaré. Pero como veo que te atreves a tocar el código, añade lo siguiente a los argumentos de la query: ‘posts_per_page’ => 20, de manera que te que así:
      $args = array(
      ‘post__in’ => $ids,
      ‘posts_per_page’ => 20
      );
      Te lo estoy diciendo de memoria, pero creo que te debería funcionar

    1. Gracias por tu comentario, me alegro que te haya encantado el plugin de navegación por clusters

  22. Hola Pedro, recomiendas el plugin WP Gallery Custom Links pero ha sido retirado, recomiendas otro con la misma funcionalidad. Gracias.

  23. Hola! He estado buscando muchas maneras y nada más no encuentrro solución. Pasa que en mi web quiero una galería de WordPress, la galería por default con el plugin WP Gallery Custom Links. La cuestión es que quiero que en ordenador la galería se muestre con 5 columnas, y en móvil sólo 2, pues no se adapta al móvil, las letras se combinan entre sí. Me preguntaba si hay alguna manera de hacer eso, pedí ayuda en el foro de WordPress y nada 🙁

    1. Hola José gracias por tu comentario.
      Para que te funcione debes añadir a tu css personalizado una media query que haga más pequeña la letra para dispositivos móviles y así no se solapen y combinen entre si.

  24. HOLA, SOLO PARA COMENTARTE QUE EL GALLERY CUSTOM LINKS NO FUNCIONA CON LA VERSION 5.1 DE WORDPRESS, NO SE SI HAYA OTRO PLUGIN QUE HAGA ESA FUNCION YA QUE SIN ESE PLUGIN ME TIRA TODO MI PROYECTO

  25. El plugin funciona perfecto!
    Pero me presenta un pequeño problema al momento de usarlo en páginas porque aparece el cluster pero no me muestra ninguna imagen, es decir, solo aparece un cuadro azul/blanco, no sé como solucionar esto.

    1. Hola Patricio, gracias por tu comentario y disculpa por haber tardado en contestar. Para que los cluster aparezcan con imágenes, cada una de las entradas o páginas que quieras mostrar deben tener asignada una imagen destacada.

      1. Gracias por tu respuesta Pedro.
        Si, agregué la imagen destacada pero ahora solo aparecen en la home page, si lo pongo en otra no aparece así tenga puesto las imágenes destacadas simplemente aparece en blanco.
        Hiciste un excelente trabajo con el plugin! Otra cosa también, ¿Como podría hacer que sean de otras dimensiones?
        Gracias por tu atención.

        1. Hola Patricio, si me haces llegar una url, echo un vistazo a ver que puede estar fallando.

          1. Hola Pedro, te lo he hecho llegar mediante tu formulario con el asunto: URL por cuestión de CLUSTER EN BLANCO. Gracias desde ya! 😀

  26. Hola Pedro,
    ¿Para cuando lo de woocommerce con clusters?
    Saludos

  27. Hola Pedro , seria genial que tu plugin permita modificar el titulo del Cluster (nombre de entrada o pagina ) de este modo podríamos utilizar variaciones de palabras claves en la navegación interna

    1. Hola Calvin, gracias por comentar. Es algo que tengo en mente porque, como bien dices, aportaría variedad a los anchor text usados. Me lo apunto y le doy otra vuelta

  28. Hola Pedro muchas gracias por el artículo, está genial!
    Aprovecho para preguntarte una cosilla, Rumuald consigue hacer que la página por defecto de las categorías no sea la típica que genera wordpress sino que sea una página normal que puede editar como quiera, formando los clusters y tal….
    Hay algún plugin o manera para poder editar la página tan fea que deja wordpress o mejor aun, hacer que el slug de la categoría sea una página ??

  29. Hola, Buen día,
    Gracias, esta muy cool, pero me gustaría saber si es posible para woocomerce…

    (y).
    Buen día.

  30. Pero antes que nada, gracias.
    Estuvo muy bueno el artículo.

  31. un saludo desde venezuela… muy bueno el plugin pero me preguntaba como podria mostrar categorias…? y lo mas importante aun como podria mostrar publicidad adsence como hace romuald fons en home https://decalaveras.com?

  32. Recien estoy empezando con una web. Estoy viendo como usar Asrtra con este plugin, ya lo tengo instalado. Ahora me falta descubrir como seguir con la creación de la web con navegación clouster! Gracias por este genial aporte.

Deja un comentario

Cerrar menú