امنیت سایت و سرور

امنیت سایت

رفع خطاهای w3c

رفع خطاهای w3c

افزایش سرعت سایت

سرعت سایت

ریسپانسیو

ریسپانسیو

پشتیبانی

پشتیبانی سایت

سئو و بهینه سازی

سئو و بهینه سازی

فروشگاه انجمن

فروشگاه انجمن

هاست وردپرس

هاست وردپرس


نمایش نتایج: از 1 به 5 از 5

موضوع: استفاده از اسلایدر بوت استرپ در وردپرس

  1. #1
    کاربر جدید rezadata آواتار ها
    تاریخ عضویت
    Jan 2018
    نوشته ها
    5
    تشکر تشکر کرده 
    0
    تشکر تشکر شده 
    0
    Thanked in
    0 پست

    پیش فرض استفاده از اسلایدر بوت استرپ در وردپرس

    سلام دوستان
    من یه اسلایدر دارم که با بوت استرپ طراحی شده و میخوام تو قالب وردپرسی خودم استفاده کنم تا 5 تا از آخرین مطالب سایت نمایش بده اما با پی اچ پی آشنا نیستم ممنون میشم کسی این کد رو با چیزایی که خواستم برام تکمیل کنه .خیلی ممنون
    کد:
    <div id="main_area">
                    <!-- Slider -->
                    <div class="row">
                        <div class="col-xs-12" id="slider">
                            <!-- Top part of the slider -->
                            <div class="row">
                                <div class="col-md-6 col-sm-12" id="carousel-bounding-box">
                                    <div class="carousel slide" id="myCarousel">
                                        <!-- Carousel items -->
                                        <div class="carousel-inner box-pic-slider">
                                            <div class="active item" data-slide-number="0">
                                            <img src="<?php bloginfo('template_url');  ?>/images/9دی.jpg"></div>
    
                                            <div class="item" data-slide-number="1">
                                            <img src="<?php bloginfo('template_url');  ?>/images/421A3505.JPG"></div>
    
                                            <div class="item" data-slide-number="2">
                                            <img src="<?php bloginfo('template_url');  ?>/images/421A3653.JPG"></div>
    
                                            <div class="item" data-slide-number="3">
                                            <img src="<?php bloginfo('template_url');  ?>/images/82380811-71313770.jpg"></div>
    
                                            <div class="item" data-slide-number="4">
                                            <img src="<?php bloginfo('template_url');  ?>/images/مظاهر.jpg"></div>
    
                                            <div class="item" data-slide-number="5">
                                            <img src="<?php bloginfo('template_url');  ?>/images/54.jpg"></div>
                                        </div><!-- Carousel nav -->
                                        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                            <span class="fa fa-arrow-circle-left"></span>                                       
                                        </a>
                                        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                            <span class="fa fa-arrow-circle-right"></span>                                       
                                        </a>                                
                                        </div>
                                </div>
    
                                <div class="col-md-6 col-sm-12" id="carousel-text"></div>
    
                                <div id="slide-content" style="display: none;">
                                    <div id="slide-content-0">
                                        <h2><a href="#" class="title-slide-content">اراصفهان با اسقف اعظم ارامنه مرکز و جنوب ایران</a></h2>
                                        <p>فرماندار اصفهان با حضور در کلیسای وانک با اسقف اعظم ارامنه مرکز و جنوب ایران و شورای خلیفه گری ارامنه و اعضای هیات مذهبی ارامنه اصفهان دیدار و سال نو میلادی را به هموطنان ارمنی تبریک گفت.</p>
                                        <p class="sub-text">1396/10/29 <a href="#">ادامه مطلب</a></p>
                                    </div>
    
                                    <div id="slide-content-1">
                                        <h2><a href="#" class="title-slide-content">پیام تسلیت فرماندار اصفهان به مناسبت ارتحال حجت الاسلام و المسلمین حاج شیخ مهدی مظاهری</a></h2>
                                        <p>فرماندار اصفهان طی پیامی ارتحال حجت الاسلام و المسلمین حاج شیخ مهدی مظاهری را به مردم شهیدپرور و مومن اصفهان تسلیت گفت. متن این پیام بدین شرح است :</p>
                                        <p class="sub-text">1396/10/29 <a href="#">ادامه مطلب</a></p>
                                    </div>
    
                                    <div id="slide-content-2">
                                        <h2><a href="#" class="title-slide-content">لورم ایپسوم متن ساختگی با تولید سادگی</a></h2>
                                        <p>کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو </p>
                                       <p class="sub-text">1396/10/29 <a href="#">ادامه مطلب</a></p>
                                    </div>
    
                                    <div id="slide-content-3">
                                        <h2><a href="#" class="title-slide-content">تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود</a></h2>
                                        <p>خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت کپایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
                                        <p class="sub-text">1396/10/29 <a href="#">ادامه مطلب</a></p>
                                    </div>
    
                                    <div id="slide-content-4">
                                        <h2><a href="#" class="title-slide-content">بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</a></h2>
                                        <p>نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها</p>
                                      <p class="sub-text">1396/10/29 <a href="#">ادامه مطلب</a></p>
                                    </div>
    
                                    <div id="slide-content-5">
                                        <h2><a href="#" class="title-slide-content">وابگوی سوالات پیوسته اهل دنیای موجود طراحی</a></h2>
                                        <p>تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. جناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود </p>
                                        <p class="sub-text">1396/10/29 <a href="#">ادامه مطلب</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!--/Slider-->
    
                    <div class="row hidden-xs" id="slider-thumbs">
                            <!-- Bottom switcher of slider -->
                            <ul class="hide-bullets">
                                <li class="col-sm-2">
                                    <a class="thumbnail slid-sm-pic" id="carousel-selector-0"><img src="<?php bloginfo('template_url');  ?>/images/9دی.jpg"></a>
                                </li>
    
                                <li class="col-sm-2">
                                    <a class="thumbnail slid-sm-pic" id="carousel-selector-1"><img src="<?php bloginfo('template_url');  ?>/images/421A3505.JPG"></a>
                                </li>
    
                                <li class="col-sm-2">
                                    <a class="thumbnail slid-sm-pic" id="carousel-selector-2"><img src="<?php bloginfo('template_url');  ?>/images/421A3653.JPG"></a>
                                </li>
    
                                <li class="col-sm-2">
                                    <a class="thumbnail slid-sm-pic" id="carousel-selector-3"><img src="<?php bloginfo('template_url');  ?>/images/82380811-71313770.jpg"></a>
                                </li>
    
                                <li class="col-sm-2">
                                    <a class="thumbnail slid-sm-pic" id="carousel-selector-4"><img src="<?php bloginfo('template_url');  ?>/images/مظاهر.jpg"></a>
                                </li>
    
                                <li class="col-sm-2">
                                    <a class="thumbnail slid-sm-pic" id="carousel-selector-5"><img src="<?php bloginfo('template_url');  ?>/images/54.jpg"></a>
                                </li>
                            </ul>                 
                    </div>
            </div>

  2. #2
    مدیریت کل سایت admin آواتار ها
    تاریخ عضویت
    Oct 2017
    نوشته ها
    770
    تشکر تشکر کرده 
    13
    تشکر تشکر شده 
    5
    Thanked in
    5 پست

    پیش فرض

    کدی که باید نمایش داده بشه اینه که نوشتم ولی با توجه به شرایط و وضعیت های گوناگون ممکنه مشکل داشته باشه
    کد:
    <div id="main_area">
    <!-- Slider -->
    <div class="row">
    <div class="col-xs-12" id="slider">
    <!-- Top part of the slider -->
    <div class="row">
    <div class="col-md-6 col-sm-12" id="carousel-bounding-box">
    <div class="carousel slide" id="myCarousel">
    <!-- Carousel items -->
    <div class="carousel-inner box-pic-slider">
    <?php
    $args=array    ( 
    // 'cat' => 'id', 
    // 'orderby'          => 'post_date',
    'post_status' => 'publish', 
    'posts_per_page' => 5
    );
    $my_query = null;
    $my_query = new WP_Query($args);
    if( $my_query->have_posts() ) { 
    while ($my_query->have_posts()) : $my_query->the_post(); ?>
    <div class="active item" data-slide-number="0">
    <img alt="<?php the_title(); ?>" src="<?=wp_get_attachment_url( get_post_thumbnail_id() ); ?>"/></div>
    <?php
    endwhile;
    }
    wp_reset_query();  // Restore global post data stomped by the_post().
    ?> 
    </div><!-- Carousel nav -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="fa fa-arrow-circle-left"></span>                                       
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="fa fa-arrow-circle-right"></span>                                       
    </a>                                
    </div>
    </div>
    <div class="col-md-6 col-sm-12" id="carousel-text"></div>
    <div id="slide-content">
    <?php
    $args=array    ( 
    // 'cat' => 'id', 
    // 'orderby'          => 'post_date',
    'post_status' => 'publish', 
    'posts_per_page' => 5
    );
    $my_query = null;
    $my_query = new WP_Query($args);
    if( $my_query->have_posts() ) { 
    while ($my_query->have_posts()) : $my_query->the_post(); ?>
    <div >
    <h2><a href="#" class="title-slide-content"><?php the_title(); ?></a></h2>
    <p>
    <?php
    if(has_excerpt(get_the_ID())) the_excerpt();
    else the_content_rss('', TRUE, '', 40);
    ?>
    </p>
    <p class="sub-text"><?php the_time('Y/m/d'); ?>  <a href="<?php the_permalink() ?>">ادامه مطلب</a></p>
    </div>
    <?php
    endwhile;
    }
    wp_reset_query();  // Restore global post data stomped by the_post().
    ?>                           
    </div>
    </div>
    </div>
    </div><!--/Slider-->
    <div class="row hidden-xs" id="slider-thumbs">
    <!-- Bottom switcher of slider -->
    <ul class="hide-bullets">
    <?php
    $args=array    ( 
    // 'cat' => 'id', 
    // 'orderby'          => 'post_date',
    'post_status' => 'publish', 
    'posts_per_page' => 5
    );
    $my_query = null;
    $my_query = new WP_Query($args);
    if( $my_query->have_posts() ) { 
    while ($my_query->have_posts()) : $my_query->the_post(); ?>
    <li class="col-sm-2"> <a class="thumbnail slid-sm-pic" id="carousel-selector-0">
    <img alt="<?php the_title(); ?>" src="<?=wp_get_attachment_url( get_post_thumbnail_id() ); ?>"/></a> </li>
    <?php
    endwhile;
    }
    wp_reset_query();  // Restore global post data stomped by the_post().
    ?> 
    </ul>                 
    </div>
    </div>

    تلگرام بنده :
    برای استفاده از امکانات سایت کنید
    برای استفاده از امکانات سایت کنیدبرای استفاده از امکانات سایت کنید
    برای استفاده از امکانات سایت کنید

  3. #3
    کاربر جدید rezadata آواتار ها
    تاریخ عضویت
    Jan 2018
    نوشته ها
    5
    تشکر تشکر کرده 
    0
    تشکر تشکر شده 
    0
    Thanked in
    0 پست

    پیش فرض

    ممنون دوست عزیز
    بله نمایش میده مطالب رو اما کد مشکلی داره اوونم اینکه در اسلایدرهای بوت استرپی باید اولین المان باید اکتیو باشه
    یه نمونه کد برای اسلایدر بوت استرپ در وردپرس به این شکل دارم که با کد پی اچ پی مشکل حل شده
    اما نمیتونم در اسلاید خودم استفاده کنم
    کد:
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
    
    
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <?php
          $args = array(
              'post_type'         => 'slider',
              'posts_per_page' => -1,
          );
          $my_query = new WP_Query($args);
          $counter=0;
          while ($my_query->have_posts()):
          $my_query->the_post();
          $do_not_duplicate = $post->ID;?>
            <div class="item <?php if($counter==0){echo 'active';} ?>">
              <?php
              the_post_thumbnail( 'slider' );
        ?>
                <div class="carousel-caption">
                    <h3><?php the_title(); ?></h3>
                </div>
            </div>
    
            <?php
        $counter++;
          endwhile; wp_reset_postdata(); ?>
    
    
    
    
        </div>
    
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

  4. #4
    مدیریت کل سایت admin آواتار ها
    تاریخ عضویت
    Oct 2017
    نوشته ها
    770
    تشکر تشکر کرده 
    13
    تشکر تشکر شده 
    5
    Thanked in
    5 پست

    پیش فرض

    فعلا با موبایلم فردا ساعت 9 صبح روی خط باش تا مشکل شما را رفع کنیم

    تلگرام بنده :
    برای استفاده از امکانات سایت کنید
    برای استفاده از امکانات سایت کنیدبرای استفاده از امکانات سایت کنید
    برای استفاده از امکانات سایت کنید

  5. #5
    مدیریت کل سایت admin آواتار ها
    تاریخ عضویت
    Oct 2017
    نوشته ها
    770
    تشکر تشکر کرده 
    13
    تشکر تشکر شده 
    5
    Thanked in
    5 پست

    پیش فرض

    از این کد استفاده کنید
    کد:
    <div class="container">
    <div id="main_area">
    <div class="row">
    <div class="span12" id="slider">
    <div class="row">
    <div class="span8" id="carousel-bounding-box">
    <div class="carousel slide" id="myCarousel">
    <div class="carousel-inner">
    <?php query_posts("showposts=1&cat=1"); if(have_posts()) : while(have_posts()) : the_post('');?>
    <div class="active item">
    <img src="http://pangash.ir/wp-content/themes/p2017/images/86.jpg"/></div>
    <?php endwhile; else :endif;  query_posts("offset=1&showposts=5&cat=1");  if(have_posts()) : while(have_posts()) : the_post('');?>
    <div class="item">
    <img src="http://pangash.ir/wp-content/themes/p2017/images/86.jpg"/></div>
    <?php endwhile; else :endif; ?>
    </div>
    <a class="carousel-control left" data-slide="prev" href="#myCarousel">‹</a> <a class="carousel-control right" data-slide="next" href="#myCarousel">›</a>
    </div>
    </div>
    <div class="span4" id="carousel-text"></div>
    <div id="slide-content" style="display: none;">
    <?php query_posts("showposts=6&cat=1"); if(have_posts()) : while(have_posts()) : the_post('');?>
    <div id="slide-content">
    <h2>Slider One</h2>
    <p>Lorem Ipsum Dolor</p>
    <p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
    </div>
    <?php endwhile; else :endif; ?>
    </div>
    </div>
    </div>
    </div> 
    <div class="row hidden-phone" id="slider-thumbs">
    <div class="span12">
    <ul class="thumbnails">
    <?php query_posts("showposts=6&cat=1"); if(have_posts()) : while(have_posts()) : the_post('');?>
    <li class="span2">
    <a class="thumbnail" id="carousel-selector-3"><img src="http://pangash.ir/wp-content/themes/p2017/images/86.jpg"/></a>
    </li>
    <?php endwhile; else :endif; ?>
    </ul>
    </div>
    </div>
    </div>
    </div>
    
    <script>  jQuery(document).ready(function($) {
     
            $('#myCarousel').carousel({
                    interval: 5000
            });
     
            $('#carousel-text').html($('#slide-content-0').html());
     
            //Handles the carousel thumbnails
            $('[id^=carousel-selector-]').click( function(){
                    var id_selector = $(this).attr("id");
                    var id = id_selector.substr(id_selector.length -1);
                    var id = parseInt(id);
                    $('#myCarousel').carousel(id);
            });
     
     
            // When the carousel slides, auto update the text
            $('#myCarousel').on('slid', function (e) {
                    var id = $('.item.active').data('slide-number');
                    $('#carousel-text').html($('#slide-content-'+id).html());
            });
    });</script>

    تلگرام بنده :
    برای استفاده از امکانات سایت کنید
    برای استفاده از امکانات سایت کنیدبرای استفاده از امکانات سایت کنید
    برای استفاده از امکانات سایت کنید

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
تماس