كيفية إنشاء سمة ووردبريس مخصصة بسهولة (بدون أي رمز)

A VPN is an essential component of IT security, whether you’re just starting a business or are already up and running. Most business interactions and transactions happen online and VPN

هل تريد إنشاء سمة ووردبريس مخصصة من البداية؟

في الماضي ، كان عليك اتباع كودكس ووردبريس ولديك معرفة جيدة بالترميز لبناء سمة ووردبريس مخصصة. ولكن بفضل مولدات قوالب ووردبريس الجديدة ، يمكن الآن لأي شخص إنشاء سمة ووردبريس مخصصة بالكامل في غضون ساعة (لا يلزم معرفة الترميز).

في هذه المقالة ، سنوضح لك كيفية إنشاء سمة ووردبريس مخصصة بسهولة دون كتابة أي رمز.

إنشاء سمة ووردبريس مخصصة دون كتابة أي كود

إنشاء قالب ووردبريس مخصص للمبتدئين

على عكس مواقع HTML الثابتة ، فإن سمات ووردبريس عبارة عن مجموعة من ملفات القوالب المكتوبة بلغة PHP و HTML و CSS و JavaScript. عادة ، ستحتاج إلى فهم جيد لجميع لغات تصميم الويب هذه أو استئجار مطور ويب لإنشاء سمة ووردبريس مخصصة.

إذا قمت بتعيين مطور أو وكالة ، فإن تكلفة قالب ووردبريس المخصص يمكن أن تصل إلى آلاف الدولارات.

نظرًا لأن العديد من أصحاب الأعمال الصغيرة لا يستطيعون تحمل التكاليف المرتفعة لموضوع ووردبريس المخصص ، فقد استقر الكثير منهم للتو على السمات الافتراضية التي تأتي مع ووردبريس.

أولئك الذين لم يرغبوا في التسوية وأرادوا التخصيصات إما استخدموا أداة سحب وإسقاط منشئ صفحات ووردبريس ، أو استخدموا إطار عمل للقوالب لبناء قالب مخصص.

بينما جعلت أطر عمل قوالب ووردبريس إنشاء سمة ووردبريس أسهل ، فهي حل للمطورين ، وليست مالك موقع ويب عادي.

من ناحية أخرى ، جعلت المكونات الإضافية لمنشئ صفحات ووردبريس من السهل جدًا إنشاء تخطيطات صفحة مخصصة باستخدام واجهة السحب والإفلات ، لكنها اقتصرت على التخطيطات فقط. لا يمكنك إنشاء سمات مخصصة معها.

حتى Beaver Builder ، قرر أحد أفضل المكونات الإضافية لبناء صفحات ووردبريس حل هذه المشكلة من خلال الوظيفة الإضافية التي تسمى Beaver Themer .

Beaver Builder أفضل مكون إضافي منشئ صفحات ووردبريس

Beaver Themer هي وظيفة إضافية لبناء المواقع تتيح لك إنشاء تخطيطات سمة مخصصة باستخدام واجهة سحب وإفلات وبدون تعلم البرمجة.

دعنا نلقي نظرة على كيفية استخدام Beaver Themer لإنشاء سمة ووردبريس بسهولة.

فيديو تعليمي

اشترك في WPBeginner

إذا لم يعجبك الفيديو أو كنت بحاجة إلى مزيد من الإرشادات ، فاستمر في القراءة.

إعداد Beaver Themer لبناء سمة مخصصة

يعد Beaver Themer مكونًا إضافيًا إضافيًا لبرنامج Beaver Builder ، لذلك ستحتاج إلى كلا المكونين الإضافيين لهذه المقالة.

أولاً ، تحتاج إلى تثبيت وتفعيل الإضافات Beaver Builder و Beaver Themer . لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون ووردبريس الإضافي .

