Menu

Breadcrumb en WordPress para páginas

Hace poco me topé con The Cats Who Code, debido a que tenía que utilizar un breadcrumb para un cliente que necesitaba esto en su diseño Web y realmente consideré que no era necesario utilizar uno de los tantos plug-ins que habían para algo tan simple como un breadcrumb.

La solución que encontré en dicho sitio funcionaba excepto que en el diseño Web que estaba haciendo, utilizaba páginas en vez de posts y además necesitaba algún tipo de sub-navegación a un tercer nivel.

El crédito del código inicial es para The Cats Who Code, el cual es un gran sitio que de vez en cuando utilizo para tutorías de codificación en WordPress más que todo.

Solución

Básicamente copie este código que lo tuve que editar según las necesidades que tenía para mi diseño Web en vez del que sale en dicho sitio; asegúrese de que el código que está empastando sea en su archivo de functions.php dentro de su tema de WordPress; luego, a como viene en el artículo original, inserte la llamada a dicha función en la parte en donde usted va a utilizar dicho breadcrumb (¡espero que para efectos estéticos sea arriba!). La función se llama de la siguiente manera: <? php the_breadcrumb(); ?>

El código


	function the_breadcrumb() {
		global $post;
		if (!is_home()) {
			echo '<a href="';
			echo get_option('home');
			echo '">';
			echo Home;
			echo "</a> - ";
		  if ($post->post_parent) {
			echo '<a href="';
			echo _h2($post->post_parent);
			echo '">';
			echo get_the_title($post->post_parent);
			echo "</a>; - ";
			}
			if ( is_page() ) {
			echo the_title();
			}}}

Algunas notas

  1. Déle una buena revisada a las comillas dobles y sencillas; muchas personas dicen que "no funciona" pero no toman el tiempo de corroborar este pequeño (pero muy importante) detalle.
  2. Si necesita hacer listas no ordenadas (u ordenadas) haga los reemplazos necesarios dentro de las declaraciones "echo" (de la palabra eco, no de echar) de la función.
  3. Para estilizarlo (que es una pregunta que muchos hacen), yo utilicé la propiedad <section> de HTML 5.0 antes de llamar a la función, y a partir de ahí estilizo tanto las posiciones, como el párrafo y el ancla del breadcrumb. A mi en lo particular me gusta mucho más este enfoque, por que un breadcrumb realmente es un párrafo de enlaces en vez de una lista de enlaces, pero cada loco con su tema. La sección posteriormente la floto a la izquierda (o derecha) dependiendo del diseño final.

Cualquier pregunta favor preguntarme en los comentarios; ustedes saben lo ocupado que se pone a la hora de diseñar sitios para clientes y a veces hay mucho trabajo, pero haré lo mejor para contestarles.

8 Comentarios

  1. Diego
    1

    Hola me parece muy buena esta sección de tu sitio web. Tengo una consulta que me recomendarías aprender para diseñar sitio web en wordpress tan completos como los suyos.

    Es que la verdad es un tema que me parece muy interesante, pero nunca he encontrado un curso en Costa Rica sobre WordPress en específico

  2. Marco
    2

    Hola Diego,

    Gracias por tus comentarios, a veces me encantaría escribir más y más, pero no me da chance.

    Para diseñar sitios completos te recomiendo varios libros, no sé cómo estarás con el Inglés es que en Español casi que no hay nada o no he visto nada.

    Si me decís que no tenés problema, te paso alguno que otro.

    Saludos!

    • Diego
      2.a

      Claro si me defiendo lo necesario si me puedes pasar los títulos te lo agradecería un montón.

  3. Marco
    3

    Hola Diego,

    Te recomiendo entonces los siguientes libros:

    Head First WordPress, para que te vayas familiarizando con la interface de WordPress, los plug ins, cómo consiste el admin, etc, etc.

    Luego, para estilizar un sitio hecho por vos y pasarlo a WordPress, te recomiendo ver la siguiente tutoría de Chris Coyer, de CSS-Tricks:

    http://www.lynda.com/WordPress-3-tutorials/creating-and-editing-custom-themes/67160-2.html

    Ahí viene un «Theme» en blanco, que se supone que vos vas editando según el diseño ya cortado en CSS-HTML-jQuery (O Flash si trabajás con eso)

    Saludos y sorry por la demora. Si ocupas MÁS libros no dudes en preguntarme.

    Saludos y gracias por los comentarios. Estamos tratando de sacar otro re-diseño pronto, un poco más simple 🙂

    • Diego
      3.a

      Muchísimas gracias Marco voy a comenzar a estudiar el libro y el tuto. De verdad que me encanta la página y espero en algún momento hacer cosas tan buenas como las que hacen ustedes.

      Aquí los estaré siguiendo. Saludos

  4. Marco
    4

    Hola Diego, como te ha ido con esto? Sorry por responder tan tarde, un toquecito ocupado 🙂

  5. Pako | Paginas Web Colima
    5

    La plantilla ya tiene breadcrumbs pero me aparece «You are here Home» y luego la ruta pero no puedo cambiar este texto en español alguna idea? se los agradecería bastante.

    • Natalie
      5.a

      Hola Pako,

      ¿Cuál sería el URL, o código? Es que me fijé en tu sitio Web y no ví nada. Un saludo

Deje Su Respuesta