آموزش بهینه سازی افزونه فرم تماس Contact Form 7

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

در سیستم مدیریت محتوای وردپرس نیز روش‌های گوناگونی برای ایجاد برگه تماس وجود دارد که یکی از معمول‌ترینِ این روش‌ها استفاده از افزونه‌های تماس وردپرس می‌باشد که بی‌شک و بدون تردید قدرتمندترین و کاربر پسندترین این افزونه‌ها، افزونه‌ی Contact Form 7 است که بیشترین تعداد دانلود در مخزن وردپرس را در بین افزونه‌های تماس به خود اختصاص داده است که شما به کمک این افزونه می‌توانید صفحات تماس و فرم‌های تماس با قابلیت‌های فراوان را آماده کنید.

Contact Form 7

 

همان‌طور که می‌دانید این افزونه نیز همانند سایر افزونه‌های تماس وردپرس برای نمایش و عملکرد صحیح نیاز به فراخوانی فایل‌های جاوا اسکریپت و استایل دارد که این فایل‌ها به حجم خروجی تمام برگه‌های سایت شما اضافه خواهد شد که به دلیل دریافت کردن این فایل‌ها توسط مرورگر، زمان بیشتری برای بارگزاری کامل سایت نیاز است که این امر موجب حجیم‌تر شدن خروجی صفحات و بیشتر شدن زمان بارگذاری خواهد شد.

در این نوشته از وبلاگ ماندگار وب آموزشی را برای دوستانی که از این افزونه تماس استفاده می‌کنند آماده نموده‌ایم که به کمک این آموزش می‌توانید فایل‌های جاوا اسکریپت و استایل مورد نیاز این افزونه را تنها در صفحاتی که برای ساخت فرم از این افزونه استفاده شده است فراخوانی کنید و در نهایت علاوه بر کم کردن حجم خروجی به سرعت بارگذاری سایت خود نیز کمک کنید. بهینه سازی افزونه Contact Form 7 به دو روش امکانپذیر می‌باشد که در این نوشته هر دو روش را برای شما دوستان عزیز شرح خواهیم داد و شما میتوانید یکی از این روش‌ها را برای بهینه کردن افزونه تماس وردپرس انتخاب کنید.

در روش اول که پیشنهاد نویسنده افزونه Contact Form 7 می‌باشد در روت هاست وردپرس و مسیری که وردپرس را در آنجا نصب نموده‌اید فایل wp-config.php را برای ویرایش باز می‌کنید (خواهشمندیم از تمامی فایل‌هایی که در این نوشته برای ویرایش معرفی می‌شوند نسخه پشتیبان تهیه نمایید) و دستور زیر را در محل مناسبی از این فایل قرار می‌دهید:

define('WPCF7_LOAD_JS', false);
define('WPCF7_LOAD_CSS', false);

چنانچه آشنایی کافی با ویرایش فایل‌ها ندارید می‌توانید دستور را بعد از خط زیر قرار داده و پس از تغییرات فایل را ذخیره کنید:

define('WP_DEBUG', false);

دستور بالا مانع فراخوان شدن فایل‌های استایل و جاوا اسکریپت افزونه Contact Form 7 می‌شود که در قدم دوم شما باید فایل page.php پوسته وردپرس خود را برای ویرایش باز کنید و دستور شرطی زیر را به ابتدای این فایل اضافه کرده و تغییرات را ذخیره کنید:

<?php
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
wpcf7_enqueue_scripts();
wpcf7_enqueue_styles();
}
?>

با اضافه شدن دستور فوق، فایل‌های جاوا اسکریپت و استایل افزونه Contact Form 7 تنها در برگه‌های سایت شما به نمایش در خواهند آمد.

در روش دوم که پیشنهاد گروه ماندگار وب می‌باشد نیازی به ویرایش فایل‌های اصلی هسته وردپرس نبوده و برخلاف روش اول فایل‌های جاوا اسکریپت و استایل تنها و تنها در صفحاتی که از افزونه تماس در آنها استفاده شده است فراخوان خواهند شد که برای استفاده از این روش تنها کافیست فایل فانکشن قالب وردپرس خود را برای ویرایش باز کرده و دستور زیر را در محل مناسبی از این فایل قرار دهید:

add_action( 'wp_print_scripts', 'deregister_cf7_javascript', 100 );
function deregister_cf7_javascript() {
if ( !is_page(array(8,10)) ) {
wp_deregister_script( 'contact-form-7' );
}
}
add_action( 'wp_print_styles', 'deregister_cf7_styles', 100 );
function deregister_cf7_styles() {
if ( !is_page(array(8,10)) ) {
wp_deregister_style( 'contact-form-7' );
}
}

در دستور فوق برای نمونه برگه‌هایی با آیدی 8 و 10 در کد قرار داده شده‌اند که بدین ترتیب فایل‌های جاوا اسکریپت و استایل افزونه Contact Form 7 تنها در این برگه‌ها فراخوان خواهد شد که شما برای عملکرد صحیح کد می‌بایست آیدی برگه‌های خود را که از افزونه تماس در آنها استفاده شده است جایگزین آیدی پیش‌فرض کد کنید که پس از ذخیره‌ی تغییرات متوجه خواهید شد فایل‌های خروجی این افزونه تنها در برگه‌هایی که شما آیدی آنها را مشخص کرده اید فراخوان خواهند شد.