يتيح لك Beaver Themer إنشاء سمة مخصصة ، ولكنك ستظل بحاجة إلى سمة لتبدأ بها. نوصي باستخدام سمة خفيفة الوزن تتضمن قالب صفحة كامل العرض لتعمل كقالب بداية.

يمكنك العثور على العديد من هذه السمات في دليل سمات ووردبريس.org. تتضمن معظم سمات ووردبريس الحديثة نموذجًا بعرض كامل. أفضل اختياراتنا هي:

Astra – سمة ووردبريس مجانية وخفيفة الوزن لجميع الأغراض تأتي مع دعم مدمج لـ Beaver Builder.

OeanWP – سمة ووردبريس مجانية متعددة الأغراض مجانية تأتي مع دعم منشئ الصفحة بالكامل.

سمات StudioPress – جميع سماتها متوافقة مع Beaver Builder وستعمل بشكل رائع مع Beaver Themer.

من أجل هذا البرنامج التعليمي ، سنستخدم Astra ، وهو خفيف الوزن وسهل تخصيص قالب ووردبريس.

إعداد السمة الخاصة بك لـ Beaver Themer

عند إنشاء سمة ووردبريس مخصصة باستخدام Beaver Themer ، من المهم التأكد من أن Beaver Themer لديه حق الوصول إلى النص الكامل للصفحة (من الحافة إلى الحافة).

هذا هو تخطيط Astra الافتراضي. كما ترى ، يتضمن هذا التخطيط شريطًا جانبيًا يصعب التعامل معه عند استخدام Beaver Themer.

تخطيط السمة الافتراضي مع شريط جانبي

يمكنك تغيير ذلك من خلال زيارة لوحة إدارة موقع الويب الخاص بك ثم الانتقال إلى المظهر »تخصيص الصفحة. من هنا ، تحتاج إلى التبديل إلى التخطيط » علامة التبويب الشريط الجانبي .

إيقاف تشغيل الأشرطة الجانبية في المظهر الخاص بك

بمجرد الوصول إلى هناك ، ما عليك سوى تحديد “No Sidebar” ضمن خيار التخطيط الافتراضي والنقر فوق الزر “نشر” لحفظ التغييرات.

سيبدأ موضوعك الآن في استخدام تنسيق بدون أشرطة جانبية. هذا هو أفضل تخطيط لاستخدامه مع Beaver Themer.

تخطيط الموضوع بدون أشرطة جانبية

يتيح تخطيط الصفحة الكاملة هذا لـ Beaver Themer استخدام كل شبر من الشاشة ، حتى تتمكن من إنشاء تجربة مرئية رائعة من البداية إلى النهاية.

تتضمن معظم سمات ووردبريس ملف قالب للصفحات كاملة العرض. إذا كنت تستخدم بعض السمات الأخرى ، فقد تجد خيارًا لإزالة الأشرطة الجانبية في إعدادات السمة الخاصة بك.

إذا لم تتمكن من العثور عليه ، فاتصل بمطور السمات الخاص بك وقد يكون بإمكانهم مساعدتك في ذلك.

بمجرد إعداد السمة الخاصة بك على تخطيط كامل العرض ، فأنت جاهز لإنشاء سمة ووردبريس المخصصة الخاصة بك باستخدام Beaver Themer.

أساسيات بيفر ثيمر السريعة

يعمل Beaver Themer على قمة Beaver Builder. بصفتك مكونًا إضافيًا منشئ الصفحات ، يتيح لك Beaver Builder سحب العناصر وإفلاتها في الصفحة لإنشاء تخطيطات مخصصة.

يحتوي على العناصر التالية التي يمكنك استخدامها في التخطيطات الخاصة بك:

القالب: مجموعة من صفوف الأعمدة والوحدات النمطية التي تشكل تخطيط الصفحة بالكامل.

الأعمدة: وحدات التخطيط العمودية التي تساعد في محاذاة المحتوى أفقيًا.

الصفوف: مجموعة أفقية من وحدات متعددة

