کار با داشبورد وردپرس: افزودن کلاس و افزودن css اضافی

در این مقاله کوتاه این دو کار را انجام میدهیم. 1- یک کلاس با نام دلخواه ایجاد میکنیم. 2- کلاس ایجاد شده را به widget اضافه میکنیم. همین دو گام در قسمت های ” افزودن css اضافی ” و “پیشرفته” انجام میشود. حالا ادامه را بخوانید تا با هم ببینیم این دو تا دقیقا کجا هستند.

افزودن css اضافی به وردپرس - سفارشی سازی

افزودن css اضافی

در داشبورد وردپرس, گزینه ” نمایش > سفارشی سازی ” را انتخاب کنید! گزینه سفارشی سازی را میتوانید بالای داشبورد وردپرس هم بیابید. پس از کلیک بر این گزینه بروزر دو ستونه میشود, در ستون کوچکتر گزینه آخر “افزودن css اضافی” را انتخاب کنید. حالا همانطور که در برگه style.css کدنویسی میکنید, اینجا کدنویسی کنید! من نوشتم:

.shwidget-home{
	//border: solid red; 
	height: 300px;
	overflow: hidden;
}
.shwidget-home li{
		line-height:50px
}
.shwidget-home li:before{
	content: 'مقاله جدید - ';
	color: red
}

پیشرفته > افزودن کلاس

حالا که کلاس shwidget-home را ایجاد کردیم بیایید آن را به یک widget اضافه کنیم. همانطور که میدانید به widget ابزارک هم میگویند. ابزارک کجاست؟ وقتی در داشبورد وردپرس به برگه ها بروید. ویرایش یک برگه از برگه هایتان را انتخاب کنید. حالا یک بلوک به محتوای صفحه اضافه کنید! بلوک میتواند ابزارک باشد. از بین ابزارک ها, بایگانی را انتخاب کنید.

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

ابتدا روی بلوکی که ایجاد کردید یک کلیک کنید سپس به tab بلوک (در کنار سند نوشته شده است) بروید! آنجا پایین ترین بخش به نام پیشرفته است. در قسمت پیشرفته, افزودن کلاس است. آنجا بنویسید shwidget-home و دکمه “منتشر” را بزنید تا تغییرات ذخیره شود. خوانندگانی که نمیدانستند حالا فهمیدند چرا عنوان این پاراگراف را “پیشرفته>افزودن کلاس ” قرار داده شده است.