رفتن به مطلب

وردپرس مشکل در نمایش آخرین مطالب سایت وردپرس


tikabzar

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

سلام به همه دوستان عزیز

 

دوستان این که رو استایل دادم ولی تصاویر به صورت عمودی نمایش داده میشه.
میشه افقیش کرد ؟

این هم کد 

 

<div class="item-hover effect17 bottom_to_top">
<?php
global $post;
$myposts = get_posts(array('numberposts' => 6, 'offset' => 0,'post_status'=>'publish'));
foreach($myposts as $post) :
setup_postdata($post);
?>
<div class="item-hover effect17 bottom_to_top">
<a href="https://go.20script.ir/index.php?url=<?php the_permalink(); ?>" rel="nofollow">
<div class="img"><img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php get_image_url(); ?>&amp;h=500&amp;w=330&amp;zc=0" alt="<?php the_title(); ?>" style="display: inline;"></div>

<div class="info"><div class="info-back"></div>
<h3><?php the_title(); ?></h3>
<p><?php the_title(); ?></p>
</div></div>
</a>


</div>
<?php endforeach; ?>
<?php wp_reset_query(); ?>

 

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

درود.

شما میتونید div موجود در خط اول رو یک class جدید بهش بدید و در استایل به اون کلس ، خاصیت display: inline-flex رو بدید.

با اینکار تمامی عناصر موجود داخل div افقی میشن اما میتونید هر تصویر و عنوان رو داخل یک div اضافه قرار بدید و مثل قبل یک کلس اضافه کنید و استایل display: grid رو به اون بدید.

 

در نتیجه تصاویر به صورت افقی ولی اطلاعات زیر تصاویر به صورت عمودی خواهند بود

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

در 10 ساعت قبل، masih1994 گفته است :

درود.

شما میتونید div موجود در خط اول رو یک class جدید بهش بدید و در استایل به اون کلس ، خاصیت display: inline-flex رو بدید.

با اینکار تمامی عناصر موجود داخل div افقی میشن اما میتونید هر تصویر و عنوان رو داخل یک div اضافه قرار بدید و مثل قبل یک کلس اضافه کنید و استایل display: grid رو به اون بدید.

 

در نتیجه تصاویر به صورت افقی ولی اطلاعات زیر تصاویر به صورت عمودی خواهند بود

 

سلام دوست عزیز خیلی ممنون

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

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

استایل رو ساختم ولی به وردپرس تبدیل کردم همش عمودیه؟
میخوام تصاویر شاخص تو یه ردیف 6 عدد با سایز 230 در 230 نمایش داده بشه.

ممنون میشم کمکم کنید.

 

<style>

.Hamed-A{display:inline-block;margin:0 10px 60px 0}

