Давайте настроим вывод списка элементов портфолио.
Для начал создадим шаблон list-portfolio-page-template.php и поместим в него верстку из файла portfolio.html.
Вот что должно получится:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 |
<?php /* Template Name: Portfolio list */ get_header(); ?> <!-- Page Title ============================================= --> <section id="page-title"> <div class="container clearfix"> <h1>Portfolio</h1> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active" aria-current="page">Portfolio</li> </ol> </div> </section><!-- #page-title end --> <!-- Content ============================================= --> <section id="content"> <div class="content-wrap"> <div class="container clearfix"> <!-- Portfolio Items ============================================= --> <div id="portfolio" class="portfolio grid-container clearfix"> <article class="portfolio-item pf-media pf-icons"> <div class="portfolio-image"> <a href="portfolio-single.html"> <img src="images/portfolio/4/1.jpg" alt="Open Imagination"> </a> </div> <div class="portfolio-desc"> <h3><a href="portfolio-single.html">Open Imagination</a></h3> <span><a href="#">Media</a>, <a href="#">Icons</a></span> </div> </article> <article class="portfolio-item pf-illustrations"> <div class="portfolio-image"> <a href="portfolio-single.html"> <img src="images/portfolio/4/2.jpg" alt="Locked Steel Gate"> </a> </div> <div class="portfolio-desc"> <h3><a href="portfolio-single.html">Locked Steel Gate</a></h3> <span><a href="#">Illustrations</a></span> </div> </article> <article class="portfolio-item pf-media pf-icons"> <div class="portfolio-image"> <a href="portfolio-single.html"> <img src="images/portfolio/4/1.jpg" alt="Open Imagination"> </a> </div> <div class="portfolio-desc"> <h3><a href="portfolio-single.html">Open Imagination</a></h3> <span><a href="#">Media</a>, <a href="#">Icons</a></span> </div> </article> <article class="portfolio-item pf-illustrations"> <div class="portfolio-image"> <a href="portfolio-single.html"> <img src="images/portfolio/4/2.jpg" alt="Locked Steel Gate"> </a> </div> <div class="portfolio-desc"> <h3><a href="portfolio-single.html">Locked Steel Gate</a></h3> <span><a href="#">Illustrations</a></span> </div> </article> <article class="portfolio-item pf-media pf-icons"> <div class="portfolio-image"> <a href="portfolio-single.html"> <img src="images/portfolio/4/1.jpg" alt="Open Imagination"> </a> </div> <div class="portfolio-desc"> <h3><a href="portfolio-single.html">Open Imagination</a></h3> <span><a href="#">Media</a>, <a href="#">Icons</a></span> </div> </article> <article class="portfolio-item pf-illustrations"> <div class="portfolio-image"> <a href="portfolio-single.html"> <img src="images/portfolio/4/2.jpg" alt="Locked Steel Gate"> </a> </div> <div class="portfolio-desc"> <h3><a href="portfolio-single.html">Locked Steel Gate</a></h3> <span><a href="#">Illustrations</a></span> </div> </article> <article class="portfolio-item pf-media pf-icons"> <div class="portfolio-image"> <a href="portfolio-single.html"> <img src="images/portfolio/4/1.jpg" alt="Open Imagination"> </a> </div> <div class="portfolio-desc"> <h3><a href="portfolio-single.html">Open Imagination</a></h3> <span><a href="#">Media</a>, <a href="#">Icons</a></span> </div> </article> <article class="portfolio-item pf-illustrations"> <div class="portfolio-image"> <a href="portfolio-single.html"> <img src="images/portfolio/4/2.jpg" alt="Locked Steel Gate"> </a> </div> <div class="portfolio-desc"> <h3><a href="portfolio-single.html">Locked Steel Gate</a></h3> <span><a href="#">Illustrations</a></span> </div> </article> </div><!-- #portfolio end --> <!-- Pagination ============================================= --> <ul class="pagination nobottommargin"> <li class="page-item disabled"><a class="page-link" href="#">«</a></li> <li class="page-item active"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">4</a></li> <li class="page-item"><a class="page-link" href="#">5</a></li> <li class="page-item"><a class="page-link" href="#">»</a></li> </ul> </div> </div> </section><!-- #content end --> <?php get_footer(); |
Далее создадим функцию sp_get_portfolio_list() для вывода элементов и поместим в файл functions.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
function sp_get_portfolio_list($result=null){ global $wp_query; //args $postsPerPage = 2; if(isset($wp_query->query['paged'])){ $paged = $wp_query->query['paged']; } else { $paged = 1; } //get count of items $args = array( 'post_type' => 'sp_portfolio', 'order' => 'asc', 'numberposts' => -1, ); $spPosts = SP_Framework_Post_Type_Utility::get_list($args); $countPosts = count($spPosts); //get items $args = array( 'post_type' => 'sp_portfolio', 'order' => 'asc', 'posts_per_page' => $postsPerPage, 'paged' => $paged, ); $spPosts = SP_Framework_Post_Type_Utility::get_list($args); if(count($spPosts)>0){ $result .= '<div id="portfolio" class="portfolio grid-container clearfix">'; foreach ($spPosts as $spPost) { $postID = $spPost['id']; $title = $spPost['title']; $url = $spPost['url']; $image = SP_Framework_Post_Type_Utility::get_image($postID, 'full'); $result .= '<article class="portfolio-item pf-media pf-icons">'; $result .= '<div class="portfolio-image">'; $result .= '<a href="'.$url.'">'; $result .= '<img src="'.$image.'" alt="'.$title.'">'; $result .= '</a>'; $result .= '</div>'; $result .= '<div class="portfolio-desc">'; $result .= '<h3><a href="'.$url.'">'.$title.'</a></h3>'; $terms = get_the_terms($postID , 'sp_portfolio_tax'); if(is_array($terms)){ $result .= '<span>'; foreach($terms as $term){ $result .= '<a href="'. get_term_link($term->term_id, $term->taxonomy ) .'">'. $term->name .'</a> '; } $result .= '</span>'; } $result .= '</div>'; $result .= '</article>'; } $result .= '</div>'; //pagination $args = array( 'wrapper_start' => '<ul class="pagination nobottommargin">', 'wrapper_end' => '</ul>', 'posts_per_page' => $postsPerPage, 'range' => 4, 'count_posts' => $countPosts, 'page' => 'portfolio', ); $spPagination = SP_Framework_Post_Type_Utility::get_pagination($wp_query, $args); $result .= $spPagination; } return $result; } |
И теперь вызовем ее в нашем шаблоне.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<?php /* Template Name: Portfolio list */ get_header(); ?> <!-- Page Title ============================================= --> <section id="page-title"> <div class="container clearfix"> <h1><?php echo get_the_title();?></h1> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active" aria-current="page">Portfolio</li> </ol> </div> </section><!-- #page-title end --> <!-- Content ============================================= --> <section id="content"> <div class="content-wrap"> <div class="container clearfix"> <?php echo sp_get_portfolio_list();?> </div> </div> </section><!-- #content end --> <?php get_footer(); |