فهرست وردپرس؛ آموزش ایجاد و استایل دهی

آموزش ۱۴ مرداد ۱۳۹۷

برای ساختن فهرست در وردپرس ابتدا باید در قسمت تابع functions.php کد زیر را اضافه کنیم تا به قالب وردپرسی که خودمان طراحی کردیم یه فهرست شناسانده شود:

به جای «منوی اصلی» و «header-menu» می‌توانید کلمه‌ی مورد نظر خودتان را بنویسید.

سپس وارد قسمت ویرایش > فهرست‌ها شوید و بر روی گزینه «فهرستی تازه بسازید» کلیک کنید.

فهرست وردپرس؛ آموزش ایجاد و استایل دهی

فهرست وردپرس؛ آموزش ایجاد و استایل دهی

سپس یک نام برای فهرست انتخاب کنید.

همانطور که مشاهده می‌کنید، در ستون سمت راست گزینه‌هایی وجود دارد که می‌توان به فهرست اضافه کرد.

فهرست وردپرس؛ آموزش ایجاد و استایل دهی

با گرفتن و کشیدن به بالا و پایین هر کدام از منوها می‌توانید جای آن‌ها را مشخص کنید.

آموزش ایجاد و استایل دهی

فهرست وردپرس؛ آموزش ایجاد و استایل دهی

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

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

همینطور می‌توان نوشته‌ها، دسته‌ها و برگه‌ها را هم به فهرست اصلی و زیرمنو اضافه کرد.

بعد از ایجاد منو بر روی ذخیره فهرست کلیک میکنیم.

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

با استفاده از کد زیر در هر جایی از قالب می‌توانیم منو خود را نمایش دهیم:

نکته: header-menu مثال است و باید با هر کلمه‌ای که قبلا در functions.php اضافه شده همخوانی داشته باشد.

فهرست وردپرس؛ آموزش ایجاد و استایل دهی

استایل‌دهی فهرست:

همانطور که مشاهده می‌کنید منو ساخته شده ولی هیچ استایلی ندارد. برای این کار باید کد بالا را در میان تگ های html قالب خود که قرار دهید میتوانید با css استایل مورد نظر خود را به آن اضافه کنید.

منوی دارای تگ های <ul> و <li> میباشند که میتوان آن هارا به شکل دلخواه در آورد.

 

اگر قالب شما بوت استرپی باشد کار شما خیلی راحت میشود. میتوانید کد بالا را به در جای مورد نظر خود در میان تگ های بوت استرپ اضافه کنید

زمانی که با وردپرس منویی را می‌سازیم زمانی که Inspect می‌گیریم می‌بیتیم که کدها به شکل زیر است:

و زمانی که کدهای منوی بوت استرپ را نگاه می‌کنیم هم ساختار به همین شکل است ولی کلاس آن‌ها با هم فرق می‌کنند که با استفاده از کدهای jQuery و اضافه کردن کلاس‌های بوت استرپ به آن می‌توانیم یک منوی زیبا و کاملا داینامیک برای سایت وردپرسی داشته باشیم.

کدهای jQury به صورت زیر است:

فهرست وردپرس؛ آموزش ایجاد و استایل دهی

به همین راحتی.

امیدوارم این آموزش مورد توجه قرار شما قرار گرفته باشد و به شما کمک کرده باشد.

هفت پیکسل، تلفیق هنر و تکنولوژی

دیدگاه شما