افزودن باکس رنگی به نوشته ها در وردپرس (بدون نیاز به افزونه)

برای شما هم شاید پیش اومده باشه که مطلبی رو در سایت خودتون انتشار دادید و دوست داشتید که اطراف متنتون یک باکس رنگی یا حتی یک باکس خالی ایجاد کنید. مثلا باکس رنگی زیر که در انتهای پست مربوط به  یادگیری لغات جدید زبان انگلیسی هست رو ببینید:

افزودن باکس رنگی در وردپرس. ایجاد کادر

اما چطور میشه این باکس رنگی رو بدون نیاز به افزونه در وردپرس ایجاد کرد؟

برای این کار کافیه به قسمت ویرایشگر متن خودتون در وردپرس برید.

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

<div style=”border:1px solid black;padding:1.2em; background-color:yellow;”>

و در نقطه ای که قراره متنتون به پایان برسه هم کد زیر رو وارد کنید.

</div>

ویرایشگر متنی متن مربوط به همون پست رو هم میتونید در زیر ببینید.

افزودن کادر رنگی به وردپرس. باکس رنگی در وردپرس

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

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

در کدی که در بالا گفته شد، در قسمت اول یعنی border‌ عدد 1px نوشته شده است. border همان خط مشکی اطراف باکس است. اگر عدد آن را بالاتر ببرید، حاشیه آن قطورتر (در مثال زیر روی 10 قرار گرفته است) و اگر آن را روی صفر قرار دهید باکس شما بدون هیچ حاشیه ای خواهد شد.

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

باکس رنگی وردپرس. کادررنگی در وردپرس بدون افزونه

در قسمت Border رنگ آن به صورت پیش فرض Black است. اما اگر این رنگ را مثلا به blue تغییر دهیم کادر اطراف آن به رنگ آبی تبدیل می شوند.

آموزش ایجاد باکس رنگی در وردپرس

منظور از padding‌ این است که باکس رنگی چقدر از متن فاصله داشته باشید. در عکس های زیر مشاهده می کنید که اگر این مقدار را از 1.2 که به صورت پیش فرض است به 5 و یا صفر تغییر دهیم، باکس رنگی اطراف نوشته ما چه تغییراتی خواهد کرد.

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

آموزش ایجاد باکس رنگی در وردپرس بدون نیاز به هیچ افزونه

و background-color هم رنگ پس زمینه باکس ما می باشد که در اینجا به صورت پیش فرض زرد رنگ است. اگر بخواهید رنگ آن آبی شود کافی است به جای yellow رنگ blue را جایگزین کنید.

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

البته به جای نوشتن اسم رنگ ها هم خیلی راحت می توانید کد های رنگی RGB‌ را جایگزین کنید. مثلا به جای نوشتن رنگ blue می توانیم از کدهای رنگی هم استفاده کنیم و بنویسیم: #4262f4

برای اطلاع از این کدها می تونید این درس متمم رو بخونید. مدل رنگی RGB

به محض تغییرات در ویرایشگر متنی، در صورت کلیک روی ویرایشگر دیداری می توانید خیلی راحت و بلافاصله تغییرات را ببینید.

منبع: (+)

17 نظر / نظر خود را در زیر وارد کنید

  1. اما اگر می خواین از یک باکس زیاد استفاده کنین، شاید بهتر باشه که داخل فایل style.css یک کلاس تعریف کنین و با همین روشی که گفتی داخل div به اون کلاس ارجاع بدین. اینطوری سرعت لود وبسایت بیشتر میشه

    1. تو کدوم قسمت این کد رو وارد کنیم؟ قسمت برگه نوشته ؟قالب برگه؟ یا تک نوشته ؟

    1. سلام. کد ها رو دقیقا به همون شکل وارد کنید و حتما روی قسمت ویرایشگر متنی برید. من وقتی اون کد رو اعمال می کنم، این کادر در نوشته اعمال میشه. هر چند این روش همین طور که آقای رسولی گفتند، می تونه باعث کندتر شدن لود سایت بشه. من در مورد کدنویسی زیاد چیزی نمیدونم و دقیقا طبق آموزشی که در یک سایت دیدم عمل کردم.

  2. سلام
    وقتی کد رو کوپی پیست میکنید کوتیشن ها (“) تغییر میکنند. آنها را پاک کنید و خودتان بنویسید. کادر ظاهر میشود.

  3. سلام وقت همگی بخیر.

    با اجازه آقا داود عزیز..

    دوستان به جای استفاده از همه اینها می تونید براحتی از افزونه TinyMCE Advanced استفاده کنید که همه ایکون ها رو داره و آیتم های وردپرس رو مثل ورد می کنه و میتونید براحتی رنگ پس زمینه رو هم عوض کنید.
    و کلی امکانات دیگه هم مثل آندرلاین کردن هم داره..

    با تشکر از همه زحمات شما…
    سجاد اسماعیلی

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

  5. متشکرم از آموزش خوب شما، بسیار کاربردی بود
    با اینکه سواد وردپرسی من خیلی کمه؛ خیلی ساده و با مثال توضیح دادید، یادگرفتم و لذت بردم.

دیدگاهتان را بنویسید