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

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

کد مهم قالب

برای استفاده از کلاس های جدید  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;” />