Crear un portafolio con WordPress (Parte 2)

Crear portafolio WordPress

En la primera parte del tutorial sobre cómo crear un portafolio con WordPress veíamos cómo preparar WordPress para el portafolio creando una categoría y una página que utilizaremos para mostrar nuestro portafolio. También vimos cómo crear las entradas para mostrar en el portafolio.

En esta segunda (y última) entrega veremos la parte del código que nos permitirá utilizar la página creada para mostrar el portafolio; incluyendo la adaptación del tema.

Creando la función

Lo que haremos a continuación es crear la función propia que se encargará de mostrar los elementos de la categoría portafolio.

Mi recomendación es darle ya la apariencia que queremos que tome cada elemento contando con la imagen, nos ahorrará trabajo extra.

Mi función es la siguiente, pero se puede modificar a gusto de cada uno:

function portfolio_items() {
    if ($images = get_children(array(
        'post_type' => 'attachment',
        'numberposts' => -1,
        'post_status' => null,
        'post_parent' => get_the_ID(),
        'post_mime_type' => 'image',
    ))) {
 
        foreach ($images as $image) {
            $pimage = wp_get_attachment_url($image->ID);
            $ptitle = get_the_title();
            $plink = get_post_custom_values("Enlace");
            $link = get_permalink();
 
 
            echo '<li>';
            ?>
            <div class="slide">
				<img src="<?php echo $pimage; ?/>" alt="<?php echo $ptitle; ?>" />
				<div class="contentSlide">
					<h2><?php echo $ptitle; ?></h2>
					<p class="fecha"><?php the_time('F j, Y'); ?></p>
					<p class="categoria"><a href="<?php bloginfo('url'); ?>/portafolio">Portafolio</a></p>
					<div class="descripcion">
						<?php the_content('Leer todo &raquo;'); ?>
						<p class="link"><a href="<?php echo $plink[0]; ?>">Visita <?php echo $ptitle; ?></a></p>
					</div><!-- /descripcion -->
				</div><!-- /contentSlider -->
			</div><!-- slide-->
			<div class="clearAll"></div>
			<?php
            echo '</li>';
 
        }
    }
}
</li>

Dicha función simplemente recoge los siguientes datos de cada entrada catalogada en la categoría portafolio:

  • $pimage: Recoje la imagen adjunta a la entrada (Ver primera parte del tutorial)
  • $ptitle: El título de la entrada.
  • $plink: Guardamos el enlace al sitio web del campo personalizado que creamos en la parte 1.
  • $link: El enlace a la entrada.

Mostrando elementos del portafolio

Una vez que tenemos esta función, podemos pensar en la estructura que le daremos a cada elemento de nuestro portafolio.

Yo he decidido mostrarlo con el siguiente formato:
ejemplo portafolio katharsix

De ahí surge la última parte de la función del apartado anterior:

<div class="slide">
	<img src="<?php echo $pimage; ?/>" alt="<?php echo $ptitle; ?>" />
	<div class="contentSlide">
		<h2><?php echo $ptitle; ?></h2>
		<p class="fecha"><?php the_time('F j, Y'); ?></p>
		<p class="categoria"><a href="<?php bloginfo('url'); ?>/portafolio">Portafolio</a></p>
		<div class="descripcion">
			<?php the_content('Leer todo &raquo;'); ?>
			<p class="link"><a href="<?php echo $plink[0]; ?>">Visita <?php echo $ptitle; ?></a></p>
		</div><!-- /descripcion -->
	</div><!-- /contentSlider -->
</div><!-- slide-->
<div style="clear:both;"></div>

Esta parte es 100% personalizable, ya que depende de cómo quieras mostrar cada elemento.

Dado que depende de cada uno, no pondré estilos CSS ni nada por el estilo.

Creando una plantilla en nuestro tema para el portafolio

Esto también es 100% personalizable, pero la idea es básicamente crear una plantilla propia para la página Portafolio que creamos en la primera parte del tutorial de manera que utilicemos la función creada anteriormente.

Para hacer la plantilla debemos crear un fichero llamado ‘portafolio.php’ dentro de la carpeta de nuestro tema y su contenido deberá ser:

<?php
/*
Template Name: Portafolio
*/
?>
 
<?php get_header(); ?>
 
 
		<div id="container">
			<div id="content2">
			    <?php //the_content('<p>Read the rest of this page &raquo;'); ?>
 
			    <ul>
			        <?php $my_query = new  WP_Query('category_name=Portafolio&posts_per_page=5'); ?>
			        <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
			        <?php portfolio_items(); ?>
			        <?php endwhile; ?>
			    </ul>
			</div><!-- /content2 -->
		</div><!-- /container -->
