رفتن به مطلب

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


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

سلام

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

مثل لینک زیر :


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

لینک به ارسال

سلام

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

مثل لینک زیر :


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

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

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

لینک به ارسال

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

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

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

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

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

لینک به ارسال

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

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

لینک به ارسال


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


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

لینک به ارسال


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

لینک به ارسال

سلام

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

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

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

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

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

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

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

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

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

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