آموزش ویدیویی تبدیل قالب HTML به قالب وردپرس

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

قطعاً وردپرس محبوب ترین سیستم مدیریت محتوای حال حاضر دنیاست، اما این همه محبوبیت از کجا می آید؟  چگونه می شود که بیش از 34 درصد از کل وب سایت های دنیا از سیستم مدیریت محتوای وردپرس قدرت می گیرند؟ بدون شک یکی از دلایل اصلی این امر، قابلیت توسعه پذیری این سیستم مدیریت محتواست. تقریباً کاری نیست که با وردپرس نشود انجام داد و لباسی نیست که نشود به وردپرس پوشاند!

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

اما چه مباحثی در این دوره بیان خواهد شد؟

درس یکم: مقدمه

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

درس دوم: پوشه بندی و شروع ساخت پوسته

در دومین درس از این مجموعه آموزشی، با محل قرارگیری پوسته ها در سیستم مدیریت محتوای وردپرس آشنا می شویم و پوشه بندی مناسبی جهت شروع کار تبدیل قالب HTML به پوسته وردپرس را ایجاد می کنیم و اولین گام در ساخت پوسته برای سیستم مدیریت محتوای وردپرس که شامل ساخت فایلهای style.css و index.php هست را بر می داریم.

درس سوم: ایجاد فایل functions.php و اضافه کردن ویژگی های مورد نیاز

در این درس، دلیل وجود فایلی با نام functions.php را در پوسته بررسی خواهیم کرد و توسط تابع add_theme_support شروع به اضافه کردن ویژگی های مورد نیاز خود به پوسته می کنیم. سپس به کمک تابع register_nav_menus دو جایگاه برای پوسته ایجاد می کنیم و دست آخر هم توسط اکشن هوک after_setup_theme تمامی موارد گفته شده را به برنامه هوک می کنیم.

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

درس چهارم: افزودن فایلهای CSS و جاوا اسکریپت به پوسته – بخش اول

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

در درس چهارم و پنجم، می آموزیم که نحوه صحیح اضافه کردن فایل های CSS و JS به پوسته چگونه است و یاد می گیریم که چگونه توسط توابع wp_enqueue_style، wp_register_script و wp_enqueue_script فایلهای CSS و JS خود را در زمان مناسب و با شرایط مدنظر، به پوسته اضافه کنیم. در این دو درس، با نحوه صحیح نسخه گذاری روی فایل های CSS و جاوا اسکریپ آشنا می شویم و می آموزیم که چگونه پس از ایجاد تغییر در فایلهای CSS و جاوا اسکریپت، مرورگر را مجبور به بارگذاری فایلهای اصلاح شده کنیم.

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

درس ششم: مرتب سازی و آماده سازی فایل index.php جهت شروع کار با Loop وردپرس

در درس ششم، محتویات فایل index.php را تحلیل می کنیم و بخش های تکراری این فایل را شناسایی و حذف می کنیم و دلیل انجام این کار را خواهیم آموخت. در اصل، در این درس برای اولین بار به سراغ ایجاد تغییرات در فایل HTML خواهیم رفت و خودمان را برای شروع تبدیل فایل های قالب  HTML به فایل های پوسته وردپرس آماده می کنیم.

درس هفتم: آموزش نحوه کار با loop وردپرس

در درس هفتم با یکی از مهم ترین بخش های وردپرس یعنی Loop آشنا می شویم و می آموزیم که چگونه توسط loop وردپرس و با استفاده از template tagها، بخش های مختلف قالب HTML را به قسمت های مختلف پوسته وردپرس تبدیل کنیم. در این درس خواهیم دید که کار کردن با حلقه وردپرس به منظور استخراج پست ها و نمایش آنها در پوسته تا چه حد راحت و آسان است. پس از آن و هنگامی که با نحوه کار حلقه وردپرس و توابع آن یعنی have_posts، the_post آشنا شدیم و دیدیم که چگونه توسط این توابع و استفاده از ساختارهای شرطی و تکرار در PHP می توان پست ها و نوشته ها را از پایگاه داده وردپرس استخراج کرد، توسط همین مفاهیم و با بکارگیری آنها، 10 نوشته جدید وردپرس را توسط فایل index.php از پایگاه داده استخراج می کنیم و در صفحه اول سایت نمایش می دهیم.

درس هشتم: ایجاد فایل single.php

وردپرس دارای ساختاری سلسله مراتبی است و حلقه وردپرس با استفاده از همین ساختار سلسله مراتبی، نحوه نمایش پست ها در وب سایت را تعیین می کند. از این ساختار سلسله مراتبی جهت نمایش مطالب وبسایت به عنوان template hierarchy یاد می شود و در راس آن فایل index.php قرار دارد. وردپرس می داند که اگر تمپلیتی جهت نمایش محتوای مورد نیاز وجود نداشت، حداقل باید یک فایل با نام index.php در سایت وجود داشته باشد تا از آن فایل به عنوان آخرین راهکار جهت نمایش بخش های مختلف، آن هم به شرطی که آن بخش ها فایل مورد نیاز را نداشتند استفاده کند.

در درس قبل با نحوه ساخت فایل index.php جهت لیست کردن 10 پست جدید وردپرس آشنا شدیم ، اما اگر مایل به مشاهده محتویات هر پست باشیم باید چکار کنیم؟ جواب این سوال در درس هشتم بیان می شود. در این درس خواهیم آموخت که چگونه می توان توسط ایجاد فایل single.php و پیاده سازی حلقه وردپرس در آن، محتویات هر نوشته را در سایت مشاهده کرد. در مجموع در درس های هفتم و هشتم و با استفاده از انواع تمپلیت تگ ها می آموزیم که چگونه قسمت های مختلف قالب HTML را با محتوای پستهای وردپرس جایگزین نماییم.