<div id="content">
 
</div>
 
<?php get_footer(); ?>

Lo que hacemos es llamar a la función de WordPress wp_query() que nos devuelve los post que le indicamos; en este caso de la categoría portafolio (cambiar el id en la llamada al wp_query). Posteriormente realizamos un búcle con las entradas que tenemos dentro de esa categoría (le indicamos que queremos 5 entradas por cada página).

Como digo, esto depende del tema que tengas activado y la estructura del mismo.

Una vez creada la plantilla editamos la página portafolio (creada en la primera parte del tutorial) y, en la parte derecha del dashboard (escritorio de WordPress), en atributos de la página, seleccionaremos como plantilla la que hemos creado anteriormente:
tutorial portafolio katharsix

Con esto tendremos listo nuestro portafolio en WordPress, pero queda algo por hacer.

No es bonito ver las entradas del portafolio en la portada de nuestro sitio, más cuando van sin imágenes, ¿Verdad? Para suprimirlas basta con incluir la siguiente línea delante del loop de WordPress en el index.php; recuerda cambiar el número de tu categoría:

<!-- Cambia el 3 por el ID de tu categoría portafolio-->
<?php query_posts($query_string . '&cat=-3'); ?>

Ahora sí, podemos decir que queda terminado el tutorial. Espero que sea de utilidad.

Puede mejorarNo está malMe gustaEs bueno¡Excelente! (Ninguna valoración todavía)
Cargando…

11 comentarios en “Crear un portafolio con WordPress (Parte 2)

  1. karina dice:

    Hola, quisiera hacerte una pregunta.
    Sabes cómo puedo hacer un portafolio en el que se muestren varias imágenes, pero en una presentación (una primero, después otra, etc) en una misma página?
    Tengoun wp theme que se llama Bradside, pero no sé ocuparlo bien.
    Ojalà puedas ayudarme.
    Muchos saludos!

    1. Darío dice:

      Cambia el loop de la página para que muestre 1 imagen por iteración.

  2. Carlos dice:

    Hola Darío,

    Soy nuevo en wp y estoy haciendo el sitio de la empresa donde trabajo, para esto estoy usando un theme que se llama Brainstorm. He logrado avanzar bastante pero ahora estoy teniendo problemas con los portafolios. No sé cómo hacer para especificar qué portafolio quiero mostrar en cada página y no ver el mismo en todas, ya que en mi casa estoy creando un portafolio para cada proyecto.

    Espero me puedas ayudar.

    Saludos y muchas gracias,

    Carlos.

    1. Darío dice:

      Hola Carlos,
      Puedes crear tantos portafolios como desees con sus correspondientes categorías.
      Después identificas en cada página la categoría que ha de mostrar y listo.

      Un saludo.

  3. david dice:

    hola, estoy tratando de realizar su tutorial pero tengo una duda, ¿donde debo poner la funcion portfolio_items()? quiero decir, ¿en que fichero php va incluida?. Saludos y gracias.

    1. Darío dice:

      Hola David,
      tal y como comento en la entrada, debes crear esa función en el functions.php de tu tema y realizar la llamada desde la plantilla portfolio.php.

      Aquí tienes dos entradas relacionadas con el tema del portfolio, primera y segunda parte.

      Saludos.

  4. Nacho dice:

    Hola Darío, no consigo ver bien el codigo de la funcion, y la parte de la plantilla tampoco puedo verla, cuando puedas le echas un ojo.

    saludos

  5. karem dice:

    he comprado el tema fluxus y no se como crear el slide de inicio, de portafolio horizontal, si pudieras ayudarme te lo agradecería un montón. no he conseguido colocar las imagenes full con slide. gracias

    1. Hola Karem,
      en este caso deberías ponerte en contacto con quien desarrolló el tema o, en su defecto, con quien te lo vendió.
      En esta entrada explicamos cómo crear un portfolio desde cero utilizando Wordpress, pero hay cientos de formas y, ¡a saber cuál utilizó el creador de tu tema!

      Saludos.

  6. Javier dice:

    En la función hay algunos errores sintácticos:
    En la línea 20 falta un “>” ( “; ?>/>” en lugar de ” ; ?/>””)
    Hay varios “< ?php" en lugar de "<?php"

    1. DarioBF dice:

      Gracias por el aviso, es cosa del plugin de código, que traduce las instrucciones así.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril de 2016 (GDPR), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.