لینک شدن یک جعبه « انجمن وردپرس فارسی

sstm

آفلاین
عضو
تعداد نوشته‌ها: ۷
# نوشته شده: ۷ سال پیش
۱۷ تیر ۱۳۹۶ - ۱۸:۲۴
سلام
وقت بخیر
من یه سوال داشتم اگه جواب بدید ممنون میشم.
من توی وبسایتم یه ستون دارم که آخرین مطالبو نشون میده. هر کدوم از مطالب هم در یه جعبه شامل تصویر شاخص و عنوان مطلبه. الان روی هر کدوم (تصویر یا عنوان) که کلیک میکنم میره داخل مطلب. اما من میخوام "کل جعبه" لینک بشه به مطلبم، نه فقط عکس و عنوان.
سایر قسمتهای وبسایتم هم به این موضوع نیاز دارم که اگه در این مورد یاد بگیرم میتونم اونجاها هم به کار ببرم.
این هم کد این جعبه:

(یعنی من میخوام rsidbare-box لینک بشه اما نمیدونم زیرش باید دقیقا چه کدی بذارم؟!)
```
<div class="rsidbare-box">
                        <div class="rimg-box">
                    <a href="<?php the_permalink() ?>"><?php the_post_thumbnail(array(45,45), array ('class' => 'alignleft')); ?></a>
                            </div>
                    		<div class="text-rsidbare">
                            <a href="<?php the_permalink() ?>"><?php if (strlen($post->post_title) > 80) { echo mb_substr(the_title($before = '', $after = '', FALSE), 0, 80) . '...'; } else { the_title(); } ?></a>
			            	</div>
</div>
```

سلام
کافیه همین کد بالا رو بین تگ a قرار بدین و داخل href هم از <?php the_permalink() ?> استفاده کنین.به این صورت

<a href="<?php the_permalink() ?>">
<div class="rsidbare-box">
                        <div class="rimg-box">
                    <a href="<?php the_permalink() ?>"><?php the_post_thumbnail(array(45,45), array ('class' => 'alignleft')); ?></a>
                            </div>
                    		<div class="text-rsidbare">
                            <a href="<?php the_permalink() ?>"><?php if (strlen($post->post_title) > 80) { echo mb_substr(the_title($before = '', $after = '', FALSE), 0, 80) . '...'; } else { the_title(); } ?></a>
			            	</div>
</div>
</a>

کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
sstm

sstm

آفلاین
عضو
تعداد نوشته‌ها: ۷
# نوشته شده: ۷ سال پیش
۱۹ تیر ۱۳۹۶ - ۱۱:۰۹
maktabwp گفت:
سلام
کافیه همین کد بالا رو بین تگ a قرار بدین و داخل href هم از <?php the_permalink() ?> استفاده کنین.

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

کد html نهایی این شد:
```
<a href="<?php the_permalink() ?>">
             			<div class="rsidbare-box">
                        	<div class="rimg-box">
                    		<?php the_post_thumbnail(array(45,45), array ('class' => 'alignleft')); ?>
                            </div>
<div class="postviews">
<?php if(function_exists('the_views')) { the_views(); } ?>
</div>
                    		<div class="text-rsidbare">
                            <?php if (strlen($post->post_title) > 80) { echo mb_substr(the_title($before = '', $after = '', FALSE), 0, 80) . '...'; } else { the_title(); } ?>
			            	</div>
                       	</div>
</a>
```
با این کار، قسمت html حل شد اما در قسمت css این کد یه سوال دارم.
حالا چطور باید کاری کرد که با hover شدن کل جعبه، همزمان هم عکس و هم متن داخل این جعبه، استایلشون تغییر کنه؟؟ مثلا border-radius عکس و رنگ متن همزمان تغییر کنن...
آموزش وردپرس

