Ali Alrohia

يسمح لك المنتج متعدد الأنواع في ووكومرس بتقديم مجموعة من الأنواع لمنتج ما، مع التحكم بالسعر والمخزون وغيرها لكل نوع، ويُمكن استخدام هذا النوع لمنتجات عديدة، مثل منتجات الملابس التي توفر مقاسات وألوان مختلفة لنفس المنتج. إضافة منتج متعدد الأنواع ﻹضافة منتجات متعددة اﻷنواع يجب علينا ضبط نوع المنتج ومن ثم إضافة السمات واﻷنواع وبياناته. ضبط نوع المنتج توجه إلى "إضافة منتج جديد" في "المنتجات" أو اضغط على "جميع المنتجات" ثم تحرير أحد المنتجات الموجودة مُسبقًا. اختر "منتج متعدد الأنواع" من القائمة المنسدلة لبيانات المنتج. إضافة سمات لاستخدامها مع أنواع المنتج أضف سمات ضمن قسم "السمات" قبل إنشاء أنواع للمنتج، وهنا يمكنك استخدام سمات عامة على مستوى المتجر أو تعريف سمات خاصة بمنتج ما. السمات العامة اتبع الخطوات التالية لاستخدام السمات العامة على منتجك: أنشئ سمةً عامةً أولًا. يمكنك اختيار السمة العامة من القائمة المنسدلة ولا تنسَ الضغط على "إضافة". اختر "إضافة الجميع" لإضافة جميع القيم للمنتج متعدد الأنواع. الأهم هو اختيار "تُستخدم في الأنواع" لاستخدام هذه السمات مع الأنواع. اختر "حفظ السمات". سمات مخصصة اتبع الخطوات التالية لإضافة سمة جديدة: اختر "سمة مُخصصة للمنتج" ثم اضغط على "إضافة". امنح اسمًا للسمة (مثلًا الحجم). اضبط القيم مع الفصل بينها بإشارة عمود شاقولي "|" (مثل: كبير|وسط|صغير). تفعيل خيار "تُستخدم في الأنواع". اختر "حفظ السمات". إضافة الأنواع يجب عليك التوجه إلى قسم "الأنواع" ضمن بيانات المنتج، لكن بعد إنشاء السمات وحفظها. إضافة نوع يدويا لكي تتمكن من إضافة نوع يدويًا، لا بُدَّ من اتباع خطوات متتابعة، وهي كالتالي: اختر "إضافة نوع" من القائمة المنسدلة، واختر "تطبيق". اختر السمات للنوع الذي تريد إضافته، ولتغيير أي بيانات إضافية، اضغط على أيقونة المثلث لتوسيع النوع. يمكنك تعديل أي بيانات متوفرة، والحقل الوحيد المطلوب هو حقل السعر الافتراضي. اختر "حفظ التغييرات". إنشاء الأنواع من كل السمات اختر "إنشاء الأنواع من كل السمات" ليُنشئ ووكومرس كل الأنواع الممكنة باستخدام السمات وقيمها، ثم اضغط على "تطبيق". سوف يُنشئ نوع جديد لكل احتمال ممكن من قيم السمات (العدد الأعظمي 50 في كل مرة)، وإن كنت تملك احتمالات بعدد أكبر، فيمكنك تشغيل هذا الخيار مرةً أخرى، فعلى سبيل المثال، إن كانت لديك سمتان، هما اللون (مع قيم الأخضر والأزرق) والحجم (مع قيم الكبير والصغير)، فسوف يُنشئ الأنواع التالية: أزرق كبير. أخضر كبير. أزرق صغير. أخضر كبير. تعديل العديد من الأنواع إن كنت تملك أكثر من 15 نوع، فاستخدم زر التنقل للخلف والأمام ضمن القائمة، وفي كل مرة تنتقل فيها إلى مجموعة أنواع جديدة، ستُحفظ تغييرات المجموعة السابقة، مما يضمن أن كل التغييرات محفوظة. الخيارات الافتراضية اضبط الخيارات الافتراضية التي تفضلها، وفي هذا المثال لا توجد قيم افتراضية مضبوطة، وبالتالي يستطيع المستخدم انتقاء أي لون وحجم مباشرةً من صفحة المنتج. إن كنت ترغب في أن يكون نوع معين مُختارًا عند زيارة العميل لصفحة المنتج، فيجب عليك اختيار القيم الافتراضية من القوائم المنسدلة، مما يسمح بظهور زر "الإضافة إلى السلة" تلقائيًا ضمن صفحات أنواع المنتج. يمكنك ضبط القيم الافتراضية فقط بعد إنشاء نوع واحد على الأقل. إضافة بيانات النوع يمكن لكل نوع أن يمتلك الخصائص التالية: مفعل: تفعيل أو تعطيل النوع. منتج قابل للتنزيل: إن كان هذا النوع هو منتج قابل للتنزيل. منتج افتراضي: إن كان هذا المنتج غير فيزيائي أو أنه لا يحتاج إلى شحن، بحيث تُزال إعدادات الشحن عند تفعيله. السعر الافتراضي: اضبط السعر لهذا النوع في هذا الحقل وهو خيار مطلوب. سعر التخفيض: اضبط سعر هذا النوع بعد الخصم، وهو إعداد اختياري. حالة الضريبة: لإعداد الضرائب، إما أن يكون المنتج خاضعًا للضريبة أو الشحن فقط أو بلا أي ضريبة. فئة الضريبة: فئة الضريبة لهذا النوع، وهو حقل مفيد إن كنت توفِّر أنواعًا تتوزع على فئات ضريبية مختلفة. كمية المخزون: يظهر عند تفعيل خيار "إدارة المخزون" ويتيح لك إمكانية السماح بالطلبات المسبقة لهذا النوع والذي عند تفعيله يمكن أن تنخفض كميته لقيمة سالبة. السماح بالطلبات المسبقة يظهر عند تفعيل خيار "إدارة المخزون"، وعندما يصل مستوى النوع هذا إلى قيمة معينة، سيُرسَل إشعار بريد إلكتروني إلى حسابك؛ أما وفي حال عدم ضبط أي قيمة، فستُستخدم القيمة العامة للعتبة. عدد المنتجات المتبقية لوضع حالة مخزون المنتج كمنخفض المخزون. ملفات قابلة للتنزيل: يظهر هذا الحقل عند تفعيل خيار "منتج قابل للتنزيل"، فهو يسمح لك بإضافة ملف أو ملفات ليتمكن العملاء من تنزيلها. حدود التنزيل: يظهر هذا الحقل عند تفعيل خيار "منتج قابل للتنزيل" ويحدد عدد المرات التي يستطيع فيها العميل تنزيل الملف. انتهاء صلاحية التنزيل: يظهر هذا الحقل عند تفعيل خيار "منتج قابل للتنزيل" ويضبط عدد الأيام التي تنتهي بعدها صلاحية التنزيل. إدارة المخزون يُمكن إدارة المخزون للمنتج متعدد الأنواع على مستوى المنتج والنوع، لذلك اختر كيف تريد إدارة المخزون عبر تفعيل خيار "إدارة المخزون" ضمن قسم المخزون. تتوفر الخيارات التالية إن اخترت إدارة المخزون على مستوى المنتج: SKU: اضبط هذا الحقل إن كنت تستخدم SKU، وإلا اتركه فارغًا لاستخدام رمز SKU الخاص بالمنتج. إدارة المخزون؟ فعّل هذا الخيار لإدارة المخزون على مستوى النوع. كمية المخزون: تظهر عند اختيار "إدارة المخزون" لتتمكن من إدخال كمية المنتج من نوع معين، أو اتركه فارغًا لاستخدام إعدادات مخزون المنتج. السماح بالطلبات المسبقة: اختر كيف تريد التعامل مع الطلبات المسبقة. عدد المنتجات المتبقية لوضع حالة مخزون المنتج كمنخفض المخزون: اختر متى يصلك إشعار من ووكومرس أن هذا النوع شارف على الانتهاء. ** يُباع مفردًا**: يسمح هذا الخيار ببيع عنصر واحد فقط لكل طلب (يُستخدم هذا الخيار للمنتج نفسه، فأنت لا تستطيع ضبط نوع مُعين ليُباع مفردًا فقط). إن لم تُضبط عتبة المخزون المنخفض، فسيستخدم المتجر الخيار الافتراضي، ويُمكن ضبط القيم الافتراضية ضمن تبويب المخزون للمنتجات في إعدادات ووكومرس. يسمح لك اختيار إدارة المخزون للأنواع فرديًا بتعديل نفس الخواص لكل نوع، ويُمكن تطبيق حالة المخزون لجميع الأنواع، لتكون متوفرةً في المخزون أو غير متوفرة في المخزون، وتستطيع تحديث الأنواع بالجملة. الشحن يندرج تحت خانة الشحن مجموعة من الإعدادات الواجب ضبطها، وهي: الوزن: وزن النوع، ويمكنك الإبقاء عليه فارغًا ليستخدم وزن المنتج. الأبعاد: الارتفاع والعرض والطول للنوع أو اترك هذه الحقول فارغةً لتُستخدم بيانات المنتج نفسها. فئة الشحن: يُمكن أن تؤثر فئة الشحن على رسوم الشحن، ويجب عليك ضبط هذه الفئة في حال كانت مختلفةً عن المنتج. منتجات مرتبطة للمنتجات المرتبطة أنواع عدة، وهي: منتجات يوصى بها. منتجات تثقيفية. منتجات مُجمعة. إن لم تكن حقول SKU والوزن والأبعاد وحقول المخزون مضبوطةً بعد، فسينعكس ذلك على القيم المُسندة للمنتج متعدد الأنواع، كما يجب عليك ضبط حقل السعر لكل نوع. إضافة صورة إلى النوع لإضافة صورة إلى النوع، اتبع الخطوات التالية: يجب عليك أولًا توسيع النوع. اضغط على بديل الصورة الأزرق. اختر الصورة التي ترغب في استخدامها. اضغط على "حفظ". التعديل بالجملة يمكنك تعديل الأنواع بالجملة من خلال اختيار المعلومات التي تريدها من القائمة المنسدلة، وفي هذا المثال يجري تعديل الأسعار لجميع الأنواع. ما الذي يراه العملاء سوف تظهر للعميل ضمن الواجهة الأمامية عند عرض دارات كهربائية متقدمة، قائمة منسدلة لتحديد خيارات النوع منها، وعند اختيار نوع ما، سوف يُعرض لنا النوع بما في ذلك السعر والمنتجات المتوفرة ضمن المخزون. إن حاول المستخدم الضغط على زر "أضف إلى السلة" ذي اللون الرمادي، فستظهر رسالة تطلب منه اختيار بعض السمات، ولن تُعرض صفحة "إضافة إلى السلة" ضمن صفحة أرشيف المنتج، لأنه يجب أولًا اختيار النوع قبل إضافته إلى السلة ضمن صفحة المنتج. وظيفة وسلوك أكثر من 30 نوع إن كان لدى المنتج أكثر من 30 نوعًا محتملًا، فسيكون على العميل اختيار السمات المتوفرة أولًا قبل أن يتمكن من معرفة ما إذا كان المنتج متوفرًا ضمن المخزون أم لا، فعلى سبيل المثال، إن كنت تملك قميصًا متوفرًا بخمسة قياسات وثلاثة ألوان، فسيُنشئ لدينا 125 نوعًا (5×5×5). إن أزلت خمسةً من هذه المنتجات، فسيبقى العميل قادرًا على الاختيار من القائمة في الواجهة الأمامية، لكنه لن يتمكن من معرفة إن كان المنتج غير متوفر إلا بعد اختيار زر "إضافة إلى السلة". يمكنك تجاوز ما سبق من خلال تغيير عتبة التغييرات ضمن Ajax، وهذه وظيفة المطورين، إذ يركز بعضهم على تغيير حدود عدد الأنواع ضمن القائمة المنسدلة للمنتج متعدد الأنواع برمجيًا. ترجمة -وبتصرّف- للمقال Variable Product. اقرأ أيضًا إعداد صفحات المتجر الضرورية وإضافة منتجات جديدة في متجر ووكومرس إدارة فئات المنتجات، الوسوم، فئات الشحن، والسمات في متجرك الإلكتروني على منصة WooCommerce ضبط إعدادات المنتجات (Products) لمتجرك الإكتروني على منصة WooCommerce كيفية استخدام مكون ووكومرس جميع المنتجات كيفية ضبط خيارات شحن المنتجات في متجر ووكومرس كيفية التعامل مع منتج رقمي قابل للتنزيل في ووكومرس

يشرح هذا المقال كيفية إضافة منتج لمتجرك في ووكومرس وكيفية إدارة هذا المنتج من حيث النوع والكمية والسعر وغيرها من أمور. إضافة منتج لنتعرف أولًا على كيفية عمل وسوم وتصنيفات وسمات المنتج في ووكومرس قبل الخوض في طريقة إضافة أول منتج لك. تصنيفات المنتج تعمل تصنيفات المنتج ووسومه تقريبًا بنفس آلية عمل التصنيفات والوسوم عند كتابة مقالات في ووردبريس، ويمكنك إنشاء وتعديل واختيار هذه التصنيفات والوسوم في أي وقت. يمكنك العمل على ذلك عند إنشاء منتج لأول مرة أو عند تعديله أو عند إنشاء تصنيف أو وسم. السمات يمكنك إضافة السمات لكل منتج على حدة، كما يمكنك ضبط سمات شاملة لاستخدامها ضمن كامل المتجر. أنواع المنتجات يمكنك البدء بإضافة المنتجات بعد ضبط التصنيفات والسمات وعملية إدارة المخزون، وأول ما يجب عليك تحديده هو نوع المنتج، وفيما يلي أنواع المنتجات في ووكومرس. منتجات بسيطة: تغطي الكمية الأكبر من المنتجات التي يمكن أن تبيعها، إذ تُشحن المنتجات البسيطة دون وجود أي خيارات خاصة بها، والمثال على ذلك هو الكتب. منتجات مُجمعة: هي مجموعة من المنتجات المرتبطة ببعضها، يمكن شراء كل واحد منها على حدة، وتتألف من منتجات بسيطة فقط، مثل مجموعة من العصائر. منتجات افتراضية: هي منتجات لا تحتاج إلى شحن، ويمكن أن تكون على شكل خدمة. عند تفعيل هذا الخيار، ستُعطل جميع الحقول المرتبطة بالشحن، مثل أبعاد الشحن؛ كما لن تُفعّل حاسبة الشحن ضمن صفحتي السلة وإتمام الطلب. منتجات قابلة للتنزيل: يُفعِّل هذا الخيار حقولًا إضافيةً تستطيع من خلالها توفير ملف قابل للتنزيل، إذ يُعطى المستخدم بعد عملية الشراء ملفًا قابلًا للتنزيل على شكل رابط ضمن رسائل إشعار البريد الإلكتروني، والمثال على ذلك هو المنتجات الرقمية. منتج خارجي: هو منتج تعرضه ضمن موقعك وتشرح مواصفاته لكنه يُباع في مكان آخر. منتج متعدد الأنواع: هو منتج يمتلك مجموعةً من الأنواع، إذ يمتلك كل نوع منها رمز SKU وسعر وخيارات مخزون خاصة به، فعلى سبيل المثال، يمكن أن يتوفر قميص بألوان وأحجام مختلفة. تُضاف الأنواع الأخرى عادةً من قبل إضافة خاصة، فعلى سبيل المثال، يمكن لإضافة Woocommerce Subscriptions أن تضيف أنواع منتج جديدة، كما هو الحال مع إضافة Woocommerce Bookings. رمز المنتج SKU رمز وحدة الاحتفاظ بالمخزون SKU هو رمز فريد يحدِّد للمنتج بهدف تتبعه ضمن المخزون، ويقبل هذا الرمز حتى 255 محرف التي يمكن أن تتضمن قيم حرفيةً ورقمية، وبعض الرموز الخاصة، وتوجد دالة في ووردبريس sanitize_text_field تتحقق من دخل هذا الحقل، مما يعني أن رموز HTML ومحارف UTF غير الصالحة ستُزال عند حفظ المنتج. إضافة منتج بسيط تشبه إضافة منتج بسيط عملية كتابة المقال في ووردبريس، وعليك اتباع الخطوات التالية لإنجاز ذلك: توجه إلى "المنتجات" ومنها اختر "إضافة منتج جديد" لتظهر لك واجهة مشابهة لواجهة إضافة مقال. أدخل عنوان المنتج ووصفه. توجه إلى لوحة "بيانات المنتج" واختر "منتج قابل للتنزيل" (منتج رقمي) أو "افتراضي" (خدمة) إن كانت هذه الخيارات تنطبق على منتجك. بيانات المنتج إن جدول حقول بيانات المنتج هو المكان الذي عليك إضافة معظم البيانات المهمة إليه والمتعلقة بمنتجك. القسم العام السعر: السعر الافتراضي: السعر العادي للمنتجات. سعر التخفيض: السعر بعد تطبيق الخصم على سعر المنتج، إذ يمكنك جدولة هذا السعر ليكون متوفرًا في تواريخ محددة ولمدة معينة. فمثلًا، يمكن أن ينتهي الخصم في الساعة 11:59 مساءً في تاريخ معين. الضرائب: حالة الضريبة: يمكن أن تخضع الضرائب لحالة الشحن فقط، ويمكن ألا تتواجد أبدًا. فئة الضريبة: اختر فئة الضريبة التي سوف تُطبق على هذا المنتج. قسم المخزون يسمح لك قسم المخزون بإدارة مخزون المنتج فرديًا واختيار السماح أو عدم السماح بالطلبات المسبقة وغيرها الكثير، فهو يسمح لك ببيع المنتجات ويسمح للعملاء بإضافة هذه المنتجات إلى سلالهم. يجب اختيار: تمكين إدارة المخزون على مستوى المنتج ضمن إعدادات مخزون المنتج، وإلا لن يظهر سوى خيار "حالة المخزون" ضمن قسم المخزون لبيانات المنتج. عندما يكون الخيار تمكين إدارة المخزون على مستوى المنتج مُعطلًا، فستكون مسؤولًا عن تحديث حالة المخزون. الخيارات التي تظهر عند تفعيل تمكين إدارة المخزون على مستوى المنتج هي: أدخل كمية المخزون ليعمل ووكومرس على إدارة المخزون تلقائيًا وتحديث حالة المخزون تلقائيًا كمتوفر في المخزون أو غير متوفر في المخزون أو متاح للطلب المسبق. عدد المنتجات المتبقية لوضع حالة مخزون المنتج كمنخفض المخزون: أدخل رقمًا ليصلك إشعاره عند وصول عدد المنتجات لهذا الرقم. اختر: "تُباع مفردة" لتقييد شراء المنتج، بحيث يكون منتجًا واحدًا في كل طلب. قسم الشحن الوزن: وهو وزن المنتج. الأبعاد: طول وعرض وارتفاع المنتج. فئة الشحن: تُستخدم فئات الشحن من قِبل طرق شحن مُعينة لتجميع المنتجات المتشابهة. قسم المنتجات المرتبطة يمكنك الترويج لمنتجات مختلفة قريبة من هذا المنتج، وذلك من خلال إضافته لصفحة المنتج عبر البحث والاختيار من القائمة المنسدلة. تُعرض: المنتجات التي يُوصى بها ضمن صفحة تفاصيل المنتج، وهي منتجات ترغب في تشجيع المستخدم على شرائها بالاعتماد على المنتج الذي يعاينه حاليًا، فعلى سبيل المثال، إن كان المستخدم يُعاين صفحة عرض منتجات القهوة، فيمكنك عرض إناء الشاي في نفس الصفحة كمنتج يُوصى به. المنتجات التسويقية: هي منتجات تُعرض ضمن السلة ومرتبطة بمحتوى سلة المستخدم، فعلى سبيل المثال، إن أضاف المستخدم لعبةً إلى السلة، فيمكنك اقتراح شراء الجزء الثاني من هذه اللعبة عند وصول المستخدم إلى صفحة السلة. قسم السمات يمكنك ضبط التفاصيل لمنتج ما ضمن صفحة السمات، وستجد صندوق اختيار شامل يتضمن مجموعة السمات التي أنشأتها. بعد اختيارك لسمة ما من صندوق الاختيار، اضغط على "إضافة"، وطبق الشروط المرتبطة بالسمة ضمن ذلك المنتج، ويمكنك إخفاء السمة ضمن الواجهة الأمامية عن طريق عدم اختيار "عرض في صفحة المنتج"، كما يُمكن أيضًا تطبيق السمات المُخصصة من خلال اختيار "سمة مخصصة للمنتج" من صندوق الاختيار، إذ تُضاف هذه السمات على مستوى المنتج ولن تكون متوفرةً ضمن المنتجات الأخرى أو أدوات التنقل ضمن الموقع. قسم الإعدادات المتقدمة ملاحظة عملية الشراء: أدخل ملاحظةً اختياريةً لتُرسلها للعميل بعد شرائه المنتج. ترتيب المنتج في القائمة: يمكنك تخصيص ترتيب هذا العنصر ضمن القائمة. تفعيل المراجعات: تفعيل أو تعطيل مراجعات العملاء لهذا المنتج. الوصف القصير للمنتج أضف ملخصًا عن المنتج والذي يظهر بجانب صورة المنتج ضمن صفحة العرض ويظهر الوصف الطويل ضمن تبويب وصف المنتج. الفئات تجد على الجانب الأيسر من لوحة إضافة منتج جديد تصنيفات المنتج التي يمكنك وضع منتجك فيها كما هو الحال في مقال عادي، كما يمكنك تعيين وسوم المنتج بنفس الطريقة. إضافة صور ومعرض صور المنتج في ووكومرس تُضبط وتُقاس الصور بالبكسل، مثل صورة بحجم 600×600 بكسل، وانتبه إلى أن الرقم الأول يُشير إلى العرض والثاني إلى الارتفاع. يُنصح بتنظيم صورك ضمن مجلد والاحتفاظ بنسخة احتياطية في مجلد خارج الاستضافة، وذلك في حال ظهرت مشكلة في المستقبل أو حذفت صورةً وأردت استعادتها. أنواع الصور يستخدم ووكومرس ثلاثة أنواع من صور المنتجات في مواقع مختلفة ولأغراض مختلفة: صورة المنتج الرئيسية: هي الصورة ذات الحجم الأكبر ويُشار إليها بالصورة الرئيسية ضمن صفحة تفاصيل المنتج. صور الفهرس: صور ذات حجم متوسط تظهر ضمن حلقات المنتج مثل صفحة المتجر وصفحة تصنيف المنتج والمنتجات المرتبطة وغيرها. الصور المصغرة للمنتج: هي الصور ذات الحجم الأصغر تُستخدم ضمن السلة والودجات والصور المُصغرة للمعرض أسفل الصورة الرئيسية للمنتج. إضافة صور المنتج والمعارض إن إضافة صور المنتج والمعارض هي خيارات متوفرة في الجهة اليسرى من صفحة إضافة المنتج أو تعديله ضمن المتجر. صورة المنتج صورة المنتج هي الصورة الرئيسية لمنتجك، إذ يُعاد استخدامها بأحجام مختلفة ضمن متجرك، ويمكنك وضعها باختيار "تعيين صورة المنتج". اختر صورةً موجودةً من مكتبة الوسائط أو ارفع صورةً جديدةً. حذف صورة المنتج: يمكن إضافة صورة المنتج أو إزالتها أو تعديلها بنفس طريقة الصور الرئيسية للمقالات والصفحات. معارض المنتج سنتحدث عن كيفية إضافة وترتيب وإزالة الصور من معارض صور المنتجات: إضافة صورة لمعرض المنتج تعرض معارض المنتج جميع الصور المرتبطة مع المنتج من خلال صندوق معرض المنتج، وتستطيع إنشاء معرض صور بنفس الطريقة المُتبعة في إضافة صورة المنتج، لكن باستخدام صندوق "معرض صور المنتج". إعادة ترتيب الصور ضمن معرض الصور يمكن إعادة ترتيب صور المعرض بالسحب والإفلات، أي عبر تحريكها بحرية. إزالة صور من معرض الصور حرك مؤشر الفأرة فوق الصورة التي تريد إزالتها، ثم اضغط على أيقونة x. واجهة المستخدم يستطيع العميل رؤية صورة المنتج والمعرض بعد إضافتها ضمن متجرك. يستطيع العميل تقريب الصور ليحصل على نظرة أوضح عن المنتج عند تحريك مؤشر الفأرة فوق الصورة. كما يستطيع العملاء الضغط على أيقونة التكبير في الزاوية العلوية اليسرى. سوف تظهر نافذة مُنبثقة للعملاء تعرض الصورة بشكل أوضح مع خلفية داكنة في حال وُجدت خلفية، ويستطيع العميل الانتقال بين الشرائح المختلفة. تعمل إيماءات اللمس على الهاتف الذكي أيضًا. ضبط خيارات عرض المنتج وتميزه يمكنك ضمن لوحة النشر التحكم بخيار "عرض المنتج في" من أجل ضبط خيارات عرض منتجك. المتجر ونتائج البحث: مرئي في كل مكان من نتائج البحث وصفحات المتجر والتصنيفات. المتجر فقط: مرئي فقط ضمن صفحات المتجر وصفحات التصنيفات، لكن ليس في نتائج البحث. نتائج البحث فقط: مرئي ضمن نتائج البحث، لكن ليس في صفحة المتجر أو صفحات التصنيف. مخفي: مرئي فقط ضمن صفحة المنتج وليس في أي صفحة أخرى. يمكنك تحديد إن كان المنتج مميزًا أم لا ضمن صفحات التصنيفات والمنتجات المرتبطة بوضعه. فعلى سبيل المثال، يمكنك وضع علامة مميزة ضمن جميع الحزم التي تبيعها. إضافة منتج مجمع يُنشأ المنتج المجمع تقريبًا بنفس الطريقة التي يُنشأ فيها المنتج البسيط، والمنتج المجمع هو قائمة بالمنتجات الأخرى الموجودة ضمن متجرك، لذلك لا يملك هذا المنتج سعرًا أو رقمًا لتتبعه ضمن المخزون في متجرك. ولإنشاء هذا النوع من المنتجات، اختر "منتج مجمع" من القائمة المنسدلة لنوع المنتج. إنشاء منتج مجمع توجه إلى "المنتجات" ثم اضغط على "إضافة منتج جديد". أدخل عنوانًا للمنتج المجمع مثل "أدوات المدرسة". توجه إلى "بيانات المنتج" واختر "منتج مجمع" من القائمة المنسدلة، لتختفي بعض الحقول مثل حقل السعر، وهذا طبيعي لأن المنتج المجمع هو تجميعة من المنتجات الموجودة ضمن المتجر على ووكومرس، والتي تمتلك مسبقًا هذه المعلومات. انشر. ما زال المنتج المجمع منتجًا فارغًا، ولإضافة منتجات لهذا المنتج عليك: إنشاء منتجات وإضافتها إليه. أو إضافة منتجات موجودة سابقًا. يمكنك إنشاء المنتجات البسيطة أولًا ثم إضافتها إلى المنتج المجمع لاحقًا، أو يمكنك إنشاء المنتج المجمع وإضافة المنتجات لاحقًا؛ مما يوفر لك مرونةً في إضافة المنتجات البسيطة لأكثر من منتج مُجمع. إضافة منتجات إلى المجموعة إليك فيما يلي الخطوات الواجب اتباعها لإضافة المنتجات إلى المجموعة: توجه إلى "المنتجات" ثم اضغط على "إضافة منتج جديد". اختر المنتج المُجمع الذي تريد إضافة منتجات إليه. توجه إلى أسفل الصفحة إلى بيانات المنتج واضغط على "المنتجات المرتبطة". اختر "المنتجات المجمعة" وابحث عن المنتج من خلال كتابة اسمه. اضغط على المنتجات التي ترغب بإضافتها. اضغط على "تحديث". تستطيع سحب وإفلات المنتجات لإعادة ترتيبها، وحال الضغط على زر "تحديث" سوف يظهر الترتيب الجديد ضمن صفحة المنتج. إضافة منتج افتراضي تستطيع عند إضافة منتج بسيط تفعيل خيار "منتج افتراضي" ضمن لوحة بيانات المنتج. أما في المنتج متعدد الأنواع، فسوف يظهر هذا الخيار ضمن كل نوع. تفعيل هذا الخيار يُعطل جميع الحقول المرتبطة بالشحن، كما لن تُفعَّل حاسبة الشحن ضمن السلة أو صفحة إتمام الطلب. إضافة منتج قابل للتنزيل يمكنك تفعيل خيار "منتج قابل للتنزيل" الموجود ضمن لوحة بيانات المنتج عند إضافة منتج بسيط، وهذا يُضيف حقلين جديدين: رابط الملف: مسار أو رابط الملف القابل للتنزيل. حدود التنزيل: تحديد عدد المرات التي يستطيع فيها العميل تنزيل الملف. يمكنك إبقاء الخيار فارغًا لتفعيل عدد تنزيلات غير محدود. تتضمن المنتجات القابلة للتنزيل تكاليف شحن. فعلى سبيل المثال، قد تتوفر نسخة ورقية مع النسخة الرقمية للكتاب، ويمكنك أيضًا تفعيل خيار المنتج الافتراضي إن كان المنتج القابل للتنزيل غير قابل للشحن. إضافة منتج خارجي اختر من القائمة المنسدلة خيار "منتج خارجي"، مما يُغير بيانات المنتج قليلًا، ليزيل أولًا قسم الشحن من اليمين ويضيف بعدها حقلين جديدين ضمن القسم العام، وهما رابط المنتج ونص الزر. إن حقل رابط المنتج هو الوجهة التي يستطيع ضمنها العملاء شراء المنتج، ويسمح لك نص الزر تغيير نص "إضافة إلى السلة" إلى العبارة التي تُفضلها. إضافة منتج متعدد الأنواع هذا النوع من المنتجات هو الأكثر تعقيدًا، فهو يسمح لك بتعريف أنواع مختلفة عن منتج واحد ليمتلك كل نوع رمز SKU وسعرًا ومخزونًا خاصًا به. تكرار المنتج يمكنك توفير الوقت عبر استخدام منتج موجود مسبقًا وتكراره لإنشاء منتجات متشابهة مع اختلاف في الصفات أو النوعية. ولتفعيل هذا، يجب عليك التوجه إلى "المنتجات" واختيار المنتج الذي تريد تكراره، ثم الضغط على "تكرار". حذف منتج لحذف منتج: التوجه إلى "المنتجات". العثور على المنتج الذي تريد حذفه. حرّك مؤشر الفأرة فوق اسم المنتج ثم اضغط على "حذف". تعيين منتج على أنه مميز لتعيين منتج على أنه مميز، توجه إلى "جميع المنتجات" ضمن "المنتجات"، وانقر على النجمة في عمود المميز، كما يمكنك الضغط على "تحرير سريع" ثم الضغط على خيار "مميز". فرز وترتيب المنتجات يسمح لك مُخصص ووكومرس بالإضافة للخيارات المذكورة في الأسفل بتخصيص فهرس المنتجات. فرز المنتجات استخدم ميزة الفرز للحصول على عدد المنتجات وعرض المنتجات حسب النوع، أو لمعرفة أي المنتجات قابلة للطلب المسبق وأيها غير متوفر في المخزون. توجه إلى "المنتجات". اختر التصنيف ونوع المنتج وحالة المخزون أو أي تشكيلة من الثلاثة. اضغط على "تصفية". الفرز حسب التصنيف استخدم وظيفة الترشيح حسب التصنيف لفرز المنتجات بالاعتماد على التصنيف، وانتبه إلى أنه عندما يملك الموقع أقل من 100 تصنيف، فسوف يظهر مرشح التصنيف كقائمة منسدلة، لكن عندما يصل العدد لمئة، فسوف يظهر حقل بحث بدلًا من القائمة. وعلى عكس القائمة المنسدلة، فإن حقل البحث لن يعرض جميع التصنيفات، بل سيكتفي بالتصنيفات المرتبطة بالمنتجات فقط. ترتيب المنتجات الترتيب مختلف عن الفرز، وهنا تستطيع سحب وإفلات المنتجات لإعادة ترتيبها. توجه إلى "المنتجات". اختر "الترتيب". اختر التصنيف ونوع المنتج وحالة المخزون أو تشكيلة مما سبق. اضغط على "تصفية". يمكنك سحب وإفلات المنتجات بالطريقة التي تريدها. معرف المنتج تظهر الحاجة لمعرف المنتج في بعض الأحيان عند استخدام رمز قصير أو روابط أو ودجات، وللاطلاع على معرف المنتج، توجه إلى "المنتجات" وحرك مؤشر الفأرة فوق المنتج الذي تريد الاطلاع على معرفه ليظهر رقم المعرف. السماح بالطلبات المسبقة اختر ما إذا كنت تريد السماح بالطلب المسبق للمنتجات من القائمة المنسدلة، فإن كنت تدير منتجًا، فيجب عليك إدارة مخزونه للسماح بالطلبات المسبقة. عند تفعيل خيار "إدارة المخزون"، سوف تظهر ثلاث خيارات ضمن القائمة المنسدلة "السماح بالطلبات المسبقة": السماح: يسمح هذا الخيار بالطلبات المسبقة دون تقديم أي تنبيه عن أن المنتج غير متوفر في المخزون. لا تسمح: سيكون هناك تنبيه على صفحة المنتج بأن المنتج غير متوفر في المخزون، وفي حال تفعيل إشعارات المخزون، يمكن للعميل إرسال بريده إلكتروني ليصله إشعار. السماح مع تنبيه العميل: سيكون هناك تنبيه "متوفر للطلب المسبق" ضمن صفحة المنتج. يجب أن تكون حالة المخزون "متوفر في المخزون" للسماح بالطلب المسبق للمنتج حتى لو كانت الكمية صفر، وعند السماح بالطلبات المسبقة، يمكن أن تُصبح كمية المخزون أقل من صفر عند شراء مسبق للمنتج. استخدم الإشعارات المتقدمة لتُساعدك على إشعار شخص آخر غير مدير المتجر عند إرسال طلبات مسبقة، وانتبه إلى أنه يجب أولًا البحث عن الطلبات المستقبلة للمنتج المطلوب، ثم إتمام الطلبات القديمة عن طريق البحث عن المنتج الموجود ضمن شاشة الطلب، ثم الترتيب حسب التاريخ. تتقاضى معظم بوابات الدفع ثمن المنتج مباشرةً، لكن إن أردت التمهل في تقاضي ثمن المنتج من العملاء إلى حين توفر المنتج ضمن المخزون، فيجب عليك استخدام قائمة انتظار ووكومرس لإرسال بريد إلكتروني للمستخدمين لإعلامهم بأن المنتج أصبح متوفرًا ضمن المخزون مع رابط الشراء. الأسئلة المتكررة ما هو الحجم المثالي للصورة مع ووكومرس؟ يُنصح باستخدام صورة بحجم 800×800 على الأقل، وهذا ينطبق على الصورة الرئيسية وصورة الفهرس والصورة المُصغرة، مع الإشارة إلى أن الصور ذات الحجم الأكبر أفضل، لا سيّما إن كنت تبيع منتجات ذات تفاصيل دقيقة. يمكنك استخدام صور ذات دقة أقل، لكن تذكر أن الصور عنصر أساسي للبيع والترويج للمنتجات والخدمات، لذا يجب أن تكون ذات جودة عالية. ماذا يحدث إن نسيت ضبط حجم الصورة؟ يضبط ووكومرس تلقائيًا حجم الصورة، ويولد صورًا للعملاء ليروها في الواجهة الأمامية. ما هو صندوق الصور في ووكومرس؟ هي ميزة تسمح بفتح الصورة أو الصور أمام خلفية داكنة مع تسليط الضوء على الصور. ما هي ميزة تقريب الصورة في ووكومرس؟ إن كنت تبحث عن منتج وحرّكت مؤشر الفأرة فوقه، فستلاحظ أن الصورة تصبح أقرب إلى مكان المؤشر على الصورة، وهذا يُساعد في الحصول على نظرة سريعة أقرب على بعض المنتجات التي تُعَد التفاصيل فيها مهمةً ولن تظهر في الحجم العادي للصورة. كيفية ضبط أبعاد الصورة في قالب مُخصص؟ إن كنت تبني قالبًا مُخصصًا، فيجب عليك ضبط إعدادات الصورة تلقائيًا. لماذا لا أجد إعدادات صور المنتج الموصوفة في مُخصص ووكومرس في الأعلى؟ يُمكن أن يحصل هذا لسببين: أما لأنك تستخدم إصدار من ووكومرس أقدم من 3.3. أو أن القالب يدعم حجمًا معينًا للصور، ويمكن حل هذه المشكلة باستخدام الشيفرة ضمن تحسينات صور ووكومرس. هل ترغب في متجر ووكومرس احترافي لبدء تجارتك الإلكترونية؟ احصل على خدمات مميزة لإنشاء متجرك الإلكتروني وتحسينه وإدارته على خمسات أنشئ متجر ووكومرس الآن ترجمة -وبتصرّف- للمقالين Adding and Managing Products و Adding Product Images and Galleries. اقرأ أيضًا إعداد صفحات المتجر الضرورية وإضافة منتجات جديدة في متجر ووكومرس إدارة فئات المنتجات، الوسوم، فئات الشحن، والسمات في متجرك الإلكتروني على منصة WooCommerce ضبط إعدادات المنتجات (Products) لمتجرك الإكتروني على منصة WooCommerce كيفية استخدام مكون ووكومرس جميع المنتجات كيفية ضبط خيارات شحن المنتجات في متجر ووكومرس كيفية التعامل مع منتج رقمي قابل للتنزيل في ووكومرس

