كيفية تصميم موقع باستخدام Craft CMS

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

لم يتطلب الأمر بالتأكيد بناء أنظمة CMS أخرى ، ولكن بعض العقول المهذبة
مثل براندون كيلي لديها بالفعل أفكار مختلفة في الاعتبار.

طور فريقه نظام CMS حصل على ثناء كبير على الفور في السوق ، والمعروف اليوم باسم Craft CMS.

ما هو Craft CMS؟

Craft ليست مجرد CMS.
يوفر تجربة رقمية كاملة لمنشئي المحتوى والمطورين ومصممي الواجهة الأمامية.

الميزة الرئيسية التي تجعل Craft CMS تبرز هي المرونة التي توفرها للمطورين.

تعمل CraftCMS على تبسيط تطوير موقع الويب بالكامل من خلال قابلية التوسع التي تسمح لك بتوسيع وظائف التطبيق الخاص بك.

تقدم Craft CMS مجموعة من ميزات التطوير المتقدمة لتبسيط عملية تطوير الويب

تقدم Craft CMS للمستخدمين تجربة رقمية كاملة يمكنهم التكيف معها بسرعة.

في الفقرات التالية من المقالة ، سأشرح عن مكونات Craft CMS الرئيسية

وكيفية تصميم قوالب في Craft CMS والميزات الأخرى المفيدة لأي شخص يستخدمه.

يتم تشغيل Craft CMS بواسطة PHP v7.0 وما فوق

وهو مبني على الجزء العلوي من Yii2 Framework. من أجل التشكيل ، فإنه يستخدم Twig لتقديم المحتوى.

بعض المزايا الرئيسية لاستخدام Craft CMS:

  • لوحة تحكم سهلة الاستخدام لإنشاء المحتوى وإدارة المهام الإدارية
  • النمذجة التقليدية للمحتوى والعرض من جانب الخادم مفيد لمطوري الواجهة الأمامية
  • متجر الإضافات مع مئات الإضافات المجانية والمدفوعة
  • نظافة codebase framework & a vibrant community

الآن ، دعنا ننتقل إلى مزيد من التفاصيل حول كيفية عمل Craft CMS.

كيف يعمل Craft CMS؟

لقد تخلصت Craft CMS من أنظمة CMS التقليدية التي تأتي مع سمات Craft CMS وأطر CSS ومواقع الويب الجاهزة للاستخدام.

يوفر حلًا مخصصًا للمطورين.

لا تقدم Craft CMS صفحات أو مشاركات ولا تقدم أي سمات وميزات تمهيد لتدوير الواجهة الأمامية.

إذا كنت مستخدمًا جديدًا لـ Craft CMS ، فقد تواجه بعض المشكلات في استخدامه لأول مرة.

بمجرد أن تفهم جوهر أنظمة الحالة النظيفة ، حيث يمكنك بناء أي شيء بنفسك
وتوفير حلول مخصصة لعملائك بما في ذلك HTML أو CSS أو Javascript (React و Vuejs أيضًا) ، ستحب في النهاية نظام إدارة المحتوى هذا.

إذا لم يكن هناك صفحة / مشاركة مثل الهيكل ، فكيف يمكن للمطورين بناء مواقع باستخدام Craft CMS؟

تحقق من بعض  building blocks التي تحتاج إلى معرفتها.

إدخالات وأقسام وحقول

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

يمكنك إضافة إدخالات متعددة للاحتفاظ بمجموعات محتوى مختلفة وإعادة استخدامها مرارًا وتكرارًا على صفحات الويب.

أيضًا ، تحتوي الإدخالات على اسم المؤلف وحالته والمحتوى الذي تضيفه.

لكل إدخال عنوان URL منفصل ؛ وبالتالي ، يمكنك جلب أي إدخال بعنوان URL محدد.

يمكنك تعيين عنوان URL للإدخالات وفقًا لمتطلبات الموقع.

يبدو عنوان URL النموذجي للدخول كما يلي: {{author.username}} / {{slug}}

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

أين وكيف يمكنك إظهار هذه الإدخالات؟

قبل إنشاء الإدخالات ، يجب إنشاء الأقسام للاحتفاظ بها.

يمكن لكل قسم أن يحتفظ بإدخالات متعددة مع أو بدون عناوين URL مع إرفاق القالب.

