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

سلام ، با یک مطلب خیلی ساده و کاربردی در خدمت شما هستم ، آموزش قرار دادن و اضافه کردن 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تا گزینه برای فهرست به صورت مرتب و نا مرتب وجود دارند .

ادیتور وردپرس دکمه list style

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

امتیاز شما برای این مقاله
9 نظرات
  1. khadijeh می گوید

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

  2. فاطمه می گوید

    سلام
    خیلی ممنون به خاطر آموزشتون
    راستش من تازه دو هفتس که وردپرس کار میکنم ، یه قالبی انتخاب کردم که هر کاری میکنم نمیتونم فهرستش رو درس کنم تازه اگه زیر فهرست رو باز کنم زیر قالب اصلی میره
    اسم قالب izidreams هستش
    لطفا کمکم کنین خیلی نیاز دارم یه فهرست خوب بالای صفحه داشته باشم
    خواهش میکنم اگه امکانش هست بهم ایمیل بزنید
    بازم ممنونم

    1. آرش حیدری می گوید

      سلام ، خواهش می کنم لطف دارید
      راستش ندیده هیچ نظری نمی تونم بدم ، اگر یکم کدها رو ویرایش کنید به نتیجه می رسید

  3. محسن می گوید

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

    1. آرش حیدری می گوید

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

  4. محمد می گوید

    سلام . ممنون از این مطلب شما . با ورد پرس کار می کنم می خواهم بدانم چه طوری متونم عکس ها را کج کنم از چه کدی استفاده کنم و در کجای قالبم استفاده کنم . از یه قالب خارجی ترجمه شده استفاده می کنم .ممنون می شم راهنمایی کنید .

    1. آرش حیدری می گوید

      سلام
      اگر جستجو می کردید یا داخل آرشیو موضوع رو نگاه می کردید پیدا می کردید.
      از لینک زیر استفاده کنید
      http://doctorwp.com/1244/rotate-border-css-style-images.html

  5. محسن کریمیان می گوید

    سلام آقا آرش،فکر می‌کنم اغلب کاربران وردپرس و همچنین وبلاگ نویسان به این آموزش ساده و البته کاربردی نیاز دارند.ممنون و متشکر. منتظر آموزش های بعدی هستیم. موفق و سربلند باشید.یا علی

    1. آرش حیدری می گوید

      تشکر ، خیلی لطف داری دوست عزیز

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.