آفلاین
عضو
تعداد نوشته‌ها: ۳
تشکر شده: ۳ بار
# نوشته شده: ۷ سال پیش
۱۹ تیر ۱۳۹۶ - ۱۴:۲۵
سلام.
برای این کار از کلاس کاذب :hover برای اون المان استفاده کنین و تغییراتی رو که میخواین اعمال کنین توی این کلاس و css نهایی رو توی فایل style.css قالبتون وارد کنین.برای مثال :
```
.rsidbare-box:hover{
color:#000;
background:#2980b9;
....
}
```
اگر احیانا سی اس اس اعمال نشد از !important جلوی هر کدوم از صفات استفاده کنین برای مثال :
```
.rsidbare-box:hover{
color:#000 !important;
background:#2980b9 !important;
....
}
```
امیدوارم مشکلتون حل بشه
کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
sstm
sstm

آفلاین
عضو
تعداد نوشته‌ها: ۷
# نوشته شده: ۷ سال پیش
۲۰ تیر ۱۳۹۶ - ۰۲:۴۲
maktabwp گفت:
سلام.
برای این کار از کلاس کاذب :hover برای اون المان استفاده کنین و تغییراتی رو که میخواین اعمال کنین توی این کلاس و css نهایی رو توی فایل style.css قالبتون وارد کنین.

تشکر مهندس.
منظور شما رو از کلاس کاذب و الِمان و اینا متوجه نشدم. ولی مشکل استایل به این صورت حل شد:
```
.rsidbare-box:hover .rimg-box img{
border-radius:50px!important;
}
.rsidbare-box:hover .text-rsidbare{
color:red!important;
}
```
ولی یه سوال دیگه هم دارم که به همین موضوع مربوطه ;)

من دسته های وبسایتم رو با آموزشهای موجود به شکلی کردم که به صورت "منوی هوشمند" وقتی روی لینک عنوان دسته کلیک میکنیم و میریم به صفحۀ دسته، تا وقتی که داخل اون صفحه‌ایم، عنوان دسته، استایل متفاوت داره.

حالا میخام همین کاری که بهم یاد دادید رو برای این مِنو هم بکنم، اما لینکهاش به هم میریزه.

کدها دقیقا به این شکل هستند:
```
<div class="sidbare-content">
	<ul class="ul-sidebar">
		<li <?php echo $class_1 ?>><a href="http://website.com/?cat=1">دستۀ 1</a></li>
		<li <?php echo $class_2 ?>><a href="http://website.com/?cat=2">دستۀ 2</a></li>
	</ul>
</div>
```
کدهای مربوطه در function.php هم به این صورت هستند:
```
<?php
$cat = $_GET['cat'];
if ($cat == '1'){
    $class_1 = 'class="menu-on"';
}else{
    $class_1 = 'class="menu-off"';
}
if ($cat == '2'){
    $class_2 = 'class="menu-on"';
}else{
    $class_2 = 'class="menu-off"';
}
?>
```
کدها رو به صورت خلاصه و جمع و جور نوشتم که بررسیش راحت بشه.

به نظرم دلیل مشکل اینه که من میخوام مثل روش بالا که گفته شد، اینجا هم li ها رو بذارم داخل تگ a و لینک داخل li ها رو حذف کنم. به این شکل:
```
<a href="<?php the_permalink() ?>">
	[...]
</a>
```
ولی چون آدرس لینکهای داخل li به صورت php the_permalink نیست، این مشکل پیش میاد. درسته؟

آیا راهی هست؟

پیشاپیش متشکرم...
sstm

آفلاین
عضو
تعداد نوشته‌ها: ۷
# نوشته شده: ۷ سال پیش
۲۱ تیر ۱۳۹۶ - ۰۲:۴۴

sstm گفت:

آیا راهی هست؟

حل شد...!

میخواستم به جای اینکه فقط متنِ داخلِ li لینک بشه، کل li لینک بشه: که باید به تگ a استایل display:block میدادم تا لینک برای کل خط تعریف بشه.

بعد میخواستم با hover شدن li ، استایل متن داخلش هم تغییر کنه: که متن داخل li رو گذاشتم داخل span و متناسب با این تغییرات و با استفاده از مطالب بالا، استایل تعریف کردم و درست شد.

وردپرس فارسی

انجمن

لینک شدن یک جعبه (۶ نوشته)

درباره‌ی این موضوع

برچسب‌ها