ساخت پنل تنظیمات برای قالب های وردپرس

خیلی از قالب های وردپرس که استفاده میکنیم صفحه ای با عنوان theme setting یا template setting یا نوعی صفحه برای تنظیمات قالب دارند!!! این صفحات چجوری ساخته میشن؟ چجوری میشه صفحه ای ساخت که توی اون صفحه بشه تنظیماتی رو برای قالب های وردپرس در اختیار کاربر گذاشت؟ مثلا کاربر بتونه انتخاب کنه که فونت قالب چی باشه! کد نمونه مثال مربوط به این اموزش رو میتونید از انتهای همین پست دانلود کنید و به انتهای فایل fucntion.php قالب خودتون اظافه کنید و نتیجه رو ببینید.

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

  1. افزودن منوی تنظیمات به وردپرس
  2. افزودن بخش های مختلف یا Section ها به تنظیمات (خود تنظیمات میتونه شامل صفحات و بخش های مختلف باشه)
  3. قراردادن فیلد ها یا input های مورد نظر برای تنظیم و یا دریافت اطلاعات از کاربر که در تنظیمات قالب اعمال میشن
  4. ولیدیت کردن مقادیر (validate) که به معنای این است که باید مقادیری که دریافت میشن رو بررسی کنیم ببینیم درست هستند یا نه!
  5. ذخیره کردن مقادیر دریافت شده
  6. نمایش تنظیمات جاری(فعلی) در دفعات بعدی که کاربر وارد بخش تنظیمات میشه
  7. نمایش پیام هایی در مواقع لزوم (مثلا اگه کاربر تنظیمات رو ذخیره کرد بهش بگیم تنظیمات باموفقیت انجام شد :-D)

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

مراحلی که در بالا ذکر کردم رو به ترتیب انجام میدیم تا یک صفحه ی تنظیمات بسازیم , با ما همراه باشید:

شما برای افزودن منو به صفحه ی مدیریت اول باید یه منوی اصلی یا top level menu اظافه کنید و بعدش میتونید زیر منوهای مختلف نیز اظافه کنید! مثلا منو اظافه کنید تنظیمات قالب و بعدش زیر منو بزارید براش مثلا تنظیمات رنگ , تنظیمات فونت و … اگه خوب متوجه نشدید با اموزش همراه باشید در اخر کار متوجه خواهید شد.

برای افزودن منوی اصلی (top level menu) باید از تابع زیر استفاده کرد:

تنظیمات این تابع به صورت زیر خواهد بود:

متغیر page_title متن عنوان صفحه ی تنظیمات رو مشخص میکنه.

متغیر menu_title عنوان منو رو مشخص میکنه.

متغیر capability فقط منو رو نشون میده اگه کاربر اون رو مشخص کرد باشه.

متغیر menu_slug نام منحصر به فرد منو مشخص میکنه.

متغیر function یک تابع رو موقعی که صفحه ی تنظیمات نمایش داده بشه فراخوانی میکنه.

متغیر icon_url ایکن منوی تنظیمات قالب رو مشخص میکنه.

متغیر position مشخص میکنه منوی تنظیمات در کجای صفحه ی مدیریت وردپرس قرار بگیره.

تنظیماتی که قراره ذخیره بشن درون جدول wp_options در دیتابیس ذخیره میشن! تنظیمات مورد نظرمون رو میتونیم با تابع زیر ذخیره کنیم:

مشخصات مقادیری که توسط این تابع دریافت میشن به صورت زیر خواهد بود:

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

متغیر option_name نام چیزی که قراره ذخیره بشه رو مشخص میکنه

متغیر sanitize_callback تنظیمات رو ولیدیت میکنه! یک تابع خواهد بود که برای ولیدیت کردن مقادیر گروه (همون مجموعه داده هایی که قراره ذخیره بشن) اجرا میشه.

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

تابع بالا مقادیری رو می پذیره که به صورت زیر خواهند بود:

متغیر id یک رشته ی متنی خواهد بود که به عنوان ایدی بخش تنظیمات مورد استفاده قرار میگیره.

متغیر title عنوان بخش رو مشخص میکنه

متغیر callback تابعی رو مشخص میکنه که برای نمایش تنظیمات جاری (فعلی) استفاده میشه

متغیر page صفحه ای که برای نمایش تنظیمات استفاده میشه رو مشخص میکنه! این مقدار باید با مقدار slug منویی که قراره این صفحه رو نشون بده برابر باشه