الوحدة النمطية: عنصر ينتج معلومات محددة مثل العنوان ، وكتلة النص ، والجدول ، والمعرض ، وما إلى ذلك.

ما عليك سوى تحرير صفحة في Beaver Builder ثم النقر فوق الزر “إضافة” في الزاوية اليمنى العليا. يمكنك بعد ذلك سحب وإسقاط الأعمدة والصفوف والوحدات النمطية إلى صفحتك والبدء في تحريرها على الفور.

باستخدام Beaver Builder

إذا كنت لا تريد البدء من نقطة الصفر ، فاختر من قائمة القوالب المعدة مسبقًا لتبدأ بها.

قوالب بيفر بيلدر

يتيح لك Beaver Builder أيضًا حفظ تخطيطاتك ثم استخدامها لاحقًا كقوالب.

لمعرفة المزيد ، راجع مقالتنا حول كيفية إنشاء تخطيط صفحة مخصص باستخدام Beaver Builder .

ومع ذلك ، لا نريد فقط إنشاء تخطيطات الصفحة. نريد إنشاء موضوع مخصص كامل.

هذا عندما يأتي بيفر ثيمر.

يضيف عنصرًا آخر إلى Beaver Builder يسمى Themer Layout.

تخطيط Themer

تسمح لك تخطيطات Themer بإنشاء تخطيطات مخصصة للرأس والتذييل ومناطق المحتوى وصفحة 404 وأجزاء القالب الأخرى.

هذه هي اللبنات الأساسية لجميع سمات ووردبريس وباستخدامها ستتمكن من إنشاء قالب مخصص يناسب احتياجاتك.

استخدام قوالب Beaver Themer لإنشاء سمة ووردبريس مخصصة

في الإرشادات التالية ، سنرشدك خلال الخطوات اللازمة لإنشاء عناصر السمات المخصصة الأكثر شيوعًا. بحلول الوقت الذي تنتهي فيه ، ستكون قد قمت بتحويل المظهر الأساسي الخاص بك بالكامل إلى سمة ووردبريس فرعية مخصصة بالكامل.

بناء رأس مخصص لموضوعك

لنبدأ بمنطقة رأس موقع الويب الخاص بك. يعد العنوان المخصص مكونًا أساسيًا للقالب ويمكن أن يكون إنشاء أحدها أمرًا صعبًا باستخدام الطرق التقليدية.

لحسن الحظ ، يحتوي Beaver Themer على ميزات رأس مضمنة. يمكنك إما استخدام القالب الذي تم إنشاؤه مسبقًا أو استخدام وحدات القائمة والصورة مع تخطيط من عمودين.

من أجل الوصول إلى منطقة الرأس هذه ، سنحتاج أولاً إلى إعداد تخطيط رأس في Beaver Themer. قم بزيارة Beaver Builder »إضافة صفحة جديدة وقدم عنوانًا لرأسك.

إنشاء تخطيط رأس مخصص

بعد ذلك ، حدد “Themer Layout” كنوع و “رأس” كخيار تخطيط. بمجرد الانتهاء ، انقر فوق الزر “Add Themer Layout” للمتابعة.

سينقلك هذا إلى صفحة إعدادات التخطيط. من هنا ، تحتاج إلى تحديد “الموقع بالكامل” باعتباره الموقع الذي سيتم عرض قالب الرأس فيه.

إعدادات الشكل الظاهري

بعد ذلك ، انقر فوق الزر “Launch Beaver Builder” لفتح واجهة Builder.

سيتم تشغيل Beaver Builder مع عمود أساسي أساسي وتخطيط رأس من صفين كنقطة بداية.

تخطيط الرأس

يمكنك استخدام نفس أدوات السحب والإفلات Beaver Builder لتغيير الخلفية والألوان والنص وما إلى ذلك. يمكنك أيضًا إضافة وحدات أخرى وتحميل قوالب مسبقة الصنع وإضافة صفوف / أعمدة من خلال النقر على زر الإضافة في أعلى اليمين ركن.

