حالت نمایش تایم لاین برای نمایش مطالب وردپرس

[runy 221]

سلام

چطور میشه کاری کرد اون حلقه ای که مطالب وردپرس را نمایش میده (صفحه ایندکس) مطالب را به صورت نمایشی تایم لاین Time Line (یکی اینور یکی اونور) ُ نمایش بده ؟؟

مثل لینک زیر :

http://codyhouse.co/demo/vertical-timeline/index.html

[بویکا 124]

سلام

چطور میشه کاری کرد اون حلقه ای که مطالب وردپرس را نمایش میده (صفحه ایندکس) مطالب را به صورت نمایشی تایم لاین Time Line (یکی اینور یکی اونور) ُ نمایش بده ؟؟

مثل لینک زیر :

http://codyhouse.co/demo/vertical-timeline/index.html

دوست عزیز در مورد کد نمی دونم ولی من خودم از این افزونه که رایگان هم هست و ریسپانسیو استفاده کردم . قابل ویرایش هم هست

https://wordpress.org/plugins/timeline-pro/

[runy 221]

دوست عزیز در مورد کد نمی دونم ولی من خودم از این افزونه که رایگان هم هست و ریسپانسیو استفاده کردم . قابل ویرایش هم هست

https://wordpress.or...s/timeline-pro/

داداش دمت گرم عالی بود.

ولی آخرش می خوام کد نویسی این نوع مطالب را هم یاد بگیرم.

دوستان کسی مینونه کمکم کنه ؟؟؟

[Anisi 301]

مهم قالبش هست، کوئری گرفتنش کاری نداره.

شرط می‌ذارید یکی در میون اون کلاسی رو اضافه کنه که روی راست و چپ بودن تاثیر می‌ذاره

[فرهاد-سئو 905]

http://tutorialzine.com/2010/01/advanced-event-timeline-with-php-css-jquery/

http://www.timeline-wp.com/download-theme-wordpress/

[بویکا 124]

http://tutorialzine.com/2010/01/advanced-event-timeline-with-php-css-jquery/

http://www.timeline-wp.com/download-theme-wordpress/

تست کنید !

   <?php
$x = 'odd';
$custom_query = new WP_Query(array(
'post_status' =>'publish',
'post_type' =>'post',
'order' =>'DESC',
'orderby' =>'ID',
'posts_per_page' =>'5',
'paged' => (get_query_var('paged')) ? get_query_var('paged') : 1
));
if($custom_query->have_posts()) :
echo '<ul class="queryposts list-group">';
while($custom_query->have_posts()) : $custom_query->the_post();
?>
<li class="list-group-item <?php echo $x;?>">
<h5 class="querypost-title list-group-item-heading" id="title-<?php the_ID();?>"><a href="javascript:void(0)"><?php the_title(); ?></a></h5>
<div class="querypost-excerpt list-group-item-text" id="excerpt-<?php the_ID();?>"><?php the_excerpt();?>
<div class="more text-left">
<a class="btn btn-info" href="<?php the_permalink(); ?>">ادامه مطلب</a>
</div>
</div>
</li>
<?php
if($x=='odd') {
$x = 'even';
}
else {
$x = 'odd';
}
endwhile;
echo '</ul>';
endif;
wp_reset_query();
?>

[graphicno 77]

سلام

دوست عزیز این صفحه ای که شما آدرس دادید خودش با Css درستش کرده با دستور :

:nth-child

شما فقط کافیه حلقه مربوط به مطالب رو براش ایجاد کنید خودش خودکار درست میشه

با این کد Css

@media only screen and (min-width: 1170px) {
.cd-timeline-content {
margin-left: 0;
padding: 1.6em;
width: 45%;
}
.cd-timeline-content::before {
top: 24px;
left: 100%;
border-color: transparent;
border-left-color: white;
}
.cd-timeline-content .cd-read-more {
float: left;
}
.cd-timeline-content .cd-date {
position: absolute;
width: 100%;
left: 122%;
top: 6px;
font-size: 16px;
font-size: 1rem;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content {
float: right;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content::before {
top: 24px;
left: auto;
right: 100%;
border-color: transparent;
border-right-color: white;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
float: right;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
left: auto;
right: 122%;
text-align: right;
}
.cssanimations .cd-timeline-content.is-hidden {
visibility: hidden;
}
.cssanimations .cd-timeline-content.bounce-in {
visibility: visible;
-webkit-animation: cd-bounce-2 0.6s;
-moz-animation: cd-bounce-2 0.6s;
animation: cd-bounce-2 0.6s;
}
}

اولین پست در سمت چپ قرار میگیره بعدش با دستور nth-child(even) گفته مطلب بعدی سمت راست قرار بگیره

ویرایش شده بهمن 93 توسط graphicno