برای افزودن فیلد یا همون input های مختلف به صفحه ی تنظیمات از تابع زیر باید استفاده کنیم:

این تابع مقادیری رو میپذیره که به صورت زیر خواهند بود:

متغیر id که ایدی فیلد رو مشخص میکنه

متغیر title که عنوان فیلد رو مشخص میکنه

متغیر Callback که متغیر یک تابع رو مشخص میکنه که خیلی مهمه! این تابع مقدار مورد نظر فیلد ما رو مشخص میکنه

متغیر page صفحه ای رو مشخص میکنه که این فیلد قراره توش باشه! این متغیر باید مقدارش با slug که در add_settings_section استفاده کردیم برابر باشه

متغیر args مقدار هایی که به تابع callback ارسال شده اند رو مشخص میکنه!

تا اینجا فقط یکسری تابع که توی وردپرس استفاده میکنیم رو معرفی کردم و مطمئن هستم که دلسرد شدید و هیچی متوجه نشدید 😐 خودمم وقتی این چیزا رو تایپ میکردم با خودم میگفتم این دری وری ها چیه مینویسی!!! ولی باید یکسری توضیحات اولیه میدادم! حالا میریم سراغ اینکه ببینیم چجوری باید از این چیزایی که تا الان گفتم استفاده کنیم.

ساختن صفحه ی تنظیمات قالب به همراه دو Textbox و یک checkbox و یک دکمه اپلود! که وظیفه ی گرفتن ادرس شبکه ی اجتماعی ما به همراه اپلود عکسی برای اواتار ما رو به عهده خواهند داشت:

مرحله اول : افزودن منو به قسمت مدیریت وردپرس

در دستورات بالا ابتدا یک تابع با نام theme_settings_page معرفی کردیم که الان خالیه ولی تا انتهای کار دستورات مورد نظرمون رو برای کنترل صفحه ی تنظیمات قالب توش وارد میکنیم. در قدم بعد تابعی با نام add_theme_menu_item تعریف کردیم که یک منو با نام Theme Panel به صفحه ی مدیریت وردپرس ما اظافه خواهد کرد.

کلمه ی theme-panel که به عنوان ورودی به تابع add_menu_page داده شده نام منحصر به فردی خواهد بود که برای دستیابی و دستکاری منو ازش استفاده خواهیم کرد. همچنین در خط اخر یک اکشن تنظیم میکنیم که در هنگام ایجاد منوی مدیریت وردپرس , تابع ما رو هم اجرا کنه و منوی ما هم ایجاد بشه 😀

مرحله دوم : حالا میریم سراغ ایجاد صفحه ی تنظیمات خودمون , این صفحه شامل دوتا دوتا input از نوع text و یه input از نوع checkbox خواهد بود

در دستورات بالا یک فرم ایجاد کردیم. اما محتوای داخل فرم رو با استفاده از توابع وردپرس ایجاد میکنیم. تابع settings_fields میاد فیلد هایی که ما برای بخش خودمون (که Seciont نامگذاریش کردیم) مشخص میکنیم رو نمایش میده. در ادامه بهتون میگم چجوری فیلد مشخص کنیم.

تابع submit_button دکمه ی ارسال فرم یا همون submit رو برای فرم ما Echo میکنه!

مرحله سوم : در این مرحله سه تا تابع تعریف میکنیم که میاد اون input های ما رو توی صفحه قرار میده! بعد این سه تا تابع رو به بخش یا section خودمون معرفی میکنیم تا هنگامی که تابع settings_fields رو در مرحله قبلی فراخوانی میکنیم اون input ها ایجاد بشن!

تابع add_settings_section توضیحات و عنوان صفحه ی تنظیمات ما رو نشون میده.

تایع add_settings_field برای نمایش دادن کدهای html فرم تنظیمات ما استفاده میشه که قراره سه تا input باشن

تابع register_setting باعث میشه که وردپرس وقتی که کاربر روی دکمه ی ذخیره سازی میزنه مقدار تنظیمات رو ذخیره کنه

مرحله چهارم: توابع قبلی رو میایم به صورت زیر کاملتر میکنیم (یه چک باکس اظافه میکنیم به قسمت تنظیمات)

اگه دقت کرده باشید ما با استفاده از دستور add_settings_feild یک فیلد اظافه میکنیم , و یک تابع به این دستور میدیم که این تابع فیلد یا همون input ما رو تولید میکنه مثلا تابع display_twitter_element که قبلا تعریفش کردیم!

