کدهای قرار دادن list style در قالب

سلام ، با یک مطلب خیلی ساده و کاربردی در خدمت شما هستم ، آموزش قرار دادن و اضافه کردن list style به قالب که در ادامه چندتا کد  استایل رو قرار میدیم تا اگر که قالب شما این قابلیت رو نداره بهش اضافه کنید.

list style چیست ؟

در طراحی صفحات سایت ها از لیست ها یا فهرست ها بسیار استفاده میشه که در کنار هر ردیف ( یا li ) یک علامتی مثل مربع ، دایره ، …  یا آیکونی هستش که به اون list style میگن.

آموزش و کدهای list style قالب

بهترین کار این هستش ، برای این که قالب بهم نریزه و یکهو !! تمام li های قالب اون list style رو به خودشون نگیرند ، شما نگاه کنید و ببینید که کلاس یا id اون قسمت از قالب شما در فایل style.css چی هستش تا فقط به همین کلاس list style رو اضافه کنیم.

برای پیدا کردن کلاس باید یکمی هم آشنایی داشته باشید اما راست کلیک کنید روی اون قسمت قالب و اگر با گوگل کروم هستید گزینه inspect element رو بزنید ، و کلاس رو پیدا کنید.در قالب فعلی سایت من کلاسی که نوشته های من داخلش هستند posts. هستش.

بعد کافیه که یک خط به استایل اضافه کنید و نام اون کلاس رو بنویسید و یک فاصله بدید و بعدش li رو بنویسید و مقادیر زیر رو داخلش تعریف کنید.به فرض مثال برای کلاس posts. سایت من باید چنین کدی رو به استایل اضافه کرد.

.posts li{
background: url(https://doctorwp.com/wp-content/themes/picor2/images/check-list.png) no-repeat right!important;
padding-right: 28px!important;
list-style-type: none;
}

دقت کنید کلاس posts. برای قالب من هستش شما باید کلاس مورد استفاده در قالب خودتونو بنویسید !

بعدش با این کار یک list style با آیکون تیک سبز به لیست های قسمت نوشته های قالب  اضافه میشه به این شکل

• list style با آیکون تیک سبز رو این کنار ببینید !

اضافه کردن فهرست و لیست در ادیتور وردپرس

اگر در ادیتور وردپرس یا ادیتور سیستم های مدیریت محتوای دیگه که همه شبیه هم هستند توجه کرده باشید 2تا گزینه برای فهرست به صورت مرتب و نا مرتب وجود دارند .

شما باید ازین ها هر کجای متن نوشته که می خواهید استفاده کنید ، ما قبلشم که تو قالب براشون تعریف کردیم کنارشون یک تیک سبز میان !