آموزش توسعه وردپرس با بوت استرپ: دوره کامل

سرفصل ها و درس ها

به دوره جدید خوش آمدید! Welcome to the NEW COURSE!

• به دوره خوش آمدید! شما تصمیم درستی گرفتید Welcome To The Course! You Made The Right Decision

• نمای کلی تم نهایی وردپرس Overview of the final WordPress Theme

• تغییر دوره - به روز رسانی های جدید دوره! Course CHANGELOG - New Updates to the Course!

*جدید* تم بوت استرپ خود را با HTML و CSS کدنویسی کنید *NEW* Hand Code Your Bootstrap Theme with HTML & CSS

• معرفی Introduction

• راه اندازی پروژه Project Set Up

• HTML - نوار نوار را کد کنید HTML - Code The Navbar

• HTML - بخش عنوان را کد کنید HTML - Code the Title Section

• HTML - فهرست مقالات وبلاگ را کد کنید HTML - Code the List of Blog Articles

• CSS - منوی ناوبری و بخش قهرمان را سبک کنید CSS - Style The Navigation Menu & Hero Section

• CSS - یک منوی کشویی و فرعی متحرک با سلیقه ایجاد کنید CSS - Style a Tastefully Animated Dropdown and Sub Menu

• CSS & JS - یک منوی کرکره‌ای متحرک و با سلیقه را سبک و برنامه‌ریزی کنید CSS & JS - Style and Program a Tastefully Animated Dropdown and Sub Menu

• CSS - نوار اشتراک را سبک کنید CSS - Style the Subscribe Bar

• CSS - به بخش پاورقی استایل دهید CSS - Style the Footer Section

• HTML - کد نشانه گذاری برای یک پست وبلاگ منفرد HTML - Code the Markup for a Single Blog Post

• HTML - کد نشانه گذاری برای "عناوین ویجت" ما HTML - Code the Markup for our "Widget Headings"

• HTML و CSS - ویجت‌های کارت متن را کدنویسی و سبک کنید HTML & CSS - Code and Style the Text Card Widgets

• HTML و CSS - ویجت Call To Action را کدنویسی و سبک کنید HTML & CSS - Code and Style the Call To Action Widget

• HTML و CSS - یک ویجت گواهینامه را کدنویسی و سبک کنید HTML & CSS - Code and Style a Testimonial Widget

• HTML و CSS - مطمئن شوید که در دستگاه های تلفن همراه خوب به نظر می رسد! HTML & CSS - Make Sure it Looks Good on Mobile Devices!

• امتحان پاپ بوت استرپ Bootstrap Pop Quiz

• HTML، CSS و JS - کد خود را اعتبارسنجی کنید! HTML, CSS & JS - Validate Your Code!

*جدید* یک قالب وردپرس سفارشی بسازید *NEW* Build a Custom WordPress Theme

• معرفی Introduction

• کد منبع تم نهایی وردپرس را دانلود کنید Download Final WordPress Theme Source Code

• یک نصب جدید وردپرس با Local by Flywheel ایجاد کنید Create a Fresh WordPress Install with Local by Flywheel

• یک سربرگ پویا، پاورقی و قالب ایندکس ایجاد کنید Create a Dynamic Header, Footer and Index Template

• قالب هدر را نهایی کنید Finalize the Header Template

• یک بخش عنوان پویا ایجاد کنید Create a Dynamic Title Section

• الگوهای گزیده محتوا و هیچ محتوا را ایجاد کنید Create Content Excerpt and Content None Templates

• گزیده های پست وبلاگ پویا، بیضی سفارشی و صفحه بندی! Dynamic Blog Post Excerpts, Custom Ellipsis and Pagination!

• یک قالب پست وبلاگ پویا با یک تصویر ویژگی پاسخگو ایجاد کنید Create a Dynamic Blog Post Template with a Responsive Feature Image

• یک قالب صفحه پویا ایجاد کنید Create a Dynamic Page Template

• یک صفحه خطای Super Cute 404 ایجاد کنید Create a Super Cute 404 Error Page

*جدید* Kirki: سفارشی ساز قالب وردپرس خود را به روشی آسان پیکربندی کنید *NEW* Kirki: Configure Your WordPress Theme Customizer the Easy(ish) Way

• Kirki V4: نحوه نصب و شروع Kirki V4: How to Install and Get Started

