جستجو برای:
  • دوره‌های آموزشی
    • کسب و کار اینترنتی پولساز
    • تبدیل ایده به محصول
    • خلق استراتژی کسب و کار
    • ایجاد مزیت رقابتی در کسب و کار
  • آموزش رایگان
    • دوره رایگان کسب و کار اینترنتی
    • ویدیوهای آموزشی
    • پادکست‌های آموزشی
  • وبلاگ
    • کسب و کار اینترنتی
      • کارآفرینی اینترنتی
      • کار در منزل
      • ایده های پولساز
      • مدیریت کسب و کار اینترنتی
    • بازاریابی اینترنتی
      • سئو
      • ایمیل مارکتینگ
      • سوشیال مارکتینگ
      • اینستاگرام مارکتینگ
      • همکاری در فروش
    • کارآفرینی
      • ایده های کارآفرینی
      • کسب درآمد
      • استارت آپ
      • برندسازی
      • موفقیت فردی
      • معرفی کارآفرینان برتر
  • کسب درآمد
  • حساب کاربری
تلفن تماس: ۲۳۴۵۶ ۲۸۴ ۰۲۱
بهترین ایده
  • دوره‌های آموزشی
    • کسب و کار اینترنتی پولساز
    • تبدیل ایده به محصول
    • خلق استراتژی کسب و کار
    • ایجاد مزیت رقابتی در کسب و کار
  • آموزش رایگان
    • دوره رایگان کسب و کار اینترنتی
    • ویدیوهای آموزشی
    • پادکست‌های آموزشی
  • وبلاگ
    • کسب و کار اینترنتی
      • کارآفرینی اینترنتی
      • کار در منزل
      • ایده های پولساز
      • مدیریت کسب و کار اینترنتی
    • بازاریابی اینترنتی
      • سئو
      • ایمیل مارکتینگ
      • سوشیال مارکتینگ
      • اینستاگرام مارکتینگ
      • همکاری در فروش
    • کارآفرینی
      • ایده های کارآفرینی
      • کسب درآمد
      • استارت آپ
      • برندسازی
      • موفقیت فردی
      • معرفی کارآفرینان برتر
  • کسب درآمد
  • حساب کاربری
0

ورود و ثبت نام

بلاگ

بهترین ایده / طراحی سایت / آموزش وردپرس / قرار دادن متن اطراف تصویر

قرار دادن متن اطراف تصویر

آنچه در این مطلب می‌خوانید:

  • قرار دادن متن اطراف تصویر چگونه است ؟ چطور می توانیم اطراف تصویر در وردپرس متن قرار دهیم؟
    • آموزش وردپرس درس بیست و دوم
    • کد مهم قالب
    • قرار دادن متن اطراف تصویر  : سبک تصویر  یا استایل تصویر
    • ابتدا با یک راهنمای ساده برای استفاده از تصاویر در وبلاگ وردپرس خود شروع کنید.
    • قرار دادن متن اطراف تصویر  : مرز ها یا  BORDER
    • پوشش و عرض تصویر
    • تصویر چپ، راست و مرکز
    • قرار دادن متن اطراف تصویر: مثال چپ، راست و مرکزی
    • قرار دادن متن اطراف تصویر  :  اندازه متن جایگزین
    • قرار دادن متن اطراف تصویر  :  تالیف تصویر
    • قرار دادن متن اطراف تصویر  : پاک کردن صفحه نمایش

قرار دادن متن اطراف تصویر چگونه است ؟ چطور می توانیم اطراف تصویر در وردپرس متن قرار دهیم؟

آموزش وردپرس درس بیست و دوم

قرار دادن متن اطراف تصویر
قرار دادن متن اطراف تصویر

کد مهم قالب

برای استفاده از کلاس های جدید  CSS برای تراز تصویر ،و قرار دادن متن اطراف تصویر  قالب  وردپرس باید شامل   style.css  موجود در دایرکتوری قالب  وردپرس  باشد.

img.alignright { float: right; margin: 0 0 1em 1em; }

img.alignleft { float: left; margin: 0 1em 1em 0; }

img.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.alignright { float: right; }

.alignleft { float: left; }

.aligncenter { display: block; margin-left: auto; margin-right: auto; }