سوف نستعرض في هذا المقال جميع الإعدادات المتوفرة ضمن ووكومرس WooCommerce، وسوف تجد معلومات كافية عن كيفية ضبط الإعدادات العامة لووكومرس، إضافةً إلى كيفية ضبط إعدادات المنتجات والضرائب والمدفوعات والشحن والحسابات والبريد الإلكتروني وAPI، وكذلك Webhooks. وللبدء، توجه إلى "الإعدادات" ضمن ووكومرس Woocommerce. الإعدادات العامة تتضمن هذه الإعدادات إعدادات مرتبطة بعنوان المتجر وأماكن البيع وغيرها. عنوان المتجر تحدد عنوان المتجر والدولة والولاية الموجودة فيها بصفتك بائعًا، إضافةً إلى اختيار رسوم الضرائب الافتراضية ومواقع العملاء. خيارات عامة تتمثل الخيارات العامة في: دول البيع: تستطيع اختيار البيع لجميع الدول أو تحديد دول معينة، حيث يمكنك اختيار عدة دول ومناطق. مناطق الشحن: يمكنك اختيار الشحن للدول التي تبيع لها فقط أو مجموعة من الدول، كما تستطيع تعطيل الشحن وكل ما يرتبط بعملية الشحن. الموقع الافتراضي للزبون: اختر الموقع الذي يفترضه الموقع عنوانًا للعميل قبل إدخال عنوانه لاحتساب تكاليف الضريبة والشحن. لا مكان بشكل افتراضي: لا يعطي عنوانًا للزوار، وبالتالي لا يحتسب لهم الضرائب إلى حين إدخال العنوان. منطقة المتجر: يطلب من النظام أن يفترض أن العملاء بنفس المنطقة الموجود فيها المتجر. تحديد الموقع الجغرافي: يحدد موقع العميل الحالي ويحسب الضرائب تبعًا لهذا الموقع. تحديد الموقع الجغرافي (مع دعم التخزين المؤقت للصفحة): مشابه للخيار السابق، لكنه يُحدّد الموقع باستخدام Ajax. سوف تلاحظ أن رابط موقعك URL يتضمن ?v=xxxx في نهايته، وهذا أمر طبيعي لمنع تخزين الأسعار. تفعيل الضرائب: فعّل أو عطّل الضرائب ضمن متجرك، وعند تعطيل الضرائب سوف تختفي صفحة إعدادات الضرائب. تمكين القسائم: فعّل أو عطّل القسائم ضمن متجرك، حيث يمكن استخدام القسائم في لوحة تحكم المدير لتعديل الطلب (للطلبات غير المدفوعة) وفي صفحات السلة وإتمام الطلب. تفعيل استخدام رموز القسيمة الشرائية: اختر هذا الخيار لتفعيل استخدام القسائم ضمن متجرك. حساب خصومات القسائم تسلسليًا: تتغير طريقة حساب القسائم، بحيث تُطبق القسائم تسلسليًا فوق بعضها، بدلًا من تطبيقها على السعر الأساسي للمنتج. خيارات العملة: تؤثر هذه الخيارات على طريقة عرض الأسعار ضمن الواجهة الأمامية. العملة: اختر العملة الافتراضية للمتجر، إذ يمكنك اختيار عملة واحدة فقط. موضع عرض العملة: اختر موضع العملة الافتراضي بالنسبة للسعر: يمين أو يسار أو يمين ويسار مع فراغ. فاصل الآلاف: اختر الرمز الذي تريد استخدامه للفصل بين الآلاف. فاصل الأرقام العشرية: اختر الرمز المُستخدم للفاصلة العشرية. الأرقام العشرية: اختر عدد الأرقام لعرضها على يمين الفاصلة العشرية عند عرض الأسعار: 100.00 أو 100. إعدادات المنتجات تتضمن هذه الصفحة ضبط إعدادات المنتجات، وكيفية عرضها، واستخدام أبعاد الصور المناسبة، والمخزون، وإعدادات المنتجات القابلة للتنزيل. عام تجد ضمن تبويب "عام" صفحات المتجر والمراجعات والتقييمات، وتسمح لك بالتحكم بإعدادات صفحة إتمام الطلب ووحدات القياس وتفعيل أو تعطيل مراجعة وتقييم المنتجات. توجَّه إلى Woocommerce ثم اضغط على "الإعدادات" واختر "المنتجات" لتجد نفسك ضمن تبويب "عام". صفحات المتجر سنعرض فيما يلي كيفية التعامل مع صفحات المتجر: صفحة المتجر: اختر الصفحة التي تريدها كصفحة افتراضية للمتجر، ولا حاجة إلى أن تكون ذات الصفحة التي ثبتها على ووكومرس، ويمكنك تخطي هذا الخيار في حال استخدمت طريقة أخرى لعرض المنتجات. إضافة إلى سلوك السلة: التحويل إلى صفحة سلة المشتريات بعد إضافة المنتج بنجاح: يوجه العميل تلقائيًا إلى صفحة السلة عند إضافة منتج. تفعيل إضافة المنتج للسلة بدون تحديث الصفحة AJAX في الأرشيفات: يُفعّل خيار إضافة المنتج للسلة دون إعادة تحميل الصفحة. صورة العنصر النائب: يمكنك هنا ضبط صورة العنصر النائب الافتراضية لتظهر ضمن الواجهة الامامية عند عدم توفر صورة، ويمكن أن تكون هذه الصورة شعار متجرك أو صورة خدمة ما. القياسات اختر وحدة قياس الوزن والأبعاد للمنتجات من القائمة المنسدلة. المراجعات تفعيل المراجعات: تفعيل مراجعات المنتج. إظهار تسمية "تم التحقق منه" في مراجعات الزبائن. المراجعات لا يمكن تركها إلا بواسطة "أشخاص تم التحقق منهم". تقييمات المنتج: تفعيل نجوم التقييم في المراجعات. نجوم التقييم ينبغي أن تكون مطلوبةً، وليست اختياريةً. خيارات المخزون توجه إلى ووكومرس ثم اضغط على "الإعدادات" واختر منها تبويب "المنتجات"، لتصل إلى خيار "المخزون" وتتمكن من تعديل خيارات المخزون ضمن متجرك. اختر ما إذا كنت تريد تفعيل إدارة المخزون، ففي حال تفعيل هذا الخيار عليك ضبط الخيارات التالية: إدارة المخزون: تفعيل إدارة المخزون: يُدار مخزون المنتجات الفيزيائية تلقائيًا، وما عليك سوى إدخال الكمية ليعمل ووكومرس على طرح المبيعات منها وعرض عبارة "متوفر في المخزون" أو "غير متوفر في المخزون" أو إمكانية "الطلب المسبق". تعطيل (إزالة العلامة من المربع): يتوجب الآن إدخال كمية وحالة المنتجات الفيزيائية يدويًا، ويمكنك تفعيل إدارة المخزون على مستوى المنتج في حال رغبت بذلك. تعليق المخزون (بالدقائق): تعليق المنتجات (للطلبات غير المدفوعة) لعدد معين من الدقائق، وعند الوصول إلى هذه المدة، سوف يُلغى الطلب المعلق. أبقِ على هذه القيمة فارغةً لتعطيلها، وانتبه إلى أن هذه الميزة تعمل للمنتجات بحالة "بانتظار الدفع" وليس "قيد الانتظار". الإشعارات: تفعيل إشعارات المخزن المنخفض. تفعيل إشعارات المخزون غير المتوفر. مستلمي الإشعارات: أدخِل عنوان البريد الإلكتروني للإشعارات. عدد المنتجات المتبقية لوضع حالة مخزون المنتج على أنه منخفض المخزون: عدد المنتجات لتفعيل إشعار المخزون المنخفض. ** عدد المنتجات المتبقية لوضع حالة مخزون المنتج على أنه غير متوفر في المخزون**: عدد المنتجات لتفعيل إشعار مخزون غير متوفر. ظهور نفاذ المخزون: اختر إخفاء او عرض المنتجات غير المتوفرة ضمن قائمة المنتجات. صيغة عرض المخزون: إظهار الكمية المتوفرة في المخزون دائمًا مثل "12 منتج متوفر في المخزون". إظهار الكمية المتوفرة في المخزون عندما تكون منخفضةً فقط "2 منتج فقط". عدم إظهار الكمية المتوفرة في المخزون. المنتجات القابلة للتنزيل توجه إلى ووكومرس ثم اضغط على "الإعدادات"، ثم اختر تبويب "المنتجات"، ومنه إلى "المنتجات القابلة للتنزيل". طريقة تنزيل الملف: يتحكم هذا الخيار بالطريقة التي يوفر فيها متجرك الملفات القابلة للتنزيل للمشتري. فرض التنزيلات: يفرض تنزيل الملفات من خلال شيفرة PHP، ولا يمكن الوصول إلى الملفات من قِبل أي شخص سوى المشتري، وتكون الروابط المباشرة مخفيةً. X-Accel-Redirect/X-Sendfile: مشابه لعملية فرض التنزيلات، لكن مع أداء أفضل وإمكانية دعم ملفات بأحجام أكبر، وتتطلب أن توفر استضافتك دعم لـ X-Sendfile أو لـ X-Accel-Redirect، لذا يجب عليك التحقق من الاستضافة أولًا. إعادة التوجيه فقط (غير آمن): رابط التحميل يربط المستخدم مع الملف، والملفات غير محمية من الوصول الخارجي لها. يجب على معظم المتاجر اختيار إحدى الطريقتين، الأولى أو الثانية، وذلك للحفاظ على الملفات آمنة من الوصول الخارجي لها. يجب أيضًا استخدام إعادة التوجيه فقط في حال واجهتك مشكلات أو لا تمانع في أن تكون عملية تنزيل الملفات غير مؤمنة. تقييد الوصول: التنزيل يتطلب الدخول: لا ينطبق هذا الخيار على عمليات الشراء كضيف. منح صلاحية الوصول إلى المنتجات القابلة للتنزيل بعد الدفع مباشرةً: تفعيل هذا الخيار يمنح الوصول إلى التنزيلات عندما تكون حالة الطلب "قيد المعالجة" بدلًا من انتظار أن تصبح حالة الطلب "مكتمل". إعدادات الضرائب توجه إلى WooCommerce ثم اختر "الإعدادات" ومنها تبويب "الضرائب". إن إعداد الضرائب جزء مهم ومعقد بما يكفي لنكتب عنه مقال خاص، ويمكنك مراجعة مقال ضبط الضرائب في ووكومرس للاستزادة. إعدادات الشحن لكي تتمكن من ضبط إعدادات الشحن توجه إلى ووكومرس، ثم اختر "الإعدادات" ومنها تبويب "الشحن". مناطق الشحن إن صفحة الإعدادات الرئيسية للشحن هي لمناطق الشحن. ومنطقة الشحن هي منطقة جغرافية، إذ توفر مجموعةً من طرق الشحن والأجور الخاصة بها. يمكنك قراءة المزيد عن كيفية ضبط مناطق الشحن في صفحة ضبط مناطق الشحن. خيارات الشحن عملية حسابية: تفعيل حاسبة الشحن ضمن صفحة السلة. إخفاء رسوم الشحن إلى حين إدخال العنوان. وجهة الشحن: الشحن افتراضيًا إلى عنوان فاتورة الزبون أو عنوان شحن الزبون أو الشحن فقط إلى عنوان فاتورة الزبون. وضع كشف الأخطاء: تفعيل هذا الوضع بغرض حل المشكلات. إعدادات المدفوعات توجه إلى Woocommerce ثم اضغط على "الإعدادات" واختر تبويب "المدفوعات" لاختيار أي بوابات الدفع التي تريد تفعيلها. تُعرض في هذه الصفحة بوابات الدفع المُثبتة، وتستطيع سحبها وإفلاتها للتحكم بترتيب عرضها للعميل في صفحة إتمام الطلب. وعند الضغط على اسم بوابة الدفع، سوف يُعاد توجيهك مباشرةً إلى صفحة ضبط أو تعديل إعداداتها، أو يمكنك ضبط إعدادات بوابة الدفع من خلال الضغط على "إدارة" أو "إعداد"، كما يمكنك استخدام زر التفعيل لتفعيل أو تعطيل أي بوابة دفع. إن حاولت تفعيل طريقة دفع تحتاج لمزيد من الضبط، فسوف تُعيد توجيهك إلى شاشة إعداد هذه البوابة. الحسابات والخصوصية توجه إلى ووكومرس ثم اضغط على "الإعدادات" واختر تبويب "الحسابات والخصوصية" للتحكم بالخيارات المرتبطة بحسابات العملاء والبيانات الخاصة بهم. عملية إتمام الطلب والسداد للزائر السماح للعملاء بالطلب من الموقع دون حساب: يسمح هذا الخيار للعملاء بإتمام الطلب دون إنشاء حساب، وبالتالي لن تكون الطلبات مرتبطةً بحساب مستخدم ضمن ووردبريس. السماح للعملاء بتسجيل الدخول إلى حساب موجود أثناء عملية السداد (إتمام الطلب): يعرض هذا الخيار نموذج تسجيل دخول ضمن صفحة إتمام الطلب إن لم يكن المستخدم مُسجلًا ضمن الموقع. إنشاء حساب السماح للعملاء بإنشاء حساب أثناء السداد (عملية إتمام الطلب). السماح للعملاء بإنشاء حساب على صفحة "لوحة حسابي". عند إنشاء حساب، يمكنك إنشاء اسم مستخدم الحساب تلقائيًّا للعميل حسب اسمه ولقبه، أو بريده الإلكتروني. وفي حال تعطيل هذا الخيار، سوف يظهر حقل يطلب من المستخدم إنشاء اسم المستخدم الخاص به. عند إنشاء حساب، أرسل رابطًا إلى المستخدم الجديد لتعيين كلمة مروره. طلبات محو الحساب إزالة البيانات الشخصية من الطلبات عند الطلب: يسمح ووردبريس 4.9 بإزالة البيانات الشخصية عند الطلب، وعند تفعيل هذا الخيار، سوف تُزال بيانات المستخدم من الطلبات إن كانت هذه الطلبات تعود للمستخدم الذي تُمسح بياناته. إزالة الوصول إلى التنزيلات عند الطلب: يسمح لك ووردبريس 4.9 بإزالة البيانات الشخصية عند الطلب. وعند تفعيل هذا الخيار، سوف تُزال بيانات التنزيل التي تعود للمستخدم الذي تُمسح بياناته، ولن يتمكن المستخدم المحذوف من الوصول إلى أي ملفات تنزيلات اشتراها سابقًا. إزالة البيانات الشخصية السماح بإزالة البيانات الشخصية بالجملة من الطلبات، إذ يُضيف خيار لإزالة البيانات الشخصية ضمن صفحة الطلبات، وهو مفيد في حال أردت إزالة المعلومات الشخصية من الطلبات بالجملة. سياسة الخصوصية يسمح لك هذا القسم باختيار صفحة لسياسة الخصوصية وعرض مقتطفات من سياسة الخصوصية ضمن صفحات حسابك وإتمام طلبات للعملاء. صفحة الخصوصية: اختر صفحةً لتكون الصفحة الخاصة بسياسة الخصوصية. وباستخدام الكود القصير privacy-policy سيصبح بإمكانك الربط مع هذه الصفحة؛ كما أن بعض القوالب تستخدم هذا الخيار لربط صفحة سياسة الخصوصية مع أماكن أخرى مثل التذييل، وقد أُضيفت هذه الميزة إلى ووردبريس 4.9. سياسة الخصوصية المرتبطة بالتسجيل: تُعرض ضمن نموذج التسجيل في صفحة حسابي، لذا يجب عليك تضمين معلومات عن سياسة الخصوصية فيها وربطها مع صفحة سياسة الخصوصية لمزيد من المعلومات. سياسة الخصوصية المرتبطة بالسداد: تُعرض ضمن صفحة إتمام الطلب، ويجب عليك تضمين معلومات عن سياسة الخصوصية وربطها مع صفحة سياسة الخصوصية لمزيد من المعلومات. الاحتفاظ بالبيانات الشخصية يسمح لك هذا القسم باتخاذ قرار بخصوص المدة التي ترغب في الحفاظ فيها على بيانات الطلب ضمن متجرك، إذ يجب عليك تعيين المدة التي يحتفظ فيها موقعك بالبيانات ضمن سياسة الخصوصية؛ وقد أُضيفت هذه الإعدادات في ووكومرس 3.4. أدخل لكل خيار رقمًا، ثم اختر المدة بالأيام أو الأسابيع أو الأشهر أو الأعوام، أما الإبقاء على هذه الحقول فارغة، فسوف يُعطّل عملها. الاحتفاظ بالحسابات غير النشطة: الحسابات غير النشطة هي حسابات لم يُسجل دخول بها ولم تُنشئ طلبًا لمدة معينة. الاحتفاظ بالطلبات المعلقة التي في الانتظار: الطلبات المعلقة هي طلبات غير مدفوعة أو مهملة لا تحتاج إلى أي إتمام. الاحتفاظ بالطلبات التي فشلت: الطلبات الفاشلة هي الطلبات غير المدفوعة أو المهملة ولا تحتاج إلى أي إتمام. الاحتفاظ بالطلبات الملغية: الطلبات الملغية هي طلبات اُلغيت لسبب ما، إما من قِبل المدير أو العميل أو انتهت مدة انتظار الدفع الخاصة بها. الاحتفاظ بالطلبات المُكتملة: الطلبات المكتملة هي الطلبات التي اكتملت في الماضي. تصدير البيانات الشخصية يمتلك ووردبريس 4.9.6 القدرة على تصدير البيانات الشخصية المرتبطة بعنوان بريد إلكتروني معين إلى ملف HTML، ويُضيف ووكومرس إلى الملف المُصدر البيانات المُصدرة التالية: معلومات حساب المستخدم. طلبات مرتبطة بعنوان بريد إلكتروني مُعين. تنزيل صلاحيات وسجلات مرتبطة بعنوان بريد إلكتروني مُعين. وللتأكد من أن الطلبات حقيقية، سوف يُرسَل بريد إلكتروني لتأكيد الطلب، وتتضمن عملية التحقق الخطوات التالية: إدخال عنوان البريد الإلكتروني أو اسم المستخدم الخاص بالحساب. سوف يُعلم المستخدم من خلال البريد الإلكتروني مع رابط تأكيد. عند استخدام رابط التأكيد سوف يؤشّر الطلب على أنه مؤكد. سوف يُرسل بريد إلكتروني للعميل يتضمن رابطًا لتنزيل البيانات الشخصية الخاصة به. فيما يلي مثال عن ملف بيانات شخصية: إعدادات البريد الإلكتروني يتضمن الخيارات المتوفرة لتعديل قوالب وإعدادات البريد الإلكتروني، ويمكنك الوصول لها من خلال الضغط على ووكرموس، ثم اختيار "الإعدادات"، ثم الضغط على تبويب "البريد الإلكتروني". إشعارات البريد الإلكتروني يمكنك ضبط إعدادات كل بريد إلكتروني لووكومرس ظاهر هنا، وسوف تجد المزيد من التفاصيل في الأقسام التالية. خيارات مرسل البريد الإلكتروني اضبط حقلي "اسم المرسل" و"من عنوان" للمرسل. قالب البريد الإلكتروني يسمح لك هذا القسم بتخصيص رسائل البريد الإلكتروني الخاصة بووكومرس. صورة رأس الصفحة: أدخل رابط الصورة التي تريد عرضها ضمن ترويسة البريد الإلكتروني، إذ تستطيع رفع الصورة من خلال زر إضافة الوسائط، أو من خلال الضغط على "أضف جديد" ضمن "وسائط". نص تذييل الصفحة: هو النص الذي يُعرض في تذييل البريد الإلكتروني. اللون الأساسي: لون قالب البريد الإلكتروني لووكومرس. لون الخلفية: لون الخلفية لقوالب البريد الإلكتروني لووكومرس. لون خلفية الصندوق الرئيسي: اللون الرئيسي لخلفية جسم البريد الإلكتروني. لون النص: لون النص الأساسي لقوالب البريد الإلكتروني لووكومرس. يمكنك نسخ المجلد http://woocommerce/templates/emails/ إلى http://yourchildtheme/woocommerce/emails/ لتتمكن من التحكم بصورة أكبر بتصميم رسائل البريد الإلكتروني، وننصح بحفظ التعديلات على رسائل البريد الإلكتروني ضمن قالب ابن، لكي لا تُحذف التعديلات عند إجراء أي تحديث. تعديل قالب بريد إلكتروني تجد القوالب ضمن قائمة "إشعارات البريد الإلكتروني" وهي طلب جديد وطلب ملغي وفشل الطلب وطلب قيد الانتظار وطلب قيد التنفيذ وطلب مكتمل واستعادة المبلغ المطلوب وفاتورة العميل/ تفاصيل الطلب وملاحظة للزبون وإعادة تعيين كلمة المرور وحساب جديد. اضغط على "إدارة" على يسار القالب الذي تريد تعديله لتظهر لك قائمة جديدة. في الصورة أدناه مثال عن طلب جديد: انتقِ من الخيارات أو أدخل تفضيلاتك: تفعيل/ تعطيل: لتفعيل أو تعطيل إشعارات البريد الإلكتروني. المستلم: أدخل عناوين البريد الإلكتروني للمستلمين مفصولة بفاصلة. عنوان الرسالة: يتحكم هذا الحقل بسطر الموضوع ضمن البريد الإلكتروني، يمكنك الإبقاء عليه فارغًا لاستخدام الموضوع الافتراضي. [{site-title}] New customer order ({order-number}) - {order-date} ترويسة الرسالة: يتحكم هذا بالترويسة الرئيسية ضمن إشعار البريد الإلكتروني. أبقه فارغًا لاستخدام الترويسة الافتراضية. نوع البريد الإلكتروني: اختر صيغة البريد الإلكتروني المرسل، حيث تتضمن الخيارات "نص عادي" أو "متعدد الأجزاء" أو "HTML". قالب HTML: عليك نسخ المجلد woocommerce/templates/emails/admin-new-order.php إلى مجلد القالب yourchildtheme/woocommerce/emails/admin-new-order.php، وذلك لتعديل أو تجاوز قالب البريد الإلكتروني، كما يمكنك نسخ ملف القالب وعرضه من شاشة الإعدادات هذه. احفظ التغييرات الآن. تتضمن قوالب طلب مكتمل وفاتورة العميل/ تفاصيل الطلب إعدادات مختلفةً قليلًا عن بقية القوالب: لا يمكن ولا يجب تعطيل قالب "فاتورة العميل/ تفاصيل الطلب". يملك كلا القالبين حقل محتوى إضافي يمكن تعديل مضمونه وهو يتضمن افتراضيًا رسالة شكر. الإعدادات المتقدمة تسمح لك الإعدادات المتقدمة بتغيير خيارات ووكومرس الافتراضية وتشغيل ووكومرس مع API، لكن يجب عليك أولًا التوجه إلى ووكومرس، ثم الضغط على "الإعدادات" واختيار تبويب "إعدادات متقدمة". إعداد الصفحة يجب ضبط الصفحات لكي يعرف ووكومرس أين عليه توجيه المستخدمين لإتمام خطوات معينة: صفحة سلة المشتريات: تعرض هذه الصفحة المشتريات التي أضافها المستخدم لسلته. صفحة إتمام الطلب: يُدخِل المستخدم في هذه الصفحة معلومات الدفع الخاصة به ويُرسِل طلب الشراء. صفحة لوحة حسابي: في هذه الصفحة يتوجه العملاء المُسجلون بالموقع لتحديث معلومات حسابهم أو الاطلاع عليها. الشروط والأحكام: تعرض هذه الصفحة الشروط والأحكام الخاصة بمتجرك. لست مُضطرًا لاستخدام الصفحات التي ثبتها ووكومرس، لكن يجب امتلاك صفحة للسلة وصفحة لإتمام الطلب، وإلا لن يتمكن العملاء من شراء المنتجات ودفع ثمنها، وتُنشأ هذه الصفحات عادةً عند تثبيت وضبط ووكومرس. الشروط والأحكام ينبغي إنشاء صفحة جديدة من "أضف جديد" في قسم "الصفحات" لاستخدام صفحة الشروط والأحكام، ثم اختيار الصفحة التي أنشأتها من القائمة المنسدلة. سوف تظهر صفحة الشروط والأحكام خلال عملية إتمام الطلب، ويستطيع حينها العميل تصفح محتواها والضغط على خيار "الموافقة عليها". تركيبة روابط النهاية لصفحة إتمام الطلب تُضاف تركيبة الروابط النهائية إلى نهاية رابط صفحة ما للتعامل مع إجراء معين خلال عملية إتمام الطلب، ويجب أن تكون فريدةً. تركيبة الروابط النهائية للحساب تُضاف تركيبة الروابط النهائية إلى نهاية رابط صفحة ما للتعامل مع إجراء معين ضمن صفحات الحساب، ويجب أن تكون فريدةً. الطلبات. عرض الطلب. التنزيلات. تعديل الحساب. العناوين. طرق الدفع. فقدان كلمة المرور. تسجيل خروج. واجهة برمجة تطبيقات REST توجه إلى ووكومرس ثم اضغط على "الإعدادات"، بعدها اختر تبويب "إعدادات متقدمة" لتجد تبويبًا فرعيًا باسم "واجهة برمجة تطبيقات REST". إن API موجود لاستخدامه من قبل المطورين، إذ تستطيع تفعيل الوصول للبيانات المخزنة ضمن ووردبريس من خارج ووردبريس (تطبيق أندرويد مثلًا). واجهة برمجة التطبيقات القديمة يمكنك تفعيل واجهة برمجة التطبيقات القديمة إذا توقف دعمها. ترجمة -وبتصرّف- للمقال Configuring WooCommerce Settings. اقرأ أيضًا كيفية إعداد متجر ووكومرس جديد كيفية إعداد الضرائب في ووكومرس فهم تركيبة الروابط النهائية في ووكومرس ضبط إعدادات المنتجات (Products) لمتجرك الإكتروني على منصة WooCommerce كيفية ضبط خيارات شحن المنتجات في متجر ووكومرس

