رفتن به مطلب

تبدیل کدهای این اسلایدر به وردپرس


پست های پیشنهاد شده

سلام. من این قالب css html اسلایدر رو دارم و میخوام به وردپرس بگم کوئری 5 پست آخر رو نمایش بده. کد های من به این صورت است:

الان در این حالت که اسلایدرم 5 عدد لیبل داره (Pagination) روی اولی کوئری اجرا میشه ولی بقیه رو که میزنم محتوایی نداره! در عکس زیر اولین اسلاید محتوا رو درست نشوون میده و اولین مطلبم رو نمایش میده ولی اسلایدهای بعدی خالی هست. لطفا ایرادشو بگید.

اولین اسلاید:

ybxltkxlh28p90xo6glb.jpg

اسلاید دوم و ... .

6cv56vqvrg0nw0zk9p4r.jpg

کدهای html:


<!-- Slider Start -->
<div class="top-news">
<div class="slider">
<input type="radio" id="control1" name="controls" checked="checked"/>
<label for="control1"></label>
<input type="radio" id="control2" name="controls"/>
<label for="control2"></label>
<input type="radio" id="control3" name="controls"/>
<label for="control3"></label>
<input type="radio" id="control4" name="controls"/>
<label for="control4"></label>
<input type="radio" id="control5" name="controls"/>
<label for="control5"></label>

<div class="sliderinner">
<ul>
<?php
$my_query = new WP_Query('showposts=2');
while ($my_query->have_posts()):
$my_query->the_post();
$do_not_duplicate = $post->ID;
?>
<li>
<?php if ( has_post_thumbnail()) : ?>
<?php the_post_thumbnail('thumb-size3');?>
<?php else: ?>
<img width="570" height="300" src="<?php bloginfo('template_url'); ?>/images/no-image.jpg" class="attachment-130x130x1 wp-post-image" alt="" />
<?php endif; ?>
<div class="description">
<div class="description-text">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<p><?php the_content_rss('', TRUE, '', 30); ?></p>
</div>
</div>
</li>
<?php endwhile; ?>
</ul>

</div>
</div>
<!--slider-->

کدهای CSS:


