Masrour

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

6 پست در این موضوع قرار دارد

ارسال شده در (ویرایش شده)

سلام. من این قالب 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
0

به اشتراک گذاری این پست


لینک به پست

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


<!-- 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-->

1

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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


<!-- 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
0

به اشتراک گذاری این پست


لینک به پست

درست نشد.

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

0

به اشتراک گذاری این پست


لینک به پست

[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 تا مطلب آخر رو وردپرس نمایش داده ولی داخل اسلایدر نمیاد. بنظرتون مشکل از کجای اسلایدره؟اسلایدر دیگه ای سراغ ندارید؟

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری