site

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

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

سلام وقت بخیر

29349143819620740207_654.png

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

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

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


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

0

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


لینک به پست

با استفاده از 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")
});

2

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


لینک به پست

با استفاده از 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 پست ها مقدادیری اضافه کنم

0

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


لینک به پست

سلام

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

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

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

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

2

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


لینک به پست

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

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

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

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

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

0

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


لینک به پست

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

1

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


لینک به پست

ارسال شده در (ویرایش شده)

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

سلام

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

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

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

ببینید وقتی که سایت من در حالت 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
0

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


لینک به پست

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

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


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

1

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


لینک به پست

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

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


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

سلام

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

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

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

0

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


لینک به پست

ارسال شده در (ویرایش شده)

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

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



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

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

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

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


لینک به پست

سلام

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

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

در این صورت، برای فعال کردن این قابلیت، کد زیر رو به فایل 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(). '' ) ); ?>

2

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


لینک به پست

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

برای دادن کلاس هر چی به محتوای داخل یک 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 جداگانه با استایل جداگانه گذاشتم که با استایل تصاویر داخل پست ، قاطی نشه.

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

0

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


لینک به پست

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

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

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

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


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

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

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


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