A avea o pagină de portofoliu pe un site web poate fi folosit pentru atât de multe lucruri. Prin definiție, este ceva folosit pentru a deține materiale precum hârtii, hărți, desene, fotografii etc. Un portofoliu în termeni financiari se referă la un grup de investiții. Sau, oamenii se gândesc și la un portofoliu ca pe o modalitate de a-și prezenta munca recentă. De exemplu, designerii grafici pot folosi un portofoliu pentru a-și etala sigla, imprimarea sau designul site-ului. Un constructor sau un arhitect poate folosi un portofoliu pentru a-și prezenta proiectele finalizate.

Principala concluzie aici este că un portofoliu are multe utilizări. Poate fi folosit pentru a deține sau a grupa articole de toate tipurile.

În această postare, voi demonstra cum să creezi un site de portofoliu pe WordPress.

Notă: vă recomand să faceți întotdeauna personalizări ca aceasta într-o temă copil. Efectuarea de personalizări la o temă pe care ați descărcat-o de la o terță parte (o temă pe care nu ați dezvoltat-o ​​singur) înseamnă că nu veți putea primi actualizări ale temei. Dacă o faci, actualizarea temei va șterge toate personalizările tale.

Să începem

Primul lucru pe care l-aș recomanda este să creez un tip de postare personalizat (CPT). Acest lucru vă va ajuta să vă asigurați că există un loc clar pentru a adăuga și edita articolele din portofoliu. De exemplu, în imaginea de mai jos, puteți vedea că am un site unde am creat un CPT pentru proiecte, publicații, recenzii și diapozitive. Acest lucru face foarte ușor să-mi păstrez conținutul organizat.

Crearea tipului de postare personalizat

Pentru a crea un CPT, plasați următorul cod în fișierul functions.php . Următoarele vor crea un CPT pentru „Proiecte”, dar acesta poate fi schimbat în orice. Pur și simplu schimbați orice referință la „Proiect” și „Proiecte” în orice doriți.

//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');

Acum că avem un CPT, accesați tabloul de bord administrativ și adăugați câteva exemple de proiecte pe care le puteți utiliza pentru a-l testa. Asigurați-vă că îi dați un titlu, un extras și adăugați o imagine recomandată.

După ce ați adăugat câteva exemple de intrări, veți dori să le afișați în partea din față a site-ului dvs. Următorul pas este să creați pagina pe care o veți folosi pentru a vă afișa proiectele. Dacă nu ai nevoie de personalizări, ai putea să copiați totul din archive.php al temei și să-l lipiți într-un fișier nou numit archive-projects.php (archive-{post_type}.php). Atunci adresa URL a acestei noi pagini ar fi pur și simplu http://yoursitedomain.com/projects/.

Cu toate acestea, pentru că în general am câteva nevoi suplimentare pentru pagina mea, prefer să creez un șablon personalizat, cum ar fi projects-page.php . Dacă alegeți să urmați acest traseu, va trebui să creați o pagină în wp-admin și să vă atribuiți pagina acestui nou șablon folosind „Atributele paginii”.

În acest șablon nou, asigurați-vă că adăugați următoarele în partea de sus:

<?php

/* Template Name: Projects Portfolio */

get_header(); ?>

Asigurați-vă că șablonul conține și codul get_footer din partea de jos a paginii:

<?php get_footer(); ?>

Odată ce ați pus bazele de bază ale șablonului, va trebui să creați aspectul dorit și apoi să adăugați codul care interogă CPT. Asigurați-vă că adăugați următoarele între get_header(); ?> get_header(); ?> și 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
?>

Notă: în interogarea de mai sus ați început o buclă while. În fragmentul de cod de mai jos, vom încheia bucla while.

În acest moment, ați interogat CPT-ul și acum trebuie să îl afișați pe site-ul dvs. web. În timp ce încă lucrați în projects-page.php , adăugați următorul cod imediat după codul de interogare de mai sus:

<?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 -->

În fragmentul de mai sus, veți observa adăugarea de etichete HTML. Aceste etichete controlează aspectul paginii. Este important să le includeți în bucla while, astfel încât fiecare proiect care este returnat să primească exact aceeași structură HTML, precum și clase CSS. Interogarea de mai sus va returna un <div> cu clasa „proiect”. În fiecare container div, va exista o „Imagine recomandată” returnată ca o miniatură, „titlul” stilat ca H4, fragmentul proiectului și apoi un link „Detalii” pentru fiecare proiect găsit în CPT „Proiecte”.

Notă: Deoarece folosim un CPT, va trebui să adăugați și suport pentru tema pentru miniatura postării. Este posibil să fie nevoie chiar să definiți dimensiunile miniaturii înainte de a utiliza acest exemplu de cod. Acest lucru ar fi făcut în functions.php file .

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

O notă rapidă: clasele dvs. HTML și CSS vor trebui ajustate în consecință pentru a se potrivi cu designul site-ului dvs. În exemplul meu, folosesc Bootstrap pentru a-mi crea aspectul și am creat clase precum project și page-wrap , care conțin stiluri suplimentare.

De exemplu, col-sm-6 col-md-3 creează un aspect cu două coloane pe ecrane mici și un aspect cu patru coloane pe ecrane medii și mari. Dacă nu aș fi folosit Bootstrap, ar fi trebuit să adaug niște lățimi de container la clasa de proiect. Probabil că aș avea nevoie de un float:left pentru ca toate proiectele să se alinieze frumos în coloane.

Când ați terminat, projects-page.php ar trebui să arate cam așa:

<?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(); ?>

Crearea paginii cu detaliile proiectului

Acum, că avem o pagină de portofoliu, va trebui să ne asigurăm că avem o pagină la care să ne conducă utilizatorii când fac clic pe miniatură sau pe linkul „Detalii”.

Pentru aceasta, va trebui să creăm un nou șablon în tema noastră numit single-projects.php . Folosind „single” și „proiectele” CPT, WordPress știe să folosească acest șablon pentru toate CPT-urile proiectului.

single-{post_type}.php

La fel cum am făcut pentru projects-page.php , va trebui să adăugăm următoarele:

<?php

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

get_header(); ?>

Și în partea de jos:

<?php get_footer(); ?>

Dacă nu aveți încă o idee despre cum doriți să arate această pagină, poate doriți să copiați tot codul din single.php al temei și să-l lipiți în acest nou fișier.
Deci asta este! Așa ai un portofoliu. Să vedem ce ai construit în comentarii!