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

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

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

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

فوتر قالب وردپرس

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

در صورتی که اطلاعات شما در این  مورد کامل نیست، پیش از شروع این بخش می توانید از لینک های زیر استفاده نمایید:

Template Files در وردپرس چیست؟
ساختار سلسله مراتبی قالب وردپرس
Template Hierarchy در وردپرس
Template Hierarchy در وردپرس

این مطلب در تاریخ 20 تیرماه 1397 مجددا بازنگری و آپدیت شده و کدهای آن به روزرسانی شده و نکات جدید به آن اضافه شده است. 

بخش اول: تعریف فوتر قالب وردپرس

  • کپی کردن کلیه فایل های بخش فوتر سایت در فایل فوتر قالب وردپرس با نام footer.php (بخش 007 در داخل کدها)، به دلیل درست نمایش داده نشدن اسکریپت ها، کلیه بخش های دارای تگ script به صورت کامنت نشان داده شده است.

<!--007-->
<!--start footer section-->
<footer>
    <div id="footer">
        <div class="container">
            <div class="footer-details">
                <div class="newsletter">
                    <!--Your codes put here-->
                </div>
                <div class="social-share-links">
                    <a href="#"><i class="fa fa-google-plus"></i></a>
                    <a href="#"><i class="fa fa-instagram"></i></a>
                    <a href="#"><i class="fa fa-twitter"></i></a>
                    <a href="#"><i class="fa fa-facebook"></i></a>
                </div>
            </div>
            <div class="footer-copyright">
                <div class="footer-menu">
                    <!--Your menus codes put here-->
                </div>
                <div class="copyright">کلیه حقوق برای وبمستر وردپرس محفوظ می باشد</div>
            </div>
        </div>
    </div>
</footer>
<!--end footer section-->
<!--<script src="<?php /*echo get_theme_file_uri().'/js/vendor/jquery-1.11.3.min.js'*/ ?>"></script>-->
<!--<script src="<?php /*echo get_theme_file_uri().'/js/responsiveslides.min.js'*/ ?>"></script>-->
<!--<script src="<?php /*echo get_theme_file_uri() . '/js/plugins.js' */?>"></script>-->
<!--<script src="<?php /*echo get_theme_file_uri().'/js/main.js'*/ ?>"></script>-->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<!--<script>
    //    (function (b, o, i, l, e, r) {
    //        b.GoogleAnalyticsObject = l;
    //        b[l] || (b[l] =
    //                function () {
    //                    (b[l].q = b[l].q || []).push(arguments)
    //                });
    //        b[l].l = +new Date;
    //        e = o.createElement(i);
    //        r = o.getElementsByTagName(i)[0];
    //        e.src = 'https://www.google-analytics.com/analytics.js';
    //        r.parentNode.insertBefore(e, r)
    //    }(window, document, 'script', 'ga'));
    //    ga('create', 'UA-XXXXX-X', 'auto');
    //    ga('send', 'pageview');
</script>-->
<!--009-->
<?php wp_footer(); ?>
</body>
</html>
اگر با نحوه لینک شدن فایل ها در قالب وردپرس با یکدیگر آشنا نیستید، از این لینک استفاده کنید
  • در نظر داشته باشید که کلیه فایل های استایل و اسکریپت را می توانید با enqueue کردن و تابع های مثل  wp_register_script و wp_enqueue_script و wp_register_script و wp_register_style و wp_enqueue_style تعریف نماییم تا نیازی به قرار دادن آن ها در هدر یا فوتر نباشد

  • در صورت استفاده از توابع بالا برای تعریف script ها درون قالب وردپرس، می باید تابع wp_footer دقیقا پیش از تگ بسته body فراخوانی نمایید (شماره 009 در داخل کدها)

  • مسیردهی فایل های جاوا اسکریپت موجود در فوتر قالب وردپرس با تابع get_theme_file_uri ، برای این کار از تابع echo در داخل تگ php استفاده می کنیم.

  • فراخوانی فایل footer.php با تابع get_footer در فایل index.php

<?php

/*--001--*/
get_header();

/*--008--*/
get_template_part('template-parts/header/top-menu');

/*--007--*/
get_footer();
?>

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

  • از آنجا که قالب وردپرس خود را بصورت ماژولار طراحی می نماییم، لذا کدهای بخش Top Menu را جدا کرده و در دایرکتوری با نام template-parts یک دایرکتوری با نام header ایجاد کرده و داخل آن فایلی با نام top-menu.php ایجاد می نماییم.

  • کلیه کدهای بخش Top Menu را در فایل top-menu.php کپی می نماییم

  • برای فراخوانی آن در index.php از تابع get_template_part (قسمت 008 موجود در بالا) استفاده می کنیم

  • بعد از رفرش کردن صفحه، منوی بالای سایت به نمایش درخواهد آمد، در صورتی که یک بخش سفید در بالای سایت مشاهده می کنید، به خاطر نمایش admin bar در بالای سایت می باشد (وقتی که در داخل سایت لاگین هستید، به نمایش در خواهد آمد). برای نمایش ندادن این بخش، کافی است از فیلتر show_admin_bar در فایل functions.php به شکل زیر استفاده نمایید.

add_filter('show_admin_bar', '__return_false'); //put it in functions.php

