سایت های اینترنتی همیشه و در همه حال باید واکنشگرا باشد و با تمامی مرورگر های سطح اینترنت همخوانی داشته باشد چرا که در حال حاضر کاربران بسیاری با استفاده از تلفن های همراه خود و یا گجت های دیگر وب سایت ها را مشاهده میکنند و اگر وب سایت شما مشکلی در این خصوص داشته باشد برای آن ها مورد استفاده نیست و سایت را ترک میکنند. اما برای حل این مشکل فریم ورک بوت استرپ پیشنهادی فوق العاده است.
در این آموزش قصد داریم در مورد روش همگام سازی بوت استرپ با فرم تماس ۷ صحبت کنیم. اما پیش از شروع باید اطلاعاتی در خصوص بوت استرپ داشته باشید که اصلا بوت استرپ چیست و چه کاربردی دارد. بوت استرپ یک فریم ورک است که در طراحی سایت رسپانسیو استفاده می شود و برای ایجاد خاصیت واکنش گرایی در وب سایت ها مورد استفاده قرار میگیرد.
اما در این آموزش میخواهیم در مورد همگام سازی بوت استرپ با فرم تماس ۷ صحبت کنیم که سبب میشود تا فرم های تماس وب سایت شما نیز با تمامی گجت ها همگام باشد. پس شروع میکنیم. برای شروع باید در افزونه فرم تماس در بخش قالب های فرم ها کد زیر را جایگزین فرم پیشفرض کنید:
<div class="row"> <div class="col-md-۶ form-group"><label class="sr-only">نام</label>[text* your-name class:form-control placeholder "نام"]</div> <div class="col-md-۶ form-group"><label class="sr-only">آدرس ایمیل</label>[email* your-email class:form-control placeholder "آدرس ایمیل"]</div> </div> <div class="form-group"><label class="sr-only">موضوع پیغام</label>[text* your-subject class:form-control placeholder "موضوع پیغام"]</div> <div class="form-group"><label class="sr-only">متن پیغام</label>[textarea* your-message x۵ class:form-control placeholder "متن پیغام"]</div> <div class="form-group">[submit class:btn class:btn-default "ارسال"]</div>
پس از قرار گیری مورد فوق باید با قرار دادن کد زیر در فایل function.php قالب وردپرس وب سایت خود اسکریپت های آن را غیرفعال نمائید:
add_filter( 'wpcf۷_load_js', '__return_false' ); add_filter( 'wpcf۷_load_css', '__return_false' );
اما ممکن است در این میان برای عملکرد افزونه شما مشکلاتی ایجاد شود و برای حل این مشکلات باید کد های زیر را نیز در فایل function.php قالب وردپرس وب سایت خود اضافه کنید تا عملکرد افزونه دچار مشکل نشود و بتواند به سادگی کار خود را انجام دهد:
if ( function_exists( 'wpcf۷_enqueue_scripts' ) ) { wpcf۷_enqueue_scripts(); } if ( function_exists( 'wpcf۷_enqueue_styles' ) ) { wpcf۷_enqueue_styles(); }
حال پس از قرار گیری کد های فوق کار به اتمام رسیده است و شما توانستید که با استفاده از بوت استرپ فرم تماس را نیز ریسپانیسو کنید. در صورتی که مشکلی در انجام کار بود در بخش دیدگاه ها اطلاع دهید تا پاسخ داده شود اما توجه داشته باشید که قبل از انجام موارد فوق باید سایت خود را با بوت استرپ درست کرده باشید.
- مشکلی دارید؟ جواب خود را در پست فروم بگیرید
- منبع : بیست اسکریپت لطفا رعایت کنید