هنگام اضافه کردن تصویر در وبلاگ وردپرس خود، تراز تصویر را به سمت راست، چپ یا مرکز در پنل تصویر / رسانه انتخاب کنید.
تصویر به پست وبلاگ شما با سبک انتخاب شده برای هم ترازی مانند

<img src=”http://example.com/images/leaf.jpg“

alt=”leaf graphic”

title=”leaf graphic”

class=”alignright size-medium wp-image-3109″

height=”25″ width=”30″/>

جاسازی خواهد شد.

 

قرار دادن متن اطراف تصویر  : سبک تصویر  یا استایل تصویر

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

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

اول، در اینجا نگاهی به یک برچسب تصویر معمولی در پست خود بیندازیم، بدون دستورالعمل برای قرار دادن  متن در اطراف تصویر است. توجه داشته باشید که ما ویژگی های عنوان و alt را به تگ  اضافه کردیم؛  alt برای دسترسی بسیار مهم است، عنوان برای tooltip تصویر است.

<img src=”http://example.com/images/leaf.jpg“

alt=”leaf graphic”

title=”leaf graphic” />

برای شروع روند تنظیم تصویر ، تغییراتی وجود دارد که ممکن است لازم باشد به صفحه CSS که سایت WordPress را کنترل می کند،  ایجاد کنید.
از پوشه Theme وردپرس خود، فایل style.css را در یک ویرایشگر متن  باز کنید. مهم! قبل از هر گونه ویرایش، یک کپی پشتیبان در جایی ذخیره کنید! حالا، جستجو برای   img  را  انجام دهید امیدوارم همه انتخابگرهای تصویر شما با هم گروه بندی شوند. اگر نه، همه آنها را پیدا کنید و آنها را در یک گروه قرار دهید تا این روند را آسانتر کند.

 

قرار دادن متن اطراف تصویر  : مرز ها یا  BORDER

باید تصمیم بگیرید که آیا می خواهید یک مرز در اطراف تصاویر خود داشته باشید و اگر انجام دهید، اندازه، رنگ و نوع آن  چگونه باید باشد. برای موردی که می خواهید هیچ مرزی نداشته باشید  از موارد زیر استفاده کنید:

img {border:0}

برای خط مرزی خط قرمز ۱ پیکسل، اضافه کنید:

img {border:solid red 1px}

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

a img {border:0}

شما هنوز هم می توانید یک حرکت شناور را در اطراف تصویر اضافه کنید، بنابراین هنگامی که بازدید کننده ماوس خود را بر روی تصویر حرکت می دهد، نه تنها اشاره گر ماوس به یک دست تبدیل می شود، تصویر یک مرز رنگی دریافت می کند:

a:hover img { border:solid red 1px; }

پوشش و عرض تصویر

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

p img { padding: 0; max-width: 100%; }

تصویر چپ، راست و مرکز

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

img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; }

img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; }

اکنون زمان آن است که اعلان شناور را به تصاویر اضافه کنید. اما صبر کنید!  چرا باید  به سمت چپ و راست و به سمت تصاویر بکشیم؟ چرا آنها را بر روی هر چیزی که میخواهیم در سمت راست یا چپ صفحه قرار دهیم  و متن را در اطراف آن بگذاریم ؟این آموزش مربوط به بخش دیگری است اما ارزش آموزش دادن در این بخش را هم دارد می توانید این کار را انجام دهید

.alignright { float: right; }

.alignleft { float: left; }

 

 

توجه: پیش فرض / Kubrick Theme از این تکنیک استفاده می کند اما کلاس ها را به ترتیب alignlft و alignright نام می برد. با استفاده از alignleft و alignright به نظر می رسد  می توانید ساده تر به یاد داشته باشید و استفاده کنید، اما هر دو مجموعه نام برای ایجاد این کار ممکن است مورد استفاده قرار گیرد.
پس در مورد مرکز تصویر چگونه است؟  بله، هنوز هم می توانید این کار را انجام دهید. برچسب مرکز دیگر معتبر نیست، پس می توانید یک سبک برای مرکز گیری چیزها ایجاد کنید:

img.aligncenter { display: block; margin-left: auto; margin-right: auto; }

 

قرار دادن متن اطراف تصویر: مثال چپ، راست و مرکزی

