چگونه به راحتی یک قالب وردپرس سفارشی ایجاد کنیم (بدون هیچ کد)

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

در گذشته ، شما مجبور بودید کد WordPress را دنبال کنید و از دانش برنامه نویسی مناسبی برای ساخت یک قالب وردپرس سفارشی برخوردار باشید. اما به لطف سازندگان قالب های جدید وردپرس ، اکنون هرکسی می تواند یک قالب وردپرس کاملاً سفارشی را ظرف مدت یک ساعت ایجاد کند (به دانش برنامه نویسی نیازی نیست).

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

Creating a custom WordPress theme without writing any code

ایجاد یک قالب وردپرس سفارشی برای مبتدیان h4>

برخلاف سایتهای ثابت HTML ، قالبهای WordPress مجموعه ای از فایلهای الگو هستند که با PHP ، HTML ، CSS و JavaScript نوشته شده اند. به طور معمول ، شما باید درک مناسبی از همه این زبان های طراحی وب داشته باشید یا یک توسعه دهنده وب را برای ایجاد یک قالب وردپرس سفارشی استخدام کنید.

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

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

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

در حالی که چارچوب های قالب وردپرس ساخت یک قالب وردپرس را آسان کرده است ، آنها یک راه حل برای توسعه دهندگان هستند ، نه یک دارنده وب سایت متوسط.

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

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

Beaver Builder best WordPress page builder plugin

Beaver Themer یک افزونه سایت ساز است که به شما امکان می دهد با استفاده از یک رابط کشیدن و رها کردن و بدون یادگیری کدگذاری ، طرح زمینه های سفارشی ایجاد کنید.

بیایید نگاهی به نحوه استفاده از Beaver Themer برای ایجاد آسان قالب WordPress بیندازیم.

آموزش فیلم h4>

مشترک شدن در WPBeginner

اگر فیلم را دوست ندارید یا به دستورالعمل های بیشتری احتیاج دارید ، به خواندن ادامه دهید.

تنظیم Beaver Themer برای ساخت یک تم سفارشی h4>

Beaver Themer است یک افزونه الحاقی برای Beaver Builder ، بنابراین برای این مقاله به هر دو افزونه نیاز خواهید داشت.

ابتدا باید Beaver Builder و Beaver پلاگین های Themer . برای جزئیات بیشتر ، به راهنمای گام به گام ما در نحوه نصب افزونه وردپرس .

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

چنین مضامین بسیاری را می توانید در فهرست زمینه WordPress.org پیدا کنید. بیشتر تم های جدید وردپرس شامل الگوی تمام عرض هستند. مهمترین موارد ما عبارتند از:

  • Astra – یک تم وردپرس سبک وزن و همه منظوره رایگان که همراه با پشتیبانی داخلی از Beaver Builder ارائه می شود.
  • OeanWP – یکی دیگر از محبوب های رایگان رایگان طرح زمینه وردپرس با پشتیبانی کامل از صفحه ساز.
  • موضوعات StudioPress – همه آنها مضامین با Beaver Builder سازگار هستند و با Beaver Themer عالی کار خواهند کرد.

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

تنظیم طرح زمینه خود برای Beaver Themer

هنگام ساخت یک قالب WordPress سفارشی با Beaver Themer ، اطمینان از دسترسی Beaver Themer به بدنه کامل صفحه (از لبه به لبه) مهم است.

این طرح Astra پیش فرض است. همانطور که می بینید این طرح شامل یک نوار کناری است که هنگام استفاده از Beaver Themer کار با آن دشوار است.

Default theme layout with a sidebar

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

Turning off sidebars in your theme

پس از ورود ، به سادگی “No Sidebar” را در گزینه پیش فرض طرح انتخاب کرده و بر روی دکمه انتشار کلیک کنید تا تغییرات شما ذخیره شود.

طرح زمینه شما اکنون با استفاده از طرح بندی بدون نوار کناری شروع می شود. این بهترین طرح برای استفاده در Beaver Themer است.

Theme layout with no sidebars

این طرح در تمام صفحه به Beaver Themer اجازه می دهد تا از هر اینچ صفحه استفاده کند ، بنابراین شما می توانید یک تجربه بصری از انتهای به پایان را ایجاد کنید.

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

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

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

مبانی Quick Beaver Themer

