منو اصلی سایت وردپرس و آماده سازی آن – مقدمه:
در چهارمین بخش از چک لیست طراحی قالب وردپرس ، با یک سناریو واقعی برای ساخت قالب وردپرس ، می خواهیم تا منو اصلی سایت وردپرس و عنوان قالب وردپرس خود را در فایل مربوطه قرار داده و سپس آن را فراخوانی کنیم.
در این قسمت ابتدا لوگوی سایت، عنوان سایت و همچنین بخش های مورد نیاز در قسمت Top Header را اضافه می کنیم.
سپس در بخش زیرین آن، منو اصلی سایت وردپرس را به طور کامل به قالب وردپرس خود اضافه خواهیم کرد.
این مطلب در تاریخ ۲۰ تیرماه ۱۳۹۷ مجددا بازنگری و آپدیت شده و کدهای آن به روزرسانی شده و نکات جدید به آن اضافه شده است.
بخش اول: نمایش لوگو سایت و عنوان سایت
بعد از بخش Top bar menu ، در زیر آن می خواهیم تا بخشی را نمایش دهیم که شامل logo سایت و همین طور عنوان سایت باشد. همین طور می خواهیم چند آیکون شامل تلفن و مکان و ایمیل را هم به نمایش در بیاوریم که با رفتن ماوس روی آن ها، اطلاعات مربوطه به نمایش در می آیند. در زیر این بخش نیز منوی اصلی سایت قرار داده خواهد شد که در سمت راست قرار خواهد گرفت و در سمت چپ نیز، باکس سرچ سایت را در نوار هدر سایت قرار خواهیم داد.
get_template_part('template-parts/header/title-header');
<!--Start Title Header--> <header id="top-header"> <div class="container"> <div id="logo"> <a href="<?php echo home_url();?>"> <!--013--> <img width="150" height="150" src="<?php echo get_template_directory_uri().'/images/logo.png'; ?>" alt="لوگو سایت"> <!--OOP-001--> <img width="150" height="150" src="<?php echo Asset::image('logo.png'); ?>" alt="لوگو سایت"> <!--014--> <h1><?php bloginfo('name');?> <p><?php bloginfo('description') ?></p> </h1> </a> </div> <div id="contact-bar"> <a title="021-77436964" href=""><i class="fa fa-phone"></i></a> | <a title="ایران-تهران" href=""><i class="fa fa-map-marker"></i></a> | <a title="info@wpwebmaster.ir" href=""><i class="fa fa-envelope-o"></i></a> </div> </div> </header> <!--End Title Header-->
بخش دوم: تعریف منو اصلی سایت وردپرس
get_template_part('template-parts/header/main-header');
<!--015--> <!--Start Main Menu--> <div id="main-menu-wrapper"> <div class="container"> <div id="main-menu" class="menu"> <!--016---> <?php if (has_nav_menu('header-menu')): ?> <?php wp_nav_menu(array('theme_location' => 'header-menu')) ?> <?php else: ?> <div class="top-bar-menu-item">لطفا برای این قسمت یک منو انتخاب کنید</div> <?php endif; ?> </div> <div id="top-search"> <form action="" method="get"> <div class="from-row"> <label for="search-input"> <i class="fa fa-search"></i> </label> <!--017---> <input id="search-input" name="s" type="text" placeholder="جستجو در سایت"> </div> </form> </div> </div> </div> <!--End Main Menu-->
چگونه یک جستجو در وردپرس انجام می شود؟
حال نوبت به بخش باکس جستجو در منو اصلی سایت وردپرس می باشد. این باکس می تواند هرجا قرار بگیرد و ما به دلخواه، این باکس را در این بخش قرار داده ایم. در Template File های وردپرس فایلی با نام search.php وجود دارد که نتایج جستجو را با استفاده از تابع get_search_query نمایش می دهد.
وردپرس همواره درخواست جستجو را از مرورگر کاربر و با یک درخواست GET دریافت می کند. این درخواست به صورت یک query string بوده که با حرف s آغاز می شود و سایر پارامترهای مورد جستجو، در ادامه آن، لیست می گردد. سپس این درخواست بررسی شده و نتیجه آن به وسیله قرار داده شدن در فایل search.php به کاربر بازگشت داده می شود.
با توجه به مراحل کار جستجو در وردپرس، می توان نتیجه گرفت که برای فرستادن درخواست جستجو به هسته وردپرس، شما باید یک فرم تهیه کرده که در داخل یک input box قرار داده شده که نام آن s می باشد. در واقع با دادن نام s آن، وردپرس به صورت اتوماتیک متوجه می شود که باید عملیات جستجو را بر روی درخواست فرستاده شده، انجام دهد. (بخش ۰۱۷ در کدهای بالا)
<?php /*۰۴۲-۰۵-*/ get_header(); get_template_part('partials/top-menu'); get_template_part('partials/title-header'); get_template_part('partials/main-menu'); ?> <!--Start Main Content--> <div id="main-content"> <div class="container"> <div class="archive"> <!--042-06---> <h2> <?php echo 'نتایج جستجو برای: '.esc_html(get_search_query(false))?></h2> </div> <div class="posts-container"> <?php get_template_part('loops/loop'); ?> </div> <div class="pagination"> <?php get_template_part('partials/pagination')?> </div> </div> </div> <?php get_footer();
نکته مهم:
مطالب فوق از فیلم های آموزشی طراحی قالب وردپرس گروه آموزشی سون لرن، برداشت شده و با تغییراتی در آن، به عنوان چک لیست در اینجا قرار داده شده است.
هدف ما، مرتب سازی این مطالب و داشتن چک لیست برای انجام تکراری کارهایی است که به طور روزمره، برای پروژه های طراحی قالب وردپرس انجام می دهیم. برای دسترسی به فیلم این آموزش ها به صورت کامل، می توانید به سایت سون لرن مراجعه فرمایید.
راهنما برای چک لیست طراحی قالب وردپرس:
شما می توانید از لینک های زیر به عنوان مرجع های اصلی برای چک لیست طراحی قالب وردپرس در قسمت بالا استفاده نمایید:
یک مشکل اساسی که این متن های آموزشی دارند اینه که عکس از مراحل کار ارائه نمیشه.
مطمئنا ً روی یک مثال آزمایشی و با ارائه نمایش تغییرات، درک مراحل کار ساده تر میشه برای خواننده.
ممنون از شما
سلام مجدد به شما آقا میلاد عزیز
در جاهایی که نیاز به گذاشتن عکس باشه، حتما این کار انجام شده. به عنوان مثال برای آموزش گیت و ساخت مخزن گیت برای وردپرس، نیاز به ارائه عکس از محیط phpstorm بوده، که براش گذاشته شده.
اما در جاهایی که مفاهیم ارتباط با برنامه نویسی دارند، ارائه عکس خیلی معنی پیدا نمی کنه و برای همین به ارائه کدها بسنده شده. شما همین مورد رو در کتاب های آموزش برنامه نویسی روز دنیا هم مشاهده می کنید.
به هرحال بعضی از بخش ها کامل انتزاعی هستند و خیلی نمیشه عکس های مرتبط با آن را قرار داد. در مورد این مقاله خاص هم، دقیقا هدف درک نوع نحوه کارکرد منو در وردپرس بوده و برای همین خیلی از عکس استفاده نشده است.
به هرحال سعی می کنیم در آموزش های بعدی این امر را بیشتر در نظر بگیریم.
بازهم ممنونم به خاطر نظرات بسیار سازنده شما