مانند بسیاری از چیزها پیچیده، به نظر می رسد. اما این کار انجام شده است و شما مجبور نیستید این کار را دوباره انجام دهید. برای استفاده از آن، لینک را به تصویر خود بکشید و class = “alignright”، class = “alignleft” یا class = “aligncenter” اضافه کنید و تصویر به سمت راست، چپ یا مرکز حرکت می کند و متن در اطراف آن قرار می گیرد.  به همین سادگی است.

<img src=”/images/leaf.gif” class=”alignright” alt=”Red leaf” title=”Red Leaf” />This is some text that will wrap around the image that sits on the right side of the text that you are writing about the leaf that is there. That is, if you are writing about leaves in the first place and you want to write about this specific leaf.

 

<p>This is text that sits above the leaf image that you might be writing about in your post if you were to write about leaves. <img src=”/images/leaf.gif” class=”aligncenter” alt=”Red leaf” title=”Red Leaf” />This is some text that will sit below the text image and you can continue to write about the leaf that is there.</p>

 

قرار دادن متن اطراف تصویر  :  اندازه متن جایگزین

بعضی از مرورگرها به شما اجازه می دهند تا اندازه متن ایجاد شده توسط تگ ALT را کنترل کنید. این متنی است که وقتی ماوس را روی یک تصویر قرار می دهید یا زمانی که تصویر بارگیری نمی شود، ظاهر می شود. شما می توانید آن را به هر اندازه ای که می خواهید بنویسید  اما چیزی بسیار کوچکتر از اندازه فونت محتوای شما ایده خوبی است.

img {font-size:60%}

قرار دادن متن اطراف تصویر  :  تالیف تصویر

تصاویر فقط تمایل دارند که زیبا به نظر برسند.  ویژگی های alt و title کمتر شبیه به تصویر به نظر می رسند  بهتر است برای این ها متنی اضافه کنید پس یک استایل ایجاد کنید.