ولكن ، كم عدد الأقسام التي يمكنك استخدامها مع Craft CMS؟ هناك ثلاثة أنواع من الأقسام:

1- الفردي: يستخدم لصفحات مثل الصفحة الرئيسية ، صفحة حول اتصل بنا.

2- القنوات: تستخدم لتدفقات المحتوى المشابه ، مثل قسم يعرض المدونات ذات الصلة.

3 – الهياكل: تستخدم لتخزين وتنظيم إدخالات متعددة في ترتيب معين.

تتضمن بعض الميزات المهمة الأخرى التي يجب مراعاتها ما يلي:

الحقول: حقن البيانات المخصصة ويمكن تخصيصها للمحتوى

الفئات: تتيح لك إضافة تصنيفات للإدخالات والمستخدمين والأصول

الأصول: إدارة المستندات وملفات الوسائط أو أي ملف قابل للتحميل

قابل للبحث: يمكن فهرسة جميع العناصر والبحث عنها تلقائيًا

التوجيه: للتحقق من الطلب الوارد وإرجاع الاستجابة مع قوالب غصين.

نشر Craft من GitHub إلى Cloudways

في الفقرة السابقة ، لقد تعلمت عن الهيكل ولبنات البناء الرئيسية لـ Craft CMS.

الآن بعد أن قمت ببناء مشاريعك للعملاء ، فإن السؤال هو: كيف ستنشرها على Cloudways؟

الاشتراك وإنشاء مفتاح SSH

أولاً ، تحتاج إلى الاشتراك في Cloudways Platform.

يمكنك تشغيل خادمك الأول باستخدام تطبيق PHP مخصص.

بمجرد تثبيت التطبيق ، يمكنك نشر مواقع Craft من GitHub ببضع نقرات.

في هذه الأثناء ، إذا كنت تريد تثبيت Craft CMS على Cloudways بنفسك
فإليك الدليل الذي سيتيح لك معرفة كيفية تثبيت Craft CMS عبر الملحن على النظام الأساسي.

الآن ، انتقل إلى إعدادات التطبيق من لوحة التحكم وانتقل إلى علامة التبويب “النشر عبر GitHub” على الجانب الأيسر.

انقر فوقه ثم قم بتنزيل مفتاح SSH. يمكنك مشاهدة مفتاح SSH أو نسخه بالنقر فوق عرض مفتاح SSH.

انسخ المفتاح لأنه ستتم إضافته إلى حساب GitHub.

تحميل المفتاح على حساب GitHub

في GitHub ، انتقل إلى المستودع الذي تريد نشره.

انتقل إلى الإعدادات -> نشر المفاتيح وانقر فوق إضافة مفتاح النشر لإضافة مفتاح SSH الذي قمت بتنزيله.

يمكنك تسمية هذا المفتاح في حقل العنوان ويمكنك نسخه إلى المربع.

انقر فوق إضافة مفتاح لحفظ مفتاح SSH.

نشر إلى دليل الموقع الاساسي

الآن ، انسخ عنوان SSH الخاص بالمستودع وضعه في حقل Git Remote Address وانقر فوق Authenticate.

سيتم إنشاء الاتصال ، وستتم تعبئة فروع الريبو في قائمة الفرع المنسدلة.

حدد الفرع المطلوب وأضف مسار النشر للجذر ، وهو / public_html.

ثم ، اضغط على بدء النشر.

استمر في التحقق من شريط التقدم. في غضون بضع دقائق ، سيتم نشر repo الخاص بك على جذر خادم Cloudways.

يمكنك أيضًا الاطلاع على سجلات النشر أيضًا.

من السهل جدًا نشر مواقع Craft CMS على Cloudways Platform.

يجب عليك أيضًا تغيير بيانات اعتماد قاعدة البيانات في ملف .env وإنشاء مفتاح أمان.

إذا حصلت على ملف .env مكرر ، فقم بإعادة تسميته من .

env-example إلى ملف .env.

نظرة عامة على Dashboard الخاصة لـ CraftCMS

الآن بعد أن قمت بتثبيت Craft CMS على خادم Cloudways

مكنك رؤية اسم موقع الويب والقوائم على الجانب الأيسر كما هو موضح في الصورة أدناه.