Beaver Themer در بالای Beaver Builder کار می کند. Beaver Builder به عنوان یک افزونه صفحه ساز به شما امکان می دهد تا موارد را به صفحه بکشید و رها کنید تا طرح های سفارشی ایجاد کند.

موارد زیر را دارد که می توانید در طرح بندی های خود استفاده کنید:

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

به سادگی یک صفحه را در Beaver Builder ویرایش کنید و سپس بر روی دکمه add در گوشه سمت راست بالا کلیک کنید. سپس می توانید ستون ها ، ردیف ها ، ماژول ها را به صفحه خود بکشید و رها کنید و بلافاصله ویرایش آنها را شروع کنید.

Using Beaver Builder

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

Beaver Builder templates

Beaver Builder به شما امکان می دهد طرح های خود را ذخیره کنید و سپس بعداً به عنوان الگو از آنها استفاده کنید.

برای کسب اطلاعات بیشتر به مقاله ما در مورد نحوه ایجاد طرح بندی صفحه سفارشی با استفاده از Beaver Builder .

با این حال ، ما فقط نمی خواهیم طرح بندی صفحه ایجاد کنیم. ما می خواهیم یک موضوع کاملاً سفارشی ایجاد کنیم.

این زمانی است که بیور تمر وارد می شود.

این یک مورد دیگر به Beaver Builder اضافه می کند به نام ‘Themer Layout’.

Themer Layout

طرح های Themer به شما امکان می دهد طرح های دلخواه را برای عنوان ، پاورقی ، مناطق محتوا ، صفحه 404 و سایر قسمتهای الگو ایجاد کنید.

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

استفاده از الگوهای Beaver Themer برای ایجاد قالب WordPress سفارشی h4>

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

ایجاد یک هدر سفارشی برای تم خود h4>

بیایید با قسمت هدر وب سایت شما شروع کنیم. هدر سفارشی یک م essentialلفه اساسی یک موضوع است و استفاده از آن می تواند مشکل باشد روشهای سنتی

خوشبختانه Beaver Themer دارای ویژگی های سرآیند است. شما می توانید از الگوی از قبل ایجاد شده استفاده کنید یا از منو و ماژول های تصویر با طرح دو ستونی استفاده کنید.

برای دسترسی به این قسمت هدر ، ابتدا باید طرح هدر را در Beaver Themer تنظیم کنیم. به صفحه Beaver Builder »افزودن موارد جدید مراجعه کرده و عنوانی برای عنوان خود ارائه دهید.

Creating a custom header layout

پس از آن ، “Themer Layout” را به عنوان نوع و “Header” را به عنوان گزینه layout انتخاب کنید. پس از اتمام کار ، بر روی دکمه “افزودن طرح Themer” کلیک کنید تا ادامه دهید.

این شما را به صفحه تنظیمات طرح می رساند. از اینجا شما باید “Entire Site” را به عنوان مکانی که در آن الگوی سرصفحه نمایش داده می شود ، انتخاب کنید.

Layout settings

بعد ، روی دکمه “راه اندازی Beaver Builder” کلیک کنید تا رابط سازنده باز شود.

Beaver Builder با یک ستون اصلی و طرح هدر دو ردیف به عنوان نقطه شروع راه اندازی می شود.

Header layout

برای تغییر پس زمینه ، رنگ ، متن و غیره می توانید از همان ابزارهای کشیدن و رها کردن Beaver Builder استفاده کنید. همچنین می توانید با کلیک بر روی دکمه add در ماژول ، سایر ماژول ها را اضافه کنید ، الگوهای از پیش ساخته شده را بارگیری کنید و سطرها / ستون ها را اضافه کنید. گوشه بالا سمت راست.

هنگامی که از طراحی راضی شدید ، برای ذخیره یا انتشار طرح خود ، روی دکمه Done کلیک کنید.

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

Custom header in your custom theme

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

اجازه دهید این را تغییر دهیم.

ساخت یک پاورقی سفارشی برای تم خود h4>

درست مانند ایجاد یک سربرگ سفارشی ، می توانید با استفاده از Beaver Themer یک پاورقی سفارشی برای طرح زمینه خود ایجاد کنید.

به صفحه Beaver Builder »افزودن موارد جدید بروید و عنوانی برای طرح پاورقی خود ارائه دهید. در مرحله بعد ، “طرح بندی Themer” را به عنوان نوع و “Footer” را به عنوان گزینه طرح انتخاب کنید.