.item-hover{position:relative;width:220px;height:220px;-webkit-transition:all 0.35s ease-in-out; -moz-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out}.item-hover,.item-hover *{-webkit-box-sizing:border-box; -moz-box-sizing:border-box;box-sizing:border-box}.item-hover a{color:#333}.item-hover a:hover{text-decoration:none}.item-hover img{width:100%;height:100%}.item-hover .img{position:relative;width:220px;height:220px}.item-hover .img:before{position:absolute;display:block;content:'';width:100%;height:100%;box-shadow:inset 0 0 0 10px rgba(255,255,255,0.6),0 1px 2px rgba(0,0,0,0.3);-webkit-transition:all 0.35s ease-in-out; -moz-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out}.item-hover .info{position:absolute;top:0;bottom:0;left:0;right:0;text-align:center;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.item-hover.effect16.right_to_left a:hover .img{-webkit-transform:rotate(120deg); -moz-transform:rotate(120deg);transform:rotate(120deg)}.item-hover.effect17 .info{opacity:0;-webkit-transform:scale(0); -moz-transform:scale(0);transform:scale(0);-webkit-transition:all 0.35s ease-in-out; -moz-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out}.item-hover.effect17 .info h3{color:#fff;text-transform:uppercase;position:relative;font-size:20px;margin:0 30px;padding:85px 0 0 0;height:110px}.item-hover.effect17 .info p{color:#bbb;font-style:italic;margin:0 30px;font-size:12px;opacity:0;-webkit-transition:all 0.35s ease-in-out; -moz-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out}.item-hover.effect17 a:hover .img:before{box-shadow:inset 0 0 0 110px #333,inset 0 0 0 16px rgba(255,255,255,0.8),0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 0 110px rgba(0,0,0,0.6),inset 0 0 0 16px rgba(255,255,255,0.8),0 1px 2px rgba(0,0,0,0.1)}.item-hover.effect17 a:hover .info{opacity:1;-webkit-transform:scale(1); -moz-transform:scale(1);transform:scale(1)}.item-hover.effect17 a:hover .info p{opacity:1}



</style>




<div class="item-hover effect17 bottom_to_top">
<a href="آدرس لینک" rel="nofollow">
<div class="img"><img src="تصاویر شاخص" alt="عنوان مطلب" style="display: inline;"></div>

<div class="info"><div class="info-back"></div>
<h3>عنوان بخش</h3>
<p>توضیحات</p>
</div></div>
</a>

 

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

درود مجدد .

طبق چیزی که گفتم ، اگر کل تصاویر را با inline-flex پوشش بدید ، مشکلی نخواهد بود.

احتمالا چیزی که نیاز دارید نوع نمایش به این صورت هست :

لینک ها تنها برای اعضای سایت قابل نمایش است.

دقت داشته باشید که display:inline-flex نباید داخل حلقه قرار داشته باشه! چرا که اگر داخل حلقه باشه ، با هر بار دریافت یک تصویر ، این استایل هم تکرار میشه و هیچ نوع تاثیری روی نمایش کل تصاویر نداره.

بلکه شما باید یک DIV ثابت خارج از حلقه داشته باشید که استایل display: inline-flex رو داشته باشه .

کدی که باید استفاده کنید این هست :

<style>

.Hamed-A{display:inline-block;margin:0 10px 60px 0}

.item-hover{position:relative;width:220px;height:220px;-webkit-transition:all 0.35s ease-in-out; -moz-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out}.item-hover,.item-hover *{-webkit-box-sizing:border-box; -moz-box-sizing:border-box;box-sizing:border-box}.item-hover a{color:#333}.item-hover a:hover{text-decoration:none}.item-hover img{width:100%;height:100%}.item-hover .img{position:relative;width:220px;height:220px}.item-hover .img:before{position:absolute;display:block;content:'';width:100%;height:100%;box-shadow:inset 0 0 0 10px rgba(255,255,255,0.6),0 1px 2px rgba(0,0,0,0.3);-webkit-transition:all 0.35s ease-in-out; -moz-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out}.item-hover .info{position:absolute;top:0;bottom:0;left:0;right:0;text-align:center;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.item-hover.effect16.right_to_left a:hover .img{-webkit-transform:rotate(120deg); -moz-transform:rotate(120deg);transform:rotate(120deg)}.item-hover.effect17 .info{opacity:0;-webkit-transform:scale(0); -moz-transform:scale(0);transform:scale(0);-webkit-transition:all 0.35s ease-in-out; -moz-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out}.item-hover.effect17 .info h3{color:#fff;text-transform:uppercase;position:relative;font-size:20px;margin:0 30px;padding:85px 0 0 0;height:110px}.item-hover.effect17 .info p{color:#bbb;font-style:italic;margin:0 30px;font-size:12px;opacity:0;-webkit-transition:all 0.35s ease-in-out; -moz-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out}.item-hover.effect17 a:hover .img:before{box-shadow:inset 0 0 0 110px #333,inset 0 0 0 16px rgba(255,255,255,0.8),0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 0 110px rgba(0,0,0,0.6),inset 0 0 0 16px rgba(255,255,255,0.8),0 1px 2px rgba(0,0,0,0.1)}.item-hover.effect17 a:hover .info{opacity:1;-webkit-transform:scale(1); -moz-transform:scale(1);transform:scale(1)}.item-hover.effect17 a:hover .info p{opacity:1}

.showinline {display: inline-flex;}
.showgrid {display:grid;margin: 2px;}

</style>



<div class="showinline">



<div class="item-hover effect17 bottom_to_top showgrid">
<a href="آدرس لینک" rel="nofollow">
<div class="img"><img src="تصویر شاخص" alt="عنوان مطلب" style="display: inline;"></div>

<div class="info"><div class="info-back"></div>
<h3>عنوان بخش</h3>
<p>توضیحات</p>
</div>
</a>
</div>



</div>

در کد بالا اگر دقت کنید بین <div class="showinline"> تا DIV بعدی فاصله زیادی گذاشتم. <div class="showinline"> باید خارج از حلقه قرار بگیره تا بتونه به طور کلی تمامی تصاویر دریافت شده توسط حلقه رو به صورت افقی نمایش بده.

 

یک مثال با فرمت HTML هم آماده کردم. دریافت کنید و سورس رو مشاهده کنید و همزمان با مرورگر هم بررسی کنید که چطوری باید اینکارو انجام بدید :

لینک ها تنها برای اعضای سایت قابل نمایش است.

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

در 1 ساعت قبل، masih1994 گفته است :

درود مجدد .

طبق چیزی که گفتم ، اگر کل تصاویر را با inline-flex پوشش بدید ، مشکلی نخواهد بود.

احتمالا چیزی که نیاز دارید نوع نمایش به این صورت هست :

لینک ها تنها برای اعضای سایت قابل نمایش است.

دقت داشته باشید که display:inline-flex نباید داخل حلقه قرار داشته باشه! چرا که اگر داخل حلقه باشه ، با هر بار دریافت یک تصویر ، این استایل هم تکرار میشه و هیچ نوع تاثیری روی نمایش کل تصاویر نداره.

بلکه شما باید یک DIV ثابت خارج از حلقه داشته باشید که استایل display: inline-flex رو داشته باشه .

کدی که باید استفاده کنید این هست :


<style>

.Hamed-A{display:inline-block;margin:0 10px 60px 0}

.item-hover{position:relative;width:220px;height:220px;-webkit-transition:all 0.35s ease-in-out; -moz-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out}.item-hover,.item-hover *{-webkit-box-sizing:border-box; -moz-box-sizing:border-box;box-sizing:border-box}.item-hover a{color:#333}.item-hover a:hover{text-decoration:none}.item-hover img{width:100%;height:100%}.item-hover .img{position:relative;width:220px;height:220px}.item-hover .img:before{position:absolute;display:block;content:'';width:100%;height:100%;box-shadow:inset 0 0 0 10px rgba(255,255,255,0.6),0 1px 2px rgba(0,0,0,0.3);-webkit-transition:all 0.35s ease-in-out; -moz-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out}.item-hover .info{position:absolute;top:0;bottom:0;left:0;right:0;text-align:center;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.item-hover.effect16.right_to_left a:hover .img{-webkit-transform:rotate(120deg); -moz-transform:rotate(120deg);transform:rotate(120deg)}.item-hover.effect17 .info{opacity:0;-webkit-transform:scale(0); -moz-transform:scale(0);transform:scale(0);-webkit-transition:all 0.35s ease-in-out; -moz-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out}.item-hover.effect17 .info h3{color:#fff;text-transform:uppercase;position:relative;font-size:20px;margin:0 30px;padding:85px 0 0 0;height:110px}.item-hover.effect17 .info p{color:#bbb;font-style:italic;margin:0 30px;font-size:12px;opacity:0;-webkit-transition:all 0.35s ease-in-out; -moz-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out}.item-hover.effect17 a:hover .img:before{box-shadow:inset 0 0 0 110px #333,inset 0 0 0 16px rgba(255,255,255,0.8),0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 0 110px rgba(0,0,0,0.6),inset 0 0 0 16px rgba(255,255,255,0.8),0 1px 2px rgba(0,0,0,0.1)}.item-hover.effect17 a:hover .info{opacity:1;-webkit-transform:scale(1); -moz-transform:scale(1);transform:scale(1)}.item-hover.effect17 a:hover .info p{opacity:1}

.showinline {display: inline-flex;}
.showgrid {display:grid;margin: 2px;}

</style>



<div class="showinline">



<div class="item-hover effect17 bottom_to_top showgrid">
<a href="آدرس لینک" rel="nofollow">
<div class="img"><img src="تصویر شاخص" alt="عنوان مطلب" style="display: inline;"></div>

<div class="info"><div class="info-back"></div>
<h3>عنوان بخش</h3>
<p>توضیحات</p>
</div>
</a>
</div>



</div>

در کد بالا اگر دقت کنید بین <div class="showinline"> تا DIV بعدی فاصله زیادی گذاشتم. <div class="showinline"> باید خارج از حلقه قرار بگیره تا بتونه به طور کلی تمامی تصاویر دریافت شده توسط حلقه رو به صورت افقی نمایش بده.

 

یک مثال با فرمت HTML هم آماده کردم. دریافت کنید و سورس رو مشاهده کنید و همزمان با مرورگر هم بررسی کنید که چطوری باید اینکارو انجام بدید :

لینک ها تنها برای اعضای سایت قابل نمایش است.


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

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

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

 

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

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

 

مرحله اول

ابتدا کدهای زیر رو در فایل CSS اصلی قالبتون قرار بدید :

.Hamed-A{display:inline-block;margin:0 10px 60px 0}
.item-hover{position:relative;width:220px;height:220px;-webkit-transition:all 0.35s ease-in-out; -moz-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out}.item-hover,.item-hover *{-webkit-box-sizing:border-box; -moz-box-sizing:border-box;box-sizing:border-box}.item-hover a{color:#333}.item-hover a:hover{text-decoration:none}.item-hover img{width:100%;height:100%}.item-hover .img{position:relative;width:220px;height:220px}.item-hover .img:before{position:absolute;display:block;content:'';width:100%;height:100%;box-shadow:inset 0 0 0 10px rgba(255,255,255,0.6),0 1px 2px rgba(0,0,0,0.3);-webkit-transition:all 0.35s ease-in-out; -moz-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out}.item-hover .info{position:absolute;top:0;bottom:0;left:0;right:0;text-align:center;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.item-hover.effect16.right_to_left a:hover .img{-webkit-transform:rotate(120deg); -moz-transform:rotate(120deg);transform:rotate(120deg)}.item-hover.effect17 .info{opacity:0;-webkit-transform:scale(0); -moz-transform:scale(0);transform:scale(0);-webkit-transition:all 0.35s ease-in-out; -moz-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out}.item-hover.effect17 .info h3{color:#fff;text-transform:uppercase;position:relative;font-size:20px;margin:0 30px;padding:85px 0 0 0;height:110px}.item-hover.effect17 .info p{color:#bbb;font-style:italic;margin:0 30px;font-size:12px;opacity:0;-webkit-transition:all 0.35s ease-in-out; -moz-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out}.item-hover.effect17 a:hover .img:before{box-shadow:inset 0 0 0 110px #333,inset 0 0 0 16px rgba(255,255,255,0.8),0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 0 110px rgba(0,0,0,0.6),inset 0 0 0 16px rgba(255,255,255,0.8),0 1px 2px rgba(0,0,0,0.1)}.item-hover.effect17 a:hover .info{opacity:1;-webkit-transform:scale(1); -moz-transform:scale(1);transform:scale(1)}.item-hover.effect17 a:hover .info p{opacity:1}
.showinline {display: inline-flex;max-width: 100%;overflow: auto;padding-bottom: 5px;}
.showgrid {display:grid;margin: 2px;}
#devmescroll::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(158, 158, 158, 0.59);
	border-radius: 4px;
	background-color: rgba(27, 27, 27, 0);
}
#devmescroll::-webkit-scrollbar{
	height: 5px;
}
#devmescroll::-webkit-scrollbar-thumb{
	border-radius: 4px;
	-webkit-box-shadow: inset 0 0 6px rgba(255, 193, 7, 0.47);
	background-color: #FFC107;
}

نکته : سعی کنید تا حد امکان کدهای استایل رو در فایل های CSS قرار بدید نه در فایل های PHP .

نکته 2 : در کد بالا ، اسکرول بار بخش افقی هم یک تغییراتی دادم که در اندازه صفحه نمایش کوچک تر ، به خوبی نمایش داده بشه.

نکته 3 : با کد استایل بالا می تونید بیشتر از 6 مطلب هم دریافت کنید . در اینصورت با افزایش تعداد مطالب ، تصاویر مطالب جدیدتر از صفحه بیرون نخواهد زد و در مقابل یک اسکرول بار خواهید داشت که کاربران می تونند مطالب دیگه رو به صورت اسکرول مشاهده کنند .

 

مرحله دوم

پس از قرار دادن کدهای استایل در جای مناسب ، کد PHP زیر رو دقیقا در مکانی که قصد دارید مطالب دریافت بشه قرار بدید :

<div class="showinline" id="devmescroll">

<?php 
    $args = array( 'post_type' => 'post', 'posts_per_page' => 6 );
    $loop = new WP_Query( $args );
    while ( $loop->have_posts() ) : $loop->the_post();?>
<div class="item-hover effect17 bottom_to_top showgrid">
<a href="https://go.20script.ir/index.php?url=<?php the_permalink(); ?>" rel="nofollow">
<div class="img"><img src="<?php the_post_thumbnail_url( 'medium' ); ?>" alt="<?php the_title(); ?>" style="display: inline;"></div>
<div class="info"><div class="info-back"></div>
<h3><?php the_title(); ?></h3>
<p><?php echo excerpt(10); ?></p>
</div>
</a>
</div>
<?php endwhile; ?>

</div>

نکات :

  • در کد PHP بالا در خط دوم مربوط به حلقه دریافت مطالب، می تونید Post Type رو هم تغییر بدید. اما اگر مطالبی که می خواهید دریافت کنید ، در بخش "نوشته ها" منتشر شده اند، Post Type رو روی همون post بگذارید.
  • در همون خط ، عدد 6 مربوط به تعداد مطالب دریافتی هست که می تونید برای دریافت و نمایش مطالب بیشتر ، اون عدد رو زیاد کنید!
  • تصاویر استفاده شده ، از تصاویر شاخص مطالب خواهند بود که به صورت مستقیم لینک اندازه Medium یعنی سایز 300×300 پیکسل استفاده خواهد شد.
  • در بخش توضیحات برای هر تصویر که به صورت هاور نمایش داده میشه ، یک کد استفاده شده که 10 کلمه از توضیحات مطالب رو به صورت هاور نمایش میده. شما می تونید عدد 10 رو کم و زیاد کنید. یا اینکه می تونید کلا بخش توضیحات رو حذف کنید! ولی برای استفاده از کد توضیحات که در کد PHP بالا استفاده کردم ، می بایست حتما کد زیر رو هم در فایل functions.php قالبتون قرار بدید تا این بخش از کد (توضیحات کوتاه برای هر مطلب در هاور) هم نمایش داده بشه :
function excerpt($limit) {
      $excerpt = explode(' ', get_the_excerpt(), $limit);

      if (count($excerpt) >= $limit) {
          array_pop($excerpt);
          $excerpt = implode(" ", $excerpt) . '...';
      } else {
          $excerpt = implode(" ", $excerpt);
      }

      $excerpt = preg_replace('`\[[^\]]*\]`', '', $excerpt);

      return $excerpt;
}

function content($limit) {
    $content = explode(' ', get_the_content(), $limit);

    if (count($content) >= $limit) {
        array_pop($content);
        $content = implode(" ", $content) . '...';
    } else {
        $content = implode(" ", $content);
    }

    $content = preg_replace('/\[.+\]/','', $content);
    $content = apply_filters('the_content', $content); 
    $content = str_replace(']]>', ']]&gt;', $content);

    return $content;
}

کد Function بالا رو تنها در صورتی در فایل functions.php قرار بدید که قصد استفاده از توضیحات رو دارید. اگر نخواستید کد توضیحات کوتاه رو استفاده کنید ، در کد PHP مخصوص دریافت مطالب باید کد مربوط به توضیحات رو حذف کنید.

 

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

موفق باشید.

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

بایگانی شده

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

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...