• اطلاعیه ها

    • Morteza

      باهم بسازیم: اطلس ووکامرس و وردپرس   14/07/96

      تاپیک ایجاد شده برای بحث در جهت ایجاد یک منبع، ویکی، صفحات توضیحی و یا بخش آموزشی جامع برای وردپرس و متعلقات مختلف آن است. لطفا جهت مشارکت در این بحث، ارائه پیشنهاد و یا انتقاد به تاپیک فوق مراجعه کنید. باهم بسازیم: اطلس ووکامرس و وردپرس
i.gratia

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

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

سلام

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

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

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

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


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

1

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


لینک به پست

سلام

توضیح کد: به جای عدد 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>

2

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


لینک به پست


<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 مطالب بالا کنم ؟؟؟

1

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


لینک به پست

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

آین تکه کدی که زحمت کشیدید و جایگزین کدوم یک از دستورات تو قسمت 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 !-->

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

3

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


لینک به پست

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

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

0

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


لینک به پست

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


<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 و عنوان مطالبند که می تونید تغییرات دلخواه رو روشون اعمال کنید

4

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


لینک به پست

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

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

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

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

ویرایش شده در توسط i.gratia
0

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


لینک به پست

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


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

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


لینک به پست

تگ p برای پاراگراف هست

برای کار شما div مناسبتر هست

2

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


لینک به پست

یه مشکل جدی : دستورات tabe css تو اینترنت اکسپولرر اجرا نمیشه چیکارش کنم ؟؟

0

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


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

کدوم دستورات؟

2

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


لینک به پست

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

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


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

0

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


لینک به پست

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


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

0

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


لینک به پست

استایل را بگذارید بررسی شود

0

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


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

اینجا همه چیش هست


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

0

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


لینک به پست

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

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


&orderby=rand

را حذف کنید

3

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


لینک به پست

ممنون

0

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط koolfayfer
      سلام به همه
      من یه div دارم که پیشفرض به سمت راست میچرخه به مدت نامحدود
      وقتی روش هاور میشی به اندازه یک ثانیه معکوس به سمت چپ میچرخه یه بار!
      حالا اگه کسی بیشتر از یک ثانیه هاور بمونه انیمیشن چرخش اولیه به خاطر وجود انیمیشن هاور stop میشه و میخوام اگه در css ترفندی هست بعد از گذشت یک ثانیه هاور شدن آنهاور بشه یا هر چیز دیگه که باعث بشه انیمیشن پیشفرض کار کنه
      اگه css نبود کسی با جیکوئری میدونه؟
    • توسط amzzm75
      باسلام و احترام قالبی که من استفاده میکنم تعداد زیادی فایل css و javascript داره به طوری که تعداد درخواست ها به سرور منو زیاد کرده به طوری که وقتی با gtmetrix تست میکنم میزنه 150 درخواست به سرور و به فشرده نبودن و تعداد زیاد فایل ها ایراد میگیره من یه بار اومدم با سایتایی که این فایلا رو فشرده میکنن فشردشون کردم اما فونت و ظاهر بعضی قسمت های سایت بهم ریخت و مجبور شدم به حالت قبل برش گردونم موندم چیکار کنم که تعداد فایل ها کم بشه تا سرعت لود سایت بالاتر بره و سایت بهینه بشه لطفا راهنمایی کنین 
      آدرس سایت من:umagazine.ir
    • توسط chemist
      با سلام و عرض خسته نباشید؛
      بنده از این کد CSS در وب سایت استفاده کرده ام؛
      #left-menu i img { max-width:24px; max-height:24px; } در مرورگر کروم موبایل تصاویر در اندازه واقعی عکس ها نمایش داده می شود! (از ماکزیمم طول و عرض تعیین شده تبعیت نمی کند) ولی در مابقی مرورگرها با ابعاد تعیین شده نمایش داده می شود. آیا برای سازگاری کامل با تمامی مرورگرها باید تغییری در کد اعمال کنم؟
      ممنون میشم راهنمایی بفرمائید.
      با تشکر
    • توسط mehr-cs
      سلام
      منمیخوام یه قسمت تحت عنوان تاریخچه داشته باشم به این صورت که، تو یک باکس کوچیک تمامی حروف الفبا رو داشته باشم و لوگوی کل تاریخچه ی برند هام تو صفحه باشه و کاربر بعد از کلیک کردن روی هر کدوم از حروف الفبا، کلیه تاریخچه هایی که با اون حرف شروع میشه رو ببینه !
      دوستان راهنمایی میکنن ؟
    • توسط mihanpsd
      سلام میخوام وقتی موس به سمت محصولات حرکت داده میشه ، عکس hover محصول نمایش داده نشه و حرکت نکنه . همون عکس بصورت ثابت باقی بمونه .
      ممنون میشم راهنمایی کنید .
      http://mashinno.com