با کپی کردن کدهای بخش منوی بالای سایت، هنوز منو ها، بصورت داینامیک تعریف نشده است. در واقع ما می خواهیم چندین منو در بخش های مختلف سایت داشته باشیم و کاربر بتواند از بخش فهرست ها، به راحتی منوهای خود را تغییر داده و از آن ها در سایت خود استفاده کند. فرض کنید می خواهیم سه منوی مختلف برای قالب وردپرس خود داشته باشیم: یکی برای بخش بالای سایت و با نام Top Menu و دیگری برای بخش هدر با نام Header Menu و یک منو نیز برای فوتر با نام Footer Menu. برای داینامیک کردن منو های سایت می باید از مراحل زیر استفاده نماییم:

  • ابتدا در فایل functions.php ، باید از اکشن after_setup_theme ، بصورت زیر استفاده نماییم و به توسط این هوک، تابع msntheme_setup را فراخوانی نماییم.

  • در حال حاضر هیچ منو ای در قالب ما تعریف نشده است. برای تعریف سه منوی گفته شده در بالا، از تابع register_nav_menus استفاده می کنیم. این تابع یک آرایه را به عنوان پارامتر ورودی دریافت می کند که بصورت یک associative array تعریف می گردد. عضو های اول این آرایه (یا همان Key ها) نام جایگاه های منوهای ما در قالب وردپرس یا همان menu location slugs می باشد و عناصر دوم این آرایه (یا همان Value ها) توضیحات مربوط به آن ها یا همان descriptions می باشند. این تابع در Navigation Menu های وردپرس، بسیار مورد استفاده قرار می گیرد.

function msntheme_setup()
{
    //If you have one menu, you only need to add this line of code in the following:
    //register_nav_menu('top-bar-menu','A Menu For Top Bar');
    $menus = array(
        'top-bar-menu' => 'A Menu For Top Bar',
        'header-menu' => 'A Menu For Header',
        'footer-menu' => 'A Menu For Footer'
    );
    register_nav_menus($menus);
}

add_action('after_setup_theme', 'msntheme_setup');
//Use to create one menu
register_nav_menu( $location, $description );

//Example:
register_nav_menu( 'primary', __( 'Primary Menu', 'theme-slug' ) );

//Use to create multiple menus
register_nav_menus( $locations );

//Example:
register_nav_menus( array(
  'pluginbuddy_mobile' => 'PluginBuddy Mobile Navigation Menu',
  'footer_menu' => 'My Custom Footer Menu',
) );
  • حال بعد از register کردن منوها در قالب وردپرس ، می توانید آن ها را بخش فهرست ها تنظیم کرده و منوهای دلخواه خود را بسازید.

  • برای داینامیک کردن منو قالب وردپرس، کافی است بخش های استاتیک آن را برداشته و با استفاده از توابع has_nav_menu و wp_nav_menu ، منوی خود را در قالب تعریف نماییم (بخش 011 در کدها). تابع has_nav_menu که خروجی آن به صورت boolean می باشد، بررسی می نماید که آیا منو ای با این نام پاس داده شده به آن، در سایت موجود می باشد یا خیر، و در نهایت با استفاده از تابع wp_nav_menu این منو به نمایش در می آید. از هر دو روش زیر برای بررسی شرط در کدهای خود می توانید استفاده کنید:

<!--008-->
<!--Top Bar-->
<div id="top-bar">
    <div class="container">
        <nav id="top-right-menu">
            <!--011-->
           <?php if (has_nav_menu('top-bar-menu')): ?>
               <?php wp_nav_menu(array('theme_location' => 'top-bar-menu')) ?>
           <?php else: ?>
               <div class="top-bar-menu-item">لطفا برای این قسمت یک منو انتخاب کنید</div>
           <?php endif; ?>
            
           <!--This part is commnented because I have changed it with above codes 
           <ul>
                <li><a href="#"><i class="fa fa-file-text-o"></i>وبلاگ</a></li>
                <li><a href="#"><i class="fa fa-list-alt"></i>استخدام</a></li>
                <li><a href="#"><i class="fa fa-bullhorn"></i>پشتیبانی</a></li>
                <li><a href="#"><i class="fa fa-globe"></i>انگلیسی</a></li>
            </ul>
             -->
        </nav>
        <div id="top-left-social">
            <ul>
                <li><a href="#"><i class="fa fa-facebook-official"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
            </ul>
        </div>
    </div>
</div>
<!--End Top Bar-->
<!--008-->
<!--Top Bar-->
<div id="top-bar">
    <div class="container">
        <nav id="top-right-menu">

            <!--This is another way to write php codes-->
            <?php
                if (has_nav_menu('top-bar-menu')){
                    wp_nav_menu(array('theme_location' => 'top-bar-menu'));
                } else {
                    echo '<div class="top-bar-menu-item">لطفا برای این قسمت یک منو انتخاب کنید</div>';
                }
            ?>
            <!--  
            <ul>
                <li><a href="#"><i class="fa fa-file-text-o"></i>وبلاگ</a></li>
                <li><a href="#"><i class="fa fa-list-alt"></i>استخدام</a></li>
                <li><a href="#"><i class="fa fa-bullhorn"></i>پشتیبانی</a></li>
                <li><a href="#"><i class="fa fa-globe"></i>انگلیسی</a></li>
            </ul>
            -->
        </nav>
        <div id="top-left-social">
            <ul>
                <li><a href="#"><i class="fa fa-facebook-official"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
            </ul>
        </div>
    </div>
</div>
<!--End Top Bar-->
  • نکته کاربردی: در صورتی که بخواهید از پیش از نام هر آیتم منوی خود از فونت های آیکون هایی چون font awesome استفاده نمایید، می باید کد کلاس css مدنظر خود را در درون بخش class CSS هرکدام از آیتم های منوی خود تعریف نمایید.

    بعد از این کار می توانید با دادن استایل مربوطه نظیر استفاده li:before و float نمودن آن ها، فونت آیکن های خود را، قبل از نام هر آیتم به نمایش در بیاورید

نکته مهم:

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

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

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

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

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