إن تأمين موقع ووردبريس ليس بالأمر الذي يتضمن خطوةً واحدةً فحسب، لأنه مهما كنت تثق بالإضافة الأمنية التي تستخدمها أو مهما قضيت وقتًا في تأمين موقعك، فإن الموقع الآمن اليوم لا يعني بالضرورة أنه آمن غدًا، ولإبقاء المخترقين بعيدًا عنك، يجب عليك إجراء فحص أمني منتظم لموقعك على ووردبريس وملء الثغرات التي تجدها. تتطور إستراتيجيات الاختراق دائمًا؛ وبنفس الوقت، تتطور طرق ردع هذه الإستراتيجيات للحفاظ على موقعك آمنًا، لذا فكر فيها على أنها حلقة، فكلما كان الموقع آمنًا، حاول المخترق أن يكون أكثر إبداعًا في طرق اختراقه، وهذا يعني أنه عليك تأمين موقعك أكثر، وتستمر هذه الحلقة دون توقف. يجب عليك إجراء فحص أمني لموقع ووردبريس مرةً كل ثلاث أشهر على الأقل، والأفضل مرةً كل شهر أو كل أسبوع (وفي بعض الأحيان يوميًا، إذ يعتمد ذلك على حساسية موقعك)، وبالطبع، يجب عليك إجراء هذا الفحص في أي وقت تشعر فيه بوجود خطب ما، إذ يُمثل أي مما يلي راية الخطر: أصبح موقعك بطيئًا فجأةً. يوجد انخفاض كبير في عدد زيارات الموقع دون سبب واضح. توجد حسابات جديدة والكثير من طلبات تغيير كلمة المرور. ظهور روابط جديدة لم تُضفها ضمن موقعك. يجب عليك اتباع الخطوات التالية للحفاظ على موقعك بأفضل حالة، وبتنظيم ما يلي ضمن قائمة، يمكنك إجراء فحص أمني بكل سهولة. نظرة شاملة على الفحص الأمني لموقع ووردبريس سوف يتعرض أي موقع ووردبريس في مرحلة ما لمشكلة أمنية ما، والأكثر تكرارًا هو ظهور ثغرة ضمن قالب أو إضافة ما، مما يسمح للمخترقين باختراق موقعك، وعند حصول هذا يمكن أن يحدث أي مما يلي: سرقة البيانات الشخصية للعملاء. ظهور إعلانات ومحتوى غير شرعي ضمن موقعك. توجيه الزيارات لموقع آخر. تشفير أو حذف أو بيع بيانات ووردبريس. وهذا أكثر بكثير من توقف الموقع لعدة ساعات، حيث يمكن أن تقع رهينةً لابتزاز المخترقين الذين يمتلكون بياناتك، والتي يمكن أن يبيعوها ضمن عالم الإنترنت المُظلم، ويُمكن أن يضع جوجل موقعك ضمن القائمة السوداء في حال عرضت إعلانات غير شرعية ضمن صفحات الموقع أو حاولت تضليل الزوار، وبالتالي يستطيع العملاء مقاضاتك في حال سرقة معلومات بطاقاتهم الائتمانية، كما يمكن أن تُصاب مواقع أخرى عند تمكن المخترق من اختراق موقعك. تسمح لك المراجعة الأمنية لموقعك على ووردبريس بكشف الثغرات الموجودة، والتي تستطيع إصلاحها وغلقها قبل أن يجدها أحد المخترقين ويستغلها. القيم التي تستخدمها الإضافة الأمنية إن الإضافة الأمنية التي تستخدمها ضمن موقع ووردبريس هي الأداة الأكثر أهميةً في موقعك، لذا تأكد من أن هذه الإضافة ما زالت تعمل بالطرق التالية: سجل النشاط: يتتبع هذا السجل نشاط المستخدمين، بمن فيهم المسجلون ضمن الموقع، وحالات فشل تسجيل الدخول، وأي تغيير ضمن الموقع. الجدار الناري: يعمل هذا الجدار على حجب البوتات والمخترقين وعناوين IP التي تحاول الوصول لموقعك. محاولات تسجيل الدخول: تفرض الإضافات الأمنية استخدام كلمات مرور قوية، واستخدام الاستيثاق الثنائي وتحديد عدد محاولات تسجيل الدخول. حماية صفحة تسجيل الدخول: يحجب هذا هجمات القوى الغاشمة التي يحاول فيها المخترقون استخدام تشكيلات مختلفة من أسماء المستخدمين وكلمات المرور لتسجيل الدخول. فحص البرمجيات الخبيثة وإزالتها: يجب إجراء هذا الفحص يوميًا مع فحص لقاعدة البيانات والملفات والمجلدات بحثًا عن برمجيات خبيثة ومسحها إن وجدت. تنبيهات في الزمن الحقيقي: يجب أن تُعلمك الإضافة فوريًا عند وجود نشاط مشبوه ضمن موقعك. اختبر نسخة موقعك الاحتياطية تستطيع في حال وجود نسخة احتياطية عن موقعك استعادتها عند تعذر إصلاح الأخطاء التي يعاني منها الموقع، وذلك بشرط أن تكون النسخة الاحتياطية التي لديك سابقة لظهور المشكلة، لكن إن فشلت عملية النسخ الاحتياطي، فعندها لن تمتلك شيئًا لتستعيده، وهذا يعني أنك ستعلق مع النسخة التي لا تعمل من موقعك. يُفترض أن تستخدم طريقة نسخ احتياطية لموقعك (سواءً التي توفرها الاستضافة أو أي إضافة تستخدمها) تسمح لك باختبار النسخة الاحتياطية مثل BlogVault. راجع إعدادات حساب المدير واتصال FTP ربما يوجد عدة أشخاص في موقع ووردبريس يدخلون للعمل على مشاريع مختلفة، لكن هذا لا يعني أن كل واحد من هؤلاء يجب أن يملك كامل الصلاحيات ضمن الموقع، وعند الحديث عن اتصال FTP، فإنه يسمح لعدة أشخاص بالدخول إلى موقعك، وهذا يعني أنه بإمكانهم تعديل أي شيء ضمن موقعك. عند إضافتك لمستخدم جديد فإنك تُسند له رتبةً جديدةً (يمكنك تعديل ملفه الشخصي وتغيير رتبته أيضًا). تمتلك الرتب المختلفة صلاحيات مختلفة، فعلى سبيل المثال، يستطيع "المدير" الوصول إلى جميع أدوات المدير (مثل تغيير القالب أو تثبيت إضافة) بينما يمكن للمُساهم فقط كتابة وإدارة المحتوى الخاص به. اتبع ما يلي عند إجراء فحص أمني لموقع ووردبريس: ابحث عن مستخدمي ووردبريس الذين يملكون صلاحيات المدير. قرر ما إذا كان جميع هؤلاء المستخدمين يحتاجون هذه الصلاحيات. خفّض الرتبة وإمكانية الوصول من خلال تحديث رتب المستخدمين لرتب أخفض. إن كنت لا تعلم شيئًا عن بعض المستخدمين، فيجب عليك حذفهم، لأنه ربما اُنشئت هذه الحسابات من قِبل المخترق. هل يوجد أي مستخدم يملك اسم المستخدم admin؟ هذا الاسم كثير الاستخدام ويحاول عادةً المخترقون استخدامه للوصول إلى موقعك، لذا في هذه الحالة، أنشئ حساب مستخدم جديد واحذف الحساب القديم. احذف حسابات FTP للمستخدمين الذين لا يحتاجون درجة عالية من الوصول إلى موقعك. وأخيرًا، إن كان موقعك يسمح بتسجيل الأعضاء، فيجب عليك التأكد من إنشائهم لحساب يملك رتبةً لا تسمح بالوصول إلى لوحة التحكم عند التسجيل ضمن الموقع، وهنا يجب عليك التوجه إلى تبويب "عام" ضمن قائمة "إعدادات" واختيار الرتبة المناسبة ضمن "الرتبة الافتراضية للأعضاء الجدد". تأكد من أن ووردبريس بأحدث إصدار يمكنك تفعيل هذه الميزة تلقائيًا، ومع ذلك، يجب عليك التحقق من أنها تعمل دوريًا، فالتحديثات لا تعمل على إغلاق الثغرات الأمنية فقط، بل تعمل على تحسين أداء الموقع وتُضيف ميزات جديدةً للتحقق من وجود تحديث توجه إلى لوحة التحكم واضغط على "تحديثات". تنظيف القوالب والإضافات التي تستخدمها يمكن للإضافات توفير العديد من الإمكانيات لموقعك، لكنها أيضًا عرضة للهجوم، خصوصًا عندما تبقى دون أي تحديث لفترة طويلة جدًا، لذا فإن المطورين الموثوقين يتابعون إضافاتهم دوريًا مع إصدار تحديثات أمنية منتظمة، وبعد أي تحديث أمني لووردبريس، توجه إلى قائمة الإضافات ونفّذ ما يلي: عطّل واحذف أي إضافة لم تَعُد تستخدمها أو لا تعرف من أين أتت. حدّث الإضافات المتبقية التي تمتلك تحديثًا. إن كنت تستخدم إضافةً لم تتلقَّ أي تحديث من المطور، فيجب عليك البحث عن بديل لها يوفر نفس الوظائف، كون الإضافة غير المُحدثة عرضةً للكثير من المشكلات الأمنية. حتى لو كنت تُجري فحصًا أمنيًا دوريًا، يُفضَّل أن تتحقق من أن إضافاتك التي تتلقى تحديثات منتظمةً من قِبل مطوريها، ويجب عليك إزالة القوالب غير المستخدمة والتي لن تحتاجها، إذ أن القوالب تُمثل خطرًا أمنيًا والأفضل الحفاظ على موقعك بوجود أقل عدد ممكن من القوالب. الخلاصة يجب ألا تتوقف عن تطوير أجزاء معينة من عملك، مثل العثور على منتجات أو خدمات جديدة والتسويق وبيعها وغير ذلك، وهذا لا يختلف عن أمن موقعك، إذ يمكن لمشكلة صغيرة أن تُسبب اختراق موقعك في حال لم تعالجها في الوقت الصحيح. ودون معرفة مواضع هذه المشكلات، لن تتمكن من إصلاحها أصلًا. الحفاظ على موقعك آمنًا عملية مستمرة، وسيوفر عليك إجراء فحص أمني دوري لموقعك عناء إصلاح المشكلات التي سوف تظهر في حال لم تنفّذه، كما يمكنك ضبط الإضافة الأمنية لإجراء بعض الفحوصات دوريًا دون أي تدخل منك. ترجمة -وبتصرّف- للمقال How to Conduct a WordPress Security Audit لصاحبه Lindsay Pietroluongo. اقرأ أيضًا الدليل الكامل إلى أمن مواقع ووردبريس الدليل الشامل لاستخدام HTTPS و SSL في ووردبريس كيفية ضبط إعدادات الخصوصية في ووردبريس

