ریسپانسیو کردن کد بنر برای وردپرس

[alirad]

دوستان من کد زیر رو برای قرار دادن بنر دارم اما ریسپانسیو نیست راهنمایی میکنید؟در ضمن من میخوام این بنر فقط در پایین صفحه اصلی و بالای فوتر باشه این کد رو فایل index.php بذارم؟کجای فایل؟ممنون

<center><a href="Link Adress" target="_blank"><img src="Banner Address" width="240" height="90"/></a></center>

[sazsaz]

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

[alirad]

خوب ببین برای ریسپانسیو بودن این کمترین اندازه است
لطفا بر روی سایت قرار دهید تا طبق وضعیت سایت کمکتون کنم
من میخوام توی مرور گر کامپیوتر تمام عرض صفحه رو پرکنه و در گوشی یا تبلت هم کل عرض نمایشگرو پرکنه بدونه اینکه اسکرول افقی درست شه.میشه؟
لطفا بفرمایید کد رو کجای فایل index.php بذارم تا بنر فقط
در پایین صفحه اصلی و بالای فوتر باشه.تا بذارم روی سایت
index.php (http://www.uplooder.net/files/7e91daf40f7ee620ce32592e6af52e07/index.txt.html)

[sazsaz]

خب ببینید بالای
<?php get_footer(); ?>

قرار دهید
و کد زیر را به قالب افزودنه

<div class="ads">
<a href="#" target="_blank"><img alt="" src="adress tasvir" /></a>
</div>

و کد زیر را به سی اس اس اضافه کنید

.ads {
width: 100%;
}
.ads img{
width: 100%;
}
البته اینا مثال هست و برای هر اندازه ای باید یک مدیا تعریف بشه
شما می توانید اندازه و استایل مورد نظر را به کدها بدی

[alirad]

خب ببینید بالای
<?php get_footer(); ?>

قرار دهید
و کد زیر را به قالب افزودنه

<div class="ads">
<a href="#" target="_blank"><img alt="" src="adress tasvir" /></a>
</div>

و کد زیر را به سی اس اس اضافه کنید

.ads {
width: 100%;
}
.ads img{
width: 100%;
}
البته اینا مثال هست و برای هر اندازه ای باید یک مدیا تعریف بشه
شما می توانید اندازه و استایل مورد نظر را به کدها بدی
دست شما درد نکنه بنر اومد لطف میکنید ریسپانسیوشم راهنمایی کنید

[vahab00]

اگر بنر شما قرار تمام صفحه باشه اینو قرار بدید

<center><a href="Link Adress" target="_blank"><img src="Banner Address" style="width:100%;" /></a></center>
اما اگه قراره به طور عادی سایز خودش باشه و با تغییر سایز یعنی کوچک شدن فیکس صفحه بشه کد زیر رو بذارید

<center><a href="Link Adress" target="_blank"><img src="Banner Address" style="max-width:100%;" /></a></center>

[alirad]

اگر بنر شما قرار تمام صفحه باشه اینو قرار بدید

<center><a href="Link Adress" target="_blank"><img src="Banner Address" style="width:100%;" /></a></center>
اما اگه قراره به طور عادی سایز خودش باشه و با تغییر سایز یعنی کوچک شدن فیکس صفحه بشه کد زیر رو بذارید

<center><a href="Link Adress" target="_blank"><img src="Banner Address" style="max-width:100%;" /></a></center>
ممنون از راهنمایتون کد دومی دقیقا چیزی بود که میخواستم

ولی یه سوال فرمودین با کد دوم تصویر به طور عادی سایز خودشه و با کوچک شدن صفحه فیکس صفحه میشه حالا سوالم اینه با بزرگ شدن صفحه اگه تصویر کوچک باشه چکار کنم تا باز فیکس صفحه بشه؟

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

[sazsaz]

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

[alirad]

ببینید وقتی شما از کد دوستمون استفاده کنید
توی موبایل ریسپانسیو هست و توی کامپیوتر یا لب تاب وسط قرار می گیره کامل فیکس نیست
ممنون کدی که شما دادین اون قسمتی از کد که باید به css اضافه کنم رو یه نگاه میندازین به نظر ایراد داره یه دونه img داره و 2تا width داره؟

اگه لطف کنید واسه قسمت css کدی بدین که خود کد اندازه ی width رو اتومات فیکس هر صفحه ای کنه(حالا تصویر اصلی میخواد کوچک یا بزرگتر از اون صفحه باشه) و خودش اتومات height رو به تناسب width کوچک یا بزرگ کنه ممنون میشم

[sazsaz]

max-width: آخرین اندازه;
می تونی به جای آخرین اندازه عدد مورد نظر خود را قرار دهید
یا می تونید از درصد استفاده کنید

max-width: 100%;

[alirad]

max-width: آخرین اندازه;
می تونی به جای آخرین اندازه عدد مورد نظر خود را قرار دهید
یا می تونید از درصد استفاده کنید

max-width: 100%;
ممنون ولی من متوجه نشدم
این کدی که الان دادین رو بذارم توی کد css که قبلا دادین؟
میشه یه بار کد css رو کامل از اول بذارین؟
خیلی ببخشید دیگه خیلی مزاحم شدم

[sazsaz]

ببینید کامل این کار را کن
اون کدی که قبلا داده بودم گفتم وارد کن و بالای فوتر بذار را همون جا قرار بده

<div class="ads">
<a href="#" target="_blank"><img alt="" src="adress tasvir" /></a>
</div>


اینو به فایل استایلت اضافه کن

@media screen and (max-width: 500px) {
.ads{ max-width: 500px;}
}
@media screen and (max-width: 768px) {
.ads{ max-width: 768px;}
}
@media screen and (max-width: 1024px) {
.ads{ max-width: 1024px}
}

خوب حالا این کد را زیر تایتل توی هدر قرار بده

<meta name="viewport" content="width=device-width, initial-scale=1">

[vahab00]

ممنون از راهنمایتون کد دومی دقیقا چیزی بود که میخواستم

ولی یه سوال فرمودین با کد دوم تصویر به طور عادی سایز خودشه و با کوچک شدن صفحه فیکس صفحه میشه حالا سوالم اینه با بزرگ شدن صفحه اگه تصویر کوچک باشه چکار کنم تا باز فیکس صفحه بشه؟

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

ببینید کدی که من دادم به این صورت هست که اگه سایز بنز 640 در 90 هست در سایز بیشتر از 640 پیکسل صفحه همون 640 نشون میده ولی اگه کوچیک بشه 100درصد میشه
اما اگه میخواید در سایز بزرگ هم به تناسب کامل و فول واید باشه و هایت هم به همون نسبت بزرگ بشه بجای max-width عبارت min-width برابر با 100% قرار بدید
min-width:100%;