منو اصلی سایت وردپرس و آماده سازی آن – مقدمه:

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

در این قسمت ابتدا لوگوی سایت، عنوان سایت و همچنین بخش های مورد نیاز در قسمت Top Header را اضافه می کنیم.

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

این مطلب در تاریخ ۲۰ تیرماه ۱۳۹۷ مجددا بازنگری و آپدیت شده و کدهای آن به روزرسانی شده و نکات جدید به آن اضافه شده است. 

بخش اول: نمایش لوگو سایت و عنوان سایت

بعد از بخش Top bar menu ، در زیر آن می خواهیم تا بخشی را نمایش دهیم که شامل logo سایت و همین طور عنوان سایت باشد. همین طور می خواهیم چند آیکون شامل تلفن و مکان و ایمیل را هم به نمایش در بیاوریم که با رفتن ماوس روی آن ها، اطلاعات مربوطه به نمایش در می آیند. در زیر این بخش نیز منوی اصلی سایت قرار داده خواهد شد که در سمت راست قرار خواهد گرفت و در سمت چپ نیز، باکس سرچ سایت را در نوار هدر سایت قرار خواهیم داد.

  • ایجاد یک فایل در ساب دایرکتوری template-parts/header با نام title-header.php و کپی کردن کلیه فایل های بخش هدر عنوان در این فایل

  • فراخوانی این فایل در فایل index.php به وسیله تابع get_template_part

get_template_part('template-parts/header/title-header');
  • درست کردن آدرس مربوط به لوگو و تبدیل آدرس نسبی به آدرس های مورد قبول توسط وردپرس با استفاده از تابع get_template_directory_uri (شماره ۰۱۳ موجود در کدها)

  • در صورتی که از ساختار شی گرا استفاده می کنید (که در جلسات قبل به آن اشاره شد) می توانید از کلاس استاتیک Asset و متد image که قبل تر آن را تعریف کرده ایم، استفاده نمایید (مشخص شده در کد ها با OOP-001)

  • نمایش عنوان سایت و همین طور توضیحات مربوط به آن (بخش ۰۱۴ در کدها) با استفاده از تابع bloginfo 

<!--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-->

بخش دوم: تعریف منو اصلی سایت وردپرس

  • ساخت یک فایل جدید با نام main-header.php در ساب دایرکتوری  template-parts/header برای منو اصلی سایت وردپرس و کپی کردن کلیه کدهای مربوط به منو اصلی سایت وردپرس در آن (بخش ۰۱۵ در کدها)

  • صدا کردن این فایل در فایل index.php به وسیله تابع get_template_part

get_template_part('template-parts/header/main-header');
  • پاک کردن کلیه ساختار های منو با ul و li در کدها و استفاده از توابع توضیح داده شده در قسمت قبلی این آموزش

  • استفاده از تابع has_nav_menu برای بررسی وجود منو اصلی سایت وردپرس و همین طور register شدن آن (بخش ۰۱۶ در کدها)

  • استفاده از تابع wp_nav_menu برای نمایش دادن منو اصلی سایت وردپرس

<!--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 آن، وردپرس به صورت اتوماتیک متوجه می شود که باید عملیات جستجو را بر روی درخواست فرستاده شده، انجام دهد.  (بخش ۰۱۷ در کدهای بالا)

  • ساخت یک فرم در بخش منو اصلی سایت وردپرس و نامگذاری input text داخل آن با نام s

  • تعریف فایل search.php جهت نمایش نتایج جستجو با استفاده از فراخوانی تابع get_search_query

<?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();


نکته مهم:

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

هدف ما، مرتب سازی این مطالب و داشتن چک لیست برای انجام تکراری کارهایی است که به طور روزمره، برای پروژه های طراحی قالب وردپرس انجام می دهیم. برای دسترسی به فیلم این آموزش ها به صورت کامل، می توانید به سایت سون لرن مراجعه فرمایید.

راهنما برای چک لیست طراحی قالب وردپرس:

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