سوف تُنشئ في هذا المقال الأخير من هذه السلسلة التعليمية عن CSS تذييلًا ثابتًا في مكان مُحدد أسفل مجال الرؤية أثناء انتقال الزائر لأسفل الصفحة، أي سوف تُعيد إنشاء التذييل الموجود ضمن الموقع التوضيحي لكنك تستطيع استخدام هذه الطُرق لمشاريع مستقبلية لمواقع إلكترونية أيضًا. المتطلبات هذه المقالة هي المقالة الأولى من سلسلة المقالات التعليمية حول كيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية: كيفية بناء موقع باستخدام CSS كيفية فهم وإنشاء قواعد CSS كيفية تنسيق الصور باستخدام CSS كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS كيفية تنسيق عنصر div في HTML باستخدام CSS كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS كيفية بناء مخطط شبكي باستخدام CSS إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS كيفية إنشاء تذييل ثابت باستخدام HTML و CSS لتتمكن من متابعة هذا المقال التعليمي تأكد من أنك ضبطت المجلدات والملفات الضرورية كما هو مشروح في المقال الأول من هذه السلسلة. يستخدم هذا المقال عدة أيقونات لشبكات التواصل الاجتماعي ضمن التذييل، وفي حال أردت استخدام هذه الأيقونات تستطيع تنزيلها من الموقع التوضيحي ثم حفظها ضمن مجلد images. أيقونة تويتر أيقونة GitHub أيقونة البريد الإلكتروني تستطيع الآن بعد حفظ الصور المتابعة في قراءة القسم التالي وتنفيذ خطواته. إضافة صنف لتصميم التذييل عليك أولًا تعريف الصنف footer عن طريق إضافة الشيفرة التالية لنهاية الملف styles.css ثم احفظه. /* Footer */ .footer { position:fixed; bottom:0; left:0; width:100%; height: 90px; background-color: #D0DAEE; } أضفت في الشيفرة السابقة تعليقًا لعنونة شيفرة CSS الخاصة بقسم التذييل، ثم عرفت صنفًا باسم footer وصرحت عن عدة قواعد تصميم، القاعدة الأولى تُعرف موقع التذييل position على أنه ثابت fixed مما يعني أن العنصر لن يتحرك من موقعه الذي تُحدده عند انتقال المستخدم لأسفل الصفحة. حُدد الموقع من خلال التصريحين التاليين bottom:0;‎ و left:0;‎ وهذا يعني أن موقع التذييل يبعد صفر بكسل من اليسار وصفر بكسل من الأسفل بالنسبة لمجال الرؤية. تستطيع من خلال تغيير القيم تعديل موقع العنصر ضمن الصفحة لكن انتبه إلى أن أي قيمة غير الصفر يجب أن تتضمن اللاحقة px بعد الرقم، كما أن القاعدة حددت العرض والارتفاع ولون الخلفية للصنف footer. أصبحت الآن جاهزًا لإضافة محتوى التذييل في القسم التالي من المقال. إضافة تذييل ذو تصميم يتبع للصنف footer عليك إضافة الحاوية <div> لإضافة محتوى التذييل لصفحة الويب مع تعيين الصنف footer الذي أنشأته سابقًا، ثم عد إلى ملف index.html والصق الشيفرة التالية بعد آخر وسم إغلاق <div/>. <!--Section 7: Footer--> <div class="footer"> </div> احفظ الملف index.html وأعد تحميل الصفحة ضمن المتصفح، يجب أن يظهر لك الآن قسم تذييل فارغ في أسفل صفحة الويب تبقى في مكانها عند انتقالك لأسفل الصفحة. سوف تُضيف الآن محتوى لقسم التذييل الجديد. كيفية إضافة وتصميم عناصر القائمة ضمن التذييل سوف تُضيف في هذه الخطوة وتُصمم عناصر القائمة في الجهة اليُسرى من التذييل، حيث سوف تُستخدم عناصر القائمة هذه للربط مع صفحات أخرى من الموقع، لكن حاليًا يوجد صفحة ويب واحدة ضمن موقعك لذا تستطيع استخدام هذه الروابط لأهداف توضيحية، وفي حال أضفت في ما بعد صفحات إضافية لموقعك تستطيع إنشاء قائمة عناصر هنا وإضافة الروابط الصحيحة. عد إلى ملف styles.css وأضف الشيفرة التالية لأسفل الملف. .footer-text-left { font-size:25px; padding-left:40px; float:left; word-spacing:20px; } a.menu:hover { background-color:yellow; font-size:20px; } سوف نتوقف قليلًا لمراجعة كل سطر أنشأته من مجموعات القواعد السابقة. تُعرف مجموعة القواعد الأولى اسم الصنف footer-text-left التي سوف تُستخدم لتصميم نص عناصر القائمة، ولاحظ هنا أنك ضبط الخاصية float للقيمة left ليطفو النص الذي يمتلك هذا الصنف ليسار الصفحة. استخدمت أيضًا الخاصية word-spacing لإضافة مسافة إضافية بين عناصر القائمة، وفي حال كانت أي من عناصر القائمة مكونة من أكثر من كلمة واحدة سوف تُضطر لإنشاء صنف لتصميم عناصر القائمة (بدلًا من تغيير قيمة تباعد الكلمات). تستخدم مجموعة القواعد الثانية الصنف الزائفhover لإضافة خلفية صفراء اللون للنص عند تحريك المستخدم للمؤشر فوق النص. أضف الآن عناصر القائمة لصفحة الويب من خلال العودة لملف index.html وإضافة الشيفرة التالية ضمن حاوية التذييل التي أنشأتها سابقًا. <div class="footer"> <p class="footer-text-left"> <a href="index.html" class="menu">home</a> <a href="https://css.sammy-codes.com/about.html" class="menu">about</a> <a href="https://css.sammy-codes.com/credits.html" class="menu">credits</a> </p> </div> تُضيف هذه الشيفرة عُنصري قائمة (هما about و credits) مع إسناد روابط لهما وتصميم النص باستخدام الصنف footer-text-left و الصنف a.menu. احفظ جميع الملفات وأعد تحميل الصفحة ضمن المتصفح ليظهر لك نتيجة مماثلة لما يلي. إضافة أيقونات مواقع التواصل الاجتماعي سوف تُضيف الآن أيقونات مواقع التواصل الاجتماعي للتذييل لتستخدمها في الربط مع حساباتك على وسائل التواصل الاجتماعي، وفي حال أردت استخدام هذه الأيقونات للربط مع منصات تواصل اجتماعي أخرى تستطيع البحث عن أيقونات مجانية وتنزيلها وحفظها في مجلد images. عد إلى ملف styles.css وأضف مجموعات القواعد الثلاث في نهاية الملف. .footer-content-right { padding-right:40px; margin-top:20px; float:right; } .icon-style { height:40px; margin-left:20px; margin-top:5px; } .icon-style:hover { background-color:yellow; padding:5px; } لنتوقف قليلًا ونُراجع مجموعات القواعد. تُعرف مجموعة القواعد الأولى الصنف footer-content-right وتُحدد قيم مُحددة للهوامش والحشوة والخاصية float، وسوف تستخدم مجموعة القواعد هذه لتصميم عنصر <div> سوف يحوي أيقونات وسائل التواصل الاجتماعي. تُنشئ مجموعة القواعد الثانية الصنف icon-style الذي سوف يوفر قيمًا للارتفاع والهوامش لتعيين موقع أيقونات مواقع التواصل الاجتماعي. تستخدم مجموعة القواعد الثالثة الصنف الزائفhover لإضافة خلفية صفراء اللون للأيقونة عند تحريك المستخدم لمؤشر الفأرة فوق النص. احفظ الملف styles.css ثم توجه إلى الملف index.html لإضافة أيقونات مواقع التواصل الاجتماعي من خلال إضافة الشيفرة التالية بعد وسم الإغلاق الأخير لقائمة العناصر. <div class="footer-content-right"> <a href="https://github.com/digitalocean"><img src="images/github.jpeg" class="icon-style" alt="Github icon"></a> <a href="https://www.twitter.com/DigitalOcean"><img src="images/twitter.jpeg" class="icon-style" alt="Twitter icon"></a> <a href="https://www.twitter.com"><img src="images/email.jpeg" class="icon-style" alt="Emailicon"></a> </div> تأكد أنك غيرت مسارات الملفات والروابط بالمعلومات الخاصة بك لوسائل التواصل الاجتماعي، حيث أن الشيفرة السابقة تُنشئ حاوية <div> تستخدم التصميم المُسند للصنف footer-content-right، وضمن الحاوية div أضفت ثلاث أيقونات لمواقع التواصل الاجتماعي باستخدام الوسم <img> ورُبط كل منها مع صورة باستخدام الوسم <a>. أضفت أيضًا النص البديل الذي يشرح كل أيقونة باستخدام السمة alt، فعند إنشاء المواقع الإلكترونية يجب إضافة النص البديل إلى جميع الصور لدعم الوصول للموقع من قبل الأشخاص الذين يستخدمون برامج قراءة الشاشة. احفظ الملف index.html وأعد تحميل الصفحة ضمن المتصفح، يجب أن يظهر لديك الآن تذييل ثابت يتضمن ثلاث أيقونات لمواقع التواصل الاجتماعي على اليمين مربوطة بحساباتك. يجب أن يتغير لون الروابط عند تحريك المستخدم لمؤشر الفأرة فوقها، ولتأكيد النتائج تستطيع المقارنة مع الصورة المتحركة في بداية المقال. الخلاصة أنشأت الآن تذييلًا ثابتًا في موقع ثابت أسفل مجال الرؤية لا يتحرك عند انتقال المستخدم لأسفل الصفحة، وتستطيع متابعة الاطلاع على تصميم وخيارات المحتوى ضمن التذييل عن طريق تغيير القيم ضمن أصناف CSS التي أنشأتها و تستطيع أيضًا إضافة أنواع مختلفة من المحتوى ضمن ملف index.html. ترجمة -وبتصرّف- للمقال How To Create a Static Footer With HTML and CSS (Section 7) لصاحبه Erin Glass. اقرأ أيضًا تحريك واجهات العرض أثناء التنقل في موقع الويب تنسيق الصور في CSS

تُعرض صفحة وضع الصيانة في ووردبريس تلقائيًا للزوار عندما تعمل على تحديث موقعك مثل تحديث نظام ووردبريس، أو إصدار أحد الإضافات أو القوالب.8 والغرض من صفحة وضع الصيانة هذه، هو ألّا يظهر موقعك مُعطلًا لأحد عند إجرائك لتحديث ما. يُفترض أن تظهر هذه الصفحة مؤقتًا، لكن تبقى في بعض الأحيان لمدة أطول مما هو مطلوب، وهذا يعني أن الموقع سيكون غير متاح لمدة أطول مما تظن، وهذا يمكن أن يضر في كثير من الأمور، مثل تقييم موقعك من قِبل محركات البحث، الأمر الذي ينعكس على ترتيبك ضمن صفحات نتائج البحث. ثمة مشكلة أخرى تواجه العديد من أصحاب المواقع مع وضع الصيانة في ووردبريس، وهو التصميم البسيط لهذه الصفحة، إذ تتضمن رسالةً بسيطةً لا توفِّر لزوارك فكرةً واضحةً عما يحصل ضمن الموقع ولا المدة التي سوف يظل فيها الموقع مُعطلًا، لذا إن كان هذا الأمر مهمًا لعلامتك التجارية، فإن هناك طريقةً لتحسينها. سوف نشرح في هذا المقال كل ما يخص وضع الصيانة في ووردبريس، ويتضمن ذلك سبب ظهور هذا الوضع، والمشكلات الشائعة التي يمكن أن يواجهها المستخدم، وخيارات إنشاء صفحات صيانة أكثر قبولًا. ما هو وضع الصيانة في ووردبريس؟ هو خاصية مبنية ضمن ووردبريس، بدأت مع الإصدار 3.0 لووردبريس، فعندما تُحدَّث إضافة أو قالب أو إصدار ووردبريس، فسوف تُعرض صفحة وضع الصيانة لزوار الموقع، والتي تتضمن جملة: Briefly unavailable for scheduled maintenance. Check back in a minute. هذا فقط ما تتضمنه هذه الصفحة، وكما تلاحظ ضمن الصورة في الأسفل، فإن الصفحة فارغة إلا من العبارة السابقة. يُعيد ووردبريس الخطأ 503 HTTP عندما يكون موقعك في وضع الصيانة، وهذا يعني أن الخدمة غير متوفرة، مما يُعلم محركات البحث أنك تعمل على الصفحة أو حصل خطأ ما ضمن الموقع، ورمز الخطأ هذا جيد من ناحية تحسين محركات البحث SEO لأنه يُخبر جوجل أن موقعك لا يعمل مؤقتًا وبالتالي لن يؤذي ذلك ترتيب ظهور موقعك في محركات البحث. ما هي أسباب ظهور وضع الصيانة؟ تتوقف بعض العمليات التي تعمل في الخلفية ضمن موقعك عند تحديث ملفات موقع ووردبريس أو عند تثبيت شيء جديد، وعادةً ما يدوم هذا لبضع ثوانٍ (تعتمد المدة على عدد التحديثات وحجمها)، إذ يستخدم ووردبريس الدالة wp_maintenance() لإنشاء ملف مؤقت يُدعى maintenance ضمن موقعك. يتضمن هذا الملف رسالة وضع الصيانة، ويُحذف هذا الملف تلقائيًا عند الانتهاء من عمليات التحديث ليعود موقعك للعمل كما في السابق على فرض أن كل شيء سارٍ على ما يُرام دون أي مشكلات. مشكلة الوقوع في وضع الصيانة بعد انتهاء التحديثات أو عمليات التثبيت إن مشكلة بقاء وضع الصيانة بعد انتهاء التحديثات ليست مشكلةً شائعةً، لكن يُحتمل أن تقع فيها، وبذلك لن تتمكن أنت ولا زوار موقعك من الوصول للموقع، سواءً الواجهة الخلفية أو الأمامية، وعادةً ما يحصل هذا عند وجود نوع من التعارض، ويظن ووردبريس أن التحديثات ما تزال ساريةً حتى بعد انتهائها. يمكن أن يحصل هذا إن حاولت مغادرة أو تحديث صفحة التحديثات أثناء تحديث إضافات ووردبريس أو تحديث القوالب أو حتى ملفات ووردبريس. يُحتمل أيضًا أن يكون السبب هو إضافة أو قالب غير متوافقين مع إصدار ووردبريس، بحيث يمكن أن تُسبب نسخة قديمة من إضافة أو قالب أو حتى ووردبريس ظهور مشكلات في التوافق، لذا عليك الحفاظ على جميع مكونات الموقع في أحدث إصدار قدر الإمكان. كيف تخرج موقعك من وضع الصيانة في ووردبريس الخبر الجيد هو أن هذه الخطوة ليست صعبةً في حال علّق موقعك في وضع الصيانة، لكن يجب عليك تفريغ ملفات التخزين المؤقت لمتصفحك قبل الوصول لملفات الموقع، إذ من المُحتمل أن يكون موقعك خرج من وضع الصيانة، في حين أن متصفحك ما يزال يعرض لك النسخة المخزّنة من الصفحة، لذا فإن تفريغ ملفات التخزين المؤقت يُمكن أن يحل المشكلة. لكل متصفح الطريقة الخاصة به لتفريغ ملفات التخزين المؤقت، لكن جميعها واضحة، فعلى سبيل المثال، تستطيع في متصفح سفاري الضغط على Develop، ثم اختيار Empty Caches في أعلى المتصفح. أما إن لم تعمل الخطوة السابقة على حل المشكلة، فيجب عليك حذف ملف maintenance يدويًا، وإليك الطريقة: ادخل إلى مدير ملفات موقعك من خلال اتصال SFTP أو عبر لوحة تحكم مزود الاستضافة. (تواصل مع الاستضافة لتعرف الطريقة الصحيحة للوصول للمسار الرئيسي إن كنت غير واثق بمعلوماتك). توجه للمجلد الرئيسي لموقعك، وفي مثالنا كان اسمه مشتقًا من اسم النطاق، وسوف تكون في المجلد الصحيح إن رأيت ملف wp-config.php. ابحث عن الملف maintenance واحذفه. احذف الآن ملفات التخزين المؤقت ضمن متصفحك وحدّث صفحة الموقع، ويجب أن تعود للعمل. كيفية تجنب الوقوع في وضع الصيانة في ووردبريس توجد عدة ممارسات جيدة تستطيع اتباعها لتجنب بقاء ووردبريس في وضع الصيانة، وأهمها عدم فعل أي شيء ضمن الموقع عند تحديثه، أي لا تحدّث الصفحة حتى تُعلمك نافذة التحديث أن التحديث قد اكتمل. وإليك المزيد من الاستراتيجيات التي يمكنك اتباعها. تحديثات متعاقبة للإضافات تجنب الضغط على خيار "تحديث الآن" على عدة إضافات خلال فواصل زمنية قصيرة، إذ سيحاول ووردبريس تشغيل التحديثات بالتتالي حتى لو حاولت تشغيلها كلها مرةً واحدةً، وفي هذه الحالة يمكن لتأخير بسيط أن يُسبب تعارضًا. ولتحديث عدة إضافات مرةً واحدةً بطريقة صحيحة، يجب عليك اتباع الخطوات التالية: اضغط على خيار "التحديثات المتوفرة" في أعلى صفحة الإضافات. اختر الإضافات جميعًا بالضغط على المربع الموجود أعلى الإضافة الأولى. اختر "تحديث" من القائمة المنسدلة. اضغط على "تطبيق". سوف يعمل ووردبريس على تحديث هذه الإضافات بالترتيب، مما يُساعدك على تجنب الوقوع في أي تعارض. التحديث المنتظم لإضافات ووردبريس حاول تحديث كل إضافة عند وجود إصدار أحدث لها من قِبل المطور، لأنك في حال انتظرت عدة أسابيع ثم حاولت تحديث جميع الإضافات بنفس الوقت، فقد تواجه مشكلة تعارض، لذا اختر يومًا من الأسبوع لتحديث الإضافات فيه. إن كان عليك تحديث عدة إضافات بنفس الوقت، لنقل 30 إضافةً أو أكثر، فيجب عليك حينها إجراء هذه التحديثات يدويًا والتحقق من موقعك بعد كل تحديث لإضافة ومسح ملفات التخزين الاحتياطية وتسجيل الخروج من الموقع، ثم تسجيل الدخول للتأكد من أن كل شيء يعمل دون أي مشكلات، وفي حال حصلت مشكلة ما لا تستطيع إصلاحها، فاستخدم نسخةً احتياطيةً ثم استبدل الإضافة التي تُسبب المشكلة. يمكنك أيضًا ضبط الإضافات لتتحدث تلقائيًا، إذ تظهر في الصورة أدناه الإضافة الأولى وهي مضبوطة لتتلقى التحديثات تلقائيًا، بينما تحتاج الثانية إلى تفعيل هذا الخيار. يمكنك أيضًا استخدام إضافة مثل Easy Updates Manager للحفاظ على إضافاتك وقوالب بأحدث إصدار، وبعد تثبيت وتفعيل الإضافة، يجب عليك التوجه إلى لوحة التحكم والضغط على "خيارات التحديث" لتظهر لك مجموعة متنوعة من الإعدادات تضمن لك الحفاظ على كل محتويات موقعك بأحدث إصدار. كيفية تخصيص وضع الصيانة توجد طرق مختلفة تستطيع من خلالها تخصيص وتطوير وضع الصيانة في ووردبريس، وهو ما يسمح لك بتفعيل هذا الوضع يدويًا مع إضافة علامتك التجارية للصفحة وتخصيص الرسالة التي تُعرض للزوار. إضافة ملف maintenance الخاص بك لا يمكنك تغيير صفحة وضع الصيانة الافتراضية لووردبريس، لكنك تستطيع إنشاء ملف maintenance خاص بك يُظهر المكان الافتراضي، وكل ما عليك عمله هو إنشاء الصفحة، إذ سيتحقق ووردبريس تلقائيًا منها. توجه ضمن مدير ملفات الاستضافة إلى المجلد wp-content. أنشئ ملفًا جديدًا. احفظ الملف باسم maintenance.php. أضف الرسالة الخاصة بك وشيفرة CSS (اختياري). غيرت في المثال التالي فقط الرسالة التي تظهر وحين تحديث أحد القوالب ضمن الموقع ظهرت صفحة الصيانة الجديدة ضمن الموقع تلقائيًا، وبعد عدة ثوان عند انتهاء تحديث القالب، عاد الموقع للعمل دون أي مشكلات واختفت صفحة الصيانة. استخدام إضافة لإنشاء صفحة صيانة مخصصة إن كنت لا تريد كتابة شيفرة CSS أو تحتاج إلى تصميم صفحة أكثر تعقيدًا مما تسمح به مهاراتك باستخدام الشيفرة، فيجب عليك حينها استخدام إضافة، فهي الخيار الأفضل، وهنا سوف نذكر إضافتين، الأولى غنية بالخيارات، والثانية تتضمن الأساسيات فقط. تمتلك إضافة Coming Soon Page, Maintenance Mode and Landing Pages أكثر من مليون تثبيت نشط وتقييم خمس نجوم من قِبل حوالي 4300 مُقيّم، كما تتضمن عدة قوالب مختلفةً لصفحات الصيانة وجميعها قابلة للتخصيص، إضافةً لقوالب خاصة بتنبيه الزوار لوجود حدث قريب، ويمكنك إنشاء قالب خاص بك من الصفر أيضًا. والجميل في هذه الإضافة وغيرها أنك تستطيع تفعيل وضع الصيانة يدويًا، وعند تفعيل هذا الخيار سوف تظهر الصفحة التي اخترتها كصفحة وضع الصيانة لجميع زوار الموقع. لكن للأسف لن تظهر الصفحة المختارة في هذه الإضافة عند تحديث إضافة أو قالب، بل ستظهر الصفحة الافتراضية للزوار، لكنك تستطيع تفعيل وضع الصيانة يدويًا قبل البدء بعملية تحديث الإضافات والقوالب لتحافظ على الصفحة المخصصة. هذه إضافة WP Maintenance Mode: لا تمتلك هذه الإضافة تقييمات بالعدد الذي تمتلكه إضافة SeedProd، إلا أن إضافة WP Maintenance Mode تمتلك أكثر من 800000 تثبيت نشط وتقييم 4.5 نجمة. توفر هذه الإضافة خيارات أساسية بسيطة، لكن إن أردت شيئًا مختلفًا عن صفحة الصيانة الافتراضية لووردبريس دون وجود الكثير من الخيارات، فهي خيارك الأمثل، يمكنك تخصيص رسالتك وإضافة بعض التحسينات وتفعيل وضع الصيانة يدويًا أثناء إجراء تعديلات على الموقع. كيفية تفعيل وضع الصيانة بطريقة يدوية jوجد طريقتان لتفعيل وضع الصيانة يدويًا في ووردبريس، الأولى باستخدام إضافة والثانية من خلال إضافة شيفرة برمجية لملف functions.php، وسوف نشرح كلا الطريقتين هنا. (بالرغم من أننا ذكرنا سابقًا بعض الإضافات التي تتيح لك تفعيل وضع الصيانة يدويًا، يوجد خيار بسيط ربما ترغب باستخدامه إن كنت لا تهتم بتصميم الصفحة). أولًا، لنذكر الحالات التي ترغب بظهور وضع الصيانة فيها: تطوير الموقع قبل إطلاقه. تصميم عناصر بنيوية للموقع مثل القائمة. تعديل شيفرة الموقع (يُفضَّل دائمًا استخدام موقع بديل). تعديل محتوى الموقع. إصلاح مشكلة. إطلاق منتج أو خدمة أو إعادة تصميم الموقع. تحديث ملفات ووردبريس أو الإضافات أو القوالب. رفع إصدار جديد من قالب أو إضافة. استخدام إضافة Slim Maintenance Mode لا توفِّر هذه الإضافة أي إعدادات خاصة بالتصميم أو أي إعدادات من أي نوع أخر، إذ تتضمن إضافة Slim Maintenance Mode فقط خيار تفعيل وضع الصيانة يدويًا، وعند تفعيل الإضافة سوف تظهر صفحة وضع الصيانة للزوار كما هو موضح في الصورة أدناه، ولتعطيل عرض هذه الصفحة، يجب عليك تعطيل الإضافة. إضافة شيفرة برمجية لملف functions.php إن كنت لا ترغب في استخدام إضافة أخرى، فيمكنك إجبار ووردبريس على الدخول في وضع الصيانة من خلال إضافة شيفرة برمجية معينة إلى ملف functions.php. ابحث عن ملف functions.php من خلال مدير ملفات الاستضافة ضمن مجلد القالب النشط داخل مجلد themes الموجود ضمن مجلد wp-content. اكتب في السطر الثاني أسفل ترويسة PHP الشيفرة التالية: //Activate WordPress Maintenance Mode function wp_maintenance_mode(){ if(!current_user_can(‘edit_themes’) || !is_user_logged_in()){ wp_die(‘<h1 style=”color:red”>الموقع قيد الصيانة</h1><br />نُجري الآن عمليات صيانة دورية، وسوف يعود الموقع للعمل خلال وقت قصير. ’); } } add_action(‘get_header’, ‘wp_maintenance_mode’); استبدل الجمل السابقة بالجمل التي تريد. احفظ الملف. سوف تظهر لك الرسالة التالية في حال زرت الموقع دون تسجيل الدخول ضمنه. ولإخراج موقعك من وضع الصيانة، يجب عليك حذف الشيفرة السابقة التي أضفتها لملف functions.php. الخلاصة إن وضع الصيانة المتوفر في ووردبريس هو ميزة رائعة، فهو يجعل موقعك غير متوفر للزوار تلقائيًا ولمدة مؤقتة عند إجراء أي تحديث، لكن في كثير من الأوقات يرغب أصحاب المواقع بتخصيص هذه الصفحة لتظهر علامتهم التجارية ضمنها أو ربما تفعيل وتعطيل هذه الصفحة يدويًا، وهنا تأتي أهمية معرفة أي إضافات يمكنك استخدامها أو الملفات التي يجب عليك تعديلها. وفي حال علق موقعك في وضع الصيانة، فقد تعلمت الآن كيفية إخراجه من هذا الوضع ليتمكن زوار الموقع من الاطلاع على محتوياته دون أن يتأثر ترتيب الموقع ضمن محركات البحث. ترجمة -وبتصرّف- للمقال WordPress Maintenance Mode: Everything You Need to Know لصاحبه Lindsay Pietroluongo. اقرأ أيضًا إعادة ضبط موقع ووردبريس إلى الإعدادات الإفتراضية كيف تضع خطَّة صيانة شهريَّة لمواقعك على ووردبريس كيفية إصلاح أخطاء ووردبريس نصائح لتمكين المستخدمين غير المتخصصين من صيانة مواقع ووردبريس كيفية تحديث إضافات ووردبريس بأمان

سوف تُنشئ في هذا المقال قسم التوظيف Employment من الموقع التوضيحي باستخدام جداول HTML وأصناف CSS، وتستطيع استبدال معلومات Sammy بمعلوماتك الخاصة في حال رغبت بتخصيص الموقع كما أن الطرق المُستخدمة هنا قابلة للتطبيق ضمن أي مشروع موقع HTML/CSS. لبناء هذا القسم عليك إضافة وتنسيق قسم ترويسة وإضافة وتصميم عمود واسع وإضافة وتنسيق جدول HTML داخل العمود. المتطلبات هذه المقالة هي المقالة الأولى من سلسلة المقالات التعليمية حول كيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية: كيفية بناء موقع باستخدام CSS كيفية فهم وإنشاء قواعد CSS كيفية تنسيق الصور باستخدام CSS كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS كيفية تنسيق عنصر div في HTML باستخدام CSS كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS كيفية بناء مخطط شبكي باستخدام CSS إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS كيفية إنشاء تذييل ثابت باستخدام HTML و CSS لتتمكن من متابعة هذا المقال تأكد من أنك ضبطت المجلدات والملفات الضرورية كما هو مشروح في المقال الأول من هذه السلسلة. إنشاء قسم فارغ للفصل وقسم للعنوان أضف أولًا صنفًا يعمل على إنشاء مسافة بين المحتوى الموجود في القسم السابق "المشاريع Projects" والقسم الحالي "التوظيف Employment"، لذا أضف تعليقات CSS وقواعد CSS التالية في أسفل ملف styles.css الخاص بك. /* Section 4 */ /* Add space between sections */ .section-break { margin:50px; height:500px; } أضفت في الشيفرة السابقة تعليق CSS استخدمته لإعطاء عنوان لقواعد CSS التي سوف تُضيفها وكان العنوان Section 4 إضافةً إلى تعليق CSS آخر يشرح الهدف من الصنف section-break الذي سوف تُعينه لعنصر <div> فارغ ضمن ملف index.html ليُضيف له ارتفاع بقيمة 500 بكسل وهوامش بقيمة 50 بكسل، وبالرغم من أن عنصر <div> لن يكون ظاهرًا إلا أن ارتفاعه سوف يعمل كمنطقة فصل من خلال دفع المحتوى التالي له لأسفل الصفحة مسافة 500 بكسل. عد إلى ملف index.html وأضف الشيفرة التالية. <!--Section 4: Employment--> <div class="section-break"> </div> <h2 class="section-heading">Experience</h2> تتضمن الشيفرة السابقة تعليق HTML لعنونة الشيفرة المُستخدمة للقسم الرابع من الموقع وتُضيف حاوية <div> تتضمن الصنف section-break الذي أنشأته، تُضيف هذه الشيفرة أيضًا قسم الخبرة Experience وتُصممه باستخدام الصنف section-heading الذي أنشأته في مقال سابق كيفية بناء مُخطط مقسم باستخدام CSS. ملاحظة: إن كنت لم تتابع هذه السلسلة التعليمية من بدايتها تستطيع إضافة الصنف section-heading إلى ملف styles.css من خلال إضافة الشيفرة التالية لنهاية الملف. .section-heading { text-align:center; color:#102C4E; margin-top: 150px; margin-bottom:70px; font-size: 35px; } احفظ ملف index.html وأعد تحميله ضمن المتصفح، يجب أن يظهر لديك قسم بعنوان Experience بعد مساحة تفصل بينه وبين القسم السابق. تصميم عمود عريض وجدول سوف تُنشئ الآن أصنافًا تسمح لك بتصميم عمود أبيض عريض وجدول داخله، لذا أضف الشيفرة التالية في نهاية الملف styles.css. /* Wide column */ .column-1 { width: 90%; height: auto; padding-top:70px; padding-left:70px; padding-bottom:70px; margin:auto; margin-bottom:50px; margin-top: 75px; background-color:white; } /* Table formatting */ .table-style { width:100%; border-spacing: 24px; } صرحت في مجموعة القواعد الأولى عن عدد من قواعد التنسيق للصنف column-1، ولاحظ أن حددت العرض width بالنسبة المئوية وبالتالي سوف يُغير العمود من قياساته حسب عرض مجال الرؤية. حددت قيمة الارتفاع إلى auto مما يسمح للجدول بتعديل ارتفاعه حسب الارتفاع الذي يحتاجه المحتوى الموضوع داخله، كما أنك أنشأت قاعدة تجعل لون خلفية العنصر <div> بيضاء عند امتلاك هذا العنصر للصنف white. تستطيع قراءة مقال كيفية تعديل حجم عنصر HTML والمساحة المحيطة به إن أردت تعلم المزيد عن تعاريف أخرى وطُرق ضبط قياسات المحتوى والحاشية والهوامش. عرّفت في مجموعة القواعد الثانية الصنف table-style مع عدة قواعد، حيث تسمح القاعدة width:100% للجدول بإشغال كاملة عرض الحاوية الموجود ضمنها وفي هذه الحالة سوف يكون كامل عرض العمود الذي أنشأته، أما القاعدة border-spacing:24px;‎ فإنها تُشكل تباعد بقيمة 24 بكسل بين خلايا الجدول مما يسمح لمحتوى الجدول إشغال كامل عرض العمود، وفي حال لم تستخدم هذه القاعدة سوف تكون خلايا الجدول أكثر قربًا من بعضها. إضافة العمود والجدول سوف تُضيف الآن العمود والجدول إلى ملف HTML، ولهذا عليك أن تحفظ ملف styles.css، بعدها عليك العودة إلى ملف index.html ثم أضف الشيفرة التالية بعد السطر <h2 class="section-heading">Experience</h2>. <div class="column-1"> <h2>Employment</h2> <table class="table-style"> <tr> <td>Freelance designer</td> <td>Seven Seas</td> <td>2015-present</td> </tr> <tr> <td>Associate Sea Creature</td> <td>Small Pond Productions</td> <td>2019-2020</td> </tr> <tr> <td>Associate Surfer</td> <td>Open Watery Web</td> <td>2018-2019</td> </tr> <tr> <td>Open Web Advocate</td> <td>Kiddie Pool Kubernetes</td> <td>2017-2018</td> </tr> <tr> <td>Assistant Shark</td> <td>Small Pond Pictures</td> <td>2016-2017</td> </tr> </table> </div> </div> أضفت في الشيفرة السابقة حاوية <div> بتنسيق يتبع للصنف column-1 ووضعت جدول HTML ضمن هذا العمود وذو تنسيق يتبع للصنف table-style، ووضعت ضمن الجدول محتوى مرتبط بمراحل توظيف لشخص ما وهنا تستطيع وضع معلوماتك لو أردت تخصيص الموقع. يفتح الوسم <tr> سطرًا جديدًا ضمن الجدول يتبعه ثلاث مجموعات من البيانات ضمن الجدول (باستخدام الوسم <td>). احفظ كلا الملفين وأعد تحميل الصفحة ضمن المتصفح، يجب أن تعرض صفحة الويب عمودًا واحدًا عريضًا يتضمن جدولًا بأربع أسطر وثلاث أعمدة كما هو مبين في صورة سابقة في بداية المقال. انتبه إلى أن أول ثلاث عناصر <td> موجودة بين أول مجموعة من وسوم فتح وإغلاق <tr>، وتستطيع المتابعة في إضافة السطور باستخدام نفس سطر الجدول ونفس تنسيق البيانات وسوف يتغير ارتفاع العمود حسب المحتوى لأنك ضبط خاصية height إلى القيمة auto للعمود ذي الصنف column-1، أو تستطيع إضافة أعمدة إضافية باستخدام العنصر <td> ضمن الأصناف <tr>. أنشأت ونسقت في هذا القسم جدولًا باستخدام CSS لعرض محتوى مرتبط بسجل التوظيف ضمن مُخطط مُقسم، وراكمت خبرةً بسيطةً عن كيفية التحكم بقياسات الجدول وإضافة أسطر وأعمدة له، أما في القسم التالي سوف تتابع التعرف على مُخططات الجداول الممكنة من خلال إنشاء جدول للمهارات Skills والتعليم Education. كيفية إضافة قسم المهارات والتعليم لموقعك الإلكتروني باستخدام CSS سوف تُنشئ في هذا المقال قسم التعليم Education وقسم المهارات Skills من الموقع التوضيحي باستخدام جداول HTML وأصناف CSS، وتستطيع تغيير معلومات Sammy بمعلوماتك في حال أردت تخصيص الموقعك، كما أن الطرق المُستخدمة هنا قابلة للتطبيق على أي مشاريع مواقع HTML/CSS. عليك إنشاء صنف CSS لبناء هذا القسم وظيفة هذا الصنف تصميم صندوقي محتوى متماثلي القياسات يتسعان بجانب بعضهما ضمن صفحة الويب، ثم سوف تُضيف جدولًا بداخل كل صندوق يتضمن كل جدول المحتوى النصي الذي سوف تُضيفه. إنشاء وتصميم جدولين متساويي القياسات انسخ وألصق الشيفرة التالية في نهاية ملف styles.css. /* Fifth section */ .column-2a { float: left; width: 45%; padding: 40px; padding-left:70px; padding-right: 70px; padding-bottom:60px; height:450px; margin:30px; margin-right:30px; margin-bottom: 40px; background-color:white; } تُنشئ الشيفرة السابقة الصنف column-2a وهو مشابه للصنف column-2 الذي أنشأته في قسم "عني" في مقال كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS لكن خاصية الارتفاع مضبوطة على القيمة 450 بكسل، لذا في حال غيرت كمية المحتوى في هذا الصندوق سوف تحتاج لتعديل قيمة الارتفاع تبعًا لها أو سوف يظهر المحتوى خارج الصندوق أو يُجتزأ، تستطيع قراءة مقال كيفية تعديل حجم عنصر HTML والمساحة المحيطة به من هذه السلسلة إن أردت تعلم المزيد عن تعاريف أخرى وطُرق ضبط قياسات المحتوى والحاشية والهوامش. احفظ الملف styles.css قبل المتابعة ثم عد إلى ملف index.html وألصق الشيفرة التالية بعد وسم الإغلاق <div/>. <!--Section 5: Education and Skills--> <div class="column-2a"> <h2>Education</h2> <table class="table-style"> <tr> <td>Barnacle Bootcamp</td> <td>2020</td> </tr> <tr> <td>Seaweed University</td> <td>2019-2020</td> </tr> <tr> <td>Highwater High School</td> <td>2018-2019</td> </tr> <tr> <td>Middle-Sized Pond Middle School</td> <td>2017-2018</td> </tr> <tr> <td>Minnow Elementary School</td> <td>2016-2017</td> </tr> <tr> <td>Phytoplankton Preschool</td> <td>2015-2016</td> </tr> </table> </div> الشيفرة السابقة مسؤولة عن إنشاء عمود باستخدام الصنف column-2a ويُضيف داخله جدولًا يتبع التنسيق table-style الذي أنشأته في الفقرة الأولى من هذا المقال حيث يتضمن هذا الجدول سجل توظيف. يبدأ الوسم <tr> سطر الجدول حيث تليه ثلاث مجموعات من بيانات الجدول ضمن وسم <td>. احفظ الملف وأعد تحميل المتصفح لتتحقق من أن الجدول عُرض بشكل صحيح، يجب أن يبدو الجدول مثل الصورة التالية. عليك الآن إضافة الجدول الثاني الذي يتضمن المهارات، لذا عد إلى ملف index.html والصق الشيفرة التالية بعد آخر وسم إغلاق <div/>. <div class="column-2a"> <h2>Skills</h2> <table class="table-style"> <tr> <td>Social Media</td> <td>⭐⭐⭐⭐⭐</td> </tr> <tr> <td>Public Speaking</td> <td>⭐⭐⭐⭐⭐</td> </tr> <tr> <td>Internet Ethics Ambassador</td> <td>⭐⭐⭐⭐</td> </tr> <tr> <td>Content production</td> <td>⭐⭐⭐⭐⭐</td> </tr> <tr> <td> HTML</td> <td>⭐⭐⭐</td> </tr> <tr> <td> CSS</td> <td>⭐⭐⭐</td> </tr> </table> </div> تعمل هذه الشيفرة تمامًا كالشيفرة السابقة حيث تُنشئ عمودًا يستخدم الصنف column-2a يتضمن جدولًا يستقي تنسيقه من الصنف table-style، ولاحظ أنك تستخدم الوجوه التعبيرية لإنشاء صورة النجمة، حيث تستطيع استخدام أي وجه تعبيري كمحتوى نصي في لغة HTML. احفظ الملف وأعد تحميله ضمن المتصفح وتحقق من أن الجدول يظهر بشكل صحيح، يجب أن يكون لديك الآن جدولان معروضان بجانب بعضهما كما هو موضح في الصورة في بداية المقال. كيفية بناء صندوق اقتباس مميز ضمن موقعك باستخدام CSS سوف تُضيف في هذا المقال اقتباسًا مميزًا لموقعك الإلكتروني باستخدام CSS كما هو معروض ضمن القسم السادس من الموقع التوضيحي sammy-codes، حيث تستطيع استخدام هذا القسم لاستضافة اقتباس مُفضل لديك، أو شهادة بعملك أو رسالة لزوار موقعك. تستطيع أيضًا إضافة رابط لهذا الاقتباس لربطه مع صفحة أخرى عند الرغبة. تستطيع تطبيق الطُرق التي تستخدمها هنا لمشاريع مواقع إلكترونية HTML/CSS أخرى. إنشاء قواعد تنسيق لقسم الاقتباس المميز عليك إنشاء صنف لتنسيق الحاوية وصنف لتنسيق النص المميز لتتمكن من إنتاج نفس التنسيق الموجود ضمن الموقع التوضيحي، لذا أضف الشيفرة التالية لملف styles.css. /* Section 6: Featured Quote */ .column-quote { width: 90%; height: 475px; padding: 40px; padding-left:70px; padding-right: 70px; padding-bottom:100px; margin:auto; margin-bottom:150px; border: 20px solid #FEDE00; } .quote { font-size:80px; font-weight:bold; line-height: 1; text-align: center; } أضفت في الشيفرة السابقة تعليق CSS التالي /* Section 6: Featured Quote */ لإعطاء عنوان لهذا القسم من شيفرة CSS، ثم عرفت الصنف column-quote الذي سوف تستخدمه لتنسيق صندوق الاقتباس وتحديد المقاسات والحشوة والهوامش والحدود التابعة للحاوية. لاحظ أن الهوامش مضبوطة للقيمة auto وهذا يضبط الحاوية أفقيًا في وسط الصفحة، وإضافة لذلك فإن الهوامش السفلية تملك القيمة 200 بكسل لإعطاء بعض المساحة لأسفل الصفحة. أنشأت أيضًا الصنف quote الذي سوف يُستخدم لتنسيق النص الخاص بالاقتباس المميز، وهنا ضبطت خاصية line-height للقيمة 1 مما يُقلص المسافة بين سطور النص عن الإعدادات الافتراضية وهي 1.6، تستطيع تغيير هذه القيمة لتُحدد المسافة التي تفضلها للفصل بين الأسطر، وبعد ذلك احفظ ملف styles.css. إضافة قسم الاقتباس المميز عد إلى ملف index.html وأضف الشيفرة التالية بعد آخر وسم الإغلاق <div/>. <!--Section 6: Featured Quote--> <div class="section-break"> </div> <div class="column-quote"> <p class="quote">There are many fish in the sea, but only one Sammy!</p> </div> لنتوقف قليلًا لشرح كل سطر في الشيفرة السابقة. يُعنون تعليق HTML التالي <!--Section 6: Featured Quote--> هذا القسم من الشيفرة ضمن ملف index.html ولن يُعرض من قبل المتصفح. يُنشئ العنصر <div class="section-break"> </div> قسمًا فاصلًا باستخدام الصنف الذي عرفته سابقًا في الفقرة الأولى من هذا المقال، لكن في حال لم تتطلع على هذا المقال تستطيع إضافة هذا الصنف من خلال تعريف قاعدة CSS التالية .section-break {margin:50px; height:500px;}‎ ضمن ملف styles.css، يُنشئ هذا العنصر مسافة بين المحتوى في القسم السابق وقسم الاقتباس المميز. يُنشئ الوسم <div class="column-quote"‎> مع وسم الإغلاق التابع له <div/> حاوية للاقتباس المميز مع قواعد التنسيق التي عرفتها ضمن الصنف column-quote في ملف styles.css. يُضيف العنصر <p class="quote">There are … Sammy! </p> محتوى نصي ضمن الحاوية <div> التي بدأتها في السطر السابق ويُصممه تبعًا للقواعد التي صرحت عنها ضمن محدد الصنف quote في ملف styles.css. إن غيرت طول المحتوى النصي ربما سوف تُضطر لتعديل أحد الأصناف ضمن هذا القسم لتغيير حجم الخط أو مقاسات الحاوية للتأكد من أن النص يتسع ضمنها. احفظ الملف index.html وأعد تحميل الصفحة ضمن المتصفح، يجب أن يظهر ضمن صفحة الويب الخاصة بك اقتباس مميز كبير الحجم ضمن حاوية شفافة تمتلك حدودًا مستمرة. الخلاصة أضفت في هذا المقال محتوى نصي باستخدام جداول ذات تنسيق، وتستطيع تجربة تغيير القياسات وإضافة أسطر وأعمدة لتخصيص الجداول لأهداف مختلفة، أما في المقال التالي سوف تُنشئ صندوق محتوى يتضمن اقتباس مميز ضمن موقعك، وأنشأت أيضًا صندوق نص مميز ضمن موقعك وعدلت على تنسيقه، أما في المقال التالي والأخير في هذه السلسلة سوف تُنشئ تذييل ثابت يلتصق في مكان مُعين أسفل مجال الرؤية أثناء انتقال الزائر لأسفل الصفحة. ترجمة -وبتصرّف- للمقالات How To Add a Resume or Employment History Section To Your Website With CSS (Section 4) و How To Add Your Educational History and Skills To Your Website Using CSS (Section 5) و How To Create a Featured Quote Box On Your Website Using CSS (Section 6) لصاحبها Erin Glass. اقرأ أيضًا هيكلة صفحات ومواقع الويب الصور في تصميم صفحات الويب المتجاوب

سوف تُنشئ في هذا المقال مخططًا مُقسمًا لقسم المشاريع كما هو في الموقع التوضيحي عن طريق تصميم 8 حاويات <div> باستخدام أصناف CSS، سوف تُضيف أيضًا الصنف الزائفhover لهذه العناصر لكي تُغير لونها عند تحريك المستخدم لمؤشر الفأرة فوقها. تستطيع تغيير معلومات Sammy كما تحب إن كنت ترغب في تخصيص الموقع بمعلوماتك، كما أن الطُرق المُستخدمة هنا يُمكن تطبيقها على مشاريع مواقع إلكترونية HTML/CSS أخرى. المتطلبات هذه المقالة هي واحدة من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية: كيفية بناء موقع باستخدام CSS كيفية فهم وإنشاء قواعد CSS كيفية تنسيق الصور باستخدام CSS كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS كيفية تنسيق عنصر div في HTML باستخدام CSS كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS كيفية بناء مخطط شبكي باستخدام CSS إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS كيفية إنشاء تذييل ثابت باستخدام HTML و CSS لتتمكن من متابعة هذا المقال التعليمي تأكد من أنك ضبطت المجلدات والملفات الضرورية كما هو مشروح في المقال الأول من هذه السلسلة. إضافة وتصميم عنوان الترويسة أضف عنوان الترويسة Projects كبداية للقسم الجديد من صفحة الويب وتأكد من عدم حذف أي محتوى أضفته من مقالات سابقة، أضف الشيفرة التالية بعد آخر وسم إغلاق <div/> ضمن الملف index.html. <!--Section 3: Projects--> <h2 >Projects</h2> السطر الأول من هذه الشيفرة عبارة عن تعليق لتسمية هذا الجزء الذي أضفته للشيفرة لإنشاء قسم ثالث ضمن الموقع، ويُستخدم التعليق فقط لحفظ ملاحظات عن الشيفرة مفيدة عند العودة لها مُستقبلًا ولن تُعرض ضمن المتصفح لزوار الموقع (إلا في حال اطلع الزائر على الشيفرة المصدرية لصفحة الويب)، أما السطر الثاني فهو لإضافة نص العنوان "Projects" وتعيينه ضمن الوسم <h2>. عليك الآن تنسيق عنوان الترويسة من خلال إنشاء الصنف section-heading، لذا عد إلى ملف styles.css وانسخ والصق الشيفرة التالية في أسفل الملف. /* Section 3 */ .section-heading { text-align:center; color:#102C4E; margin-top: 150px; margin-bottom:70px; font-size: 35px; } تُعرف الشيفرة السابقة التصميم الخاص بالصنف section-heading. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن الخطوة التالية هي إضافة الصنف section-heading لعنوان الترويسة "Projects" ضمن ملف HTML، لذا عد إلى الملف index.html وأضف الصنف كما هو مبين في الشيفرة التالية. <!--Section 3: Projects—> <h2 class="section-heading">Projects</h2> احفظ كل من الملفات السابقة وأعد تحميل صفحة الويب ضمن المتصفح، يجب أن يظهر العنوان الآن في الوسط مع تعديل حجمه وموقعه ولونه كما هو مُبين في الصورة. إضافة وتصميم صناديق المشروع المتجاورة سوف تُضيف الآن 8 صناديق مشاريع أسفل قسم الترويسة، وللبدء بذلك عليك إنشاء صنف CSS يسمح لك بتنسيق حاويات <div> بحيث يُمكن لأربع منها أن تتسع بجانب بعضها ضمن الصفحة، عد إلى ملف styles.css وأضف الشيفرة التالية في أسفل الملف. /* Sizing for Project Containers */ .column-4 { float: left; width: 21%; padding: 10px; margin:20px; height: 250px; } صرحت في الشيفرة السابقة عن الصنف column-4 وحددت القيم التي تسمح بعرض أربع أعمدة جنبًا إلى جنب ضمن الصفحة. يأمر التصريح float: left;‎ العنصر أن يطفو إلى الجهة اليسرى للحاوية التي هو ضمنها (في هذه الحالة صفحة الويب) مع السماح للمحتوى المحيط به (في هذه الحالة صناديق المشاريع الأخرى) أن تتموضع على يمين هذا الصندوق. يضبط التصريح width: 21%;‎ عرض العنصر إلى 21% من عرض الحاوية الموجود ضمنها وهي في هذه الحالة صفحة الويب، إن ضبط القياسات (مثل العرض) باستخدام النسبة المئوية بدلًا من البكسلات مُفيد في حال أردت تغيير حجم العنصر حسب حجم الحاوية الموجود داخلها، لكن عليك الانتباه إلى أن تغير الحجم تلقائيًا عملية معقدة قليلًا وهناك عدة طرق لإنشاء عناصر متكيفة يُمكن اعتمادها بعد الانتهاء من إعداد أساس في CSS. تستطيع قراءة مقال كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS إن أردت تعلم المزيد عن تعاريف أخرى وطُرق ضبط قياسات المحتوى والحاشية والهوامش. سوف تُنشئ الآن صنفًا لكل من الصناديق الثمانية لتتمكن من تصميم كل منها بطريقة مختلفة وإضافة صورة مميزة للصندوق الأول والأخير مماثلة للموقع التوضيحي، وللبدء بها عليك حفظ صورة أو اثنتين ضمن مجلد الصور images لاستخدامها لاحقًا كصور مميزة، تستطيع تنزيل صورة الروبوت المتجه يمينًا وصورة الروبوت المتجه يسارًا المُستخدمة في الموقع التوضيحي. أضف الشيفرة التالية لإنشاء صنف لكل صندوق مشروع وذلك أسفل ملف styles.css. /* Color and Images for Project Containers */ .project-1 { background: url('../images/project-left.jpeg'); background-size: cover; } .project-2 { background-color:white; } .project-3 { background-color:#209BFF; } .project-4 { background-color:#112d4e; } .project-5 { background-color:#F9F7F7; } .project-6 { background-color:#209BFF; } .project-7 { background-color:#ffffff00; } .project-8 { background: url('../images/project-right.jpeg'); background-size: cover; } في حال استخدمت صورك الخاصة تأكد من أنك حفظتها ضمن مجلد images واستخدمت مسار الملف الصحيح كقيمة ضمن خاصية background في الصنفينproject-1 و project-8. سوف نتوقف قليلًا هنا لمراجعة الشيفرة التي أضفناها في مجموعة قواعد الصنفين project-1 و project-8، حيث أضفت صورة للخلفية وحددت مسار الملف وصرحت أن صورة الخلفية يجب أن تكون cover لتتسع على كامل العنصر، أما في الأصناف project-2 وحتى project-7 حددت مجموعة قواعد تتضمن ألوان خلفية مختلفة باستخدام رموز ألوان HTML، وهنا جعلت لون الخلفية يمتلك شفافية للصنف project-7 كخيار تصميم لكنك تستطيع تغييره كما تريد، وتستطيع استكشاف خلفيات أخرى سواء ألوان أو صور لكل من الأصناف السابقة عن طريق التجربة وتغيير قيم الخصائص. أضف الآن قاعدة لتغيير حجم وموضع الخط الذي سوف يُضاف إلى صناديق المشاريع وذلك باستخدام الشيفرة التالية وإضافتها في نهاية ملف styles.css. .project-text { text-align:center; font-size:50px; } احفظ ملف styles.css ثم أضف الحاويات <div> لملف HTML وصممها باستخدام أصناف CSS التي عرفتها، وهنا عليك العودة لملف index.html وإضافة الشيفرة التالية أسفل السطر <h2 class="section-heading">Projects</h2>. <div class="column-4 project-1"> </div> <div class="column-4 project-2"> <h2 class="project-text">WEB <br>DESIGN</h2> </div> <div class="column-4 project-3"> <h2 class="project-text">CHAT <br>BOTS</h2> </div> <div class="column-4 project-4"> <h2 class="project-text">GAME <br> DESIGN</h2> </div> <div class="column-4 project-5"> <h2 class="project-text">TEXT <br> ANALYSIS</h2> </div> <div class="column-4 project-6"> <h2 class="project-text">JAVA <br> SCRIPT</h2> </div> <div class="column-4 project-7"> <h2 class="project-text">DATA <br> PRIVACY</h2> </div> <div class="column-4 project-8"> </div> احفظ ملف index.html وأعد تحميله ضمن المتصفح، يجب أن يظهر لديك صفحة مماثلة للصورة التالية. يجب أن ترى الآن صفين مكونين من أربع صناديق كل منها مُصمم حسب الأصناف column-4 و project-x (حيث x هي عبارة عن رقم صنف الصندوق) التي عُينت لعناصر HTML باستخدام سمة class، أضفت أيضًا ضمن شيفرة HTML محتوى نصي (مثل "CHAT BOTS") وعينت لهذا المحتوى النصي الصنف project-text. أضفت أيضًا عنصر فاصل السطر <br> لإنشاء سطر فاصل بين الكلمتين في كل صندوق، وهنا تستطيع تغيير النص كما تريد الآن أو لاحقًا في حال رغبت بتخصيصه لك، وتستطيع استخدام عنصر الرابط التشعبي <a> لربط هذا النص مع الصفحات الجديدة التي سوف تُنشئها ضمن الموقع، وهو ما سوف تتعلم عنه أكثر في نهاية السلسلة التعليمية. سوف تُضيف الآن صنفًا زائفًا لجعل الصناديق تُغير لونها عند تحريك المستخدم لمؤشر الفأرة فوق هذه الصناديق. تغيير لون المحتوى عند تفاعل المستخدم إن عُدت للموقع التوضيحي sammy-codes وحركت مؤشر الفأرة فوق الصناديق ضمن قسم Projects سوف تُلاحظ أن لونها يتغير، وذلك مُحقق بإضافة الصنف الزائفhover لكل صنف ضمن هذه المشاريع. كما تذكر من مقال كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS السابق ضمن السلسلة فإن الأصناف الزائفة تُنشأ من خلال إلحاق : واسم الصنف الزائف باسم الصنف الذي تحاول تعديله، ولإضافة الصنف الزائف ‎:hover لأصناف المشاريع أضف مجموعة القواعد التالية في أسفل ملف styles.css. /* Hover classes for individual project boxes */ .project-2:hover { background-color:#FEDE00; } .project-3:hover { background-color: #FEDE00; } .project-4:hover { background-color: #FEDE00; } .project-5:hover { background-color: #FEDE00; } .project-6:hover { background-color: #FEDE00; } .project-7:hover { background-color: #FEDE00; } أنشأت باستخدام الشيفرة السابقة أصنافhover لستة من ثمان أصناف مشاريع، حيث يأمر صفhover من العنصر تغيير لونه إلى اللون ذي الرمز ‎#FEDE00 عند تحريك المستخدم مؤشر الفأرة فوق الصندوق. لاحظ أنك أضفت صف hover فقط لصناديق المشاريع التي تتضمن نصًا (وليس للصناديق التي تتضمن صور خلفية). احفظ الملف styles.css وأعد تحميل الملف index.html ضمن المتصفح، وتحقق من أن الصنف الزائفhover يعمل عند تحريك مؤشر الفأرة فوق أحد صناديق المشاريع التي تتضمن نصًا، يجب أن يتغير لونها عند مرور مؤشر الفأرة فوقها. الخلاصة تستطيع الآن ترتيب محتوى HTML ضمن صناديق باستخدام أصناف CSS إلى جانب استخدام الصنف الزائفhover لتغيير مظهر هذه الصناديق عند تفاعل المستخدم معها بتحريك مؤشر الفأرة فوقها، تستطيع أيضًا المتابعة بالتجريب من خلال تغيير قواعد التصميم ضمن الأصناف أو تغيير حجم وكمية الصناديق التي تريد استخدامها لتنظيم صفحة الويب. سوف تُضيف في المقال التالي قسم Employment للموقع الإلكتروني باستخدام جداول HTML. ترجمة -وبتصرّف- للمقال How To Build a Tiled Layout With CSS (Section 3) لصاحبه Erin Glass. اقرأ أيضًا المقال السابق: كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS آليات إدراج المحتوى والوسائط المتعددة في صفحة HTML

سوف تُنشئ في هذا المقال القسم الثاني من الموقع التوضيحي باستخدام CSS، لديك الحرية في استبدال معلومات Sammy بالمعلومات التي ترغب، حيث تستطيع تطبيق الطُرق التي سوف تتعلمها هنا ضمن مشاريع مواقع إلكترونية HTML/CSS أخرى. يتضمن القسم الثاني من الموقع صندوقي محتوى يوجد ضمن أحدهما نص وضمن الآخر صورة كبيرة. هذه المقالة هي واحدة من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية: كيفية بناء موقع باستخدام CSS كيفية فهم وإنشاء قواعد CSS كيفية تنسيق الصور باستخدام CSS كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS كيفية تنسيق عنصر div في HTML باستخدام CSS كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS كيفية بناء مخطط شبكي باستخدام CSS إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS كيفية إنشاء تذييل ثابت باستخدام HTML و CSS المتطلبات لتتمكن من متابعة هذا المقال التعليمي تأكد من أنك ضبطت المجلدات والملفات الضرورية كما هو مشروح في المقال الأول من هذه السلسلة. سوف تحتاج لصورة لوضعها ضمن صندوق المحتوى الموجود إلى اليمين، لذا إن كنت لا تملك صورة مناسبة تستطيع استخدام هذه الصورة. تأكد أن الصورة التي اخترتها حُفظت ضمن مجلد images باسم large-profile.jpeg. إنشاء قواعد تنسيق لصناديق محتوى النص والصورة عليك تعريف صنف عمود ضمن ملف styles.css لإنشاء صندوقي المحتوى هذين لتصميم الصندوقين، ثم عليك إضافة النص والصورة إلى ملف HTML. عد إلى ملف styles.css وانسخ والصق القواعد التالية في أسفل الملف. /* Include padding and border in total box size*/ * { box-sizing: border-box; } /* Create two equal columns that float next to each other */ .column-2 { float: left; width: 45%; padding: 40px; padding-left:70px; padding-right: 70px; height: 475px; margin:30px; margin-right:30px; margin-bottom: 70px; background-color: #FEDE00; line-height:2; } سوف نتوقف هنا قليلًا لنشرح الغاية من كل سطر أضفناه. تستخدم مجموعة القواعد الأولى المحدد * للإشارة إلى أن هذه القاعدة يجب أن تُطبق على جميع عناصر والأصناف في HTML، حيث تُصرح هذه القاعدة عن أن قيمة خاصية box-sizing هي border-box مما يُعدل من الحسابات الكلية للعرض والارتفاع لعنصر CSS ويتضمن هذا الحواشي والحدود. يُشير العرض والارتفاع عادةً لعنصر ما إلى محتوى العنصر لكن عند ضبط الخاصية box-sizing للقيمة border-box يُصبح من السهل تعديل القيمة الكلية لعرض وارتفاع عنصر وهذا مفيد عند تصميم تخطيط محتوى الصفحة. تُعرف مجموعة القواعد الثانية صنفًا باسم column-2 مع تحديد الحجم مما يسمح بعرض عمودين بجانب بعضهما ضمن الصفحة، وسُمي هذا الصنف column-2 للتفريق بينه وبين الأعمدة التي تمتلك أحجام أخرى سوف تُنشئ لها أصنافًا خاصة بها فيما بعد في هذه السلسلة. يوجد بعض القيم والخصائص التي لم نُغطها ضمن هذه السلسلة بعد: يُعلم التصريح ;float:left العنصر أن يطفو بالاتجاه الأيسر للحاوية التي هو موجود فيها (في هذه الحالة مجال رؤية المتصفح نفسه) مع السماح للمحتوى المحيط به أن يطفوا إلى الجهة اليُمنى، كما أنك تستطيع ضبط الخاصية float للقيمة right أو left أو none لكننا في هذه السلسلة سوف نستخدم القيمة left لإعادة إنشاء الموقع الإلكتروني التوضيحي. يضبط التصريح ;width: 45% عرض العنصر إلى 45% من عرض الحاوية الخاصة به وهي في هذه الحالة مجال الرؤية للنافذة نفسها، إن ضبط القياسات (مثل العرض) بالنسبة المئوية بدلًا من البكسلات مفيد عندما تريد أن يُعاد حساب حجم العنصر حسب حجم الحاوية الموجود ضمنها، لكن عليك الانتباه إلى أن تغيير الحجم ديناميكيًا عملية معقدة وهناك عدة طرق لإنشاء عناصر متكيفة يمكن استخدامها بعد الانتهاء من وضع أساس باستخدام CSS. يضبط التصريح ;background-color: #FEDE00 لون خلفية العنصر إلى ترميز لون HTML التالي ‎#FEDE00. يزيد ;line-height:2 من المسافة بين الخطوط. إن أردت معرفة المزيد عن تصريحات أخرى عليك مراجعة مقال سابق ضمن هذه السلسلة لضبط حجم المحتوى والحواشي والهوامش. إضافة صندوق محتوى "عني" سوف تُضيف الآن صندوق محتوى "عني" لصفحة الويب باستخدام الصنف column-2 الذي أنشأته سابقًا، لذا احفظ ملف styles.css وعد إلى الملف index.html ثم أضف الشيفرة التالية بعد وسم الإغلاق <div/> ضمن قسم الترويسة قبل وسم الإغلاق <body/>. <!--Section 2: About me--> <div class="column-2"> <h1>About me</h1> <p>Hi! I'm Sammy the Shark, Senior Selachimorpha at DigitalOcean by day, dabbler in all things dev by night. This site is a demonstration website for the tutorial series "<a href="https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-css">How To Build a Website With CSS</a>," which walks you through building and customizing this website from start to finish.</p> <p>If you're following this tutorial series, you can replace this text with your own "About Me" content.</p> </div> احفظ الملف وأعد تحميله ضمن المتصفح، يجب أن يظهر لك صندوق أصفر اللون على جهة اليسار من صفحة الويب يتضمن نصًا. انتبه أن صفحة الويب يجب أن تتضمن محتوى الترويسة الذي أضفته في المقال السابق من هذه السلسلة. سوف نراجع باختصار آلية عمل شيفرة HTML. السطر الأول من الشيفرة (‎<!--Section 2: About me-->‎‎) عبارة عن تعليق يُساعد على تنظيم محتوى HTML، ولن يُعرض ضمن المتصفح وهو مُضمن هنا كمرجع. السطر التالي من الشيفرة (<div class="column-2" style="background-color:#FEDE00;"‎>) يُنشئ حاوية <div> يُطبق عليها تنسيق الصنف column-2 الذي عرفته ضمن ملف styles.css ويستخدم سمة style المعرفة سطريًا لإضافة لون الخلفية ‎#FEDE00 للعنصر. الوسوم <h1> و <p> التالية تتضمن النص الذي تريد إدخاله ضمن صندوق النص "عني"، ولاحظ أنك أغلقت الحاوية <div> في نهاية هذا النص، وهنا تستطيع استبدال معلومات Sammy بالنص الخاص بك إن أردت تخصيص الموقع. إضافة صندوق محتوى الصورة سوف تُضيف الآن صندوق المحتوى الثاني الذي يتضمن صورة كبيرة، ويوجد عدة طرق تستطيع من خلالها إضافة صندوق صورة لكن في هذا المقال سوف تُضيف الصورة من خلال استخدامها كخلفية لحاوية <div> أخرى مُسند لها الصنف column-2. عد إلى الملف styles.css وأضف الشيفرة التالية لنهاية الملف. /* Large profile image */ .large-profile { background: url('../images/large-profile.jpeg'); background-size: cover; background-position: center; } أضفت في هذه الشيفرة تعليقًا بهدف تنظيم قواعد CSS وأنشأت وعرفت صنفًا جديدًا large-profile سوف تستخدمه لتنسيق الصندوق الذي يحمل الصورة، وهنا فإن التصريح ‎background: url(' ../images/large-profile.jpeg');‎ يُخبر المتصفح أن يستخدم الصورة الموجودة في المسار المُحدد كصورة خلفية للعنصر، أما التصريح background-size: cover;‎ فإنه يضبط الصورة لتُغطي المساحة الكاملة للحاوية، ويُوسط التصريح background-position:center;‎ الصورة ضمن الحاوية. سوف تُضيف الآن حاوية <div> تتضمن كل من الصنف column-2 و الصنف large-profile لإعادة إنشاء الصندوق ذي الصورة الكبيرة. احفظ ملف styles.css وعد إلى ملف index.html وأضف الشيفرة التالية أسفل وسم الإغلاق <div/> للعمود الأول وفوق وسم الإغلاق <body/>. <div class="column-2 large-profile"> </div> تُنشئ الشيفرة السابقة حاوية <div> مُنسقة حسب القواعد المُعرفة باستخدام الصنف column-2 والصنف profile-picture. احفظ كل من الملفين وأعد تحميل الملف index.html ضمن متصفحك، يجب أن تعرض صفحة الويب الخاصة بك صندوق نص وصندوق صورة ذات تنسيق مماثل للموجود في الموقع التوضيحي، وانتبه إلى أن صفحة الويب الخاصة بك يجب أن تتضمن محتوى الترويسة الذي أنشأته في المقال السابق. تستطيع متابعة التجريب من خلال القيمة المُعرفة ضمن الصفين column-2 و profile-large للتعرف على خيارات تصميم مختلفة. الخلاصة أنشأت لتوك صندوقي محتوى وصممتهما للنص والصورة باستخدام CSS، أما في المقال التالي سوف تُنشئ القسم الثالث من الموقع وخلال هذه العملية سوف نُنظم المحتوى ضمن سطرين من أربع صناديق مع تطبيق صنف زائف سوف يتسبب في تغير لون الصناديق عند تحريك المؤشر فوقها. ترجمة -وبتصرّف- للمقال How To Build the About Me Section of Your Website With CSS (Section 2) لصاحبه Erin Glass. اقرأ أيضًا HTML و CSS للمبتدئين: كيف تصمم أول صفحة ويب لك التحكم في تموضع العناصر في CSS كيفية بناء موقع باستخدام CSS

سوف تبني في هذا المقال قسم الترويسة للموقع الإلكتروني التوضيحي باستخدام HTML و CSS، وتستطيع تبديل المعلومات الموجودة في الموقع بمعلوماتك إن كنت ترغب في التجريب أو تخصيص الحجم، والطرق التي تستخدمها هنا تستطيع تطبيقها على أي مشاريع HTML/CSS أخرى. هذه المقالة هي واحدة من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية: كيفية بناء موقع باستخدام CSS كيفية فهم وإنشاء قواعد CSS كيفية تنسيق الصور باستخدام CSS كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS كيفية تنسيق عنصر div في HTML باستخدام CSS كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS كيفية بناء مخطط شبكي باستخدام CSS إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS كيفية إنشاء تذييل ثابت باستخدام HTML و CSS المتطلبات لتتمكن من متابعة هذا المقال التعليمي تأكد من أنك ضبطت المجلدات والملفات الضرورية كما هو مشروح في المقال الأول من هذه السلسلة. إضافة عنوان وعنوان فرعي لترويسة صفحة الويب الخاصة بك تتضمن ترويسة الموقع العنوان Sammy the Shark وعنوان فرعي SENIOR SELACHIMORPHA AT DIGITALOCEAN وصورة حساب شخصي صغيرة، جميع هذه العناصر موجودة ضمن حاوية <div> مُصممة باستخدام صنف مُعرف ضمن ملف CSS. سوف تُعيد بناء هذا القسم من خلال إضافة المحتوى النصي والصور وإنشاء صنف للحاوية <div> ثم تغليف المحتوى النصي والصور بحاوية <div> اُسند لها الصنف الذي أنشأته حديثًا. تستطيع إضافة العنوان والعنوان الفرعي من خلال إضافة الشيفرة التالية بين وسمي الفتح والإغلاق <body> ضمن ملف index.html، وهنا تستطيع تبديل المعلومات الموجودة ضمن الشيفرة بالمعلومات الخاصة بك في حال أردت تخصيص الموقع لنفسك. <body> <!--Header content--> <h1>Sammy the Shark<h1> <h5>SENIOR SELACHIMORPHA AT DIGITALOCEAN<h5> </body> أضفت في الشيفرة السابقة العنوان Sammy the Sahrk وأسندته ضمن ترويسة <h1> كونه الترويسة الأهم ضمن صفحة الويب، وأضفت أيضًا عنوانًا فرعيًا SENIOR SELACHIMORPHA AT DIGITALOCEAN وأسندته لترويسة <h5> كونها ترويسة أقل أهمية. لاحظ أنك أضفت أيضًا التعليق <--‎Header content--!> قبل العنوان مباشرةً، إذ يُستخدم التعليق لحفظ معلومات تشرح الغاية من الشيفرة عند العودة لها مستقبلًا ولا تُعرض من قبل المتصفح لزوار الموقع (إلا في حال اطلعوا على الشيفرة المصدرية لصفحة الويب). تُكتب التعليقات في HTML بين ‎<!--‎ و ‎-->‎ كما هو موضح في الشيفرة السابقة، لذا تأكد من إغلاق التعليق باستخدام الوسم ‎--‎‎>‎ أو سوف يُعد كامل المحتوى عبارة عن تعليق. إضافة وتنسيق صورة ملف شخصي صغيرة ضمن ترويسة صفحة الويب سوف تُضيف الآن صورة ملف شخصي ضمن قسم الترويسة، لذا اختر صورة تريد تضمينها على موقعك، وإن كنت لا تملك واحدةً تستطيع استخدام أي صورة بديلة (مثل الصورة الشخصية التي استخدمناها سابقًا في المقالات السابقة Sammy أو تستطيع إنشاء أفتار من خلال موقع Getavataaars. عند اختيارك للصورة عليك حفظها ضمن المجلد images بالاسم small-profile.jpeg، ثم عليك إضافة هذه الصورة إلى صفحة الويب باستخدام الوسم <img> وسمة المصدر src لإسناد مسار الملف الخاص بالصورة إلى هذا الوسم. أضف الشيفرة التالية إلى ملف index.html بعد السطر <--Header content--!> وقبل السطر <h1>Sammy the Shark<h1>. <body> <!--Header content--> <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot"> <h1>Sammy the Shark<h1> <h5>SENIOR SELACHIMORPHA AT DIGITALOCEAN<h5> </body> </html> احفظ الملف وأعد تحميله ضمن المتصفح، يجب أن تعرض صفحة الويب الخاصة بك عنوانًا رئيسيًا وعنوان فرعي وصورة شخصية وصورة خلفية للموقع. لاحظ أن الصورة لا تملك نفس تصميم الصورة الشخصية ضمن الموقع التوضيحي، ولتصميم نفس الشكل والحجم والحدود الخاصة بالصورة الشخصية ضمن الموقع التوضيحي عليك إضافة الشيفرة التالية لملف styles.css. /*Top header profile image*/ .profile-small { height:150px; border-radius: 50%; border: 10px solid #FEDE00; } لنراجع كل سطر من الأسطر السابقة التي أضفتها. إن /*Top header profile image*/ عبارة عن تعليق ضمن CSS. يُشير النص ‎.profile-small إلى اسم الصنف الذي عرفناه ضمن قاعدة التنسيق، سوف يُطبق هذا الصنف على صورة الملف الشخصي في الخطوة التالية. يضبط التصريح ;height:150px ارتفاع الصورة لـ 150 بكسل ويعدل تلقائيًا العرض للحفاظ على نسبة أبعاد الصورة. يجعل التصريح ;border-radius: 50% حدود الصورة دائرية. يُضيف التصريح ;border: 10px solid #FEDE00 حدود مستمرة للصورة بعرض 10 بكسل واللون ذو ترميز ‎#FEDE00. احفظ الملف وعد لملف index.html ثم أضف صنف profile-small لوسم <img> كالتالي. <img src="images/small-profile.jpeg" class="profile-small" alt="Sammy the Shark, DigitalOcean’s mascot"> احفظ الملف وأعد تحميله ضمن المتصفح، يجب أن يُصبح ارتفاع الصورة الشخصية لديك الآن 150 بكسل وذات شكل دائري وحدود صفراء. سوف تُطبق في الخطوة التالية المزيد من التصميم على العنوان والعنوان الفرعي والصورة الشخصية ككل. تصميم وتحديد موقع محتوى الترويسة باستخدام CSS سوف تعرف الآن صفًا ضمن CSS لتنسيق وتحديد موقع محتوى الترويسة، لذا عد إلى ملف styles.css وأنشئ الصنف header عبر إضافة قاعدة CSS التالية. /* Header Title */ .header { padding: 40px; text-align: center; background: #f9f7f7; margin:30px; font-size:20px; } سوف نتوقف قليلًا هنا لنتوسع في شرح كل سطر من الشيفرة التي أضفتها. إن /* Header Title */ عبارة عن تعليق لن يُعرض من قبل المتصفح. النص header. هو اسم محدد الصنف الذي أنشأته وعرفته ضمن قاعدة CSS. التصريح ;padding: 40px يُنشئ 40 بكسل من الحشوة بين المحتوى وحدود العنصر. التصريح ;text-align: center ينقل المحتوى إلى وسط العنصر، وتستطيع تعديل القيمة إلى left أو right لمحاذاة النص تبعًا لها. يضبط التصريح ;background: #f9f7f7 اللون إلى ترميز لون HTML مُعين وهو نفسه المستخدم ضمن الموقع التوضيحي، ولن نتوسع في هذه السلسلة التعليمية عن رموز ألوان HTML لكنك تستطيع استخدام أسماء الألوان أيضًا (black و white و gray و silver و purple و red و fuchsia و lime و olive و green و yellow و teal و navy و blue و maroon و aqua) لتغيير قيمة اللون لهذه الخاصية. يُنشئ التصريح ;margin:30px هوامش بقيمة 30 بكسل بين محيط العنصر ومحيط مجال الرؤية أو أي عناصر محيطة به. يزيد التصريح ;font-size:20px من حجم كل من العنوان والعنوان الفرعي. احفظ الملف styles.css ثم عليك استخدام الصنف header ضمن محتوى الترويسة، لذا عد إلى صفحة index.html وأحط محتوى الترويسة (الذي أضفته مسبقًا لملفك) ضمن وسم <div> يتضمن الصنف header. <!--Section 1: Header content--> <div class="header"> <img src="images/small-profile.jpeg" class="profile-small" alt="Sammy the Shark, DigitalOcean’s mascot"> <h1>Sammy the Shark<h1> <h5>SENIOR SELACHIMORPHA AT DIGITALOCEAN<h5> </div> </body> </html> احفظ الملف index.html ثم أعد تحميله ضمن المتصفح، يحب أن يتغير تصميم العنوان والعنوان الفرعي وصورة الملف الشخصي الموجودة ضمن الحاوية <div> حسب القواعد المُصرح عنها باستخدام الصنف header. الخلاصة انتهيت الآن من إنشاء قسم الترويسة كما هو في الموقع التوضيحي وذلك باستخدام HTML و CSS، حيث أضفت ونسقت العنوان الرئيسي والعنوان الفرعي وصورة الملف الشخصي باستخدام حاويات <div> وأصناف CSS. إن كنت مهتمًا تستطيع المتابعة في التعرف على خيارات التنسيق من خلال تعديل قواعد تنسيق CSS لمحتوى الترويسة، وعندما تُصبح جاهزًا تستطيع المتابعة وقراءة المقال التالي حيث سوف تُنشئ القسم الثاني من الموقع. ترجمة -وبتصرّف- للمقال How To Build the Header Section of Your Website With CSS (Section 1) لصاحبه Erin Glass. اقرأ أيضًا كيفية إعداد مشروع موقع ويب HTML وتنسيقه HTML و CSS للمبتدئين: كيف تصمم أول صفحة ويب لك التحكم في تموضع العناصر في CSS كيفية بناء موقع باستخدام CSS

سوف ننسق في هذا المقال جسم صفحة الويب باستخدام قاعدة CSS، وسوف تستخدم هذه القاعدة لتطبيق التصميم على صورة الخلفية وضبط عائلة الخط لصفحة الويب، سوف تُنشئ أيضًا قاعدة تصميم تُغير لون الروابط التشعبية للون يتوافق مع لوحة ألوان موقعك الإلكتروني. سوف يُستخدم هذا التمرين لإعادة إنشاء تنسيق الموقع الإلكتروني التوضيحي لكنك تستطيع تطبيق وتعديل نفس القواعد المستخدمة هنا لمشاريع مواقع HTML/CSS أخرى. هذه المقالة هي واحدة من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية: كيفية بناء موقع باستخدام CSS كيفية فهم وإنشاء قواعد CSS كيفية تنسيق الصور باستخدام CSS كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS كيفية تنسيق عنصر div في HTML باستخدام CSS كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS كيفية بناء مخطط شبكي باستخدام CSS إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS كيفية إنشاء تذييل ثابت باستخدام HTML و CSS المتطلبات عليك ضبط الملفات والمجلدات الضرورية لمتابعة هذا المقال كما هو موضح في المقال الأول من هذه السلسلة. نقترح في هذا المقال استخدام صورة الخلفية من الموقع التوضيحي والتي تستطيع تنزيلها من css.sammy-codes، تستطيع أيضًا استخدام صورة أخرى كخلفية لكن تأكد من أنها كبيرة كفاية لتملأ الشاشة. تأكد عند اختيارك للصورة أنك حفظتها باسم bakcground-image.jpeg ضمن مجلد images، لتكون الآن جاهزًا للمتابعة بالخطوة التالية. إضافة صورة خلفية لموقع إلكتروني باستخدام CSS يجب عليك إنشاء قاعدة CSS لمحدد الوسم body للتصريح عن قاعدة تصميم لجسم صفحة الويب، لتُطبق هذه القواعد فيما بعد على جميع العناصر الموجودة بين وسوم الفتح والإغلاق لـ <html> التي أضفتها لملف index.html في المقال الأول. أنشئ قاعدة CSS تستخدم محدد الوسم <body> لإضافة صورة الخلفية، وامسح محتويات ملف styles.css (إن كنت تتابع المقالات السابقة ضمن السلسلة) ثم أضف مجموعة القواعد التالية. /* General Website Style rules */ body { font-family: "Helvetica", Sans-Serif; background-image: url("../images/background-image.jpeg"); } لاحظ مسار ملف الصورة الذي يُخبر المتصفح أين يستطيع إيجاد صورة الخلفية، وفي حال غيرت اسم الصورة أو موقعها عليك تعديل هذا المسار بما يتناسب مع التغيير الذي أجريته. لنتوقف قليلًا ونستوعب وظيفة كل من التصريحات الموجودة ضمن مجموعة القواعد: /* General Website Style rules */ عبارة عن تعليق ضمن CSS لا يُعرض من قبل المتصفح، وهي مفيدة مثل تعليقات HTML لشرح وتنظيم الشيفرة عند الرجوع لها مستقبلًا. لاحظ أن تعليقات CSS تُفتح وتُغلق باستخدام الوسوم /* و */ بدلًا من المُستخدمة في تعليقات HTML. تضبط التصريحات font-family: "Helvetica", Sans-Serif‎;‎ عائلة الخط لتكون Helvetica وعائلة الخط الأساسي هي Sans-Serif لجميع النصوص ضمن صفحة الويب (تستطيع تحديد عائلات خطوط مختلفة للمحتوى النصي ضمن نفس صفحة الويب باستخدام قواعد CSS لاحقًا). تُمثل عائلة الخط الأصلية كعائلة احتياط في حال عدم توفر العائلة الأولى عندها سوف يختار المتصفح العائلة الاحتياط، وتستطيع تجريب خطوط أخرى من خلال استبدال Helvetica بأسماء خطوط أخرى مثل Times و Courier و Paltaino. يُعلم التصريح background-image: url("../images/background-image.jpeg;") المتصفح بإضافة صورة خلفية لصفحة الويب باستخدام الملف الموجود ضمن المسار المُحدد، ولاحظ أنك سبقت مسار الملف بـ ‎../‎ التي تُخبر المتصفح تحديد موقع مجلد images ضمن المسار الموجود أعلى المسار الذي يتضمن الملف الذي تعمل فيه styles.css. احفظ ملف styles.css وأعد تحميل صفحة index.html ضمن المتصفح، يجب أن يظهر لك صفحة بدون أي محتوى ما عدا صورة الخلفية. إن لم تظهر لك الصورة عليك التحقق من أن مسار الملف صحيح وأنه لا يوجد أي أخطاء ضمن ملف index.html أو ملف styles.css. تغيير لون نص الروابط التشعبية سوف تُضيف الآن قاعدة CSS لتغيير لون نص جميع الروابط التشعبية إلى لون يتوافق بشكل أفضل مع ألوان الموقع، لذا أضف الشيفرة التالية في أسفل ملف styles.css. a { color: #112d4e; } سوف تُغير هذه القاعدة لون أي نص موجود ضمن وسم <a> إلى اللون ذي الترميز ‎#112d4e، ولن يظهر هذا التصميم إلا عند إضافة عناصر <a> إلى ملف index.html (وهو ما سوف تفعله في مقال لاحق ضمن هذه السلسلة، وتستطيع تغيير اللون من خلال تغيير ترميز لون HTML ضمن قاعدة CSS. الخلاصة أصبح لديك الآن صفحة ويب تتضمن صورة خلفية كبيرة، وإضافة لذلك صرحت عن عائلة خط سوف تُستخدم عندما تبدأ بإضافة محتوى نصي، كما أن استخدام مجموعات قواعد مثل هذه يسمح لك بتغيير الخط وصورة الخلفية لصفحة ويب من خلال استخدام محدد الوسم <body>. أخيرًا أنشأت قاعدة تصميم تُحدد فيها لون أي نص ضمن أي رابط تشعبي تُضيفه للصفحة. سوف تُعيد إنشاء الترويسة للموقع التوضيحي في المقال التالي. ترجمة -وبتصرّف- للمقال How To Style the Body of a Website With CSS لصاحبه Erin Glass. اقرأ أيضًا كيفية إعداد مشروع موقع ويب HTML وتنسيقه HTML و CSS للمبتدئين: كيف تصمم أول صفحة ويب لك التحكم في تموضع العناصر في CSS كيفية بناء موقع باستخدام CSS

سوف تتعلم في هذا المقال كيفية ضبط الملفات والمجلدات الضرورية لبناء موقع إلكتروني باستخدام HTML و CSS، وسوف تُعد أيضًا ملف index.html ليكون جاهزًا لتلقي محتوى HTML في المقالات القادمة. هذه المقالة هي واحدة من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية: كيفية بناء موقع باستخدام CSS كيفية فهم وإنشاء قواعد CSS كيفية تنسيق الصور باستخدام CSS كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS كيفية تنسيق عنصر div في HTML باستخدام CSS كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS كيفية بناء مخطط شبكي باستخدام CSS إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS كيفية إنشاء تذييل ثابت باستخدام HTML و CSS المتطلبات إن كنت تتابع سلسلة المقالات التعليمية هذه منذ البداية تستطيع الاستمرار في استخدام مسار المشروع css-practice وملف index.html ومجلد images ومجلد css وملف styles.css التي أنشأتها سابقًا ضمن السلسلة، لكن إن لم تتابع السلسلة من بدايتها وتحتاج تعليمات لضبط هذه المجلدات والملفات عليك الاطلاع على المقال الأول من هذه السلسلة. يجب أن تملك مجلد مشروع بالاسم css-practice تضمن المجلدات والملفات التالية الضرورية لتعلم CSS في هذه السلسلة: مجلد باسم css يتضمن الملف styles.css مجلد فارغ باسم images ملف بالاسم index.html سوف تُحضر ملف index.html في القسم الأول من هذا المقال ليكون جاهزًا لتلقي محتويات المقالات القادمة. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن كيفية تجهيز ملف index.html لمحتوى HTML يجب إضافة بضع سطور مهمة من HTML لملف index.html ليعمل كصفحة رئيسية لموقعك، وسوف تتضمن هذه السطور تعليمات للمتصفح ولن تُعرض ضمن الصفحة ذاتها. تأكد أن ملف index.html فارغ (في حال أضفت له محتوى من المقالات التعليمية السابقة) وأضف الشيفرة التالية. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Sammy the Shark</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> </body> </html> تأكد من تغيير النص ضمن وسم title لعنوان موقعك الذي تختاره ثم احفظ ملف index.html، وقبل المتابعة لنتعرف على تفاصيل الشيفرة السابقة التي أضفناها. يُعلم التصريح <DOCTYPE html!> المتصفح أي نوع من HTML يستخدمه الملف، والتصريح عن هذه القيمة مهم جدًا بسبب وجود عدة إصدارات من HTML ويحتاج المتصفح أن يعلم أي منها سوف يستخدم، وفي هذا التصريح فإن html تُعرف عن الإصدار الحالي المعياري لـ HTML وهو HTML5. وسم الفتح والإغلاق <html> تُعلم المتصفح أن المحتوى الموجود بين هذين الوسمين يجب تفسيره على أنه HTML، وضمن هذا الوسم أضفت سمة اللغة lang التي تُحدد لغة صفحة الويب، وفي هذا المقال فإن اللغة مضبوطة على الإنجليزية باستخدام en، وللحصول على القائمة الكاملة لوسوم اللغة اطلع على سجل IANA لوسوم اللغة.. تُنشئ وسوم الفتح والإغلاق <head> قسمًا ضمن ملف HTML يتضمن عادةً معلومات عن الصفحة بدلًا من محتوى الصفحة نفسه، ولا تعرض المتصفحات المعلومات الموجودة في قسم <head>. يُحدد الوسم <meta charset="utf-8"‎> أن مجموعة محارف الملف يجب أن تكون UTF-8 وهي صيغة ترميز أحادية تدعم معظم المحارف من مجموعة متنوعة من اللغات المكتوبة. يُعلم الوسم <title> المتصفح باسم صفحة الويب، حيث يظهر هذا الاسم ضمن تبويب المتصفح وعند عرض الموقع ضمن نتائج بحث لكنه لا يظهر ضمن صفحة الويب نفسها، ولا تنسى استبدال عبارة "Sammy the Shark" باسمك أو عنوان من اختيارك إن أردت تخصيص الموقع. يُعلم <link rel="stylesheet" href="css/styles.css"‎> المتصفح بمكان وجود ملف التنسيق CSS الذي يتضمن قواعد التنسيق، وفي حال تابعت التعليمات السابقة في هذه السلسلة يجب أن يكون ملف التنسيق موجود ضمن مسار الملف هذا. سوف تتضمن وسوم الفتح والإغلاق <body> المحتوى الرئيسي لصفحة لويب، وسوف تُضيف محتوى HTML بين هذين الوسمين في ما يلي من مقالات ضمن هذه السلسلة. انتهيت الآن من إنشاء جميع الملفات والمجلدات الضرورية لإنشاء موقع إلكتروني باستخدام HTML و CSS، وأصبح لديك ملف index.html جاهز يتضمن محتوى HTML الضروري ليعمل كصفحة رئيسية لموقعك. سوف تتعرف في القسم التالي على كيفية بناء هذا الموقع والخطوات اللازمة إنشائه. نظرة عامة على الموقع الإلكتروني التوضيحي المبني باستخدام HTML و CSS سوف تتعرف في هذا المقال على بنية الموقع الإلكتروني الذي سوف تبنيه وخطوات إنشائه في القادم من المقالات، يُمكن تقسيم موقعك بصريًا إلى عدة أقسام أفقية. يظهر في الصورة السابقة عنوان كل من الأقسام السبعة السابقة. قسم الترويسة (في الأعلى). قسم "عني" (الثاني من الأعلى). قسم المشاريع (الثالث من الأعلى). قسم التجارب (الرابع من الأعلى). قسم التعليم والمهارات (الخامس من الأعلى). قسم الاقتباس المميز (السادس من الأعلى). قسم التذييل الذي يلتصق بأسفل الصفحة. وستتعلم كيفية إنشاء جميع هذه الأقسام في مقالات لاحقة في هذه السلسلة أُنشئت كل من هذه الأقسام باستخدام خصائص CSS لعناصر HTML التي تعرفت عليها في النصف الأول من السلسلة التعليمية، وسوف تعمل في ما بقي من هذه السلسلة على إعادة بناء كل من هذه الأقسام بمقال تعليمي منفصل لكل منها، وفي حال كنت بدأت للتو بتعلمك CSS فإننا ننصحك بنسخ خيارات التصميم ضمن المقالات التعليمية والتي تتضمن الحجم واللون وصور الخلفية لتبقى الأمثلة متناسقة أثناء عملك على المقالات التعليمية القادمة. يوجد بعض الاقتراحات في نهاية هذه السلسلة التعليمية لتجريب مخططات وتصاميم مختلفة للموقع الإلكتروني، إذ توضح لك هذه الاقتراحات كيفية تخصيص محتوى موقعك والدمج بين المقالات التعليمية لإنشاء تصميم جديد وخيارات ترتيب مختلفة لموقعك. الخلاصة تعرفت في هذا المقال التعليمي على بنية الموقع الإلكتروني الذي سوف تنبيه مع نظرة عامة على الخطة التي سوف تتبعها لبنائه، وفي المقال التالي سوف تُنشئ قاعدة CSS لتصميم جسم صفحة الويب كاملًا وتتعلم مدى أهمية هذه القاعدة كخطوة أولى. ترجمة -وبتصرّف- للمقالات How To Set Up Your CSS and HTML Website Project و An Overview of Our Demonstration HTML and CSS Website لصاحبها Erin Glass. اقرأ أيضًا كيفية إعداد مشروع موقع ويب HTML وتنسيقه HTML و CSS للمبتدئين: كيف تصمم أول صفحة ويب لك التحكم في تموضع العناصر في CSS

سوف تتعلم في هذا المقال عن نموذج صندوق CSS وهو نموذج مُستخدم للإشارة إلى المحتوى والحاشية والهوامش لعنصر HTML، وفهم عمل هذا الصندوق سوف يُساعدك على تعديل حجم أجزاء أي من عناصر HTML وفهم كيفية تحديد الحجم والموقع لكل عنصر. سوف يبدأ هذا المقال بشرح كل صندوق من الصناديق الموجودة ضمن نموذج صندوق CSS ثم سوف ينتقل للتمرين العملي لكيفية تعديل قيمها باستخدام قواعد تنسيق CSS. هذه المقالة هي واحدة من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية: كيفية بناء موقع باستخدام CSS كيفية فهم وإنشاء قواعد CSS كيفية تنسيق الصور باستخدام CSS كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS كيفية تنسيق عنصر div في HTML باستخدام CSS كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS كيفية بناء مخطط شبكي باستخدام CSS إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS كيفية إنشاء تذييل ثابت باستخدام HTML و CSS المتطلبات لتتمكن من متابعة هذا المقال تأكد من أنك ضبطت المجلدات والملفات الضرورية كما هو مشروح في المقال الأول من هذه السلسلة. نموذج صندوق CSS يُمكن فهم عنصر HTML على أنه سلسلة من أربع صناديق متراكبة: صندوق المحتوى Content وهو الصندوق الداخلي حيث يتموضع النص والصور، ويُضبط حجمه افتراضيًا حسب حجم المحتوى الذي يتضمنه، وهو الصندوق الوحيد ضمن النموذج الذي تكون قيمته الافتراضية ليست صفرًا (في حال تضمن محتوى)، وعلى العكس فإن الحاشية والحدود والهوامش لعنصر تمتلك قيمة افتراضية صفرية لكثير من عناصر HTML (مثل <p> و <h1>و <img>) إلا في حال حددت غير ذلك، فعندما تضبط قيم العرض والارتفاع لعنصر فأنت تغيّر عرض وارتفاع صندوق المحتوى. صندوق الحاشية Padding هو الصندوق الثاني والذي يتألف من مساحة شفافة تُحيط بصندوق المحتوى، وتكون الحاشية افتراضيًا لعديد من عناصر HTML ذات قيمة صفرية، وزيادة حجم حاشية عنصر سوف يزيد المسافة بين صندوق المحتوى وصندوق الحدود. صندوق الحدود Border هو الصندوق الثالث والذي يُحيط بصندوق الحاشية، وتكون قيمة الحدود افتراضيًا لمعظم عناصر HTML صفرًا، زيادة حجم الحدود لعنصر ما سوف تزيد المسافة بين صدوق الحاشية وصندوق الهوامش، وانتبه إلى أنه يُمكن تعديل لون وسماكة ونمط الحدود. صندوق الهوامش Margins هو الصندوق الرابع يتألف من مساحة شفافة خارج حدود العنصر، وتكون قيمة الهوامش افتراضيًا لبعض عناصر HTML صفرًا، على الرغم من أن بعض العناصر الأخرى تمتلك قيم هوامش مُحددة كقيم افتراضية مثل الوسوم من <h1> حتى <h2>. يُمكن أن تتراكب الهوامش لعنصرين مختلفين في بعض الأحيان وهذا مسموح ويُدعى هذا السلوك بتصادم الهوامش، وعند حصوله تكون القيمة الافتراضية للهوامش هي حجم هوامش العنصر الأكبر. أصبحت الآن على اطلاع على مكونات نموذج صندوق CSS، وتستطيع بدء التدريب على تنسيق هذه الصناديق المختلفة للتعرف على طريقة عملها معًا لتخطيط وتصميم عنصر HTML، وسوف تبدأ بإنشاء عنصر <div> يتضمن محتوى نصي ثم سوف تُعدل قيم كل من هذه الصناديق للتعرف عمليًا على موضع كل منها ضمن العنصر. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن تعديل حجم المحتوى لعنصر HTML باستخدام CSS تأكد أولًا من ضبطك للملفات والمجلدات الضرورية كما هو مذكور في المقال الأول من هذه السلسلة. احذف محتويات الملف styles.css (إن كان يتضمن محتوى من المقالات التعليمية السابقة) وأضف قاعدة CSS التالية. .yellow-div { background-color:yellow; } احفظ ملف styles.css الذي أنشأت الآن ضمنه صنفًا باستخدام محدد الصنف yellow-div، وبذلك سوف تكون الخلفية لأي عنصر <div> صفراء بشرط أن تُعين له هذا الصنف. امسح الآن محتويات الملف index.html ما عدا السطر الأول من الشيفرة الآتية: <link rel="stylesheet" href="css/styles.css"> ثم أضف الشيفرة التالية. <div class="yellow-div"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div> احفظ الملف وأعد تحميله ضمن المتصفح، لتحصل على نتائج مماثلة لما يلي. سوف تعرض صفحة الويب لديك صندوقًا أصفرًا يتضمن المحتوى النصي الذي أضفته لملف HTML، وحاليًا يمتلك الصندوق الداخلي (صندوق المحتوى) حجمًا بينما قيم الحاشية والحدود والهوامش جميعها مضبوطة على الصفر. لاحظ أن عرض وارتفاع الصندوق الأصفر مضبوطة تلقائيًا بسبب حجم المحتوى النصي ضمن الحاوية <div>، لذا عند إضافة أو إزالة المحتوى النصي سوف تلاحظ كيفية تغير حجم حاوية <div> مع تغير المحتوى. تاليًا، لنحدد عرض حاوية <div> لدراسة كيفية تأثير هذا التغيير على آلية عرض العنصر ضمن المتصفح، وأضف قاعدة تحديد العرض ضمن ملف styles.css لضبط العرض على قيمة 500 بكسل. .yellow-div { background-color:yellow; width: 500px; } احفظ الملف وأعد تحميله ضمن المتصفح، سوف يكون عرض حاوية <div> الآن هي 500 بكسل بينما قيمة الارتفاع ضُبطت تلقائيًا ليتسع المحتوى النصي ضمن الحاوية. لاحظ أنك تستطيع أيضًا تحديد قيمة الارتفاع لعنصر <div> بدلًا من تحديد قيمة العرض وعندها سوف تُعدل قيمة العرض تلقائيًا، أو تستطيع تحديد كل من العرض والارتفاع لكن انتبه أن المحتوى في هذه الحالة سوف يقع خارج حاوية <div> إن كان حجم عنصر <div> صغيرًا جدًا. كيفية تعديل حجم الحاشية لعنصر HTML باستخدام CSS سوف نزيد الآن حجم الحاشية لدراسة تأثيرها على طريقة عرض عنصر <div>، لذا أضف السطر المرتبط بالحاشية لقاعدة CSS الموجودة ضمن ملف styles.css وهنا سوف نحدد حجم الحاشية بـ 25 بكسل. .yellow-div { background-color:yellow; width: 500px; padding: 25px; } احفظ ملف styles.css وأعد تحميل الملف index.html ضمن متصفحك، لتجد أن حجم الصندوق الأصفر أصبح أكبر ليسمح بمساحة 25 بكسل بين المحتوى النصي ومحيط الصندوق. تستطيع تغيير حجم الحاشية من خلال تعديل قيمة حجم padding، كما أنك تستطيع تغيير حجم الحاشية لجهة معينة من العنصر باستخدام الخصائص التالية: padding-left padding-right padding-bottom padding-top فعلى سبيل المثال جرب تغيير التصريح ;padding:25px ضمن ملف styles.css كما هو موضح في الشيفرة التالية. .yellow-div { background-color:yellow; width: 500px; padding-left: 25px; padding-right: 50px; padding-top: 100px; padding-bottom: 25px; } احفظ ملف styles.css وأعد تحميل ملف index.html ضمن متصفحك لتظهر لديك نتائج مشابهة لما يلي. إن معرفة كيفية تحديد أحجام الحاشية لاتجاهات معينة من عنصر مفيد جدًا عند ترتيب المحتوى لصفحة ويب. تعديل حجم الحدود ولونها وتصميمها لعنصر HTML باستخدام CSS سوف نتدرب الآن على ضبط قيم الحدود لعنصر HTML، حيث تسمح لك خاصية الحدود ضبط حجم ولون وتصميم الحدود (مثل solid و dashed و dotted و inset و outset) لعنصر HTML. تستطيع ضبط هذه القيم الثلاث ضمن خاصية الحدود كما هو موضح في الشيفرة التالية. selector { border: size style color; } جرب إضافة التصريح المُبين في الشيفرة التالية لإضافة حدود سوداء مستمرة بعرض 5 بكسل. .yellow-div { background-color:yellow; width: 500px; padding: 25px; border: 5px solid black; } ربما تريد حذف التصريحات السابقة عن أحجام الحاشية المختلفة التي أضفناها في القسم السابق واستبدالها ب ;padding:25px لتكون قاعدة تنسيق CSS سهلة القراءة. احفظ ملف styles.css ثم أعد تحميل ملف index.html ضمن المتصفح لمعاينة التغييرات، يجب أن يمتلك الصندوق الأصفر حدودًا الآن بالقيم التي ضبطها في قاعدة CSS. تستطيع تغيير القيم للتعرف على كيفية تأثيرها على ظهور العنصر ضمن المتصفح، كما فعلنا مع قيم الحاشية وهنا أيضًا تستطيع تحديد قيمة الحدود لجهة دون الأخرى باستخدام الخصائص التالية: border-left border-right border-bottom border-top تعديل حجم الهوامش لعنصر HTML باستخدام CSS سوف نجرب الآن تعديل حجم الهوامش لعنصر ما باستخدام CSS، وفي التمرين التالي سوف نُعطي قيمة كبيرة للهوامش ليظهر لك بسهولة طريقة عرض الهوامش في المتصفح. أضف التصريح المرتبط بالهوامش margins لقاعدة CSS التي صرحت عنها ضمن ملف styles.css واضبط قيمته لـ 100 بكسل. .yellow-div { background-color:yellow; width: 500px; padding: 25px; border: 5px solid black; margin: 100px; } احفظ ملف styles.css وأعد تحميل ملف index.html ضمن متصفحك لمعاينة التغييرات، يجب أن يكون الصندوق الأصفر تحرك بمقدار 100 بكسل لليمين والأسفل ليسمح بمساحة 100 بكسل من الهوامش بين حدود العنصر ومجال رؤيته. تستطيع كما هو الحال في الحدود والحاشية تحديد قيم الهوامش لاتجاهات معينة باستخدام ما يلي: margin-left margin-right margin-top margin-bottom وقبل الانتهاء من هذه الفكرة أضف حاوية <div> أخرى ضمن الصفحة لدراسة تأثير الهوامش على تموضع عنصر قريب، ودون حذف محتوى الملف styles.css أضف قاعدة CSS التالية. .blue-div { height:100px; width:100px; background-color: blue; } احفظ الملف وعد إلى ملف index.html، وبدون حذف أي شيء أضف عنصر <div> لملفك وأسند له الصنف blue-div. <div class="blue-div"></div> احفظ ملف index.html وأعد تحميله ضمن المتصفح لتظهر لك نتيجة مماثلة للصورة التالية. يجب أن يعرض المتصفح الآن صندوقًا أزرق بعرض 100 بكسل وارتفاع 100 بكسل، ويجب أن يكون هذا الصندوق أسفل الصندوق الأصفر ب 100 بكسل بدءًا من هوامش الصندوق الأصفر. سوف تُدفع العناصر المحيطة افتراضيًا بعيدًا عن العنصر بالاعتماد على الهوامش لكن يمكن أن تتقاطع الهوامش للعناصر المتجاورة بسبب تصادم الهوامش، ويُحدد حجم الهوامش المتصادمة حسب حجم الهامش الأكبر بين العنصرين المتصادمين. الخلاصة تعلمت في هذا المقال عن نموذج صندوق CSS وكيفية تعديل حجم كل من محتواه والحاشية والحدود والهوامش، حيث أن فهم سلوك هذه الخواص وكيفية ضبط قيمها مفيد عند تنظيم وتصميم محتوى صفحة ويب. سوف تجد أن هذه المعلومات مفيدة عند بناء موقع إلكتروني خاص بك في ما بقي من هذه السلسلة التعليمية، وفي المقال التالي سوف تضبط ملف index.html لتعمل كصفحة رئيسية للموقع الإلكتروني. ترجمة -وبتصرّف- للمقال How To Adjust the Content, Padding, Border, and Margins of an HTML Element With CSS لصاحبه Erin Glass. اقرأ أيضًا النموذج الصندوقي Box Model في CSS كيفية إعداد مشروع موقع ويب HTML وتنسيقه HTML و CSS للمبتدئين: كيف تصمم أول صفحة ويب لك التحكم في تموضع العناصر في CSS

سوف تتعرف في هذا المقال على كيفية تنسيق عنصر تقسيم المحتوى div في HTML باستخدام CSS، حيث يُستخدم عنصر <div> لهيكلة مخطط الصفحة وتقسيمها لمكونات منفصلة لتنسيق كل منها على حدا. سوف تُنشئ في هذا المقال تنسيقًا لعناصر <div> وسوف تتعلم كيفية إضافة وتنسيق عناصر أخرى داخل الحاوية <div>. سوف تُجهزك هذه المهارات لاستخدام عناصر <div> كأدوات تخطيط فيما يلي من مقالات ضمن هذه السلسلة عندما تبدأ ببناء موقعك الإلكتروني. يُستخدم العنصر <div> من خلال إضافة وسم فتح <div> ووسم إغلاق <div/> ضمن ملف HTML، ويمتلك عنصر <div> بعض المؤثرات البصرية عند عرضه ضمن صفحة ويب، لكن لتخصيص الحجم واللون وغيرها من الخواص لعناصر <div> تستطيع تعيين قواعد التنسيق باستخدام CSS. هذه المقالة هي واحدة من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية: كيفية بناء موقع باستخدام CSS كيفية فهم وإنشاء قواعد CSS كيفية تنسيق الصور باستخدام CSS كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS كيفية تنسيق عنصر div في HTML باستخدام CSS كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS كيفية بناء مخطط شبكي باستخدام CSS إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS كيفية إنشاء تذييل ثابت باستخدام HTML و CSS المتطلبات لمتابعة هذا المقال تأكد من تجهيزك للملفات والمجلدات الضرورية كما هو مذكور ضمن المقال الأول من هذه السلسلة. التعرف على العنصر <div> من خلال مثال عملي لنجرب مثالًا عمليًا لدراسة كيفية عمل العنصر <div>، لذا امسح محتويات الملف styles.css (في حال أضفت له محتوى من المقالات التعليمية السابقة)، ثم أضف قاعدة CSS التالية لمحدد الوسم <div>. div { background-color: green; height: 100px; width: 100px; } احفظ الملف styles.css ثم عد لملف index.html وامسح محتوياته (ما عدا السطر الأول للشيفرة الآتية: <link rel="stylesheet" href="css/styles.css"> وأضف الشيفرة التالية له. <div></div> لاحظ أن عنصر <div> يمتلك وسوم فتح وإغلاق ولا يتطلب أي محتوى، احفظ الملف index.html وأعد تحميله ضمن المتصفح. يجب أن تعرض صفحة الويب مربعًا أخضر اللون بطول 100 بكسل وعرض 100 بكسل كما هو مُحدد في قاعدة CSS. لاحظ أنك تمتلك قاعدة تنسيق لعنصر <div> وبالتالي أي عنصر <div> تُضيفه للصفحة سوف يأخذ نفس التنسيق، لكن عند إنشاء موقع لا تريد غالبًا لجميع عناصر <div> أن تمتلك نفس التنسيق بنفس الطريقة، ولهذا السبب يُنشئ المطورون عادةً أصنافًا يستطيعون استخدامها لتنسيق عناصر <div> بطرق مختلفة. امسح قاعدة CSS التي أنشأتها للتو وأضف مجموعات قواعد CSS الثلاث التالية ضمن ملف styles.css لتتدرب على إنشاء أصناف لعناصر <div>. .div-1 { background-color: blue; height: 50px; width: 50px; } .div-2 { background-color: red; height: 100px; width: 100px; } .div-3 { background-color: yellow; height: 200px; width: 200px; } أنشأت في الشيفرة السابقة قواعد تنسيق لثلاث أصناف مختلفة هي div-1 و div-2 و div-3، ولاحظ أنك أضفت نقطة . قبل محدد الصنف وهو أمر مطلوب عند التصريح عن قاعدة CSS للأصناف. احفظ ملف styles.css وعد إلى ملف index.html ثم امسح عنصر <div> الذي أنشأته وأضف ثلاث عناصر <div> لهذا الملف وطبق صنفًا على كل عنصر يتوافق مع محددات صنف CSS التي عرفتها ضمن ملف styles.css. <div class="div-1"></div> <div class="div-2"></div> <div class="div-3"></div> انتبه أنك أضفت الصنف كسمة لوسم <div> من خلال إضافة سمة الصنف class واسم الصنف لكل وسم افتتاح. احفظ الملف وأعد تحميله ضمن المتصفح، يجب أن يظهر لديك شكل مشابه لما يلي. يجب أن تعرض صفحة الويب ثلاث عناصر <div> لكل منها تنسيق مختلف من حيث اللون والحجم متوافق مع قواعد CSS المعينة له، ولاحظ أن كل عنصر <div> يبدأ بسطر خاص به كون عناصر <div> هي عناصر على مستوى الكتلة وتمتلك هذا السلوك افتراضيًا. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن إضافة وتنسيق نص ضمن الحاوية <div> تستطيع وضع نص ضمن حاوية <div> من خلال إدخال نص بين وسمي الافتتاح والإغلاق <div>، لذا جرب إضافة نص في كل عنصر <div> ضمن ملف index.html. <div class="div-1">Blue</div> <div class="div-2">Red</div> <div class="div-3">Yellow</div> احفظ الملف وأعد تحميله ضمن المتصفح ليعرض لك المتصفح نصًا في كل حاوية <div>. تستطيع إضافة عناصر HTML إضافية لنصك ضمن عناصر <div>، فعلى سبيل المثال جرّب إضافة وسوم عنوان HTML (<h2> حتى <h4>) لنصك ضمن وسوم <div> في ملف index.html. <div class="div-1"><h2>Blue</h2></div> <div class="div-2"><h3>Red</h3></div> <div class="div-3"><h4>Yellow</h4></div> احفظ الملف وأعد تحميله ضمن المتصفح، يجب أن يكون تنسيق النص داخل الحاوية <div> موافق للخصائص الافتراضية لوسوم <h1> حتى <h4>. لاحظ أن مواضع عناصر <div> تعدلت قليلًا، وإعادة التموضع هذه سببها خواص الهوامش الافتراضية لعناصر <h2> حتى <h4>. تستطيع تحديد قيم خصائص النص في حاويات <div> لتعديل تنسيقها من خلال مجموعات القواعد لأصناف <div>، لذا جرّب إضافة خصائص وقيم لمجموعات القواعد ضمن ملف styles.css كما هو موضح في الشيفرة التالية. .div-1 { background-color: blue; height: 50px; width: 50px; font-size: 10px; color: white; } .div-2 { background-color: red; height: 100px; width: 100px; font-size: 20px; color: yellow; } .div-3 { background-color: yellow; height: 200px; width: 200px; font-size:30px; color: blue; } احفظ ملف styles.css وأعد تحميل ملف index.html ضمن المتصفح، يجب أن يكون للنص داخل حاويات <div> تنسيق حسب قواعد CSS الموجودة ضمن ملف styles.css. الخلاصة تعرفت في هذا المقال كيفية تنسيق لون وحجم عنصر <div> وكيفية إضافة تنسيق لنص داخل عنصر <div>، وسوف تستخدم عنصر <div> للتحكم بتخطيط الصفحة عندما تبدأ ببناء موقعك الإلكتروني، أما في المقال التالي فسوف تتعلم عن نموذج صندوق CSS وكيفية استخدامه لتعديل حجم محتوى عنصر والحدود والهوامش والحشوة. ترجمة -وبتصرّف- للمقال How To Style the HTML <div> element with CSS لصاحبه Erin Glass. اقرأ أيضًا المقال السابق: كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS الدليل السريع إلى لغة التنسيق CSS التحكم في تموضع العناصر في CSS تنسيق نصوص صفحات الويب باستخدام CSS

سوف تُنشئ في هذا المقال محدد صنف CSS والذي يسمح لك بتطبيق قواعد CSS لعناصر HTML التي تمتلك هذا الصنف فقط، إن محددات صنف CSS مفيدة عندما تريد تطبيق قواعد تصميم مختلفة على نُسخ مختلفة من نفس عنصر HTML، أيضًا سوف تتعرف على كيفية إنشاء معرفات ID وأصناف زائفة في CSS. هذه المقالة هي واحدة من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية: كيفية بناء موقع باستخدام CSS كيفية فهم وإنشاء قواعد CSS كيفية تنسيق الصور باستخدام CSS كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS كيفية تنسيق عنصر div في HTML باستخدام CSS كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS كيفية بناء مخطط شبكي باستخدام CSS إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS كيفية إنشاء تذييل ثابت باستخدام HTML و CSS المتطلبات لمتابعة هذا المقال تأكد من تجهيزك للملفات والمجلدات الضرورية كما هو مذكور ضمن المقال الأول. كيف تعمل محددات صنف CSS يسمح محدد صنف CSS تعيين قواعد تصميم لعناصر HTML التي أسندت لها الصنف بدلًا من جميع النسخ التابعة لعنصر HTML معين، وعلى عكس عناصر HTML (مثل <p> أو <h1> أو <img>) التي تملك أسماء مُعرفة مسبقًا فإن أسماء الأصناف تُعين من قبل المطور عند إنشاء الصنف، وتُسبق هذه الأسماء دائمًا بنقطة . مما يُساعدك على التمييز بين محددات الوسم ومحددات الصنف ضمن ملفات CSS. تُكتب قاعدة محدد الصنف بنفس الطريقة التي تُكتب فيها قاعدة محدد الوسم مع اختلاف بسيط وهو وجود نقطة . تسبق اسم الصنف. .red-text { color: red; } يجب عليك تحديد الصنف ضمن وسم البداية لعنصر HTML لتتمكن من استخدام هذا الصنف عند إضافة محتوى HTML لصفحة الويب، وذلك باستخدام السمة class ضمن ملف HTML. <h1 class=".red-text">Content.</element> إنشاء قاعدة CSS باستخدام محدد الصنف لنبدأ التعلم العملي لاستخدام أصناف CSS، لذا امسح كل محتويات ملف styles.css وأضف الشيفرة التالية لتعيين قاعدة للصنف red-text. .red-text { color: red; } احفظ الملف بعد إضافة الشيفرة السابقة لملف styles.css. عد الآن لملف index.html وامسح كل شيء ما عدا السطر الأول من الشيفرة الآتية: <link rel="stylesheet" href="css/styles.css"> والذي يربط هذا الملف مع ملف قواعد CSS ثم أضف شيفرة HTML التالية. <p class="red-text">Here is the first sample of paragraph text.</p> لاحظ هنا أن اسم الصنف غير مسبوق بنقطة . كما هو الحال عند استخدامه كمحدد لقاعدة CSS، والآن يجب أن يتضمن ملف index.html المحتوى التالي. <link rel="stylesheet" href="css/styles.css"> <p class="red-text"> Here is the first sample of paragraph text.</p> أضفت باستخدام الشيفرة السابقة نصًا باستخدام الوسم <p>، وعرفت أيضًا الصنف red-text من خلال إضافة صنف class كالتالي class="red-text" ضمن وسم البداية في <p>. احفظ ملف index.html وحمله ضمن المتصفح. يجب أن تظهر لك صفحة الويب مع نص أحمر اللون. لنُضف الآن صنف CSS إضافي للتعرف أكثر على خيارات التصميم المختلفة لمحتوى نص الوسم <p> باستخدام أصناف مختلفة، أضف الشيفرة التالية لملف styles.css (مباشرةً بعد قاعدة CSS للصنف red-text). .yellow-background-text { background-color: yellow; } إن قاعدة CSS السابقة تُصرح أن الصنف yellow-background-text يمتلك القيمة yellow للخاصية background-color، وأي عنصر نص HTML يمتلك هذا الصنف سوف يمتلك خلفية صفراء اللون. لاحظ أن استخدام كلمة text ضمن الصنف yellow-background-*text*‎ هي بغرض تسهيل القراءة من قبل المطور فقط، ولست بحاجة لتضمين كلمة text ضمن أسماء الأصناف للأصناف التي تريد تعيينها لنص HTML. الآن لاستخدام صنف CSS الجديد عليك العودة إلى ملف index.html وإضافة سطر الشيفرة التالي في نهايته. <p class="yellow-background-text"> Here is the second sample of paragraph text.</p> أضفت في الشيفرة السابقة بعض المحتوى النصي ضمن عنصر <p> وخصصت له الصنف yellow-background-text، لذا عليك حفظ الملف وإعادة تحميله ضمن المتصفح، ليعرض لك صفحة ويب تتضمن عبارتين مختلفتين الأولى بلون أحمر والثانية بخلفية صفراء اللون. تستطيع إضافة أكثر من صنف واحد لوسم HTML، لذا حاول إضافة كل من الصنفين السابقين ضمن عنصر نص واحد من خلال إضافة السطر التالي لملف index.html. <p class="red-text yellow-background-text">Here is a third sample of text.</p> انتبه إلى أن الفاصل بين أسماء الأصناف هو فراغ فقط، ثم احفظ الملف وأعد تحميله ضمن المتصفح ليظهر لك التالي. يجب أن يكون السطر الثالث من النص مُنسقًا حسب قيم الخاصية المضبوطة في الصنف red-text والصنف yellow-background-text ليكون لون النص أحمر والخلفية صفراء. إضافة أصناف CSS للصور يُمكن تطبيق أصناف CSS على عناصر HTML أخرى مثل الصور، وللتعرف على كيفية استخدام أصناف CSS مع الصور عليك مسح محتوى الملف styles.css وإضافة الشيفرة التالية. .black-img { border: 5px dotted black; border-radius: 10%; } .yellow-img { border: 25px solid yellow; border-radius: 50%; } .red-img { border: 15px double red; } أنشأت هنا قواعد CSS لثلاث أصناف مختلفة يمكن تطبيقها على الوسم <img>، لكن قبل متابعة الخطوات لنلخص ما صرحنا عنه في كل مجموعة قواعد. تُصرح أول مجموعة قواعد CSS أن الصنف black-img يجب أن يمتلك حدود سوداء اللون black مُنقطة dotted بعرض 5 بكسل وقطر الحدود border-radius بحجم 10% مما يُعطي حدودًا منحنية للعنصر. تُصرح ثاني مجموعة قواعد CSS أن الصنف yellow-img يجب أن يمتلك حدود صفراء اللون yellow مُستمرة solid بعرض 25 بكسل وقطر الحدود border-radius بحجم 50% مما يُعطي حدودًا دائرية الشكل للعنصر. تُصرح ثالث مجموعة قواعد CSS أن الصنف red-img يجب أن يمتلك حدود حمراء اللون red مُكررة double بعرض 15 بكسل وهنا لم تضبط قطر الحدود لذلك سوف تتبع الحدود شكل العنصر. احفظ الملف styles.css ثم امسح محتويات الملف index.html ما عدا السطر الأول الآتي: <link rel="stylesheet" href="css/styles.css"> وأضف الشيفرة التالية. <img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="black-img"> <img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="yellow-img"> <img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="red-img"> يُضيف كل سطر من سطور HTML الثلاث السابقة صورة لملف HTML وتُعين صنفًا لهذه الصورة من الأصناف الثلاث التي أضفتها ضمن ملف styles.css. لاحظ أن مصدر الصورة هو من شبكة الإنترنت لكنك تستطيع استخدام صورة خاصة بك من خلال تعيين مسار الملف. احفظ الملف index.html وأعد تحميله ضمن المتصفح ليعرض لك نتيجةً مشابهة. يجب أن تعرض صفحة الويب الخاصة بك ثلاث صور لكل منها تصميم مختلف بمواصفات خاصة حسب الصنف المُسند لها. جرّب الآن استخدام أصناف جديدة لمتابعة التعرف على أصناف CSS مع استخدام قواعد CSS مختلفة وتطبيقها على أنواع مختلفة من وسوم HTML. انتبه أن الخواص والقيم المُحددة ضمن كتلة التصريح عن صنف سوف تعمل فقط على العناصر الموافقة لها والتي تتضمن هذا الصنف، فعلى سبيل المثال إن التصريح font-color لن يُغير لون حدود الصورة، و خاصية الارتفاع height لن تُغير من حجم الخط. أصبحت تعلم الآن كيفية إنشاء أصناف وتعيين خصائص وقيم معينة لها مع استخدامها على محتوى الصور والنصوص، وسوف تستخدم من جديد هذه الأصناف عندما تبدأ ببناء موقع إلكتروني ضمن النصف الثاني من هذه السلسلة التعليمية. كيفية إنشاء معرفات ID في CSS سوف تُنشئ في هذا القسم محددات المعرف ID في CSS وتتعلم كيفية استخدامها والفائدة منها عند بناء موقع إلكتروني باستخدام CSS و HTML. تعمل محددات المعرف ID في CSS بطريقة مشابهة لآلية عمل محددات الأصناف، حيث تسمح لك بإنشاء قواعد CSS يُمكن تطبيقها على عناصر HTML التي تمتلك سمة المعرف ID الفريدة، وكما هو الحال في الأصناف فإن أسماء المعرفات ID يختارها المطور عند إنشاء قاعدة CSS تستخدم محدد المعرف، لكن تختلف المعرفات ID عن الأصناف بأنك تستطيع استخدام المعرف ID مرة واحدة فقط ضمن ملف HTML، ولهذا سوف تُعرف معرفات IDs للعناصر التي تظهر ضمن صفحة مرة واحدة مثل الشعار أو عنوان الموقع أو القائمة، وعمومًا فإن معرفات CSS تُستخدم بقلة. إنشاء محدد ID في CSS عند إنشاء قاعدة CSS لمعرف ID فإن اسم المعرف ID يُسبق بإشارة #. #my-first-id { color: blue; } أنشأت في الشيفرة السابقة معرفًا بالاسم my-first-id وصرحت أن عنصر HTML النصي الذي يمتلك هذا المعرف سوف يكون أزرقًا. سوف نتعرف أكثر على كيفية عمل المعرفات من خلال مثال عملي. احذف محتويات الملف styles.css وأضف قاعدة CSS المذكورة في الأعلى ضمن الملف styles.css واحفظه. عد الآن إلى ملف index.html واحذف محتوياته، ما عدا السطر الأول من الشيفرة الآتية: <link rel="stylesheet" href="css/styles.css"> ثم أضف الشيفرة التالية. <p id="my-first-id">This text is styled using a CSS ID.</p> احفظ الملف وأعد تحميله ضمن المتصفح، يجب أن يظهر محتوى الصفحة لك كالتالي. أنشأت في هذا التمرين معرف ID وهو my-first-id ضمن ملف styles.css ثم طبقته على المحتوى النصي في ملف index.html باستخدام سمة المعرف. تستطيع إنشاء واستخدام المعرفات لأي نوع محتوى HTML مثل الصور وعناصر <div>. تعرفت على طريقة إنشاء واستخدام المعرفات لتنسيق العناصر التي تظهر مرة واحدة فقط ضمن صفحة الويب، وفي القسم التالي سوف تتعلم عن أصناف CSS الزائفة وهي نوع خاص من الأصناف يُفعل من خلال حالة معينة تنشط وفقًا لسلوك المستخدم. كيفية إنشاء أصناف زائفة في CSS سوف تُنشئ في هذا القسم أصناف CSS الزائفة وتتعلم كيفية استخدامها والغاية منها، كما أنك سوف تتدرب على كيفية استخدام الصنف الزائف hover: الذي يسمح لك تغيير تصميم العنصر عند تحريك محدد الفأرة فوقه. إن الأصناف الزائفة هي أصناف CSS تُفعل خلال حالات معينة، فعلى سبيل المثال إن الصنف الزائف hover: يُمكن استخدامه لتغيير مظهر عنصر صورة أو نص عند تحريك محدد الفأرة فوق هذا العنصر، ويُستخدم الصنف الزائف visited: لتغيير لون رابط بعد أن ضغط عليه المستخدم. يُصرح عن الأصناف الزائفة في CSS بوضع : واسم الصنف الزائف بعد محدد الوسم أو الصنف أو المعرف، ليُطبق هذا الصنف تلقائيًا على أي محتوى HTML يتضمن الوسم أو الصنف أو المعرف الخاص بالمحدد، ولا حاجة لإضافة أي شيفرة إضافية لعنصر HTML ليعمل الصنف الزائف. استخدام الصنف الزائف في CSS لنجرب مثالًا عمليًا يُساعدك في التعرف على آلية عمل الأصناف الزائفة. احذف جميع محتويات ملف styles.css وأضف الصنف الزائف التالي للملف. img:hover { border: 10px solid red; } أضفت في الشيفرة السابقة صنفًا زائفًا يُدعى hover: لمحدد الوسم <img>، لذا احفظ الملف الآن وعد إلى ملف index.html واحذف محتوياته، ما عدا السطر الأول من الشيفرة الآتية: <link rel="stylesheet" href="css/styles.css"> ثم أضف الشيفرة التالية لهذا الملف. <img src="https://css.sammy-codes.com/images/small-profile.jpeg"> احفظ ملف index.html ثم أعد تحميله ضمن المتصفح لتظهر لديك نتيجة مشابهة لما يلي. يجب أن تعرض صفحة صورة Sammy the shark، وعند تحريك محدد الفأرة فوق الصورة سوف تظهر حدود حمراء اللون بعرض 10 بكسل حول الصورة، وذلك لأن المتصفح يُطبق تلقائيًا الصنف الزائف hover: عند تفاعل المحدد مع عنصر img حسب القاعدة التي أضفتها ضمن ملف styles.css. تستطيع استخدام الصنف الزائف hover: ضمن عناصر النص، ولعمل هذا عليك مسح كل شي ضمن ملف styles.css وإضافة الصنف الزائف في الشيفرة التالية. p:hover { font-size:100px; color:red; } احفظ الملف styles.css ثم عد إلى ملف index.html واحذف محتوياته، ما عدا السطر الأول من الشيفرة <link rel="stylesheet" href="css/styles.css"> ثم أضف الشيفرة التالية. <p>Some text</p> احفظ الملف ثم أعد تحميله ضمن المتصفح وتحقق من النتائج، يحب أن تحصل على صفحة تتضمن النص Some text يتغير لونه وحجمه عند تحريك المحدد فوقه. الخلاصة تعرفت في هذا المقال على كيفية استخدام أصناف ومعرفات CSS إضافةً إلى الأصناف الزائفة والغاية منها، ورأيت آلية العمل من خلال تمارين طبقت فيها بعض الأصناف والمعرفات على عناصر الصورة والنص في HTML. سوف تستخدم هذه الأصناف لبناء التذييل للموقع الإلكتروني الذي سوف تُنشئه إن تابعت النصف الثاني من هذه السلسلة التعليمية. سوف تتعلم في المقال التالي كيفية إنشاء وتنسيق عنصر <div> في HTML الذي يُستخدم لهيكلة مخطط صفحة ويب. ترجمة -وبتصرّف- للمقالات How To Create Classes With CSS و How To Create IDs with CSS و How To Create Pseudo-classes With CSS لصاحبها Erin Glass. اقرأ أيضًا المقال السابق: كيفية تنسيق الصور باستخدام CSS أساسيات استعمال لغة CSS التنسيقات الأساسية للعناصر في CSS 5 فئات زائفة (pseudo-class) يجب عليك معرفتها في CSS