آموزش طراحی صفحه ورود و عضویت وردپرس بدون افزونه

بازدید : 290
نویسنده : خانم نوروزی
زمان مطالعه : 5 دقیقه
انتشار : ۵ خرداد , ۱۳۹۶
بروزرسانی : ۹ اسفند , ۱۳۹۷
آموزش طراحی صفحه ورود و عضویت وردپرس بدون افزونه

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

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

قدم اول ساخت فرم خالی قبل از اینکه بخواهیم وردپرس کار کنیم باید با html و css کار کنیم ، یا با استفاده از دانش و تجربه خودتان و یا با استفاده از دانش و تجربه دیگران که به رایگان درون وب سایت های مختلف به اشتراک گذاشته اند ، منظور همان قالب های آماده صفحه ورود و یا صفحه ثبت نام که تعداد کثیری در فضای مجازی موجود است را انتخاب و مراحل بعدی را پیش می گیریم .

به طور مثال ما برای شما این صفحه و استایل را در نظر گرفته ایم

مرحله دوم افزودن به قالب وردپرس برای اینکار در پوشه پوسته خود یک پوشه دیگر با نام tem یا login یا هر پوشه دیگری ایجاد کنید و درون آن یک فایل با نام login.php بسازید البته این نام میتواند به دلخواه شما تغییر کند . سپس کد زیر را در ابتدای این فایل قرار دهید .

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

مرحله سوم اضافه کردن کد لاگین و استایل به قالب صفحه ایست که ایجاد کرده ایم . برای این کار کد دانلود شده را در ادامه کد بالا قرار می دهیم .

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

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

خب کلمات خود گویای این هستند که هر فیلد کدام گزینه است به طور مثال نام کاربری که همان Username است در این جا باید شما کمی با زبان html و css آشنایی داشته باشید . به صورت مختصر اشاره ای خواهیم کرد ما برای هر قسمت یک div داریم که به کمک آن کلاس مد نظر را متصل می کنیم یعنی با یک div   میتوانیم شناسه ای تعریف کنیم که در استایل که با زبان css تعریف شده است متصل شود به این صورت که به طور مثال

<div class=”box”>  box cun </div >

در اینجا مشاهده میکنیم که کلمه box داخل “” قرار گرفته آی دی و یا شناسه استایل ما در css است و box cun محتواییست که قرار است این شکل را به خود بگیرد و طبق قانون html  هر کدی ک شروع می شود پایانی دارد و آن پایان درون </> قرار می گیرد . تمام .

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

تا اینجا ما فرم را اضافه کردیم تنها کافیست بقیه قسمت ها را به این کد متصل کنیم و کار تمام است . به این ترتیب که برای فیلد ها باید یک name تعریف کنیم که به ترتیب اشاره می شود :

  • برای نام کاربری name=”log”
  • برای رمز عبور name=”pwd”
  • برای ایمیل name=”user_email”
  • برای دکمه ورود name=”wp-submit”

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

  • برای ورود <?php echo esc_url( site_url( ‘wp-login.php’, ‘login_post’ ) ); ?>
  • برای ثبت نام <?php echo esc_url( site_url( ‘wp-login.php?action=register’, ‘login_post’ ) ); ?>
  • برای بازیابی رمز عبور <?php echo esc_url( network_site_url( ‘wp-login.php?action=lostpassword’, ‘login_post’ ) ); ?>

توجه داشته باشید که این کد ها را به صورت  action=”cod” به فرم اضافه کنید.

نمونه تمام شده :

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


8
دیدگاه بگذارید

avatar
4 Comment threads
4 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
مرتضی براتیRDPمهدیمهدیمحمد Recent comment authors
  اشتراک در  
جدیدترین قدیمی ترین رای بیشتر
اطلاع از
محمد
مهمان
محمد

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

مرتضی براتی
مدیر
مرتضی براتی

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

مهدی
مهمان
مهدی

با سلام لطفا بگویید که کدهایی که با action سروکار دارند ؟چگونه هستند؟ و باید در کجا قرار بگیرند. لطفا قسمت ۳ و ۲ را بیشتر توضیح دهید. و در صورت امکان کد تکمیل شده را بگذارید.

مرتضی براتی
مدیر
مرتضی براتی