• Kirki V4: یک بخش جهانی پاورقی در Customizer WordPress ایجاد کنید Kirki V4: Create a Global Footer Section in the WordPress Customizer

• Kirki V4: یک ابزارک فراخوان جهانی در سفارشی ساز وردپرس ایجاد کنید Kirki V4: Create a Global Call to Action Widget in the WordPress Customizer

• *LEGACY* فقط برای کاربران Kirki 3: نحوه مهاجرت به Kirki نسخه 4 *LEGACY* For Kirki 3 Users Only: How to Migrate to Kirki Version 4

• *LEGACY* Kirki V3 را نصب کنید و پیکربندی سفارشی ساز وردپرس را آغاز کنید *LEGACY* Install Kirki V3 & Begin Configuring WordPress Customizer

• *LEGACY* Kirki V3: یک پاورقی جهانی با Customizer ایجاد کنید *LEGACY* Kirki V3: Create a Global Footer with Customizer

• *LEGACY* Kirki V3: با استفاده از Customizer یک بخش فراخوان جهانی ایجاد کنید *LEGACY* Kirki V3: Create a Global Call to Action Section using Customizer

*جدید* طرح بندی ها و ابزارک های سفارشی وردپرس را در المنتور برنامه ریزی کنید *NEW* Program Custom WordPress Layouts & Widgets in Elementor

• معرفی Introduction

• Elementor & Setup Global Settings را نصب کنید Install Elementor & Setup Global Settings

• با Elementor یک "Hero Layout" بسازید Build a "Hero Layout" with Elementor

• ساخت ابزارک های سفارشی در المنتور Building Custom Widgets in Elementor

• یک پلاگین ساده برای ایجاد ابزارک های Elementor سفارشی راه اندازی کنید Initialize a Simple Plugin to Create Custom Elementor Widgets

• ایجاد یک پسوند برای Elementor Creating an Extension for Elementor

• با Elementor یک ویجت دکمه سفارشی را کد کنید Code a Custom Button Widget with Elementor

• نوار اشتراک را با Elementor ایجاد کنید Create the Subscribe Bar with Elementor

• یک ویجت عنوان را در المنتور برنامه ریزی کنید Program a Heading Widget in Elementor

• یک ویجت لینک را در المنتور برنامه ریزی کنید Program a Link Widget in Elementor

• طرح بندی صفحه اصلی را پاک کنید Clean Up the Home Page Layout

• یک ویجت کارت متن رنگارنگ را در المنتور برنامه ریزی کنید Program a Colourful Text Card Widget in Elementor

• ویجت سفارشی Call To Action Card را در Elementor برنامه ریزی کنید Program a Custom Call To Action Card Widget in Elementor

• تست تم، رفع اشکال و استایل‌های واکنش‌گرا در Elementor Theme Testing, Bug Fixes & Responsive Styles in Elementor

• افزودن صفحات و تکمیل تم Adding Pages & Finishing the Theme

• آپلود قالب وردپرس ما در یک سرور زنده Uploading Our WordPress Theme on a Live Server

• جمع بندی و بعد چه می شود؟ Wrap Up & What's Next?

• پایان. The End.

*نسخه رترو دوره: بوت استرپ 3 + وردپرس 4* *RETRO VERSION OF THE COURSE: BOOTSTRAP 3 + WORDPRESS 4*

• وردپرس چیست؟ و چرا باید خیلی به آن اهمیت دهید What is WordPress? And Why You Should Care So Much About It

• بوت استرپ چیست؟ و چرا تسلط بر آن باعث صرفه جویی در صدها ساعت می شود What is Bootstrap? And Why Mastering It Will Save You Hundreds of Hours

• آخرین وب سایت وردپرس (زیبا) که می خواهید در این دوره بسازید The (Beautiful) Final WordPress Website You Are Going To Build In This Course

• وب سایت های استاتیک در مقابل پویا، کدام بهتر است؟ (نکته: یکی بسیار ارزشمندتر است) Static vs. Dynamic Websites, Which Is Better? (Hint: One Is Way More Valuable)

• دانلود رایگان: The Bootstrap 3 Framework Free Download: The Bootstrap 3 Framework

• دانلود رایگان: فایل های دوره نهایی + قالب وردپرس! Free Download: The Final Course Files + WordPress Theme!

• تنظیم محیط پروژه شما Setting Up Your Project Environment

