منو ها یا لیستهای افقی در طراحی سایت وردپرسی

 

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

ایجاد یک منو یا لیست افقی

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

 

<div id="navmenu">
<ul>
<li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
<li><a href="wordpress/recipes/">RECIPES</a></li>
<li><a href="wordpress/travel/">TRAVEL</a></li>
<li><a href="http://www.yadbegir.com">YADBEGIR</a></li>
</ul>
</div>

 

همانطور که مشاهده می کنید در لیست ما یک سری کد های PHP وجود دارد تا صفحه اصلی یا همان home page را ایجاد نماید و شاخه های دیگر هم به صورت کد های html تعریف شده اند تا لیست ما را تکمیل کنند. لیست فوق در برابر کاربر به صورت زیر نمایش داده می شود:

• HOME

• RECIPES

• TRAVEL

• YADBEGIR
  

همچنین می توانید از دستور

wp_list_categories()

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

<div id="navmenu">
<ul>
<li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
<?php wp_list_categories('orderby=name&include=1,4,7,8'); ?>
<li><a href="http://www.wordpress.org">WORDPRESS</a></li>
</ul>
</div>

همانطور که در کد ها مشاهده می کنید شاخه های 1و4و7و8 در لیست انتخاب شده اند تا نمایش داده شوند و بقیه از لیست حذف شده اند. معمولا کد های این لیست را در پایان فایل هدر قالب یا بعد از آن قرار می دهند. شما با باز کردن فایل header.php در دایرکتور قالب خود و قرار دادن این کد ها در آن می توانید لیست خود را به قالب وب سایت تان اضافه کنید. حتما آنها را در بین تگ های DIV قرار دهید.

اصلاح از طریق CSS

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

#navmenu ul {margin: 0; padding: 0;
list-style-type: none; list-style-image: none; }

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

#navmenu ul {margin: 0; padding: 0;
list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }

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

#navmenu ul {margin: 0; padding: 0;
list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; padding: 5px 20px 5px 20px}
#navmenu a {text-decoration:none; color: blue; }
#navmenu a:hover {color: purple; }

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

#navmenu ul {margin: 0; padding: 0;
list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }
#navmenu ul li a {text-decoration:none; margin: 5px;
padding: 5px 20px 5px 20px; color: blue;
background: pink;}
#navmenu ul li a:hover {color: purple;
background: yellow; }

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

صفحه اصلی » آموزش » آموزش اینترنت » منو ها یا لیستهای افقی در طراحی سایت وردپرسی