بمجرد أن تشعر بالرضا عن التصميم ، انقر فوق الزر تم لحفظ التخطيط الخاص بك أو نشره.

يمكنك الآن زيارة موقع الويب الخاص بك لرؤية عنوان موضوعك المخصص قيد التنفيذ. كما ترى ، قمنا بتطبيق تخطيط الرأس على نسقنا المخصص.

رأس مخصص في موضوعك المخصص

بصرف النظر عن العنوان ، لن تعرض أي محتوى حتى الآن ، ومن المحتمل أن ترى منطقة تذييل السمة الأساسية الخاصة بك.

دعونا نغير هذا.

بناء تذييل مخصص لموضوعك

يمكنك إنشاء تذييل مخصص لموضوعك باستخدام Beaver Themer تمامًا كما قمت بإنشاء رأس مخصص.

توجه إلى Beaver Builder »إضافة صفحة جديدة وقدم عنوانًا لتخطيط التذييل الخاص بك. بعد ذلك ، حدد “Themer Layout” كنوع و “التذييل” كخيار تخطيط.

تخطيط التذييل

انقر فوق الزر “Add Themer Layout” للمتابعة.

سينقلك هذا إلى صفحة إعدادات التخطيط. من هنا ، تحتاج إلى تحديد “الموقع بالكامل” باعتباره الموقع الذي سيتم عرض النموذج عليه.

إعدادات تخطيط التذييل

بعد ذلك ، انقر فوق الزر “Launch Beaver Builder” لفتح واجهة Builder.

سيتم إطلاق Beaver Builder بتصميم تذييل باستخدام ثلاثة أعمدة. يمكنك استخدام هذا التخطيط كنقطة بداية والبدء في التحرير.

تحرير تخطيط التذييل الخاص بك

يمكنك إضافة وحدات أو كتل نصية أو أي شيء آخر تريده. يمكنك دائمًا تغيير الألوان والخطوط وإضافة صورة خلفية والمزيد.

بمجرد أن تشعر بالرضا عن التصميم ، انقر فوق الزر تم لحفظ التخطيط الخاص بك أو نشره.

بناء منطقة المحتوى للمنشور والصفحات

الآن بعد أن قمنا بإنشاء رؤوس وتذييلات لكل صفحة ونشر على موقع الويب ، فقد حان الوقت لإنشاء المنشور أو نص الصفحة (منطقة المحتوى).

سنبدأ بنفس الطريقة التي أنشأنا بها الرأس والتذييل عن طريق إضافة التخطيط “المفرد” في صفحة إضافة جديدة.

إنشاء منشورات وتخطيطات الصفحة

بعد ذلك ، ستختار مكان عرض هذا التخطيط. يمكنك اختيار المفرد لاستخدامه لجميع المنشورات والصفحات الفردية ، أو يمكنك اختيار المنشورات أو الصفحات فقط.

إعدادات التخطيط الفردي

بعد ذلك ، انقر فوق الزر “Launch Beaver Builder” لفتح واجهة Builder.

تحرير التخطيط المفرد

سيقوم Beaver Builder بتحميل نموذج تخطيط فردي مع عنوان المنشور / الصفحة في الأعلى ، متبوعًا بالمحتوى ، ومربع السيرة الذاتية للمؤلف ، ومنطقة التعليقات.

يمكنك الإشارة والنقر لتحرير أي من هذه العناصر أو إضافة وحدات نمطية وأعمدة وصفوف جديدة حسب الحاجة.

بمجرد أن تشعر بالرضا عن التصميم ، انقر فوق الزر تم لحفظ التغييرات ونشرها.

يمكنك الآن زيارة موقع الويب الخاص بك لمشاهدته أثناء العمل.

تخطيط الموضوع مع المحتوى

إنشاء تخطيطات أرشيف لموضوعك المخصص

