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

 

این مقاله در تاریخ 7 بهمن ماه 96 بروزرسانی شده است

 

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

 

مرحله اول: ساخت فایل contact-page.php

 

در ابتدا می بایست یک فایل php برای صفحه ارتباط با ما بسازیم. نام این صفحه می تواند بر اساس خواسته شما هر چیزی باشد، به پوسته قالب رفته و فایل contact-page.php را می سازیم . حال کد زیر را در فایل قرار دهید:

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

مرحله دوم: ساخت فرم

در این مرحله باید فرم مورد نظر را طراحی کنید. در اینجا فرمی که برای شما قرار داده ام نمونه ساده ای است که باید داخل فایل contact-page.php و داخل div که مربوط به محتوا هست قرار می دهید.

نمونه:

مرحله دوم: درج کدهای پردازش فرم

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

برای این کار کدهای زیر را به فایل functions.php اضافه می کنیم :

تابع اول یعنی wpschool_contact_scripts جهت ثبت اسکریپت در وردپرس و انتقال پارامترهای لازم به اسکریپت تعریف شده است.

توجه: برای درک بهتر تابع اول می توانید مقاله wp_enqueue در وردپرس را مطالعه کنید.

تابع دوم یعنی wpschool_ajax_contact برای اعتبارسنجی اطلاعات ارسالی از طریق Ajax و سپس ارسال ایمیل از طریق فرم ارتباط با ما ایجاد شده است.

توجه: بجای your-domain نام دامین وب سایت خود را در کد وارد کنید.

مرحله سوم: ساخت فایل اسکریپت

برای برقراری ارتباط از طریق Ajax با سرور ، فایل اسکریپت ajax-contact-script.js در پوشه قالب خود (twentyseventeen)  ایجاد کرده و کدهای زیر را به آن اضافه می کنیم:

مرحله چهارم: افزودن استایل های CSS

برای زیباتر جلوه دادن فرم ارتباط با ما استایل های CSS زیر را به فایل style.css اضافه می کنیم:

مرحله پنجم: ایجاد برگه ارتباط با ما

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

نام برگه را contact-us گذاشته از قسمت قالب “ارتباط با ما” را انتخاب کرده و ذخیره می کنیم:

آموزش ساخت صفحه ارتباط با ما بدون افزونه

حالا وقتی برگه contact-us را باز می کنید با تصویر زیر روبرو خواهید شد:

آموزش ساخت صفحه ارتباط با ما بدون افزونه

توجه: به دلیل استفاده اکثر وب سایت ها از هاست های اشتراکی ایمیل های ارسالی به پوشه اسپم (Spam) وارد می شوند، هنگام تست حتما پوشه اسپم را چک کنید.

توجه: برای بالا بردن امنیت این فرم می توانید مقاله ” افزودن Google reCAPTCHA به وردپرس ” را مطالعه کنید.

آموزش ساخت صفحه ارتباط با ما بدون افزونه نیز به پایان رسید. امیدوارم این آموزش وردپرس مورد پسندتون قرار گرفته باشه.

موفق باشید.

