رفتن به مطلب

افزودن به کلاس عکس ها در وردپرس


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

سلام وقت بخیر

29349143819620740207_654.png

طبق عکس بالا ، میخواهم به کلاس تگ img ، یک مقداریاضافه کنم ( برای تمامی عکس ها اعمال بشه ).

باید از کدام قسمت این کار رو انجام بدم ؟

کدی که برای پست ها هنگام کد نویسی قرار دادم به صورت زیر هست ؟


<?php the_content(__('')); ?>

لینک به ارسال

با استفاده از php به این صورت عمل کنید : (فایل functions.php)


function add_image_class($class){
$class .= ' additional-class';
return $class;
}
add_filter('get_image_tag_class','add_image_class');

و با جی کوئری هم میتونید به صورت زیر عمل کنید.


$(document).ready(function() {
$("img").addClass("myimg")
});

لینک به ارسال

با استفاده از php به این صورت عمل کنید : (فایل functions.php)


function add_image_class($class){
$class .= ' additional-class';
return $class;
}
add_filter('get_image_tag_class','add_image_class');

و با جی کوئری هم میتونید به صورت زیر عمل کنید.


$(document).ready(function() {
$("img").addClass("myimg")
});

سلام

این کد ها برای همه img تعریف میشه ؟

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

لینک به ارسال

سلام

این کد ها برای همه img تعریف میشه ؟

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

اگه منظورتون فقط و فقط تصاویری هست که داخل پست ها قرار میدید، میتونید به بخش ویرایشگر متنی (code) برید و اونجا خودتون دستی به تصاویر کلاس اضافه کنید.

کدهای بالا به همه ی تصاویر کلاس اضافه میکنه.

لینک به ارسال
  • 3 هفته بعد...

اگه منظورتون فقط و فقط تصاویری هست که داخل پست ها قرار میدید، میتونید به بخش ویرایشگر متنی (code) برید و اونجا خودتون دستی به تصاویر کلاس اضافه کنید.

کدهای بالا به همه ی تصاویر کلاس اضافه میکنه.

اینجوری خیلی خیلی سخته

الان مثلا میخوام فقط و فقط به کلاس عکس های داخل پست ها ، img-responsive رو اضافه کنم تا تصاویر از کادر بیرون نزنه

از اساتید کسی راه حل مناسبی سراغ داره ؟

لینک به ارسال

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

لینک به ارسال

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

سلام

مشکل که نمیشه گفت . یه ضعف میشه گفت .

سایتم فعلا در لوکال هست

اما الان شرح میدم این ضعف رو :

ببینید وقتی که سایت من در حالت html بود ، من به img های پست ها ،کلاس داده بودم .

در حالت html ، کد پست های داخل single.php من به صورت زیر بود :


<div class="p-title-head"><h2><a href="#">فروش بازی</a></h2></div>
<div class="clear"></div>
<img class="img-responsive" src="img/pes2016-ps4.png"/>
<div class="p-title"><h2>فروش بازی </h2></div>
<div class="p-price">قیمت : 6000 تومان</div>
<div class="p-box">
<a href="#">خرید آنلاین</a>

حالا وقتی که قالب سایتم رو به وردپرس تبدیل کردم، به جای همه نوشته ها،عکس ها و (کد های بالا) و ... از کد زیر استفاده کردم :


<?php the_content(__('')); ?>

خب وقتی که از کد بالا استفاده کردم ، استایل های img که در حالت html من داده بودم، از بین رفت

حالا عکس زیر رو نگاه کنید :

1799514398372365805_Untitled.png

الان عکسی که تو پست گذاشتم ، خیلی بزرگ هست و از صفحه زده بیرون

خودتون میدونید که بوت استرپ یک کلاسی داره به نام "img-responsive" که باعث میشه عکس دقیقا فیکس با صفحه نمایش باشه

حالا من چطوری باید img-responsive را فقط و فقط به کلاس عکس های داخل پست اضافه کنم ؟

ویرایش شده توسط site
لینک به ارسال

یه کار دیگه هم میتونید بکنید به عکستون max-width بدید

مثلا یه دیو دارید به نام content عکس های داخلش میشه مثل زیر


.content img{
max-width:90%;
height:auto;
}

لینک به ارسال

یه کار دیگه هم میتونید بکنید به عکستون max-width بدید

مثلا یه دیو دارید به نام content عکس های داخلش میشه مثل زیر


.content img{
max-width:90%;
height:auto;
}

سلام

بله این کد هم کار کرد

اما من مطمئن هستم که یک راه حلی برای دادن کلاس به عکس های داخل پست وجود داره ! اگر هیچ راه حلی وجود نداشته باشه ، نشون میده که وردپرس ضعف داره !!

تو سایت های خارجی هم گشتم اما چیز خاصی پیدا نکردم

لینک به ارسال

دوست عزیز چه ربطی به وردپرس داره ؟!!!!

برای دادن کلاس هر چی به محتوای داخل یک div با نام content به صورت زیر عمل کنید



<script>
$(function () {
$(".content img").addClass("img-responsive");
});
</script>

کد بالا را با تغییرات دلخواه در هدر قرار دهید

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

سلام

شما تصویر شاخص رو برای قالب‌تون فعال کردید؟

به نظرم با توجه به آدرس تصویرتون شما از این قابلیت استفاده نمی‌کنید و تصاویر رو مستقیم در محتوا وارد می‌کنید

در این صورت، برای فعال کردن این قابلیت، کد زیر رو به فایل function قالبتون اضافه کنید


// Thumbnails
add_theme_support( 'post-thumbnails' );
add_image_size( 'post-thumb', 350, 200, true );

۳۵۰ عرض، ۲۰۰ طول و post-thumb شناسه این برش از تصویر

برای فراخوانی این تصویر هم از این کد می‌تونید استفاده کنید


<?php the_post_thumbnail( 'post-thumb', array( 'class' => 'thumbnail img-responsive', 'alt' => '' .get_the_title(). '' ) ); ?>

لینک به ارسال

دوست عزیز چه ربطی به وردپرس داره ؟!!!!

برای دادن کلاس هر چی به محتوای داخل یک div با نام content به صورت زیر عمل کنید



<script>
$(function () {
$(".content img").addClass("img-responsive");
});
</script>

کد بالا را با تغییرات دلخواه در هدر قرار دهید

ممنون درست شد

منظورم از ضعف این بود که خود وردپرس بخشی نداره که بشه به کلاس های خودش ، مقدار های دیگری اضافه کرد ؟

سلام

شما تصویر شاخص رو برای قالب‌تون فعال کردید؟

به نظرم با توجه به آدرس تصویرتون شما از این قابلیت استفاده نمی‌کنید و تصاویر رو مستقیم در محتوا وارد می‌کنید

در این صورت، برای فعال کردن این قابلیت، کد زیر رو به فایل function قالبتون اضافه کنید


// Thumbnails
add_theme_support( 'post-thumbnails' );
add_image_size( 'post-thumb', 350, 200, true );

۳۵۰ عرض، ۲۰۰ طول و post-thumb شناسه این برش از تصویر

برای فراخوانی این تصویر هم از این کد می‌تونید استفاده کنید


<?php the_post_thumbnail( 'post-thumb', array( 'class' => 'thumbnail img-responsive', 'alt' => '' .get_the_title(). '' ) ); ?>

سلام و ممنون

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

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

لینک به ارسال

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

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

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

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

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

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

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

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

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