کانال تلگرام ماندگار وب

    1. امیر خلجی مهر

      خواهش میکنم میکائیل عزیز

  1. رضا کیانوش

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

    1. امیر خلجی مهر

      🙂
      خواهش میکنم رضا جان
      درسته من هم برای تماس از فایل کامنت استفاده کردم تا خروجی برگه ها تو کمترین حجم بمونه ولی اگه به افزونه های تماس نیازی باشه این افزونه واقعا” قدرتمند و اصولی نوشته شده و نمیشه ازش گذشت
      موفق باشی عزیزم

  2. ساسان

    سلام
    خواستم از طریق این پست یه خسته نباشید بهتون بگم.

    انشالله موفق باشید و کارتون رو ادامه بدید

    1. امیر خلجی مهر

      سلام

      ممنون ساسان عزیز انشالله با حمایت های شما دوستان بهترین های وردپرس رو به اشتراک بگذاریم
      موفق باشید {گل}

  3. عزیز

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

    1. امیر خلجی مهر

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

      موفق باشید

  4. محمد

    سلام خسته نباشید. من این کار رو انجام دادم و تاثیر هم داشت ولی باز هم سایت gtmetrix فایل styles-rtl.css رو میگه Inline small CSS کن چیکار باید بکنم؟اگه میشه کمی زودتر جواب بدید.

    1. امیر خلجی مهر

      درود
      درسته استایل های آر تی ال فراخوان میشند پیشنهاد میکنم روش دوم رو هم امتحان کنید احتمالا” تو روش دوم RTL هم لود نشه
      موفق باشید

      1. محمد

        اتفاقاً من از روش دوم استفاده کردم نشد چیکار باید بکنم؟

        1. امیر خلجی مهر

          افزونه ای بود که تمام استایل ها و جی اس ها رو تو یک خط یعنی یک فایل (آدرس) به مرورگر خروجی میداد که راست کار شما بود اما متاسفانه نام افزونه خاطرم نیست

          1. محمد

            پس الآن پیشهاد شما چیست؟

          2. امیر خلجی مهر

            کمی همت به خرج بدید و بگردید دنبال افزونه ای که میتونه مشکلتون رو حل کنه
            تو مخزن افزونه های وردپرس minify رو جستجو کنید

          3. محمد

            چندین افزونه اومد کدومشو بزنم چندتا شو میگم :
            1.Minify
            2.Better WordPress Minify
            3.Simple Minify
            4.WP Minify

          4. امیر خلجی مهر

            ندیده غیب میگینا خب اگه میدونستم که بهتون میگفتم
            باید دونه دونه نصب و تست بگیرید

  5. جلال عباسیان

    من بعضی از فرمهای cf7 رو توی نوشته هام قرار داده ام
    باید چیکار کنم؟ باید نوشته ها رو تبدیل به برگه کنم تا قابل انجام باشه؟

    1. امیر خلجی مهر

      اگر از روش اول استفاده میکنید دستوری رو که باید در فایل Page.php قرار بدید رو در فایل Single.php هم قرار بدید و تست کنید ببینید فایلهای افزونه در سورس فراخوان شده اند یا خیر

  6. IR-WP

    فوق العاده بود , خیلی ممنون بابت وب سایت فوق العادتون

  7. رسول تقی زاده

    دوستان روشی که نویسنده افزونه گفته بهتر کار میکنه!

  8. پرهام

    با سلام خدمت شما و تشکر بابت ارائه این آموزش تو بخش آخر که برای قرار دادن کد تو فانکش قالب هست گفتید که با شماره id مربوط به خودتون رو تغییر بدید. تو فرم تماس وقتی فرمی ساخته میشه به کدش یک id میده من باید اون id رو جای گزین کد پیشفرض شما بکنم؟

    1. امیر خلجی مهر

      درود

      خیر دوست خوبم اینطور نیست، منظور شناسه های برگه ها هستند، یعنی برگه هایی که درون آنها از شورتکد افزونه استفاده شده
      برای ویرایش وارد برگه بشید و زیر کادر عنوان روی دکمه “دریافت پیوندک” کلیک کنید، عددی که در آدرس تماشا میکنید شناسه برگه شما هست
      موفق باشید

  9. مسعود

    سلام و تشکر بابت این مطلب ولی برای سی اس اس فارسی به آدرس:

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

    سپاس

    1. امیر خلجی مهر

      درود
      اگر منظور شما افزونه تماس هست، مسیر زیر را دنبال کنید:
      پیشخوان > افزونه‌ها > افزودن > در فرم جستجو بنویسید: contact form 7

  10. Milad

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

    1. امیر خلجی مهر

      درود
      تا بحال چنین موردی رو ندیده بودم تو این افزونه / یکبار افزونه رو پاک کنید و از نو نصب کنید.

  11. علیرضا

    سلام.
    ۱- تشکر بابت این آموزش
    ۲- نامه‌های ارسالی به‌وسیله‌ی این فرم تماس بصورت راست‌چین نیستند! اگر اونم درست بشه بهتره. حتی اگر میشد فونت نامه‌های ارسالی رو هم تغییر بدیم دیگه عالی بود

    1. امیر خلجی مهر

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

  12. علیرضا

    درضمن برای روش دوم، محل مناسب یعنی کجا؟! من نمی‌دونم!

    1. امیر خلجی مهر

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

  13. عباس

    عالی بود.متشکرم
    با روش دوم سرعت لود سایت کاملا محسوس است

  14. hos7ein

    درود بر شما
    دست شما درد نکنه.مطلب خوبی بود.

دیدگاه خود را بنویسید

تنها دیدگاه‌هایی که به فارسی نوشته می‌شوند پذیرفته خواهند شد!

ماندگار وب - 1395
فروش - خرید هاست وردپرس فارسی