Posiadanie strony portfolio na stronie internetowej może służyć do wielu rzeczy. Z definicji jest to coś, co służy do przechowywania materiałów, takich jak papiery, mapy, rysunki, zdjęcia itp. Portfel pod względem finansowym odnosi się do grupy inwestycji. Lub też ludzie myślą o portfolio jako o sposobie zaprezentowania swojej ostatniej pracy. Na przykład graficy mogą używać portfolio, aby pochwalić się swoim logo, nadrukiem lub projektami stron internetowych. Budowniczy lub architekt może wykorzystać portfolio do zaprezentowania swoich zrealizowanych projektów.

Kluczowym wnioskiem jest to, że portfolio ma wiele zastosowań. Może być używany do przechowywania lub grupowania przedmiotów wszystkich typów.

W tym poście pokażę, jak stworzyć witrynę z portfolio na WordPress.

Uwaga: Zalecam, aby zawsze dokonywać takich dostosowań w motywie podrzędnym. Dokonywanie dostosowań motywu pobranego od strony trzeciej (motywu, którego sam nie stworzyłeś) oznacza, że ​​nie będziesz mógł pobierać aktualizacji motywu. Jeśli to zrobisz, aktualizacja motywu usunie wszystkie twoje dostosowania.

Zacznijmy

Pierwszą rzeczą, którą polecam zrobić, jest utworzenie niestandardowego typu postu (CPT). Pomoże to zapewnić jasne miejsce do dodawania i edytowania elementów portfolio. Na przykład na poniższym obrazku widać, że mam witrynę, w której utworzyłem CPT dla projektów, publikacji, recenzji i slajdów. To po prostu bardzo ułatwia porządkowanie treści.

Tworzenie niestandardowego typu postu

Aby utworzyć CPT, umieść następujący kod w pliku functions.php . Poniższe czynności utworzy CPT dla „Projektów”, ale można to zmienić na dowolne. Po prostu zmień dowolne odniesienie do „Projektu” i „Projektów” na dowolne.

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

Teraz, gdy mamy CPT, przejdź do panelu administracyjnego i dodaj kilka przykładowych projektów, z którymi możesz go przetestować. Upewnij się, że nadałeś mu tytuł, fragment i dodaj polecany obraz.

Po dodaniu kilku przykładowych wpisów będziesz chciał wyświetlić je w interfejsie witryny. Następnym krokiem jest stworzenie strony, na której będziesz wyświetlać swoje projekty. Jeśli nie potrzebujesz żadnych dostosowań, możesz skopiować wszystko z archive.php twojego motywu i wkleić to do nowego pliku o nazwie archive-projects.php (archive-{post_type}.php). Wtedy adres URL tej nowej strony będzie po prostu http://twoja_domena.com/projekty/.

Jednakże, ponieważ generalnie mam dodatkowe potrzeby dotyczące mojej strony, wolę tworzyć niestandardowy szablon, taki jak projects-page.php . Jeśli zdecydujesz się iść tą drogą, będziesz musiał utworzyć stronę w swoim wp-admin i przypisać swoją stronę do tego nowego szablonu za pomocą „Atrybutów strony”.

W tym nowym szablonie upewnij się, że u góry zostały dodane następujące elementy:

<?php

/* Template Name: Projects Portfolio */

get_header(); ?>

Upewnij się, że szablon zawiera również kod get_footer na dole strony:

<?php get_footer(); ?>

Gdy masz już podstawową podstawę szablonu, musisz utworzyć żądany układ, a następnie dodać kod, który wysyła zapytanie do CPT. Upewnij się, że dodałeś następujące elementy między 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
?>

Uwaga: W powyższym zapytaniu rozpocząłeś pętlę while. W poniższym fragmencie kodu zakończymy pętlę while.

W tym momencie zadałeś zapytanie o CPT i teraz musisz wyświetlić go na swojej stronie internetowej. Pracując nadal w projects-page.php , dodaj następujący kod tuż po powyższym kodzie zapytania:

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

W powyższym fragmencie zauważysz dodanie tagów HTML. Te tagi kontrolują układ strony. Ważne jest, aby uwzględnić je w pętli while, aby każdy zwracany projekt otrzymał dokładnie taką samą strukturę HTML, jak i klasy CSS. Powyższe zapytanie zwróci kontener <div> z klasą „projekt”. W każdym kontenerze div pojawi się „Polecany obraz” zwrócony jako miniatura, „tytuł” ​​w stylu H4, fragment projektu, a następnie link „Szczegóły” do każdego projektu znalezionego w CPT „Projekty”.

Uwaga: ponieważ używamy CPT, musisz również dodać obsługę motywu dla miniatury posta. Może być nawet konieczne zdefiniowanie wymiarów miniatury przed użyciem tego przykładu kodu. Zostanie to zrobione w twoim functions.php file .

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

Krótka uwaga: Twoje klasy HTML i CSS będą musiały zostać odpowiednio dostosowane, aby pasowały do ​​​​projektu witryny. W moim przykładzie używam Bootstrap do tworzenia mojego układu i stworzyłem klasy, takie jak project i page-wrap , które zawierają dodatkowe style.

Na przykład col-sm-6 col-md-3 tworzy układ dwukolumnowy na małych ekranach i czterokolumnowy na średnich i dużych ekranach. Gdybym nie używał Bootstrapa, musiałbym dodać kilka szerokości kontenerów do klasy projektu. Prawdopodobnie potrzebowałbym float:left , aby wszystkie projekty były ładnie wyrównane w kolumnach.

Kiedy skończysz, twój projects-page.php powinien wyglądać mniej więcej tak:

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

Tworzenie strony szczegółów projektu

Teraz, gdy mamy już stronę portfolio, musimy upewnić się, że mamy stronę, na którą przekierują naszych użytkowników po kliknięciu miniatury lub linku „Szczegóły”.

W tym celu będziemy musieli utworzyć nowy szablon w naszym motywie o nazwie single-projects.php . Używając 'single' i CPT's slug 'projects', WordPress wie, że może używać tego szablonu dla wszystkich CPT projektu.

single-{post_type}.php

Podobnie jak w przypadku projects-page.php , będziemy musieli dodać następujące elementy:

<?php

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

get_header(); ?>

A na dole:

<?php get_footer(); ?>

Jeśli nie masz jeszcze pojęcia, jak ma wyglądać ta strona, możesz skopiować cały kod z single.php Twojego motywu i wkleić go do tego nowego pliku.
Więc to jest to! Tak po prostu masz portfolio. Zobaczmy, co zbudowałeś w komentarzach!