با سلام از آنجایی که اطلاعات یک فرم html پس از تکمیل شدن باید به یک فایل در سرور ارسال شود، خاصیت action برای تعیین آدرس فایل مقصد مورد استفاده قرار می گیرد، به طور مثال اطلاعات فرم زیر (در صورت ارسال) به یک فایل با نام get.php فرستاده خواهد شد. action=”user/comment/get.php” مقادیر خاصیت action می تواند به صورت آدرس کامل (با //:http) یا به صورت آدرس دایرکتوری (مانند مثال بالا) در نظر گرفته شود. خاصیت method در form در کنار action که مقصد اطلاعات یک فرم را معیین می کند، خاصیت method شیوه ارسال را مشخص می کند، این… مطالبه بیشتر

مهدی
مهمان
مهدی

مرسی ازاموزش ..
چناب من تازه دارم php یاد میگیرم..شما حرفی ازاتصال به پایگاه داده و query نزدید…
یا دستور set cookie هم نگفتید…
میشه راهنمایی کنید

مرتضی براتی
مدیر
مرتضی براتی

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

RDP
مهمان
RDP

سلام
لطفا خط سوم کلمه “مصلما” رو اصلاح کنید 🙂

مرتضی براتی
مدیر
مرتضی براتی

سلام کاربر گرامی با عرض معذرت از شما و دیگر عزیزان همراه از این مورد و تشکر ویژه از شما اصلاح شد.

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

مطالب مرتبط

نحوه اضافه کردن svg در وردپرس با دو روش ساده

نحوه اضافه کردن svg در وردپرس با دو روش ساده

با سلام خدمت شما دوستان عزیز امروز میخواهیم نحوه اضافه کردن تصاویر svg به وردپرس

مطالعه بیشتر
تیتر ها در محتوای سایت

تیتر ها در محتوای سایت

همانطور که در مطالب قبلی بر روی محتوا و تاثیر آن بر سئو تاکید بسیاری

مطالعه بیشتر
انتخاب آدرس نوشته مناسب برای سئو بهتر در وردپرس

انتخاب آدرس نوشته مناسب برای سئو بهتر در وردپرس

همه ما کلماتی را بعد از url مشاهده کرده ایم که آن را با عنوان

مطالعه بیشتر
استفاده از child page در وردپرس

استفاده از child page در وردپرس

در مقاله های قبلی درباره برخی از عوامل جذب کاربر به سوی سایت صحبت کردیم

مطالعه بیشتر

پر بازدید ترین مطالب وردپرس

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

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

شاید شما هم از دسته افرادی هستید که پروزه های سفارشی با وردپرس { وردپرس

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

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

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

مطالعه بیشتر
معرفی قالب های برتر سال ۲۰۱۸

معرفی قالب های برتر سال ۲۰۱۸

معرفی قالب های برتر سال ۲۰۱۸ ، پوسته های وردپرسی ، بهترین قالب های رایگان

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

آموزش راه اندازی فروشگاه اینترنتی محصولات دانلودی با EDD در وردپرس

آموزش راه اندازی فروشگاه اینترنتی با edd در وردپرس ، ایزی دیجیتال دانلود ، فزونه

مطالعه بیشتر
آموزش سرچ کنسول | بخش دوم | Search Console

آموزش سرچ کنسول | بخش دوم | Search Console

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

مطالعه بیشتر
قالب وردپرس چند منظوره رایگان و فارسی Hostel با فونت زیبا

قالب وردپرس چند منظوره رایگان و فارسی Hostel با فونت زیبا

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

مطالعه بیشتر
تابع the_title() عنوان پست در حال نمایش در وردپرس | the_title() | Function

تابع the_title() عنوان پست در حال نمایش در وردپرس | the_title() | Function

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

مطالعه بیشتر
صفحه فرود یا Landing Page چیست؟

صفحه فرود یا Landing Page چیست؟

صفحه فرود یا Landing Page چیست؟ ، اهداف لندینگ پیج ، نکات مهم در بهینه

مطالعه بیشتر

ایمیلت رو وارد کن ، قالب و افزونه جایزه بگیر

Scroll Up
کانال آپارات ما اینستاگرام مبنای وردپرس