برای شما هم شاید پیش اومده باشه که مطلبی رو در سایت خودتون انتشار دادید و دوست داشتید که اطراف متنتون یک باکس رنگی یا حتی یک باکس خالی ایجاد کنید. مثلا باکس رنگی زیر که در انتهای پست مربوط به یادگیری لغات جدید زبان انگلیسی هست رو ببینید:
اما چطور میشه این باکس رنگی رو بدون نیاز به افزونه در وردپرس ایجاد کرد؟
برای این کار کافیه به قسمت ویرایشگر متن خودتون در وردپرس برید.
حالا کد زیر رو در ابتدای بخشی از متن که قراره در باکس رنگی قرار بگیره وارد کنید.
<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
به محض تغییرات در ویرایشگر متنی، در صورت کلیک روی ویرایشگر دیداری می توانید خیلی راحت و بلافاصله تغییرات را ببینید.
منبع: (+)
سلام ممنون داوود جان از راهنمایی خوبت
سلام خواهش می کنم.
اما اگر می خواین از یک باکس زیاد استفاده کنین، شاید بهتر باشه که داخل فایل style.css یک کلاس تعریف کنین و با همین روشی که گفتی داخل div به اون کلاس ارجاع بدین. اینطوری سرعت لود وبسایت بیشتر میشه
ممنون از راهنماییتون
تو کدوم قسمت این کد رو وارد کنیم؟ قسمت برگه نوشته ؟قالب برگه؟ یا تک نوشته ؟
سلام
ممنون از مطلب کاربردی و جالب شما.
من طبق مراحلی که گفته بودید، تست کردم؛ اما هیچ کادری در متن ظاهر نشد.
مشکل از چی میتونه باشه؟
با تشکر
سلام. کد ها رو دقیقا به همون شکل وارد کنید و حتما روی قسمت ویرایشگر متنی برید. من وقتی اون کد رو اعمال می کنم، این کادر در نوشته اعمال میشه. هر چند این روش همین طور که آقای رسولی گفتند، می تونه باعث کندتر شدن لود سایت بشه. من در مورد کدنویسی زیاد چیزی نمیدونم و دقیقا طبق آموزشی که در یک سایت دیدم عمل کردم.
سلام
وقتی کد رو کوپی پیست میکنید کوتیشن ها (“) تغییر میکنند. آنها را پاک کنید و خودتان بنویسید. کادر ظاهر میشود.
سلام بابت مقاله خوبی که در سایت قرار دادید ممنون و من از این طریق توانستم به جواب سوالی که داشتم برسم
سلام علی جان. خوشحالم که تونستم کمکی کوچیکی بهت بکنم.
سلام وقت همگی بخیر.
با اجازه آقا داود عزیز..
دوستان به جای استفاده از همه اینها می تونید براحتی از افزونه TinyMCE Advanced استفاده کنید که همه ایکون ها رو داره و آیتم های وردپرس رو مثل ورد می کنه و میتونید براحتی رنگ پس زمینه رو هم عوض کنید.
و کلی امکانات دیگه هم مثل آندرلاین کردن هم داره..
با تشکر از همه زحمات شما…
سجاد اسماعیلی
سلام سجاد جان. ممنون از اینکه این افزونه رو معرفی کردی.
بسیار ممنونم بابت معرفی این افزونه
درود بر شما
کوچکترین تغییرات در یک مطلب میتونه اون رو بسیار جذاب کنه و باعث بشه بازخورد مطلب بیشتر باشه و مخاطب رو به خودش جذب کنه، حداقل برای ما که بانک اطلاعات آموزشگاهی هستیم و سر و کارمون با آموزشگاه ها هست این مورد بوضوح مشخصه و در حین نوشتن مقالات آموزشی در مورد آموزشگاه ها و موسات آموزشی بسیار موثر بوده. سپاس از شما
ایران آموزشگاه
متشکرم از آموزش خوب شما، بسیار کاربردی بود
با اینکه سواد وردپرسی من خیلی کمه؛ خیلی ساده و با مثال توضیح دادید، یادگرفتم و لذت بردم.
درود و سپاس فراوانـ.