Footer layout

برای ادامه بر روی دکمه “Add Themer Layout” کلیک کنید.

این شما را به صفحه تنظیمات طرح می رساند. از اینجا باید “Entire Site” را به عنوان مکانی که الگو در آن نمایش داده می شود ، انتخاب کنید.

Footer layout settings

پس از آن بر روی دکمه “راه اندازی Beaver Builder” کلیک کنید تا رابط سازنده باز شود.

Beaver Builder با استفاده از سه ستون با طرح بالا و پایین صفحه راه اندازی می شود. می توانید از این طرح به عنوان نقطه شروع استفاده کرده و ویرایش را شروع کنید.

Editing your footer layout

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

هنگامی که از طراحی راضی شدید ، برای ذخیره یا انتشار طرح خود ، روی دکمه Done کلیک کنید.

ساختن منطقه محتوای پست و صفحات h4>

اکنون که برای هر صفحه و پست در وب سایت ، عنوان و پاورقی ایجاد کرده ایم ، زمان آن رسیده است که متن یا صفحه (قسمت محتوا) را ایجاد کنید.

ما تقریباً به همان روشی شروع خواهیم کرد که هدر و پاورقی را با اضافه کردن طرح “Singular” در صفحه افزودن جدید ایجاد کردیم.

Creating posts and page layouts

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

Singular layout settings

پس از آن بر روی دکمه “راه اندازی Beaver Builder” کلیک کنید تا رابط سازنده باز شود.

Editing singular layout

Beaver Builder یک نمونه طرح واحد را با عنوان پست / صفحه در بالا بارگیری می کند و به دنبال آن محتوا ، جعبه بیوگرافی نویسنده ، و قسمت نظرات.

می توانید برای ویرایش هر یک از این موارد اشاره کرده و کلیک کنید یا در صورت لزوم ماژول ها ، ستون ها و ردیف های جدید اضافه کنید.

بعد از اینکه از طرح راضی شدید ، روی دکمه Done کلیک کنید تا تغییرات خود را ذخیره و منتشر کنید.

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

Theme layout with content

ایجاد آرشیو آرشیو برای تم سفارشی خود h4>

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

بیایید یک طرح برای صفحات بایگانی در طرح زمینه سفارشی شما ایجاد کنیم.

با مراجعه به صفحه Beaver Builder »افزودن جدید و ارائه عنوانی برای آرشیو خود شروع خواهید کرد.

Creating an archive layout for your custom theme

پس از آن ، “طرح بندی Themer” را به عنوان نوع و “Archive” را به عنوان گزینه طرح انتخاب کنید. برای ادامه روی دکمه “Add Themer Layout” کلیک کنید.

این شما را به صفحه تنظیمات طرح می رساند. از اینجا شما باید “All Archive” را به عنوان مکانی که الگو در آن نمایش داده می شود ، انتخاب کنید. همچنین می توانید برای هر نوع بایگانی جداگانه مانند تاریخ ، نتایج جستجو ، دسته ، برچسب ها و غیره طرح های جداگانه ایجاد کنید

Archive layout settings

پس از آن بر روی دکمه “راه اندازی Beaver Builder” کلیک کنید تا رابط سازنده باز شود.

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

Editing Archives layout for your theme

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

پس از آن ، بر روی دکمه “انجام شد” کلیک کنید تا تغییرات خود را ذخیره و منتشر کنید.

ایجاد سایر طرح بندی ها برای قالب وردپرس سفارشی خود h4>

Beaver Themer همچنین به شما امکان می دهد برای سایر صفحات در سلسله مراتب الگو ، طرح بندی ایجاد کنید ، به عنوان مثال ، صفحه 404 ، قطعات الگو ، صفحه نتایج جستجو و موارد دیگر.

با استفاده از قابلیت کشیدن و رها کردن داخلی Beaver Builder ، به راحتی می توانید تم وردپرس دلخواه خود را از ابتدا و بدون نوشتن کد ، ایجاد کنید. این واقعا ابتدایی ترین روش توسعه قالب وردپرس است که وجود دارد.

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

اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .

منبع:
https://www.wpbeginner.com/wp-themes/how-to-easily-create-a-custom-wordpress-theme/.

دیدگاهتان را بنویسید