کد نویسی فوتر

کد نویسی فوتر

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

پس در فایل فانکشن (function) خود کد های زیر را وارد کنید. در ادامه به توضیح کدها خواهیم پرداخت.

نمونه کد نویسی فوتر

<pre>
register_sidebar( array(
    'name'          => esc_html__( 'Sidebar-footer1', 'News_taaraweb' ),
    'id'            => 'sidebar-footer1',
    'description'   => esc_html__( 'فوتر مورد نظر را اینجا اضافه کنید.', 'News_taaraweb' ),
    'before_widget' => '<div id=“%1$s” class=“single-footer-widget”>',
    'after_widget'  => '</div>',
    'before_title'  => '<h6>',
    'after_title'   => '</h6>',
) );  
register_sidebar( array(
    'name'          => esc_html__( 'Sidebar-footer2', 'News_taaraweb' ),
    'id'            => 'sidebar-footer2',
    'description'   => esc_html__( 'فوتر مورد نظر را اینجا اضافه کنید.', 'News_taaraweb' ),
    'before_widget' => '<div id=“%1$s” class=“single-footer-widget”>',
    'after_widget'  => '</div>',
    'before_title'  => '<h6>',
    'after_title'   => '</h6>',
) );  
register_sidebar( array(
    'name'          => esc_html__( 'Sidebar-footer3', 'News_taaraweb' ),
    'id'            => 'sidebar-footer3',
    'description'   => esc_html__( 'فوتر مورد نظر را اینجا اضافه کنید.', 'News_taaraweb' ),
    'before_widget' => '<div id=“%1$s” class=“single-footer-widget”>',
    'after_widget'  => '</div>',
    'before_title'  => '<h6>',
    'after_title'   => '</h6>',
) );  

<pre>

توضیح کد: تابع register_sidebar برای ایجاد سایدبار استفاده می شود که دارای پارامترهای مختلفی است که ما در اینجا از مهمترین پارامترهای آن استفاده کرده ایم:

• name : نام سایدبار
• id : شناسه سایدبار
• description: توضیحات سایدبار که در قسمت ابزارک ها نشان داده می شود.
• before_widget و after_widget  : شروع و پایان سایدبار را نشان می دهد. شما می توانید کلاسی تعریف کنید و بعدا در style.css قالب خود به آن استایل دهید. مثلا  ما در اینجا کلاس single-footer-widget را تعریف کرده ایم  که در فایل style.css برای آن  استایل های مختلف برای لیستها، پاراگراف ها، تصاویر و … تعریف کرده ایم.

before_title  و after_title    نیز برای تنظیم عنوان ابزارک ها  به کار می رود. به عنوان مثال می خواهید در پیشخوان و در قسمت ابزارک ها ، ابزارک آخرین دیدگاهها را به این سایدبار اضافه  کنید . در این قسمت تعیین می کنید که عنوان آن به چه صورت باشد با چه فونت، سایز ، رنگ و یا هر فرمتی. برای این قسمت نیز می توان کلاس قرار داد و در فایل style.css برای آن استایل مورد نظر را قرار داد.

با اضافه کردن کد فوق ، سه سایدبار در قسمت ابزارک ها اضافه می شود و شما می توانید ابزارک های مورد نظر خود را به آنها اضافه کنید به همین سادگی…

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

 sidebar-footer3 , sidebar-footer2 , sidebar-footer1 آی دی های فوترهای ما هستند که باید هنگامفراخوانی فوتر در قسمت مورد نظر از  آنها استفاده کنیم که طرز فراخوانی آن را نیز شرح خواهیم داد. برای فراخوانی سایدبار های فوتر در فوتر قالب ، می توان از کد زیر استفاده کرد که البته شما خود می توانید آن را به دلخواه تغییر دهید فقط مهمترین قسمت آن فراخوانی سایدبار فوترها است.

<pre>
<footer>
  <div class=“container”>
      <div class=“row”>
          <div class=“col-lg-4 p-b-20”>
              <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-footer1')) : ?><?php endif; ?>
          </div>
          <div class=“col-sm-6 col-lg-4 p-b-20”>
             <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-footer2')) : ?><?php endif; ?>
          </div>
          <div class=“col-sm-6 col-lg-4 p-b-20”>
             <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-footer3')) : ?><?php endif; ?>
          </div>
      </div>
 </div>
</footer>
<?php wp_footer(); ?>

</body>
</html>
<pre>

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