الآن بعد أن بدأ المظهر المخصص الخاص بك في التكوين ، يمكنك الانتقال إلى إنشاء تخطيطات لأجزاء أخرى من موقع الويب الخاص بك. صفحات الأرشيف هي المكان الذي يعرض فيه ووردبريس الفئات والعلامات والمؤلف والأرشيفات الشهرية.

لنقم بإنشاء تخطيط لصفحات الأرشيف في نسقك المخصص.

ستبدأ بزيارة Beaver Builder »إضافة صفحة جديدة وتوفير عنوان لتخطيط الأرشيف الخاص بك.

إنشاء تخطيط أرشيف لموضوعك المخصص

بعد ذلك ، حدد “Themer Layout” كنوع ، و “الأرشفة” كخيار التخطيط. انقر فوق الزر “Add Themer Layout” للمتابعة.

سينقلك هذا إلى صفحة إعدادات التخطيط. من هنا ، تحتاج إلى تحديد “All Archive” باعتباره الموقع الذي سيتم عرض القالب فيه. يمكنك أيضًا إنشاء تخطيطات منفصلة لكل نوع أرشيف فردي مثل التاريخ ونتائج البحث والفئة والعلامات وما إلى ذلك.

إعدادات تخطيط الأرشيف

بعد ذلك ، انقر فوق الزر “Launch Beaver Builder” لفتح واجهة Builder.

سيتم إطلاق Beaver Builder مع تخطيط أرشيف أساسي بعمود واحد. سيعرض عنوان الأرشيف في الأعلى ، متبوعًا بالمشاركات.

تحرير تخطيط المحفوظات لموضوعك

يمكنك الإشارة والنقر فوق أي عنصر لتحرير خصائصه. يمكنك أيضًا إضافة وحدات نمطية وصفوف وأعمدة جديدة حسب الحاجة.

بعد ذلك ، انقر فوق الزر “تم” لحفظ التغييرات ونشرها.

إنشاء تخطيطات أخرى لموضوع ووردبريس المخصص الخاص بك

يتيح لك Beaver Themer أيضًا إنشاء تخطيطات لصفحات أخرى في التسلسل الهرمي للقالب ، على سبيل المثال ، صفحة 404 وأجزاء القالب وصفحة نتائج البحث والمزيد.

باستخدام وظيفة السحب والإفلات المضمنة في Beaver Builder ، يمكنك بسهولة إنشاء سمة ووردبريس المخصصة الخاصة بك من البداية دون كتابة أي تعليمات برمجية على الإطلاق. هذه حقًا هي طريقة تطوير موضوع ووردبريس الأكثر صداقة للمبتدئين.

نأمل أن تساعدك هذه المقالة في تعلم كيفية إنشاء سمة ووردبريس مخصصة دون تعلم البرمجة. قد ترغب أيضًا في الاطلاع على دليلنا حول كيفية تسريع موقع ووردبريس الخاص بك لتحسين تجربة المستخدم وتحسين محركات البحث.

خدمات مميزة لآجلك

نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.

اشترك معنا لمزيد من المعرفة

إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..

توضيح

اي عملية نسخ او اقتباس او ترجمة او نقل تم لاغراض علمية وتدريبية وتعليمية بحته وقد تم انشاء هذا المحتوى بمعرفة خبراء في مجال التقنية اما عن طريق إنشاء او تحرير او نقل او نسخ او اقتباس او ترجمة المحتوى من مصادر خاصة او عامة وكل ذلك ضمن حقوق النشر المتعارف عليها.

اي أخطاء تظهر في المحتوى مهما كان نوعه او تصنيفه يمكنك تحرير رسالة فورية لادارة موثوق لاجل تصحيح هذه الاخطاء، وسنكون شاكرين لك في حال قمت بالتعاون معنا لاجل اصلاح هذه الاخطاء.

شاركنا رايك وتقييمك للموضوع

{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}