رفتن به مطلب

تب css به همراه نمایش مطالب با تصویر شاخص


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

سلام

من چند روزه دارم دنبال tabe میگردم که چند تا پیدا کردم اما با جی کوئری عمل میکرد که وقتی تو سایتم میزاشتم با جی کوئری های دیگه تداخل پیدا میکرد و به هم میریخت

یه جا یه تب دیدیم که فقط html css بود ینی خبری از جی کوئری نبود براتون اینجا گذاشتم که کسی خواست استفاده کنه راحت باشه

یه موضوع دیگه که یسری کد بهش اضافه کردم که خودم میخواستم مطالب داخل تب به اینصورت نمایش داده بشه اما کدای ورد پرسش و بلد نیستم که جایگزین کنم اساتید اگه لطف کنن این دستوراتو بفرمایند جایگزین کنم ممنون میشم

پیش نمایشو تو این لینک میتونید ببینید


http://jsfiddle.net/igratia/y99VT/

لینک به ارسال

سلام

توضیح کد: به جای عدد 2 شماره آی دی دسته دلخواه - به جای 3 تعداد مطالبی که میخواید نمایش داده بشه.

به جای rand ترتیب دلخواه خودتون (برای اطلاعات بیشتر در مورد ترتیب نمایش اینجا کلیک کنید)

به جای دو عدد 50 و 50 هم سایز دلخواه تصویر شاخص شما.


<ul><?php $my_query = new WP_Query('cat=2&showposts=3&orderby=rand');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<!--CUSTOM LOOP STUFF HERE -->
<li>
<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(50,50), array("class" => "")); } ?>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>

لینک به ارسال


<ul><?php $my_query = new WP_Query('cat=2&showposts=3&orderby=rand');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<!--CUSTOM LOOP STUFF HERE -->
<li>
<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(50,50), array("class" => "")); } ?>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>

آقا سجاد ممنون

آین تکه کدی که زحمت کشیدید و جایگزین کدوم یک از دستورات تو قسمت html مطالب بالا کنم ؟؟؟

لینک به ارسال

آقا سجاد ممنون

آین تکه کدی که زحمت کشیدید و جایگزین کدوم یک از دستورات تو قسمت html مطالب بالا کنم ؟؟؟

[خوهش میکنم.. نکته: پیشنهاد میشه برای تشکر از دکمه تشکر استفاده کنید ;) ]

کد رو در اینجا بذارید:


<div id="container">
<!-- Start Tabs !-->
<div class="tab-container">
<!-- Use c + the tab number or any other identifier you'd like when creating a new tab, just keep them in order. You can have an unlimited number of tabs !-->
<div id="c1">
<a href="#c1" title="First">First</a> <!-- This is your actual tab and the content is below it !-->
<div class="tab-content"> <!-- tab-container > div > div in the CSS !-->
<div id="main">
اینجا
</div>
</div>
</div>

<div id="c2">
<a href="#c2" title="Second">Second</a> <!-- This is your actual tab and the content is below it !-->
<div class="tab-content"> <!-- tab-container > div > div in the CSS !-->
<div id="main">
اینجا
</div> </div>
</div>
<div id="c3">
<a href="#c3" title="Third">Third</a> <!-- This is your actual tab and the content is below it !-->
<div class="tab-content"> <!-- tab-container > div > div in the CSS !-->
<div id="main">
اینجا
</div> </div>
</div>
<div id="c4">
<a href="#c4" title="Fourth">Fourth</a> <!-- This is your actual tab and the content is below it !-->
<div class="tab-content"> <!-- tab-container > div > div in the CSS !-->
<div id="main">
اینجا
</div> </div>
</div>
</div><!-- Tab Container !-->

</div><!-- Container !-->

هر اینجا مربوط به یک تب است..

لینک به ارسال

آقا سجاد ممنون

یه موضوعیی اینکه استایل تیترمطلب و محتویا تو تصویر شاخص و جدا گانه چجوری بدم بهش که دقیقا نمایشش مثل دستور اچ تی ام الش باشه

لینک به ارسال

این کد نمایش دهنده تصویر شاخص + تیتر مطالبه و متن را همراه نمی آره


<ul class="my-tab"><?php $my_query = new WP_Query('cat=2&showposts=3&orderby=rand');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<!--CUSTOM LOOP STUFF HERE -->
<li>
<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(50,50), array("class" => "tab-thumb")); } ?>
<a href="<?php the_permalink(); ?>" class="tab-title><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>

کلاس های


my-tab
tab-thumb
tab-title

به ترتیب لایه اصلی تصویر شاخص با ابعاد 50 در 50 و عنوان مطالبند که می تونید تغییرات دلخواه رو روشون اعمال کنید

لینک به ارسال

این کد نمایش دهنده تصویر شاخص + تیتر مطالبه و متن را همراه نمی آره

ممنون از همه ی دوستان

در مورد " ادامه مطلب " و محتوای پست چطور ؟؟ چه کدی باید وارد کنم ؟؟

یه مشکل دیگه ای هست اینه که این 5 تا مطلب آخر و یه جا نشون میده دونه دونه کنار هم نمیان مثل اچ تی املی که بالا نشون دادم

ویرایش شده توسط i.gratia
لینک به ارسال

آقا با یه همچین چیزی درست شد استایلش و ما بقی چیزا اساتید اگه مشکلی داره تصحیح کنن تا بقیه دوستان که مثل من مبتدین راحت استفاده کنند


<div id="main-post-tab">
<?php $my_query = new WP_Query('cat=235&showposts=6&orderby=rand');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<!--CUSTOM LOOP STUFF HERE -->
<li id="post-tab">
<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(50,50), array("id" => "img-post-tab")); } ?>
<p id="title-post-tab"><?php the_title(); ?></p>
<p id="content-post-tab"><?php the_content_rss('', TRUE, '', 15); ?></p><p id="more-post-tab"><a href="<?php echo get_permalink(); ?>"> ادامه مطلب</a></p>
</li>
<?php endwhile; ?>
</div>

فقط یه سوال از اینکه از <p> زیاد استفاده کردم ایرادی پیدا نمیکنه ؟؟ منظور از لحاظ استاندارد کد نویسیه

ویرایش شده توسط i.gratia
لینک به ارسال

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

اینجا میتونید ببینید


http://jsfiddle.net/igratia/y99VT/

لینک به ارسال

عرض خسته نباشید خدمت دوستان یه مشکلی تو دستور زیر هست که وقتی رفرش میکنیم پست ها به صورت قاطی پاطی کنار هم میان ینی یبار پست اول و دوم دو تا آخرین پست ارسالیه بعد از رفرش دو پست اول د وتا مونده به آخرین ارسال هاس همینجوری در هم نشون میده دلیلش چی میتونه باشه ؟؟؟


<div id="main-post-tab">
<?php $my_query = new WP_Query('cat=235&showposts=6&orderby=rand');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<!--CUSTOM LOOP STUFF HERE -->
<li id="post-tab">
<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(50,50), array("id" => "img-post-tab")); } ?>
<p id="title-post-tab"><?php the_title(); ?></p>
<p id="content-post-tab"><?php the_content_rss('', TRUE, '', 15); ?></p><p id="more-post-tab"><a href="<?php echo get_permalink(); ?>"> ادامه مطلب</a></p>
</li>
<?php endwhile; ?>
</div>

لینک به ارسال

اینجا که درست عمل می کنه جایی که مشکل داره باید کدش بررسی بشه

ببخشید سئوالتون بد متوجه شده بودم از کد


&orderby=rand

را حذف کنید

لینک به ارسال

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

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

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

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

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

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

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

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

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