*نسخه رترو: آموزش بوت استرپ 3* *RETRO VERSION: LEARN BOOTSTRAP 3*

• کد طرح اصلی صفحه وب Code The Basic Webpage Layout

• اضافه کردن اسکریپت های خارجی به سند HTML شما Adding External Scripts to Your HTML Document

• فونت های آیکون رایگان را با FontAwesome نصب کنید Install Free Icon Fonts with FontAwesome

• فونت های وب رایگان را با TypeKit و فونت های گوگل نصب کنید Install Free Web Fonts with TypeKit & Google Fonts

• بخش Header و Navigation را کد کنید Code the Header and Navigation Sections

• بخش قهرمان را کد کنید Code the Hero Section

• به بخش Hero با CSS استایل دهید Style the Hero Section with CSS

• نحوه ایجاد افکت پیمایش اختلاف منظر در کمتر از 5 دقیقه را بیاموزید Learn How To Create The Parallax Scrolling Effect in Less Than 5-Minutes

• یاد بگیرید که یک بخش "Opt-In" با تبدیل بالا را کدنویسی کنید Learn to Code a High-Converting "Opt-In" Section

• نحوه ایجاد یک پاپ آپ مدال با استفاده از بوت استرپ را بیاموزید Learn How to Create a Modal Popup using Bootstrap

• بخش «افزایش درآمد خود» را کد کنید Code the "Boost Your Income" Section

• بخش "چه کسی باید این دوره را بگذراند" کد کنید Code the "Who Should Take This Course" Section

• بخش "ویژگی های دوره" را با استفاده از CSS Sprites کد کنید Code the "Course Features" Section Using CSS Sprites

• بخش "پروژه نهایی" را کد کنید Code the "Final Project" Section

• بخش Featurette را کدنویسی کنید و یک ویدیوی YouTube را جاسازی کنید Code the Featurette Section and Embed a YouTube Video

• بخش مربی را کدنویسی کنید (به علاوه جایزه الویس Impressions!) Code the Instructor Section (Plus BONUS Elvis Impressions!)

• کد حلقه های زیبای CSS3 Code Beautiful CSS3 Circles

• ترفند ساده برای تراز عمودی محتوای شما در یک عنصر The Simple Trick to Vertically Align Your Content Within an Element

• Testimonials را کدنویسی کنید و یاد بگیرید که تصاویر مربعی را با استفاده از CSS3 به دایره تبدیل کنید Code the Testimonials and Learn to Turn Square Images into Circles using CSS3

• بخش ثبت نام را کد کنید Code the Sign Up Section

• پاورقی را کد کنید Code the Footer

• پرسش‌های رسانه پاسخگو و پاکسازی عمومی CSS Responsive Media Queries & General CSS Cleanup

• ساختار نشانه گذاری اولیه را کد کنید Code the Basic Markup Structure

• گزیده های وبلاگ را با HTML کدنویسی کنید Code the Blog Excerpts with HTML

• نوار کناری و ابزارک ها را کدنویسی و سبک کنید Code and Style the Sidebar & Widgets

• گزیده های وبلاگ را با CSS سبک کنید Style the Blog Excerpts with CSS

• پست وبلاگ را کد کنید Code the Blog Post

• بخش نظرات را کد کنید Code the Comments Section

• اهمیت صفحه منابع The Importance of a Resources Page

• صفحه منابع طرح بندی 3 ستونی را کد کنید Code the 3-Column Layout Resources Page

• فرم تماس را کد کنید Code the Contact Form

*نسخه یکپارچهسازی با سیستمعامل: نسخه 4 وردپرس را یاد بگیرید* *RETRO VERSION: LEARN WORDPRESS VERSION 4*

• دانلود نسخه 4 وردپرس Download Version 4 of WordPress

• تم شروع "زیرخط" خود را ایجاد کنید Create Your "Underscores" Starter Theme

• وردپرس را در کمتر از 5 دقیقه روی ماشین محلی خود نصب کنید Install WordPress on Your Local Machine in Under 5-Minutes

• نصب طرح زمینه Underscores Installing Your Underscores Theme

• هدر استاتیک خود را به هدر پویا تبدیل کنید Convert Your Static Header to a Dynamic Header

• دارایی های خود را پوشش دهید (افزودن سبک ها، اسکریپت ها، فونت ها و تصاویر) Cover Your Assets (Adding Your Styles, Scripts, Fonts & Images)