.wp-caption { margin: 5px; padding: 5px; border: solid 1px #E5E5FF; background: #E5F2FF; font-size:90%; color: black }

در مثال بالا، ما یک مرز و یک اشاره کوچک از رنگ پس زمینه اضافه کردیم، اما می توانید آن را به صورت استایل اضافه کنید هر چند توصیه می کنیم  که حداقل متن را در یک  div  قرار دهید  تا از سایر محتوای پست مشخص شود.

<div class=”wp-caption alignright”>
<img src=”http://example.com/images/leaf.jpg” alt=”leaf graphic” title=”leaf graphic”>
Red Leaf</div>

 

در مثال بالا، ما فقط کلاس را به  div  اضافه کردیم که آن را  به طور  شناور در سمت راست قرار می دهد، و متن را در اطراف آن قرار می دهد.  با استفاده از کلاس alignleft آن را به سمت چپ شناور می کند، و aligncenter آن را به سمت مرکز هدایت می کند.

 

قرار دادن متن اطراف تصویر  : پاک کردن صفحه نمایش

در صورتی که تصویر بزرگتر از متن است و آن را احاطه کرده و باعث می شود که تصویر مانند یک پرچم بر روی برخی از عناصر زیر آن آویزان شود، سپس در بعضی از نقاط متن،   می خواهید صفحه نمایش را پاک کنید. توجه داشته باشید که هیچ متنی در این بخش وجود ندارد. با این حال، اگر شما از ویرایشگر WYSIWYG استفاده می کنید، لازم است چیزی در داخل بخش (مانند یک قانون سخت) قرار دهید، در غیر این صورت ویرایشگر WYSIWYG به طور کامل (به دلیل یک idosyncracy / bug در ویرایشگر TinyMCE که ویرایشگر WYSIWYG استفاده می کند) را حذف خواهد کرد.

<div style=”clear:both;”><br /></div>

 صفحه نمایش  را به طریقی که برای هر دو ویرایشگر “متن” و “ویژوال” کار می کند، پاک کنید. این را در حالی که در برگه متن قرار دارد، اضافه کنید:

<br style=”clear: both;” />

 

۱
۲
۳
۴
۵
میانگین امتیازات ۵ از ۵
از مجموع ۱ رای
اشتراک گذاری:
برچسب ها: وردپرس
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

iman.ghasedian

بهت کمک می‌کنم توجهت رو بذاری روی خودت و عمیق‌تر زندگی‌‌‌وحالت رو تغییر بدی

این بازی یک‌ بازی معمولی نی این بازی یک‌ بازی معمولی نیست بلکه فلسفه زندگی توه 🎲❤️

صفحه بازی، صفحه زندگی توه
‌و تو بازیگری 🎲❤️
همه اون فرصت‌هایی که تو زندگی سر راهت قرار می‌گیره، نردبان‌های بازی هستن و تمام مسائل، مشکلات، شکست‌ها، درد ‌‌و رنج‌ها، نیش مارهای این بازی 🎲❤️

تو این بازی من ۷ درس مهم یاد گرفتم که به توهم گفتم 🎲❤️

حتما ازت میخوام دوتا استیکر 🎲❤️ پایین پست برام بذاری 🎲❤️

منتظرم رفیق 🎲❤️

#بازی #زندگی #فلسفه #ماروپله #شانس #خوشحالی #ناراحتی #روانشناسی #فرزند #صبر #ایمان_قاصدیان #ایران
توضیحات سفر رو حتما بخون 😍 توضیحات سفر رو حتما بخون 😍
۲۸ اردیبهشت ۱۴۰۱

به همراه یک گروه‌باحال زدیم به دل طبیعت

🚌 صبح ساعت ۵ صبح از تهران راه افتادیم 
به سمت جاده چالوس

یک توقف تونل کندوان داشتیم و صبحانه خوردیم  و به سمت مقصد از یکی از خروجی‌های جاده چالوس خارج شدیم و‌ جاده کاملا شیبدار بود و در عرض ۲۰ دقیقه چیزی حدود ۱۵۰۰ متر ارتفاع از سطح دریا گرفتیم

طبیعت فوق العاده بی‌نظیری بود…

😍 به مقصد رسیدیم و در یک خانه روستایی بسیار باصفا وسایل رو گذاشتیم و با نون محلی و پنیر تازه و چایی شیرین از ما استقبال شد…

بعد از اینکه توی روستا دوری زدیم ‌‌کنار رودخونه پایی به آب زدیم برگشتیم و نهار خوردیم و بعد از یک استراحت کوتاه سوار تراکتور شدیم و تا دامنه کوه رفتیم و از اونجا که از تراکتور پیاده شدیم ۱۲ کیلومتر در مسیری که توی ویدیو می‌بینید هایکینگ داشتیم تا رسیدیم به یک چشمه و بعد ۱۵ دقیقه‌ از چشمه که بالاتر رفتیم رسیدیم به یک یخچال طبیعی…

واقعا طبیعت بکر و بی‌نظیری بود 😍
خدارو هزار مرتبه شکر کردم بخاطر این همه زیبایی…و این همه نعمت و از همه مهم‌تر سلامتی 

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

@safaryab.us 

بعد از این پیاده روی نسبتا سنگین، تا خود روستا پیاده برگشتیم و واقعا خسته شدیم اما سرشار از انرژی 

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

یک‌شام‌سبک خوردیم و خوابیدیم 😴

🌞 صبح طبق عادت ساعت ۵:۳۰ صبح بیدار شدم

ادامه در کامنت…

______________________
خیلی خوشحال میشم احساست رو از دیدن این ویدیو برام بنویس ❤️ یا با یه استیکر 😎✌️👏😍🤩✋ منتظرم …
______________________

🎬: @iman.ghasedian 

🎵: @amiralibahadori 
______________________

#نگرانی #آینده #خوشبختی #سفر #طبیعت #طبیعت_ایران #حال_خوب #انرژی_مثبت #فیلم #موزیک #طبیعت_بکر #ایمان_قاصدیان #سفریاب
چرا انقدر شروع بی‌پایان داریم تو زندگی‌مون؟
چرا هی شروع کردیم و وسط راه ولش کردیم؟

تو این پادکست توضیح دادم…

توی کامنت از تجربه شروع بی پایان خودت برام بنویس

#شروع #تصمیم #تصمیم_گیری #احساسی #احساس #اطلاعات #فقر #ثروت #ایران #گرانی #تورم #ایمان_قاصدیان #تحول #تحول_بزرگ
❤️بخش دوم لایو شماره ۱ سفر ❤️بخش دوم لایو شماره ۱ سفر تحول بزرگ

_______________

دوره 👇رایگان تحول بزرگ
@iman.ghasedian 
_______________

توی این ویدیو می تونی کل مطالب آموزشی ۲۳ روز اول تحول بزرگ + یکسری محتوای مکمل در لایو ارائه شد که به دلیل دایرکت‌ها و درخوا‌ست شما که موفق به حضور در لایو نشدید تصمیم گرفتم بلافاصله بعد از لایو این ‌ویدیو رو که حتی از لایو اصلی هم کامل‌تره 

ویدیو بدلیل تایم بالا به دو بخش قسمت شد که بخش اولش رو دیشب گذاشتم 

#سفر #تحول #تحول_درون #خودشناسی #آرامش #ایمان_قاصدیان #تغییر #زندگی #اکسپلور #اینستاگرام
❤️بخش اول لایو شماره ۱ سفر ❤️بخش اول لایو شماره ۱ سفر تحول بزرگ

_______________

دوره 👇رایگان تحول بزرگ
@iman.ghasedian 
_______________

توی این ویدیو می تونی کل مطالب آموزشی ۲۳ روز اول تحول بزرگ + یکسری محتوای مکمل در لایو ارائه شد که به دلیل دایرکت‌ها و درخوا‌ست شما که موفق به حضور در لایو نشدید تصمیم گرفتم بلافاصله بعد از لایو این ‌ویدیو رو که حتی از لایو اصلی هم کامل‌تره 

ویدیو بدلیل تایم بالا به دو بخش قسمت شد که فردا بخش دو گذاشته میشه در پیج

#سفر #تحول #تحول_درون #خودشناسی #آرامش #ایمان_قاصدیان #تغییر #زندگی #اکسپلور #اینستاگرام
دوره رایگان تحول بزرگ در اینستاگرام
مطالب زیر را حتما بخوانید
  • Autoptimize با WP Rocket
    بهینه سازی سایت با Autoptimize یا WP Rocket

    1.53k بازدید

  • توسعه قالب های وردپرس
    توسعه قالب های وردپرس

    1.37k بازدید

  • استفاده از فایل زیلا
    استفاده از فایل زیلا

    1.61k بازدید

  • خطای 503 در وردپرس
    خطای ۵۰۳ در وردپرس

    1.26k بازدید

  • نوشتن کد در پست ها
    نوشتن کد در پست ها

    1.39k بازدید

  • اندازه و کیفیت تصویر در وردپرس
    اندازه و کیفیت تصویر در وردپرس

    1.78k بازدید

2 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • طراح گرافیک گفت:
    3 تیر 1397 در 12:20

    اینکار اسمش Wrap text هست و نرم افزار indesign هم دقیقا ابزارهایی برای اینکار داره

    پاسخ
  • دکترلیمو گفت:
    30 خرداد 1397 در 15:39

    سلام

    جالبه برام از وقتی اومدم سایتتون 1 ساعت گذشته و متوجه نشدم خخخخ

    هرچی میچرخم اینجا قسمت هایی که دوست دارم پیدا میکنم

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

    ممنون

    پاسخ

دیدگاهتان را بنویسید لغو پاسخ

آکادمی
  • کسب و کار اینترنتی
  • بازاریابی اینترنتی
  • ایده های پولساز
  • ایمیل مارکتینگ
  • مهارت های پولساز
  • افزایش فالوور اینستاگرام
  • کسب درآمد از اینستاگرام
  • افزایش ترافیک سایت
پربازدید
  • دوره رایگان
  • درباره ما
  • همکاری در فروش
  • تماس با ما
جستجو برای:
بهترین ایده
با آموزش کسب و کار اینترنتی از ایده‌های پولساز تا یادگیری مهارت‌های پولساز در کنار شما هستیم. کمک می‌کنیم یک کسب و کار خانگی در منزل راه‌اندازی کنید. ما به شما آموزش می‌دهیم با کار در منزل و فقط با موبایل و بدون سرمایه پولسازی از اینترنت را شروع کنید.
بهترین ایده : کسب و کار اینترنتی برای همه | © Copyright 2021 behtarinideh

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت