runy

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

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

سلام

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

مثل لینک زیر :


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

0

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


لینک به پست

سلام

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

مثل لینک زیر :


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

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

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

1

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


لینک به پست

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

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

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

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

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

1

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


لینک به پست

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

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

1

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


لینک به پست


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


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

2

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


لینک به پست


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();
?>

1

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


لینک به پست

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

سلام

دوست عزیز این صفحه ای که شما آدرس دادید خودش با 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) گفته مطلب بعدی سمت راست قرار بگیره

ویرایش شده در توسط graphicno
1

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


لینک به پست

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

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

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

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


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

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

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


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