• صفحه سبک خود را پاک کنید و CSS خود را برای وردپرس اصلاح کنید Clean Up Your Stylesheet & Modify Your CSS for WordPress

• پاورقی استاتیک خود را به پاورقی پویا تبدیل کنید Convert Your Static Footer to a Dynamic Footer

• یک قالب وردپرس صفحه اصلی ایجاد کنید Create a Home Page WordPress Template

• قهرمان را کدنویسی کنید و از "فیلدهای سفارشی" برای اطلاعات اضافی استفاده کنید Code the Hero & Use "Custom Fields" for Extra Info

• افزونه شگفت انگیز: فیلدهای سفارشی پیشرفته Amazing Plugin: Advanced Custom Fields

• بخش "افزایش درآمد خود را" با فیلدهای سفارشی پیشرفته کد کنید Code the "Boost Your Income" Section with Advanced Custom Fields

• بخش "چه کسی باید این دوره را بگذراند" را با فیلدهای سفارشی پیشرفته کدنویسی کنید Code the "Who Should Take This Course" Section with Advanced Custom Fields

• افزونه شگفت انگیز: رابط کاربری سفارشی انواع پست Amazing Plugin: Custom Post Types UI

• "ویژگی های دوره" را با استفاده از CPT و فیلدهای سفارشی پیشرفته اضافه کنید Add "Course Features" Using CPT & Advanced Custom Fields

• "ویژگی های پروژه" را با رابط کاربری انواع پست سفارشی اضافه کنید Add the "Project Features" with Custom Post Types UI

• قسمت Instructor را با فیلدهای سفارشی پیشرفته کدنویسی کنید Code the Instructor Section with Advanced Custom Fields

• توصیفات را با انواع پست سفارشی کد کنید Code the Testimonials with Custom Post Types

• الگوی خود را با استفاده از get_template_part() پاک کنید Clean Your Template Using get_template_part()

• یک الگوی منابع سفارشی ایجاد کنید Create a Custom Resources Template

• یک تصویر ویژه و یک تصویر بازگشتی اضافه کنید Add a Feature Image, and a Fallback Image

• چگونه یک منبع اضافه کنید و آن را در تم سفارشی خود نمایش دهید How to Add a Resource and Display It In Your Custom Theme

• صفحه فهرست وبلاگ سفارشی خود را به راحتی تنظیم کنید Easily Set Up Your Custom Blog Index Page

• گزیده های وبلاگ شخصی خود را کد کنید Code Your Individual Blog Excerpts

• پست کامل وبلاگ را کد کنید Code the Full Blog Post

• سبک و سفارشی کردن بخش نظرات Style and Customize the Comments Section

• قالب آرشیو را سفارشی کنید Customize the Archive Template

• قالب نتایج جستجو را سفارشی کنید Customize the Search Results Template

• یک قالب با عرض کامل ایجاد و سفارشی کنید Create & Customize a Full Width Template

• افزونه فرم تماس ۷ را نصب کنید و فرم سفارشی خود را اضافه کنید Install Contact Form 7 Plugin and Add Your Custom Form

• افزودن و سفارشی کردن ابزارک های نوار کناری شما Adding & Customizing Your Sidebar Widgets

• منوهای سفارشی وردپرس خود را ثبت و سازماندهی کنید Register and Organize Your Custom WordPress Menus

• یک صفحه مفید و جذاب 404 ایجاد کنید Create a Useful & Engaging 404 Page

*نسخه رترو: وب سایت وردپرس 4 خود را راه اندازی کنید* *RETRO VERSION: LAUNCH YOUR WORDPRESS 4 WEBSITE*

• اول، شما به یک میزبان وب قابل اعتماد و مقرون به صرفه نیاز دارید First, You're Going To Need a Reliable & Affordable Web Host

• وردپرس را مانند یک حرفه ای نصب کنید Install WordPress Like a Pro

• بازدیدکنندگان خود را با گوگل آنالیتیکس ردیابی کنید Track Your Visitors With Google Analytics

• قالب وردپرس سفارشی خود را روی یک سرور زنده نصب و پیکربندی کنید Install and Configure Your Custom WordPress Theme on a Live Server

• شما قالب وردپرس سفارشی خود را ایجاد کرده اید! حالا چی؟ You've Created Your Own Custom WordPress Theme! Now What?

*جدید* منابع پاداش *NEW* Bonus Resources

• درس پاداش Bonus Lesson