درس نهم: ایجاد لینک به پست بعدی و پست قبلی در فایل single.php

در درس نهم خواهیم دید که چگونه توسط تابع get_adjacent_post لینک های به پست قبلی و بعدی را در صفحه single.php ایجاد کنیم. این درس، مقدمه ای بر شروع ساخت pagination جهت پیمایش صفحات وبسایت است.

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

در این درس با استفاده از توابع comments_open، comments_template، comment_form، have_comments، wp_list_comments و فایل comments.php سیستم ثبت نظر در وردپرس را ایجاد می کنیم و خواهیم دید که پیاده سازی بخش نظرات در وردپرس تا چه حد ساده و آسان است. همچین در این درس اشاره ای هم به کلاس Walker_Comment جهت پیاده سازی سیستم ثبت نظر کاملاً سفارسی خواهیم کرد.

درس یازدهم: آموزش کار با Theme Customizer API – بخش اول

درس دوازدهم: آموزش کار با Theme Customizer API – بخش دوم

درس سیزدهم: آموزش کار با Theme Customizer API – بخش سوم

درس چهاردهم: آموزش کار با Theme Customizer API – بخش چهارم

در دروس یازدهم تا چهاردهم با Theme Customizer API به صورت کامل آشنا خواهیم شد. در این دروس خواهیم دید که چرا باید جهت ایجاد بخش های تنظیمات پوسته از Theme Customizer API استفاده کرد و مقایسه ای هم بین Theme Customizer API و Options API جهت ایجاد بخش تنظیمات قالب خواهیم داشت.

همانطور که می دانید وردپرس پیشنهاد می کند که جهت ایجاد بخش تنظیمات قالب، بجای ساخت صفحه تنظیمات قالب توسط Settings API و Options API از Theme Customizer API استفاده کنیم و به همین جهت و با توجه به اهمیت این موضوع، چهار قسمت از 25 قسمت این دوره آموزشی را به آموزش کامل کار با Theme Customizer API اختصاص داده ایم. در این چهار درس با چهار بخش اصلی API ایجاد تنظیمات پوسته یعنی Panelها، Section ها، Control ها و Setting ها آشنا می شویم و نحوه ارتباط این چهار بخش جهت ساخت صفحات تنظیمات قالب را به صورت کامل خواهیم آموخت.

همچنین با شی $wp_customize و توابع add_panel، add_section، add_control، add_setting، کلاس WP_Customize_Image_Control و انواع کلاس های ساخت نوع های سفارشی، علاوه بر نوع های استاندارد در وردپرس، توابع sanitize کردن ورودی، دو نوع transport یعنی refresh و postMessage و بیان تفاوت آنها با یکدیگر و خلاصه هر آنچه که باید در مورد Theme Customizer API بدانیم آشنا می شویم.

درس پانزدهم: آموزش اضافه کردن ابزارک به پوسته

در درس پانزدهم با نحوه اضافه کردن ناحیه های مختلف جهت اضافه کردن انواع ابزارک استاندارد در وردپرس آشنا می شویم و 3 ناحیه ابزارک در فوتر سایت توسط تابع register_sidebar ایجاد خواهیم کرد. سپس به سراغ فایل footer.php می رویم و توسط توابع is_active_sidebar و dynamic_sidebar، ناحیه های ایجاد شده را به همراه ابزارک های فعال درون آنها در بخش فوتر سایت در معرض نمایش قرار می دهیم.

درس شانزدهم: آموزش ایجاد نوع پست سفارشی و دسته بندی سفارشی در پوسته – بخش اول

درس هفدهم: آموزش ایجاد نوع پست سفارشی و دسته بندی سفارشی در پوسته – بخش دوم

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

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

قسمت هجدهم: آموزش کار با کلاس WP_Query و ساخت کوئری های سفارشی – بخش اول
قسمت نوزدهم: آموزش کار با کلاس WP_Query و ساخت کوئری های سفارشی – بخش دوم

در این دو درس، به صورت کامل با کلاس WP_Query آشنا می شویم و ضمن بیان نکات کار با این کلاس، در صفحه index.php از این کلاس جهت ایجاد کوئری سفارشی به منظور نمایش نمونه کارهای ثبت شده در وبسایت استفاده خواهیم کرد. کلاس WP_Query در اجرای کوئری های سفارشی روی پایگاه داده بسیار قدرتمند عمل می کند و تقریباً نیاز ما را از اجرای مستقیم دستورات SQL روی پایگاه داده در وردپرس جهت نمایش انواع مختلف post typeها برطرف می کند.

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

درس بیستم: اضافه کردن امکان جستجو در پوسته

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

درس بیست و یکم: پیاده سازی سیستم صفحه بندی یا Pagination در پوسته

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

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

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

درس بیست و سوم: پیاده سازی فایل single-kportfolio.php برای نمایش نمونه کارها و ساخت فایل page.php جهت نمایش محتوای برگه ها در وردپرس

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

درس بیست و چهارم: پیاده سازی صفحات آرشیو

در درس بیست و چهارم با نحوه ایجاد فایل archive.php جهت نمایش صفحات آرشیو مطالب بر مبنای دسته بندی مطلب، نوع پست سفارشی، نویسنده، سال، ماه، روز و … آشنا می شویم و این صفحات را به صورت استاندارد و درون فایل archive.php و توسط توابع مرتبط ایجاد خواهیم کرد.

درس بیست و پنجم: ایجاد Page Template و بیان نکات پایانی

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

نکته : شما می توانید فایل های پروژه مخصوص این دوره را به تفکیک درس ها دانلود کنید و از آنها استفاده نمایید .

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

در بخش زیر تصاویری از قالب ایجاد شده وردپرس Sonex را مشاهده می کنید .