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

4.8/5 - (4 امتیاز)

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

در سیستم مدیریت محتوای وردپرس نیز روش‌های گوناگونی برای ایجاد برگه تماس وجود دارد که یکی از معمول‌ترینِ این روش‌ها استفاده از افزونه‌های تماس وردپرس می‌باشد که بی‌شک و بدون تردید قدرتمندترین و کاربر پسندترین این افزونه‌ها، افزونه‌ی 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 تنها در این برگه‌ها فراخوان خواهد شد که شما برای عملکرد صحیح کد می‌بایست آیدی برگه‌های خود را که از افزونه تماس در آنها استفاده شده است جایگزین آیدی پیش‌فرض کد کنید که پس از ذخیره‌ی تغییرات متوجه خواهید شد فایل‌های خروجی این افزونه تنها در برگه‌هایی که شما آیدی آنها را مشخص کرده اید فراخوان خواهند شد.

4.8/5 - (4 امتیاز)

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

  1. رضا کیانوش

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

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

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

  2. ساسان

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

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

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

      سلام

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

  3. عزیز

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

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

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

      موفق باشید

  4. محمد

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

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

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

        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. پرهام

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

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

      درود

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

  7. مسعود

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

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

    سپاس

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

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

  8. Milad

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

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

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

  9. علیرضا

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

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

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

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

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

  10. فرشته رجبی

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

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

      با درود
      چیزی که پیش اومده پیوسته با بروزرسانی تازه‌ی این افزونه هست.
      ساختار mo را از بخش پایانی این برگه دریافت کنید. (Export)
      https://translate.wordpress.org/projects/wp-plugins/contact-form-7/stable/fa/default
      سپس نام آن را به contact-form-7-fa_IR.mo بازنویسی کنید و پرونده را در پوشه‌‌ی زبان‌های افزونه بارگذاری کنید.

      شاد و پیروز باشید.

  11. فرشته رجبی

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

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

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

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

      درود
      فایل‌های js و css این افزونه پس از ویرایش، تنها باید در برگه‌های سایت بارگذاری شوند، یعنی در نوشته‌ها باگذاری نخواهند شد.

  12. هیوا رستمی

    سلام
    واقعا این در لود شدن سایت یه معزل شده بود برام. اما نمیدونستم مربوط به چی هست. ازتون خیلی خیلی ممنونم.
    از پشتیبانی تلفنی تون هم خیلی سپاس گذارم.
    لینک ساتمون رو هم میزارم تاثیرش رو ببینید
    khanezabanmelal.ir

  13. omid

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

  14. زهرا

    سلام وقت بخیر من میخوام کاربر بعد از تکمیل فرم و ارسال به برگه ایی که من میخوام هدایت بشه آیا فرم تماس 7 چنین امکانی داره ؟

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

      با درود.
      این افزونه زمانی که فرمی را ارسال می‌کند، برگه از نو بارگذاری نمی‌شود و بصورت ajax کار می‌کند. اما در نظر داشته باشید که این افزونه ممکن راه‌کاری برای مورد درخواستی شما داشته باشد که شوربختانه بنده از آن بی‌اطلاع هستم.

  15. امین

    سلام
    من یه مشکل دارم توی فرم تماس (استخدام)
    پیام ارسال میشه ولی فایل اتچ شده به ایمیل ارسال نمیشه.با اینکه پیام ارسال با موفقیت هم نمایش داده میشه

    نام شما (الزامی)
    [text* your-name]

    ایمیل شما (الزامی)
    [email* your-email]

    (الزامی)موضوع عنوان شغل
    [text your-subject]

    پیام
    [textarea your-message]

    pdfفایل رزومه
    [file your-file limit:500kb filetypes:pdf|jpg]

    [submit “ارسال “]

  16. مهدی

    سلام دوستان
    من یک مشکل دارم که هرچی سرچ کردم نتونستم حلش کنم
    در فرم تماس فیلد شماره تلفن گذاشتم و ظاهرا بدون مشکل توسط مشتری پر میشه
    اما در ایملی که ارسال میشه شماره تماسی دیده نمیشه

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

      درود.

      قطعا مغایرتی وجود دارد. ممکن است فیلد تعریف شده شناسه یکسانی با خروجی‌ای که ایمیل می‌شود نداشته باشد.

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

ماندگار وب - 1400