57 دیدگاه برای “آموزش ساخت صفحه ارتباط با ما بدون افزونه + فیلم آموزشی

  • parviz
    - ۵ فروردین , ۱۳۹۳

    هر چهار کد رو باید توی یک صفحه قرار بدم یا توی صفحات جداگانه؟

    • الناز
      - ۶ فروردین , ۱۳۹۳

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

  • آیلین
    - ۳۰ فروردین , ۱۳۹۳

    خوب چگونه از صفحه اصلی لینک به این صفحه بدم؟

    • الناز
      - ۳۱ فروردین , ۱۳۹۳

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

      • آیلین
        - ۳۱ فروردین , ۱۳۹۳

        خوب توی توضیحات این اسم انتخاب کردید (contact-page.php)
        ولی فکر کنم درستش اینه: (page-contact.php)

        • الناز
          - ۱ اردیبهشت , ۱۳۹۳

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

  • علی
    - ۵ خرداد , ۱۳۹۳

    سلام
    من این کدهارو توی یه صفحه گذاشتم و یه برگه ساختمو تمام کارارو انجام دادم
    فقط وقتی نظر رو میفرستم تو قسمت دیدگاه ها نیست
    نمیارتش
    خودتون ببینید
    http://w-p.xzn.ir/tutorial/?page_id=60
    میفرستم نظر رو ولی نمیاد
    باید کجا برم ببینم

    • الناز بیک زاده
      - ۵ خرداد , ۱۳۹۳

      سلام دوست من. لینکی که فرستادید چیزیو باز نمیکنه و اینکه این آموزش برای ساخت فرم تماس با ما هستش نه نظر

  • HeSaM021
    - ۵ تیر , ۱۳۹۳

    سلام

    من این فایل رو چجوری بساز

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

    • الناز بیک زاده
      - ۵ تیر , ۱۳۹۳

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

  • ایـــــران وردپــــــــرس
    - ۱۸ تیر , ۱۳۹۳

    عالی بود خیلی ممنون بابت وقتی که قرار می دهید

  • iman
    - ۷ آذر , ۱۳۹۳

    سلام و درود
    من قسمت فرم سایت رو گذاشتم ولی کار نمیکنه
    مشکل باید از اکشن متد باشه
    امکان راهنمایی هست ؟

    • الناز بیک زاده
      - ۱۲ آذر , ۱۳۹۳

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

  • وبر
    - ۲۹ آذر , ۱۳۹۳

    همه ی ابزارکام بهم ریخت!! چرا؟؟؟

    • الناز بیک زاده
      - ۱ دی , ۱۳۹۳

      سلام دوست عزیز. ابزارک ها کجا بهم ریخت؟

      • وبر
        - ۱ دی , ۱۳۹۳

        مشکل ابزارکام رفع شد ، اشتباه از خودم بوده.

        فقط الان وقتی میزنم ارسال ایمیل به یکی از صفحه های فرعی(یکی از نوشته هایی که عضو یکی از دسته هاس) هدایت میشه کاربر. مشکل کجاست به نظر شما؟

        راستی لطفا این تشخیص انسانتونو چپ چین کنید !! 😀

        • الناز بیک زاده
          - ۲۲ دی , ۱۳۹۳

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

  • وبر
    - ۳ دی , ۱۳۹۳

    🙁 کلا کار نمیکنه!! از وقتی درگاه پی لاین گذاشتم باهم قاطی شدن!!

    • الناز بیک زاده
      - ۲۲ دی , ۱۳۹۳

      این آموزش تست شده هستش و مشکلی نداره

  • محمد حسین قوامی
    - ۱۷ دی , ۱۳۹۳

    تشکر از شما

  • هادی
    - ۱۱ بهمن , ۱۳۹۳

    سلام
    بابت آموزشت ممنونم
    اما نیاز به راهنمایی دارم:
    این قسمت رو متوجه نشدم “در این مرحله باید فرم مورد نظر را طراحی کنید. در اینجا فرمی که برای شما قرار داده ام نمونه ساده ای است که باید داخل فایل contact-page.php و داخل div که مربوط به محتوا هست قرار می دهید.”

    یعنی قبل و بعد از اون کد یدونه div قرار بدم ؟

    • الناز بیک زاده
      - ۱۱ بهمن , ۱۳۹۳

      سلام دوست عزیز. معمولا محتوایات صفحات داخل یک div مشخصی قرار می گیره. شما میتونید با دیدن کدهای page.php اون div رو پیدا کنید

  • armin
    - ۲۴ بهمن , ۱۳۹۳

    عرض سلام
    لطفا بفرمائید چطور می تونم کد رو تغییر بدم که پیام به ایمیل دیگری فرستاده شود؟
    می خواهم با ایمیلی که در پنل ادمین معرفی شده تفاوت کنه.
    با تشکر

    • الناز بیک زاده
      - ۲۵ بهمن , ۱۳۹۳

      آرمین جان به جای get_option(‘admin_email’) ایمیل مورد نظرتو بزار

      • armin
        - ۲۷ بهمن , ۱۳۹۳

        ممنون
        دقیقا به جای همون عبارت قرار بدم؟
        با این خطا مواجه شدم
        Parse error: syntax error, unexpected ‘@’ in /home/public_html/wp-content/themes/contact.php on line 39

        • الناز بیک زاده
          - ۲۹ بهمن , ۱۳۹۳

          آرمین جان اینطوری قرار دادی؟
          $emailTo = ‘wpschool1@gmail.com’;

  • armin
    - ۲ اسفند , ۱۳۹۳

    بله
    متاسفانه ایمیلی دریافت نمی شه…

  • kamal
    - ۲۲ اسفند , ۱۳۹۳

    سلام مرسی از اموزش
    امکانش هست که بهش اندازه بدیم ؟
    یا همون استایل ؟

    • الناز بیک زاده
      - ۲۶ اسفند , ۱۳۹۳

      سلام. بله دوست عزیز امکانش هست

  • kamal
    - ۲۶ اسفند , ۱۳۹۳

    الناز میشه لطفا کنی کدشو بذاری ممنون میشم ، البته در صورت امکان .مرسی

    • الناز بیک زاده
      - ۲۶ اسفند , ۱۳۹۳

      سلام کمال جان. کد کجارو میگی؟

  • سمیرا
    - ۲۸ فروردین , ۱۳۹۴

    سلام
    من این صفحه php رو که ساختم تو کدوم مسیر باید قرارش بدم. تو مسیر www//wordpress یک صفحه با همین محتوی دارم ولی چطوری از این صفحه استفاده کنم؟

    • الناز بیک زاده
      - ۲۹ فروردین , ۱۳۹۴

      سلام سمیرا جان. باید داخل فولدر پوسته قرار بدید

  • farhad
    - ۲۳ اردیبهشت , ۱۳۹۴

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

    • الناز
      - ۲۸ اردیبهشت , ۱۳۹۴

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

  • sahar
    - ۳۰ اردیبهشت , ۱۳۹۴

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

    • الناز
      - ۱ خرداد , ۱۳۹۴

      سلام سحر جان. این اقدامات همگی داخل هاست هستند

  • سارا
    - ۱۲ مرداد , ۱۳۹۴

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

    • سارا
      - ۱۳ مرداد , ۱۳۹۴

      سلام من موفق شدم انجام بدم ولی الان یک سوال دیگه داشتم، من چه طوری میتونم که فرمتش رو تغییر بدم و براش css تعریف کنم ؟ مرسی

      • الناز
        - ۲۱ مرداد , ۱۳۹۴

        سلام دوست عزیز. کافیه کلاس تعریف کنید و css بهش بدید

    • الناز
      - ۱۹ مرداد , ۱۳۹۴

      سلام دوست عزیز. البته. با ایمیل من در تماس باشید
      wpschool1@gmail.com

  • A!D!N
    - ۲۱ شهریور , ۱۳۹۴

    سلام الناز خانوم خسته نباشید
    الان میشه کامل بهم توضیح بدید ک چجوری این صفحه رو درست کنم؟؟؟؟
    این contact-page.php رو چیکارکنم؟کجا بذارمش؟

    • الناز
      - ۲۲ شهریور , ۱۳۹۴

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

  • A!D!N
    - ۲۴ شهریور , ۱۳۹۴

    مرسی

  • vafa
    - ۲۷ آبان , ۱۳۹۴

    سلام من هر چی صفحه درست میکنم ایرور میده باز نمیشه چیکار باید بکنم

    • الناز
      - ۱۳ آذر , ۱۳۹۴

      سلام. چه اروری؟

  • sd
    - ۱۴ دی , ۱۳۹۴

    سلام خسته نباشید.ببخشید صفحه درباره ما هم همین جوری ساخته میشه؟

    • الناز
      - ۳ اسفند , ۱۳۹۴

      سلام. خیر چون در صفحه درباره ما قاعدتا فرم تماس نداریم. برای ساخت این صفحه می تونید از برگه ها استفاده کنید

  • عطربازان
    - ۲۰ اردیبهشت , ۱۳۹۵

    ممنون از توضیحاتتون

  • محسن
    - ۷ شهریور , ۱۳۹۶

    سلام مرسی خیلی خوبه
    فقط یک سوال اگه بخوایم بهش گزینه اضافه کنیم چجوریه ؟
    مثلا موضوع پیام و یا نام وبسایت ؟

  • هژیر
    - ۳ مهر , ۱۳۹۶

    با سلام بنده تمامی کارها رو انجام دادم ولی ظاهرا ایمیلی دریافت نمیشه! هیچ اروری هم داده نمیشه و حتی مینویسه که پیام شما ارسال شد.

  • Nasim sky
    - ۱۱ دی , ۱۳۹۶

    سلام بنده هم تمامی کارها رو انجام دادم ولی هیچ ایمیلی دریافت نمیشه و حتی مینویسه که پیام شما ارسال شد

    • الناز
      - ۱۱ دی , ۱۳۹۶

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

  • MatinRz
    - ۱ اردیبهشت , ۱۳۹۷

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

    • سیروس
      - ۲ اردیبهشت , ۱۳۹۷

      سلام و خسته نباشید،
      ابتدا چک کنید که تو کدهای جاوا اسکریپت خطا نداشته باشید ، برای این کار اگر از کروم استفاده می کنید F12 بزنید ببنید توی کنسول خطا داده یا نه؟
      دلیل عمل نکردن کدها اینه که کدهای جاوااسکریپت شما به دکمه Submit فرمتون متصل نشده و باید دلیل اون رو پیدا کنید.
      نکته: اگر قالب مورد استفاده رو خودتون نوشتید چک کنید که در هدر و فوتر توابع wp_head , wp_footer موجود باشه.
      جهت راهنمایی بیشتر به آی دی تلگرام ما پیام بدید تا راهنماییتون کنیم.
      https://t.me/wpschool_support
      موفق باشید.

  • حامد
    - ۲۵ خرداد , ۱۳۹۷

    کدا معلوم نیست

    • سیروس
      - ۲۸ خرداد , ۱۳۹۷

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Captcha loading...