الآن ، انتقل إلى علامة التبويب Utilities (الأدوات المساعدة)

التي تحتوي على المعلومات الحيوية حول التطبيق / الخادم والمتطلبات الأخرى.

هنا ، سيشير Craft CMS أيضًا إلى الأخطاء في المتطلبات كما هو موضح أدناه:

لا يجب أن تكون مجلداتك المهمة متاحة للجمهور. يجب عليك إعداد webroot.

في صفحة تطبيق Cloudways ، انتقل إلى علامة التبويب إعدادات التطبيق وأضف الحرف / الويب في webroot.

الآن ، سيكون webroot الخاص بك بالكامل public_html / craft / web.

لحل الخطأين الآخرين ، انتقل إلى علامة التبويب إعدادات الخادم والحزم

وقم بتحديث هذه القيم: حد التنفيذ: 120 حد الذاكرة: 256 قم بتحديث الإعدادات الآن

وانتقل إلى لوحة القيادة لمعرفة ما إذا كان ذلك ثابتًا أم لا.

بمجرد الانتهاء من ذلك ، فإن الخطوة التالية هي إعداد PHPinfo ، الذي يحتوي على جميع الحزم والمكتبات وما إلى ذلك.

إذا كنت تستخدم Supervisord ، فسترى الوظائف في مدير قائمة الانتظار.

يوفر Cloudways أيضًا إحصائيات المشرف في المنصة.

بعد ذلك ، سيكون عليك مسح ذاكرة التخزين المؤقت وقواعد البيانات الاحتياطية وإدارة عمليات الترحيل.

انتقل إلى علامة التبويب الإعدادات.

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

هناك علامة تبويب للمكونات الإضافية تحتوي على مئات الإضافات المتقدمة من Craft CMS.

يمكنك العثور على مكونات إضافية لتحسين محركات البحث SEO وتحسين الصور والنماذج والأشكال وغيرها.

الآن ، دعنا نناقش مفهوم القوالب في Craft CMS.

القوالب في Craft CMS

مثل أي أطر PHP ، تستخدم Craft CMS أيضًا Twig في التشكيل لأنها توفر تحكمًا كاملاً في ترميز HTML.

لاحظ أنه عند تنفيذ عنوان URL المرحلي في المتصفح للوصول إلى موقع Craft CMS ، سيكون القالب المعروض هو index.html ، والذي سيأتي من مجلد / قوالب.

يمكنك إنشاء قوالب متعددة باستخدام Twig.

دعنا نقول ، يمكنك إنشاء مجلد يسمى الميزات وداخله إنشاء ملف يسمى cloudways.html.

يمكنك إضافة بعض كود HTML إليها والوصول إليها في متصفح مثل http://mycraftsite.com/features/cloudways.html.

يمكنك مشاهدة تنسيق HTML هناك.

قد يكون لديك سؤال: كيف يمكنني إظهار الإدخالات في المتصفح؟ لهذا ، تحتاج إلى العمل مع عناوين URL الديناميكية.

أولاً ، تحتاج إلى إنشاء قسم الميزات.

نظرًا لأنك لا تقوم بإنشاء صفحة كاملة ولكن قسم محتوى ، يمكنك تعيين نوع القسم -> القناة.

الآن ، في قسم إعداد الموقع ، سيكون تنسيق عنوان URL للإدخال هو الميزات / {slug} ،
ثم أخيرًا في قسم القالب ، ستقوم باستدعاء النموذج

وهو: cloudways.html دعنا نضع بعض إدخالات المحتوى مثل العناوين ونعينها لقسم الميزات.

افتح علامة التبويب إدخالات من اللوحة اليمنى وانقر فوق إنشاء إدخال جديد.

من القائمة المنسدلة ، حدد الميزات / {slug} للتأكد من أن النموذج
يبدو مثل features / cloudways.html.

الآن ، لننشئ بعض إدخالات المحتوى الأخرى ونعينها لقسم الميزات.

انقر فوق علامة التبويب إدخالات في اللوحة اليمنى ، وانقر فوق إنشاء إدخال ، وحدد ميزة من القائمة المنسدلة.

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

احفظ الإدخال.

الآن افتح ملف cloudways.html من القوالب وأضف رمز Twig التالي بإضافة سمة عنوان الإدخال للحصول على محتوى العنوان.

