Tener una página de cartera en un sitio web puede usarse para muchas cosas. Por definición, es algo que se usa para guardar materiales como papeles, mapas, dibujos, fotos, etc. Una cartera en términos financieros se refiere a un grupo de inversiones. O bien, la gente también piensa en un portafolio como una forma de mostrar su trabajo reciente. Por ejemplo, los diseñadores gráficos pueden usar un portafolio para mostrar sus diseños de logotipo, impresión o sitio web. Un constructor o un arquitecto pueden usar un portafolio para mostrar sus proyectos terminados.

La conclusión clave aquí es que una cartera tiene muchos usos. Se puede utilizar para guardar o agrupar elementos de todo tipo.

En esta publicación, demostraré cómo crear un sitio de cartera en WordPress.

Nota: Te recomiendo que siempre hagas personalizaciones como esta en un tema hijo. Hacer personalizaciones a un tema que ha descargado de un tercero (un tema que no desarrolló usted mismo), significa que no podrá realizar actualizaciones de temas. Si lo hace, la actualización del tema eliminará todas sus personalizaciones.

Empecemos

Lo primero que recomendaría hacer es crear un tipo de publicación personalizada (CPT). Esto ayudará a garantizar que haya un lugar claro para agregar y editar los elementos de su cartera. Por ejemplo, en la imagen a continuación, puede ver que tengo un sitio donde he creado un CPT para Proyectos, Publicaciones, Reseñas y Diapositivas. Esto hace que sea muy fácil mantener mi contenido organizado.

Crear el tipo de publicación personalizada

Para crear un CPT, coloque el siguiente código en su archivo functions.php . Lo siguiente creará un CPT para 'Proyectos', pero eso se puede cambiar a cualquier cosa. Simplemente cambie cualquier referencia a 'Proyecto' y 'Proyectos' a lo que desee.

//Creating Custom Post types for Projects
function setup_projects_cpt(){
    $labels = array(
        'name' => _x('Projects', 'post type general name'),
        'singular_name' => _x('Project', 'post type singular name'),
        'add_new' => _x('Add New', 'Project'),
        'add_new_item' => __('Add New Project'),
        'edit_item' => __('Edit Project'),
        'new_item' => __('New Project'),
        'all_items' => __('All Projects'),
        'view_item' => __('View Project'),
        'search_items' => __('Search Projects'),
        'not_found' => __('No Projects Found'),
        'not_found_in_trash' => __('No Projects found in the trash'),
        'parent_item_colon' => '',
        'menu_name' => 'Projects'
        );
    $args = array(
        'labels' => $labels,
        'description' => 'My Projects',
        'rewrite' => array('slug' => 'projects'),
        'public' => true,
        'menu_position' => 5,
        'supports' => array('title', 'editor', 'thumbnail', 'excerpt', 'custom-fields'),
        'has_archive' => true,
        'taxonomies' => array(''),
        'menu_icon' => 'dashicons-admin-multisite', //Find the appropriate dashicon here: https://developer.wordpress.org/resource/dashicons/
        );
    register_post_type('projects', $args);
}
add_action('init', 'setup_projects_cpt');

//The following snippet is used to enable categories for the projects CPT. 
function projects_taxonomy() {  
    register_taxonomy(  
        'project_categories',  //The name of the taxonomy. Name should be in slug form (no spaces and all lowercase. no caps). 
        'projects',        //post type name
        array(  
            'hierarchical' => true,  
            'label' => 'Project Categories',  //Label Displayed in the Admin when creating a new project
            'query_var' => true,
            'rewrite' => array(
                'slug' => 'projects', // This controls the base slug that will display before each term
                'with_front' => false // Don't display the category base before 
            )
        )  
    );  
}  
add_action( 'init', 'projects_taxonomy');

Ahora que tenemos un CPT, vaya a su panel de administración y agregue algunos proyectos de muestra que puede usar para probarlo. Asegúrate de darle un título, un extracto y agrega una imagen destacada.

Una vez que haya agregado algunas entradas de muestra, querrá mostrarlas en la parte frontal de su sitio. El siguiente paso es crear la página que utilizará para mostrar sus proyectos. Si no necesita ninguna personalización, puede copiar todo desde el archive.php de su tema y pegarlo en un nuevo archivo llamado archive-projects.php (archive-{post_type}.php). Entonces, la URL de esta nueva página sería simplemente http://yoursitedomain.com/projects/.

Sin embargo, debido a que generalmente tengo algunas necesidades adicionales para mi página, prefiero crear una plantilla personalizada como projects-page.php . Si elige seguir esta ruta, deberá crear una página en su wp-admin y asignar su página a esta nueva plantilla utilizando los 'Atributos de la página'.

En esta nueva plantilla, asegúrese de agregar lo siguiente en la parte superior:

<?php

/* Template Name: Projects Portfolio */

get_header(); ?>

Asegúrese de que la plantilla también contenga el código get_footer en la parte inferior de la página:

<?php get_footer(); ?>

Una vez que tenga la base básica de su plantilla en su lugar, deberá crear el diseño deseado y luego agregar el código que consulta su CPT. Asegúrese de agregar lo siguiente entre get_header(); ?> get_header(); ?> y get_Footer(); ?> get_Footer(); ?> :