.slider {
display: block;
height: 300px;
width: 570px;
margin: auto;
position: relative;
}
.sliderinner {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.sliderinner>ul {
list-style: none;
height: 100%;
width: 500%;
overflow: hidden;
position: relative;
left: 0px;
-webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}
.sliderinner>ul>li {
width: 20%;
height: 300px;
float: right;
position: relative;
}
.sliderinner>ul>li>img {
margin: auto;
height: 100%;
width: 100%;
}
.slider input[type=radio] {
position: absolute;
left: 50%;
bottom: 15px;
z-index: 100;
visibility: hidden;
}
.slider label {
position: absolute;
left: 8%;
top: 10px;
z-index: 100;
width: 13px;
height: 13px;
background-color:#fff;
cursor: pointer;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
box-shadow: 0px 0px 3px rgba(0,0,0,.8);
-webkit-transition: background-color .2s;
-moz-transition: background-color .2s;
-o-transition: background-color .2s;
transition: background-color .2s;
}
.slider input[type=radio]#control1:checked~label[for=control1] { background-color: #aaaaaa; }
.slider input[type=radio]#control2:checked~label[for=control2] { background-color: #aaaaaa; }
.slider input[type=radio]#control3:checked~label[for=control3] { background-color: #aaaaaa; }
.slider input[type=radio]#control4:checked~label[for=control4] { background-color: #aaaaaa; }
.slider input[type=radio]#control5:checked~label[for=control5] { background-color: #aaaaaa; }
.slider label[for=control1] { margin-left: -36px }
.slider label[for=control2] { margin-left: -18px }
.slider label[for=control4] { margin-left: 18px }
.slider label[for=control5] { margin-left: 36px }
.slider input[type=radio]#control1:checked~.sliderinner>ul { left: 0 }
.slider input[type=radio]#control2:checked~.sliderinner>ul { left: -100% }
.slider input[type=radio]#control3:checked~.sliderinner>ul { left: -200% }
.slider input[type=radio]#control4:checked~.sliderinner>ul { left: -300% }
.slider input[type=radio]#control5:checked~.sliderinner>ul { left: -400% }
.description {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
font-family: 'Yekan';
z-index: 1000;
font-size: 12px;
}
.description-text {
text-align: right;
background-color: rgba(0,0,0,.8);
padding:10px;
top: 0;
z-index: 4;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
color: #fff;
}
.description-text a {
color: #ECDC2C;
}
.description-text a:hover {
color: #EC922C;
}

کد Function:


// Add Slider Thumbnail
add_theme_support('post-thumbnails');
add_image_size('thumb-size3', 570, 300, true);

ویرایش شده توسط Masrour
لینک به ارسال

این کد رو امتحان کنین


<!-- Slider Start -->
<div class="top-news">
<div class="slider">
<?php
$counter = 0;
$my_query = new WP_Query('showposts=2');
while ($my_query->have_posts()) {
++$counter;
$my_query->the_post();
$checked = $counter == 1 ? ' checked="checked"' : '';
echo "<input type=\"radio\" id=\"control$counter\" name=\"controls\" $checked/>";
echo "<label for=\"control$counter\"></label>";
}
rewind_posts(); ?>
<div class="sliderinner">
<ul>
<?php
while ($my_query->have_posts()):
$my_query->the_post(); ?>
<li>
<?php
if ( has_post_thumbnail()) :
the_post_thumbnail('thumb-size3');
else: ?>
<img width="570" height="300" src="<?php echo get_template_directory_uri(); ?>/images/no-image.jpg" class="attachment-130x130x1 wp-post-image" alt="" />
<?php endif; ?>

<div class="description">
<div class="description-text">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<p><?php the_content_rss('', TRUE, '', 30); ?></p>
</div>
</div>

</li>
<?php endwhile; wp_reset_postdata(); ?>
</ul>
</div>
</div>
<!--slider-->

لینک به ارسال

این کد رو امتحان کنین


<!-- Slider Start -->
<div class="top-news">
<div class="slider">
<?php
$counter = 0;
$my_query = new WP_Query('showposts=2');
while ($my_query->have_posts()) {
++$counter;
$my_query->the_post();
$checked = $counter == 1 ? ' checked="checked"' : '';
echo "<input type=\"radio\" id=\"control$counter\" name=\"controls\" $checked/>";
echo "<label for=\"control$counter\"></label>";
}
rewind_posts(); ?>
<div class="sliderinner">
<ul>
<?php
while ($my_query->have_posts()):
$my_query->the_post(); ?>
<li>
<?php
if ( has_post_thumbnail()) :
the_post_thumbnail('thumb-size3');
else: ?>
<img width="570" height="300" src="<?php echo get_template_directory_uri(); ?>/images/no-image.jpg" class="attachment-130x130x1 wp-post-image" alt="" />
<?php endif; ?>

<div class="description">
<div class="description-text">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<p><?php the_content_rss('', TRUE, '', 30); ?></p>
</div>
</div>

</li>
<?php endwhile; wp_reset_postdata(); ?>
</ul>
</div>
</div>
<!--slider-->

درست نشد.

این showposts=2 گذاشتین 2 تا اسلاید کردین که فقط بازم مثل کد خودم اسلاید اول محتوا داره و باقی "خالی" !

ویرایش شده توسط Masrour
لینک به ارسال

درست نشد.

این showposts=2 گذاشتین 2 تا اسلاید کردین که فقط بازم مثل کد خودم اسلاید اول محتوا داره و باقی "خالی" !

سورس صفحه رو ببینید ، شاید یه جایی یه المنت کم یا زیاد گذاشتین و چیدمان صفحه بهم ریخته ، سورس صفحه رو چک کنید ببینید چن تا اسلایدر توشه

لینک به ارسال

چرا شو پست دوتا هست بذارید روی 5 تا به بالا

احتمالا مشکل از طرف اسلاید شو هست نه وردپرس

لینک به ارسال

[quote name='amin20100' timestamp='1439411907' p

سورس صفحه رو ببینید ، شاید یه جایی یه المنت کم یا زیاد گذاشتین و چیدمان صفحه بهم ریخته ، سورس صفحه رو چک کنید ببینید چن تا اسلایدر توشه

توی سورس صفحه 5 تا مطلب میاد ولی فکر میکنم مشکل از اسلایدر باشه چون وردپرس کوئری رو اجرا میکنه و توی سورس به صورت زیر دیده میشه:

بنظرت اسلایدر چه مشکلی داره؟ اسلایدر دیگه ای سراغ ندارید؟

سورس:


<!-- Slider Start -->
<div class="top-news">
<div class="slider">
<input type="radio" id="control1" name="controls" checked="checked"/>
<label for="control1"></label>
<input type="radio" id="control2" name="controls"/>
<label for="control2"></label>
<input type="radio" id="control3" name="controls"/>
<label for="control3"></label>
<input type="radio" id="control4" name="controls"/>
<label for="control4"></label>
<input type="radio" id="control5" name="controls"/>
<label for="control5"></label>
<div class="sliderinner">
<ul>
<li>
<img width="448" height="293" src="http://localhost/mytest/wp-content/uploads/2015/08/81715289-70087683.jpg" class="attachment-thumb-size3 wp-post-image" alt="81715289-70087683" /> <div class="description">
<div class="description-text">
<h2><a href="http://localhost/mytest/%d8%ad%d9%85%db%8c%d8%af-%d8%a7%d8%b3%d8%aa%db%8c%d9%84%db%8c-%d9%87%d8%af%d8%a7%db%8c%d8%aa-%d9%85%d9%84%d9%88%d8%a7%d9%86%d8%a7%d9%86-%d8%b1%d8%a7-%d8%a8%d9%87-%d8%b9%d9%87%d8%af%d9%87-%da%af%d8%b1/">حمید استیلی هدایت ملوانان را به عهده گرفت</a></h2>
<p>رییس هیات مدیره باشگاه ملوان عصر دوشنبه به ایرنا گفت : هیات مدیره بعد از نشست طولانی سرانجام با حمید استیلی به عنوان سرمربی ملوان به توافق رسید.
احمد دنیامالی اظهار ...</p>
</div>
</div>
</li>
<li>
<img width="400" height="300" src="http://localhost/mytest/wp-content/uploads/2015/08/1293401500.jpg" class="attachment-thumb-size3 wp-post-image" alt="1293401500" /> <div class="description">
<div class="description-text">
<h2><a href="http://localhost/mytest/%d9%85%d8%ad%d9%85%d8%af-%d8%b3%d8%ac%d8%a7%d8%af-%d9%be%d9%88%d8%b1-%d9%be%d8%b3%d8%b1-%d8%ae%db%8c%d9%84%db%8c-%d8%ae%d9%88%d8%a8%db%8c-%d8%a7%d8%b3%d8%aa/">محمد سجاد پور پسر خیلی خوبی است</a></h2>
<p>محمد سجاد پور پسر خیلی خوبی استمحمد سجاد پور پسر خیلی خوبی استمحمد سجاد پور پسر خیلی خوبی استمحمد سجاد پور پسر خیلی خوبی استمحمد سجاد پور پسر خیلی خوبی ...</p>
</div>
</div>
</li>
<li>
<img width="213" height="300" src="http://localhost/mytest/wp-content/uploads/2015/08/An-Act-of-War-2015.jpg" class="attachment-thumb-size3 wp-post-image" alt="An Act of War 2015" /> <div class="description">
<div class="description-text">
<h2><a href="http://localhost/mytest/%db%b8%db%b4%db%b9-%da%a9%db%8c%d9%84%d9%88%da%af%d8%b1%d9%85-%d8%a7%d9%86%d9%88%d8%a7%d8%b9-%d9%81%d8%b1%d8%a2%d9%88%d8%b1%d8%af%d9%87-%d9%87%d8%a7%db%8c-%d9%84%d8%a8%d9%86%db%8c-%d8%af%d8%b1-%d8%a2/">۸۴۹ کیلوگرم انواع فرآورده های لبنی در آستارا توقیف شد</a></h2>
<p>فرمانده انتظامی شهرستان آستارا صبح امروز (۱۱ مرداد) در مصاحبه با خبرنگار آستارا خبر گفت: بیش از ۶۱۰ کیلوگرم از انواع محصولات لبنی غیر بهداشتی و ۲۳۹ کیلوگرم فرآورده های ...</p>
</div>
</div>
</li>
<li>
<img width="300" height="225" src="http://localhost/mytest/wp-content/uploads/2015/08/81703423-700680511.jpg" class="attachment-thumb-size3 wp-post-image" alt="81703423-70068051" /> <div class="description">
<div class="description-text">
<h2><a href="http://localhost/mytest/91/">رئیس اداره فرهنگ و ارشاد اسلامی آستارا با اصحاب رسانه</a></h2>
<p>به گزارش رضوان خبر به نقل از ماسال نیوز، محمود شکری صبح پنجشنبه در مراسم بهره برداری از طرح توسعه صنایع چوب اسالم با بیان اینکه تنها ۲ درصد از ...</p>
</div>
</div>
</li>
<li>
<img width="300" height="225" src="http://localhost/mytest/wp-content/uploads/2015/08/81703423-70068051.jpg" class="attachment-thumb-size3 wp-post-image" alt="81703423-70068051" /> <div class="description">
<div class="description-text">
<h2><a href="http://localhost/mytest/%d8%ac%d9%84%d8%b3%d9%87-%d9%87%d9%85-%d8%a7%d9%86%d8%af%db%8c%d8%b4%db%8c-%d8%b1%d8%a6%db%8c%d8%b3-%d8%a7%d8%af%d8%a7%d8%b1%d9%87-%d9%81%d8%b1%d9%87%d9%86%da%af-%d9%88-%d8%a7%d8%b1%d8%b4%d8%a7%d8%af/">جلسه هم اندیشی رئیس اداره فرهنگ و ارشاد اسلامی آستارا با اصحاب رسانه برگزار شد</a></h2>
<p>جلسه هم اندیشی رئیس اداره فرهنگ و ارشاد اسلامی شهرستان آستارا با اصحاب رسانه در محل اداره فرهنگ و ارشاد اسلامی این شهرستان برگزار شد.
به گزارش خبرنگار آستارا خبر ، ...</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<!--slider-->

چرا شو پست دوتا هست بذارید روی 5 تا به بالا

احتمالا مشکل از طرف اسلاید شو هست نه وردپرس

بله سورس صفحه که نگاه کردم 5 تا مطلب آخر رو وردپرس نمایش داده ولی داخل اسلایدر نمیاد. بنظرتون مشکل از کجای اسلایدره؟اسلایدر دیگه ای سراغ ندارید؟

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...