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

خب حالا شروع می کنیم:

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

در کد بالا، می توانید مسیر فایل ها را تغییر دهید. حال نیاز به معرفی 2 تابع دیگر در این فایل است. این 2 تابع عبارتند از:

تابع اول آدرس url سایت را به لوگو برمیگرداند، تابع دوم عنوان سایت را به لوگو بر می گرداند.

قدم بعدی در انجام این کار، استایل دهی به صفحه ورود است. پس برای این کار کافیست کد استایلی که در زیر معرفی کرده ام را در فایل login.css قرار دهید:

 

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

سفارشی سازی صفحه ورود

حال نوبت به این رسیده است که جی کوئری های صفحه را نیز قرار دهید. استفاده از این ویژگی دلخواهی است و تنها به صفحه شما افکت خواهد داد. اما نکته ای که وجود دارد این است که وجود این جی کوئری ها در قسمت “مرا به خاطر بسپار” می تواند مفید باشد. کد زیر را داخل فایل login.js بگذارید:

و همچنین فایل jquery.min.js را نیز از سایت جی کوئری دانلود کرده و داخل پوشه js قرار دهید.

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

دانلود فایل ها و تصاویر استفاده شده

آموزش امروز هم به اتمام رسید. موفق باشید 😀

13 دیدگاه برای “سفارشی سازی صفحه ورود وردپرس

  • kami
    - ۲۸ بهمن , ۱۳۹۲

    سلام من از ادمین سایت میخوام پست بذارم وقتی عکس یک پست رو آپلود میکنم ۴ تا عکس از همون عکس با سایز های مختلف تو هاست ذخیره میشه که فضای الکی اشغال میکنه و هر دفعه مجبورم برم اون ۴ تا عکس اضافه رو به صورت دستی پاک کنم . راهی برای رفع این مشکل هست؟
    ممنون میشم جواب بدید
    با تشکر

  • مرتضی
    - ۲۹ بهمن , ۱۳۹۲

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

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

    سلام. خواستم ب÷رسم میشه بهش فیلد هم اضافه کرد؟

  • MMD
    - ۲۶ شهریور , ۱۳۹۳

    سلام
    من میخوام برای صفحه لاگین سایتم استایل بدم، مثل آموزش شما میرم جلو ولی وقتی صفحه رو باز میکنم چند تا ارور میده!
    اصلا به فایل فانکشن که دست میزنم کل سایت به هم میریزه!
    میتونین کمک کنین؟

    ممنون میشم
    با تشکر از سایت خوبتون

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

      سلام دوست عزیز. این آموزش تست شده هستش و احتمالا شما یک جایی از کار را اشتباهی انجام میدید. من چه کمکی میتونم بهتون کنم؟

  • محووظ
    - ۶ آبان , ۱۳۹۴

    سلام
    لطفا بفرما ئید
    بعد از باز کردن functions.php
    در کدام قسمتش کد را قرار دهیم تا قالب بهم نریزه تشگر

  • روح اله
    - ۲۳ بهمن , ۱۳۹۴

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

  • مهیار انصاری
    - ۱۸ فروردین , ۱۳۹۵

    درود خدمت شما
    ممنون از مطلب خوبتون…
    دوست عزیز من کلی تو نت گشتم اکثرا با افزونه تغییر میدن صفحه ورود رو من نمیخوام با افزونه انجام بدم میخوام خودم بنویسم اموزش شما هم که من جایی ندیدم بشه کد HTML نوشت همش css استفاده شده…
    چجوری میتونم ادرس صفحه ورودو تغییر بدم و خودم بنویسمش؟(بدون افزونه)

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

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

      • مهیار انصاری
        - ۲۳ فروردین , ۱۳۹۵

        ممنون از شما
        اگه با ایمیل منو در جریان مطلبتون(در همین خصوص) بذارید عالی میشه

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