مرحله ی پنجم : در این مرحله یک دکمه ی اپلود اظافه میکنیم که کاربر بتونه از طریق تنظیمات قالب عکس اپلود کنه!

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

خب کار تموم شد 😀 حالا در وردپرس خودتون چیزی به شکل زیر خواهید داشت:

create_wordpress_theme_setting_pageهمانطور که در عکس بالا میبینید به قسمت ادمین یه منو با نام theme panel اظافه شده و صفحه ای تنظیماتی که ساختیم دارای ۲ تا textbox برای گرفتن ایدی فیسبوک و تویتر ما و یک چک باکس برای اینکه بگیم قالب ما رسپانسیو باشه یا نه به همراه یه اپلودر عکس برای اینکه بتونیم عکس خودمون رو اپلود کنیم قرار دادیم. حالا چجوری میشه از اینا استفاده کرد؟ کافیه که کد زیر رو درون function.php قالب خودتون قرار بدید:

در کد بالا ما با توجه به نامی که برای input های خودمون توی Section مشخص کردیم میایم و مقدارشون رو از دیتابیس میخونیم و توی متغیر های خودمون قرار میدیم!

در اینجا من سه تا از مقادیر رو گرفتم که به ترتیب مقدار checkbox رو درون متغیر layout و مقدار input مربوط به ایدی فیسبوک رو درون متغیر facebook_url و تویتر رو نیز درون متغیر twitter_url قرار میدم. برای گرفتن ادرس عکس چی؟ اینو به خودتون میسپرم 😀 به همین روش کافیه که اون اسم داخل تابع get_options رو به نام اپلودر که براش مشخص کردیم تغییر بدید تا ادرس عکس اپلود شده رو به شما بده 😀 به همین راحتی!

بعد از اینکه مقادیر رو خوندید و درون متغیر قرار دادید حالا میتونید از این متغیر ها در سراسر قالب خودتون استفاده کنید مثلا بگید اگه متغیر checkbox مقدارش برابر با ۱ بود قالب سایت باید رسپانسیو باشه!

من این اموزش رو از روی چندین سایت ترجمه کردم که به صورت زیر براتون میزارم :(دوستانی که علاقمند هستند میتونن مطالعه کنند)

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

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

همچنین یک سری تجربیات شخصی خودم رو توی ترجمه اظافه کردم!!!! امیدوارم بدردتون بخوره. کد این اموزش رو میتونید از انتهای همین پست دانلود کنید و به فایل function.php قالب سایت خودتون اظافه کنید.

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

نمونه صفحه تنظیمات قالب وردپرسی
نمونه صفحه تنظیمات قالب وردپرسی
simple_wordpress_theme_setting_page.zip
Version: 1.0
1.0 KiB
84 Downloads
اطلاعات بیشتر
به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK
  1. امیر.م

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

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

  2. شیدا.ر

    سلام و خسته نباشید خدمت مدیر سایت
    ممنون بابت کیفیت آموزشهاتون
    لطفا اگه امکانش هست یک آموزش درباره پنل مدیریت سایت (cms) با php بزارید و از بیس طراحی آم
    وزش بدید

    • سلام. کیفیت اموزش ها بالاتر نیز خواهد رفت. اموزش های اینده به صورت دوره ای قرار داده خواهد شد! مثلا دوره ی اموزش SQL از پایه تا حرفه ای!
      اموزش ساخت سیستم مدیریت سایت (CMS) نیز به زودی قرار داده میشه. چنین اموزشی نیازمند گفتن پیش نیازها و اطلاعاتی است که ابتدا اونا رو دارم میگم , مثلا همین اموزش های مربوط به SQL پیش نیاز هستن! به زودی اموزش ساخت یک سیستم CMS رو برای شما دوست عزیز قرار میدیم. ممنون از پیشنهادهای خوب و سازنده ی شما. بازم اگه اموزشی مد نظرتون بود حتما ذکر کنید تا قرار داده بشه. موفق باشید. عیدتون مبارک.

  3. AliReza

    با سلام
    یه سوال داشتم
    مقدار متغییر ها داخل صفحه ایندکس قابل دریافته ولی داخل هدر نه . چیکار کنیم که تو هدر هم بتونیم متغییر هارو بگیریم ( مثلا خواستیم عکس لوگو قالب تغییر باشه چه کنیم ؟ )

  4. مهدی

    خیلی عالی بود از بقیه سایت ها بهتر بود از این آموزش ها بیشتر بزارید ..

می‌خواهید دیدگاهتان را بیان کنید؟