Давайте сделаем шаблон детальной страницы портфолио. Для этого создадим файл single-portfolio-page-template.php в каталоге page-templates
И добавим в него 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 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 |
<?php /* * Portfolio single page */ get_header(); ?> <!-- Page Title ============================================= --> <section id="page-title"> <div class="container clearfix"> <h1>Portfolio Single - Gallery</h1> </div> </section><!-- #page-title end --> <!-- Content ============================================= --> <section id="content"> <div class="content-wrap"> <div class="container clearfix"> <!-- Portfolio Single Gallery ============================================= --> <div class="col_full portfolio-single-image"> <div class="fslider" data-arrows="true" data-animation="slide"> <div class="flexslider"> <div class="slider-wrap"> <div class="slide"><a href="#"><img src="images/portfolio/single/full/1.jpg" alt=""></a></div> <div class="slide"><a href="#"><img src="images/portfolio/single/full/7.jpg" alt=""></a></div> <div class="slide"><a href="#"><img src="images/portfolio/single/full/10.jpg" alt=""></a></div> </div> </div> </div> </div><!-- .portfolio-single-image end --> <div class="col_one_third nobottommargin"> <!-- Portfolio Single - Meta ============================================= --> <div class="card events-meta"> <div class="card-body"> <ul class="portfolio-meta nobottommargin"> <li><span><i class="icon-user"></i>Created by:</span> John Doe</li> <li><span><i class="icon-calendar3"></i>Completed on:</span> 17th March 2014</li> <li><span><i class="icon-lightbulb"></i>Skills:</span> HTML5 / PHP / CSS3</li> <li><span><i class="icon-link"></i>Client:</span> <a href="#">Google</a></li> </ul> </div> </div> <!-- Portfolio Single - Meta End --> </div> <!-- Portfolio Single Content ============================================= --> <div class="col_two_third portfolio-single-content col_last nobottommargin"> <!-- Portfolio Single - Description ============================================= --> <div class="fancy-title title-dotted-border"> <h2>Project Info:</h2> </div> <div class="col_full nobottommargin"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, labore deserunt ex cupiditate est blanditiis dignissimos nesciunt doloremque laboriosam ullam necessitatibus voluptatum tempora itaque quia porro voluptates quo excepturi veritatis!</p> </div> <!-- Portfolio Single - Description End --> </div><!-- .portfolio-single-content end --> <div class="clear"></div> <div class="divider divider-center"><i class="icon-circle"></i></div> <!-- Related Portfolio Items ============================================= --> <h4>Related Projects:</h4> <div id="related-portfolio" class="owl-carousel portfolio-carousel carousel-widget" data-margin="30" data-nav="false" data-autoplay="5000" data-items-xs="1" data-items-sm="2" data-items-md="3" data-items-xl="4"> <div class="oc-item"> <div class="iportfolio"> <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> </div> </div> <div class="oc-item"> <div class="iportfolio"> <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> </div> </div> <div class="oc-item"> <div class="iportfolio"> <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> </div> </div> <div class="oc-item"> <div class="iportfolio"> <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> </div> </div> <div class="oc-item"> <div class="iportfolio"> <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> </div> </div> <div class="oc-item"> <div class="iportfolio"> <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> </div> </div> </div><!-- .portfolio-carousel end --> </div> </div> </section><!-- #content end --> <?php get_footer(); |
Теперь этот шаблон нужно переопределить. Для этого создадим функцию sp_set_page_template() и разместим ее в файле functions.php
|
1 2 3 4 5 6 7 8 9 10 11 |
function sp_set_page_template($template){ $currentId = get_the_ID(); $currentPostType = get_post_type($currentId); if(is_single() && $currentPostType == 'sp_portfolio'){ $template = locate_template('page-templates/single-portfolio-page-template.php'); } return $template; } add_filter('template_include', 'sp_set_page_template', 99); |
И напоследок выведем заголовок и контентную часть. Для этих нужд в SP Framework есть класс SP_Framework_Post_Type_Utility, в нем есть метод get_content. Им мы воспользуемся для вывода контента.
А для вывод заголовка воспользуемся методом WordPress под названием get_the_title().
Вот что должно получится:
|
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 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 |
<?php /* * Portfolio single page */ get_header(); $postID = get_the_ID(); $postContent = SP_Framework_Post_Type_Utility::get_content($postID); ?> <!-- Page Title ============================================= --> <section id="page-title"> <div class="container clearfix"> <h1><?php echo get_the_title();?></h1> </div> </section><!-- #page-title end --> <!-- Content ============================================= --> <section id="content"> <div class="content-wrap"> <div class="container clearfix"> <!-- Portfolio Single Gallery ============================================= --> <div class="col_full portfolio-single-image"> <div class="fslider" data-arrows="true" data-animation="slide"> <div class="flexslider"> <div class="slider-wrap"> <div class="slide"><a href="#"><img src="images/portfolio/single/full/1.jpg" alt=""></a></div> <div class="slide"><a href="#"><img src="images/portfolio/single/full/7.jpg" alt=""></a></div> <div class="slide"><a href="#"><img src="images/portfolio/single/full/10.jpg" alt=""></a></div> </div> </div> </div> </div><!-- .portfolio-single-image end --> <div class="col_one_third nobottommargin"> <!-- Portfolio Single - Meta ============================================= --> <div class="card events-meta"> <div class="card-body"> <ul class="portfolio-meta nobottommargin"> <li><span><i class="icon-user"></i>Created by:</span> John Doe</li> <li><span><i class="icon-calendar3"></i>Completed on:</span> 17th March 2014</li> <li><span><i class="icon-lightbulb"></i>Skills:</span> HTML5 / PHP / CSS3</li> <li><span><i class="icon-link"></i>Client:</span> <a href="#">Google</a></li> </ul> </div> </div> <!-- Portfolio Single - Meta End --> </div> <!-- Portfolio Single Content ============================================= --> <div class="col_two_third portfolio-single-content col_last nobottommargin"> <!-- Portfolio Single - Description ============================================= --> <div class="fancy-title title-dotted-border"> <h2>Project Info:</h2> </div> <div class="col_full nobottommargin"> <?php echo $postContent;?> </div> <!-- Portfolio Single - Description End --> </div><!-- .portfolio-single-content end --> <div class="clear"></div> <div class="divider divider-center"><i class="icon-circle"></i></div> <!-- Related Portfolio Items ============================================= --> <h4>Related Projects:</h4> <div id="related-portfolio" class="owl-carousel portfolio-carousel carousel-widget" data-margin="30" data-nav="false" data-autoplay="5000" data-items-xs="1" data-items-sm="2" data-items-md="3" data-items-xl="4"> <div class="oc-item"> <div class="iportfolio"> <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> </div> </div> <div class="oc-item"> <div class="iportfolio"> <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> </div> </div> <div class="oc-item"> <div class="iportfolio"> <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> </div> </div> <div class="oc-item"> <div class="iportfolio"> <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> </div> </div> <div class="oc-item"> <div class="iportfolio"> <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> </div> </div> <div class="oc-item"> <div class="iportfolio"> <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> </div> </div> </div><!-- .portfolio-carousel end --> </div> </div> </section><!-- #content end --> <?php get_footer(); |