مشکل چیه دقیقا ؟
سورس صفحه مورد نظر را بذارید
با سلام دوست عزیز
من یه کد tml دارم به شکل زیر :
<ul id="portfolio-filter" class="wow fadeIn clearfix"> <li class="activeFilter"><a href="#" data-filter="*">All</a></li> <li><a href="#" data-filter=".web-design">Web Design</a></li> <li><a href="#" data-filter=".illustrations">Branding</a></li> <li><a href="#" data-filter=".ui-elements">UI Elements</a></li> <li><a href="#" data-filter=".graphics">Graphics</a></li> </ul><!-- #portfolio-filter end --> <!-- Portfolio Items ============================================= --> <div id="portfolio" class="wow fadeIn clearfix"> <article class="portfolio-item illustrations"> <div class="wow fadeIn"> <a href="portfolio-single.html"> <div class="portfolio-image"> <img src="img/portfolio1.jpg" alt="Portfolio 1"> <div class="portfolio-overlay"> <div class="portfolio-desc"> <h3 class="title-with-bord">Ladder Case</h3> <span>Branding</span> </div> </div> </div> </a> </div> </article> <article class="portfolio-item ui-elements"> <div class="wow fadeIn"> <a href="portfolio-single.html"> <div class="portfolio-image"> <img src="img/portfolio2.jpg" alt="Portfolio 1"> <div class="portfolio-overlay"> <div class="portfolio-desc"> <h3 class="title-with-bord">Coolamari</h3> <span>UI Elements</span> </div> </div> </div> </a> </div> </article> <article class="portfolio-item illustrations"> <div class="wow fadeIn"> <a href="portfolio-single.html"> <div class="portfolio-image"> <img src="img/portfolio3.jpg" alt="Portfolio 1"> <div class="portfolio-overlay"> <div class="portfolio-desc"> <h3 class="title-with-bord">Company Profile Presentation</h3> <span>Branding</span> </div> </div> </div> </a> </div> </article> <article class="portfolio-item web-design"> <div class="wow fadeIn"> <a href="portfolio-single.html"> <div class="portfolio-image"> <img src="img/portfolio4.jpg" alt="Portfolio 1"> <div class="portfolio-overlay"> <div class="portfolio-desc"> <h3 class="title-with-bord">Talk Chair</h3> <span>Web Design</span> </div> </div> </div> </a> </div> </article> <article class="portfolio-item graphics"> <div class="wow fadeIn"> <a href="portfolio-single.html"> <div class="portfolio-image"> <img src="img/portfolio7.jpg" alt="Portfolio 1"> <div class="portfolio-overlay"> <div class="portfolio-desc"> <h3 class="title-with-bord">Ipad Mockup</h3> <span>Graphics</span> </div> </div> </div> </a> </div> </article> <article class="portfolio-item illustrations"> <div class="wow fadeIn"> <a href="portfolio-single.html"> <div class="portfolio-image"> <img src="img/portfolio6.jpg" alt="Portfolio 1"> <div class="portfolio-overlay"> <div class="portfolio-desc"> <h3 class="title-with-bord">Oak Furnished Chair</h3> <span>Branding</span> </div> </div> </div> </a> </div> </article> <article class="portfolio-item graphics"> <div class="wow fadeIn"> <a href="portfolio-single.html"> <div class="portfolio-image"> <img src="img/portfolio5.jpg" alt="Portfolio 1"> <div class="portfolio-overlay"> <div class="portfolio-desc"> <h3 class="title-with-bord">Name Board</h3> <span>Graphics</span> </div> </div> </div> </a> </div> </article> <article class="portfolio-item ui-elements"> <div class="wow fadeIn"> <a href="portfolio-single.html"> <div class="portfolio-image"> <img src="img/portfolio10.jpg" alt="Portfolio 1"> <div class="portfolio-overlay"> <div class="portfolio-desc"> <h3 class="title-with-bord">Reformed Book Shelf</h3> <span>UI Elements</span> </div> </div> </div> </a> </div> </article> <article class="portfolio-item wide-portfolio ui-elements"> <div class="wow fadeIn"> <a href="portfolio-single.html"> <div class="portfolio-image"> <img src="img/portfolio9.jpg" alt="Portfolio 1"> <div class="portfolio-overlay"> <div class="portfolio-desc"> <h3 class="title-with-bord">Clean Shoe Case</h3> <span>UI Elements</span> </div> </div> </div> </a> </div> </article> <article class="portfolio-item ui-elements"> <div class="wow fadeIn"> <a href="portfolio-single.html"> <div class="portfolio-image"> <img src="img/portfolio8.jpg" alt="Portfolio 1"> <div class="portfolio-overlay"> <div class="portfolio-desc"> <h3 class="title-with-bord">Office Stationary</h3> <span>UI Elements</span> </div> </div> </div> </a> </div> </article> </div><!-- #portfolio end --> <!-- infinite load button start --> <div id="load-more-portfolio"><a href="index-infinite-2.html"></a></div> <button id="load-infinite">Load More</button> <!-- infinite load button end --> <!-- Portfolio Script ============================================= --> <script type="text/javascript"> jQuery(window).load(function(){ var $container = $('#portfolio'); $container.isotope({ transitionDuration: '0.65s', layoutMode: 'packery', }); $('#portfolio-filter a').click(function(){ $('#portfolio-filter li').removeClass('activeFilter'); $(this).parent('li').addClass('activeFilter'); var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector }); return false; }); $(window).resize(function() { $container.isotope('layout'); }); // Infinite Scroll $container.infinitescroll({ loading: { finishedMsg: 'There is no more', msgText: 'loading', speed: 'normal' }, state: { isDone: false }, navSelector : '#load-more-portfolio', nextSelector : '#load-more-portfolio a', itemSelector : 'article.portfolio-item', }, // Infinite Scroll Callback function( newElements ) { $container.isotope( 'appended', $( newElements ) ); var t = setTimeout( function(){ $container.isotope('layout'); }, 2000 ); }); $(window).unbind(); $("#load-infinite").click(function(){ $container.infinitescroll('retrieve'); return false; }); }); </script><!-- Portfolio Script End -->و می خوام یه کوءری بهش اضافه کنم که شده این
<ul id="portfolio-filter" class="wow fadeIn clearfix"> <li class="activeFilter"><a href="#" data-filter="*">All</a></li> <li><a href="#" data-filter=".web-design">Web Design</a></li> <li><a href="#" data-filter=".illustrations">Branding</a></li> <li><a href="#" data-filter=".ui-elements">UI Elements</a></li> <li><a href="#" data-filter=".graphics">Graphics</a></li> </ul> <!-- #portfolio-filter end --> <!-- Portfolio Items ============================================= --> <div id="portfolio" class="wow fadeIn clearfix"> <?php$portfoliohome = new WP_Query(array('post_type' => 'portfolio','post_status' => 'publish','posts_per_page' => 4,'order' => 'ASC','orderby' => 'none','paged'=> ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1,));if($portfoliohome->have_posts()) : ?><?php while($portfoliohome->have_posts()) : $portfoliohome->the_post();?> <article class="portfolio-item illustrations"> <div class="wow fadeIn"> <a href="<?php the_permalink();?>" > <div class="portfolio-image"> <?php the_post_thumbnail('full'); ?> <div class="portfolio-overlay"> <div class="portfolio-desc"> <h3 class="title-with-bord"><?php the_title();?></h3> <span><?php single_cat_title( '', true ); ?></span> </div> </div> </div> </a> </div> </article><?php endwhile; ?><?php endif; ?> <?php wp_reset_query();?></div> <!-- #portfolio end --> <!-- infinite load button start --> <div id="load-more-portfolio"><a href="index-infinite-2.html"></a></div> <button id="load-infinite">Load More</button> <!-- infinite load button end --> <!-- Portfolio Script ============================================= --> <script type="text/javascript"> jQuery(window).load(function () { var $container = $('#portfolio'); $container.isotope({transitionDuration: '0.65s', layoutMode: 'packery',}); $('#portfolio-filter a').click(function () { $('#portfolio-filter li').removeClass('activeFilter'); $(this).parent('li').addClass('activeFilter'); var selector = $(this).attr('data-filter'); $container.isotope({filter: selector}); return false; }); $(window).resize(function () { $container.isotope('layout'); }); // Infinite Scroll $container.infinitescroll({ loading: { finishedMsg: 'There is no more', msgText: 'loading', speed: 'normal' }, state: { isDone: false }, navSelector: '#load-more-portfolio', nextSelector: '#load-more-portfolio a', itemSelector: 'article.portfolio-item', }, // Infinite Scroll Callback function (newElements) { $container.isotope('appended', $(newElements)); var t = setTimeout(function () { $container.isotope('layout'); }, 2000); }); $(window).unbind(); $("#load-infinite").click(function () { $container.infinitescroll('retrieve'); return false; }); }); </script>حالا مشکل اینه که مثل قالب html در نمیاد
و نمیدونم چه بلایی سرش بیارم!