<?php
/* Query the post */ 
$args = array( 'post_type' => 'projects', 'posts_per_page' => -1 );//this will return ALL of the posts from the projects CPT. You can also change this to a specific number such as 'posts_per_page' => 10... 
$loop = new WP_Query( $args ); //In this line we are telling WP to query the 'projects' CPT
while ( $loop->have_posts() ) : $loop->the_post(); //In this line we are saying keep looping through the 'projects' CPT until all are returned
?>

Nota: en la consulta anterior, ha iniciado un ciclo while. En el fragmento de código a continuación, finalizaremos el ciclo while.

En este punto, ha consultado el CPT y ahora necesita mostrarlo en su sitio web. Mientras aún trabaja dentro projects-page.php , agregue el siguiente código justo después del código de consulta anterior:

<?php echo '<div class="project">';?>
    <a href="<?php print get_permalink($post->ID) ?>"><?php echo the_post_thumbnail(); ?></a> <!-- This returns the featured image with it linked to the page that it was added to-->
        <h4><?php print get_the_title(); ?></h4>
        <?php print get_the_excerpt(); ?><br />
        <a href="<?php print  get_permalink($post->ID) ?>">Details</a><!-- This wraps the ‘Details’ link with the same url that the featured image gets wrapped in. -->
</div> <!-- End individual project col -->

<?php endwhile; ?><!-- End of the while loop -->

En el fragmento anterior, notará la adición de etiquetas HTML. Estas etiquetas controlan el diseño de la página. Es importante incluirlos dentro del bucle while para que cada proyecto que se devuelva obtenga exactamente la misma estructura HTML, así como las clases CSS. La consulta anterior devolverá un contenedor <div> con la clase de "proyecto". Dentro de cada contenedor div, habrá una 'Imagen destacada' devuelta como una miniatura, el 'título' con estilo H4, el extracto del proyecto y luego un enlace 'Detalles' para cada proyecto que se encuentra en el CPT 'Proyectos'.

Nota: Debido a que estamos usando un CPT, también deberá agregar soporte de tema para la miniatura de la publicación. Es posible que incluso deba definir las dimensiones de la miniatura antes de usar este ejemplo de código. Esto se haría en su functions.php file .

add_theme_support( 'post-thumbnails', array( 'projects' ) ); // adds thumbnail support for the Projects CPT

Una nota rápida: sus clases de HTML y CSS deberán ajustarse en consecuencia para que coincidan con el diseño de su sitio web. En mi ejemplo, estoy usando Bootstrap para crear mi diseño y he creado clases como project y page-wrap , que contienen estilos adicionales.

Por ejemplo, col-sm-6 col-md-3 crea un diseño de dos columnas en pantallas pequeñas y un diseño de cuatro columnas en pantallas medianas y grandes. Si no estuviera usando Bootstrap, habría tenido que agregar algunos anchos de contenedor a la clase del proyecto. Probablemente necesitaría un float:left para que todos los proyectos se alineen bien en columnas.

Cuando haya terminado, su projects-page.php debería verse así:

<?php
/* Template Name: Projects Portfolio */
 
get_header(); 

?>
<!-- ============ CONTENT START ============ -->
<div class="container>
    <div class="row">
        <div id="content-projects" class="page-wrap">
            <div class="col-sm-12 content-wrapper">
                <?php while ( have_posts() ) : the_post(); ?> <!--queries the projects-page.php-->
                    <?php the_content() ?> <!--Grabs any content added to the Editor-->
                    <?php endwhile; // end of the loop. ?>
            </div><!-- End intro/descriptive copy column-->
        </div> <!-- End intro/descriptive copy container-->
    </div>
        
    <div id="projects" class="row">        
    <!-- Start projects Loop -->
        <?php
        /* 
        Query the post 
        */
        $args = array( 'post_type' => 'projects', 'posts_per_page' => -1 );
        $loop = new WP_Query( $args );
        while ( $loop->have_posts() ) : $loop->the_post(); 
                                                    
        <?php echo '<div class="project col-sm-6 col-md-3">';?>
            <a href="<?php print get_permalink($post->ID) ?>">
                <?php echo the_post_thumbnail(); ?></a>
                <h4><?php print get_the_title(); ?></h4>
                <?php print get_the_excerpt(); ?><br />
                <a class="btn btn-default" href="<?php print                   get_permalink($post->ID) ?>">Details</a>
        </div> <!-- End individual project col -->
        <?php endwhile; ?> 
    </div><!-- End Projects Row -->
</div><!-- End Container --> 
<!-- ============ CONTENT END ============ -->

<?php get_footer(); ?>

Creación de la página Detalles del proyecto

Ahora que tenemos una página de cartera, debemos asegurarnos de tener una página a la que llevar a nuestros usuarios cuando hagan clic en la miniatura o en el enlace 'Detalles'.

Para esto, necesitaremos crear una nueva plantilla en nuestro tema llamada single-projects.php . Usando 'proyectos' 'single' y slug de CPT, WordPress sabe usar esta plantilla para todos los CPT del proyecto.

single-{post_type}.php

Al igual que hicimos con la projects-page.php , necesitaremos agregar lo siguiente:

<?php

/* This is the template for displaying Single Project details */

get_header(); ?>

Y en la parte inferior:

<?php get_footer(); ?>

Si aún no tiene una idea de cómo quiere que se vea esta página, es posible que desee copiar todo el código del single.php de su tema y pegarlo en este nuevo archivo.
¡Eso es todo! Al igual que usted tiene una cartera. ¡Déjanos ver lo que has construido en los comentarios!