<h1> {{entry.title}} </h1> في المتصفح

هذه هي آلية التشكيل الأساسية للأقسام والمداخل في Craft CMS.

يمكنك اكتشاف ذلك بمزيد من التفاصيل حول مستندات Craft CMS Templating الرسمية.

كيفية تثبيت Craft CMS Plugin

مثل WordPress ، تقدم Craft CMS متجرًا للمكونات الإضافية حيث يمكنك تنزيل الإضافات وإضافتها لمتطلبات المشروع المختلفة.

يمكنك زيارة المتجر والتحقق من المكونات الإضافية التجارية المجانية والمدفوعة ، ويمكنك الدفع مقابلها مباشرة من لوحة التحكم.

الآن السؤال التالي هو: كيفية تثبيت مكون إضافي؟

في لوحة معلومات Craft CMS ، سترى قائمة البرنامج المساعد على الجانب الأيسر.

انقر فوقه ، وستتم إعادة توجيهك إلى متجر المكونات الإضافية.

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

دعنا نختار أي مكون إضافي مجاني مثل “SEO” لعمل مواقع SEO من Craft CMS.

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

انقر فوق تثبيت لتحديث تبعيات الملحن على الفور.

سترى المكون الإضافي مضافًا على لوحة التحكم.

الآن ، دعنا نلقي نظرة على بعض من أفضل مكونات Craft CMS الإضافية التي قد ترغب في تثبيتها على موقع الويب.

أفضل Craft CMS Plugins

تحقق من أفضل مكونات Craft CMS التي تحتاج إلى معرفتها:

Embedded Assets: يسمح لك هذا المكون الإضافي بجعل موقعك رائعًا ومخصصًا عن طريق إضافة صور

Insta و Youtube وفيديو Vimeo ومشاركات Twitter وخرائط Google ، إلخ

Craft Commerce: هو مكون إضافي قوي للتجارة الإلكترونية يساعد المستخدمين على
إنشاء مواقع إلكترونية متقدمة للتجارة الإلكترونية في غضون دقائق.

يوفر سهولة في بناء متاجر التجارة الإلكترونية الحرفية CMS المحسنة وهو قابل للتخصيص أيضًا.

SEOMatic: هذا البرنامج المساعد ضروري لاحتياجات كبار المسئولين الاقتصاديين الفنية.

فهو يجمع بشكل مثالي مع هندسة Craft CMS ويسهل تقنيات تحسين محركات البحث على الصفحة وخارجها.

SuperTable: هل تشعر بالملل من الحقول النصية النموذجية؟
سيستخدم هذا المكون الإضافي بنية الحقل الأصلي Craft

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

ImageOptimize: يتيح لك هذا المكون الإضافي إنشاء صور محسنة
وسريعة الاستجابة من الأصول تلقائيًا.
إنه يعمل بشكل مثالي مع تحسين Craft CMS الأصلي أيضًا.

Blitz: يستخدم Craft Yii2 كإطار خلفية ويرث نظام التخزين المؤقت أيضًا.
لتوسيعه قليلاً والعمل مع مجموعات مكدسة مختلفة مثل Jamstack

يمكنك استخدام Blitz لإنشاء ذاكرة تخزين مؤقت للصفحات المسطحة
وتعزيز TTFBs ووقت التحميل بالرغم من ذلك.

Amazon S3: يمكن حفظ الأصول مباشرة إلى التخزين السحابي المطلوب
مثل Amazon S3 و Google Cloud و DigitalOcean.

سيخزن هذا البرنامج المساعد بيانات الأصول إلى S3.

الكلمات الأخيرة

في هذه المقالة ، ناقشنا التفاصيل حول ما هو Craft CMS وكيف يختلف عن CMSes التقليدية.

لن تجد أي مواضيع وقوالب لإنشاء مواقع ويب في Craft CMS.

بدلاً من ذلك ، ستتمتع بحرية تشكيله بالطريقة التي تريدها.

إذا كنت تقوم بإنشاء مواقع باستخدام Craft CMS ، فسأقترح عليك البدء
في تثبيت / ترحيل مواقع Craft CMS الخاصة بك إلى Cloudways Platform

والاستفادة من أفضل بيئة استضافة سحابية.

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