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

سوف تتعلم في هذا المقال كيفية تنسيق الصور باستخدام CSS لإضافة حدود وتغيير شكل وحجم الصورة، إذ يسمح لك استخدام CSS لتنسيق الصور تحديد كيف يجب أن تظهر الصورة ضمن الموقع باستخدام بضع قواعد CSS. هذه المقالة هي واحدة من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية: كيفية بناء موقع باستخدام CSS كيفية فهم وإنشاء قواعد CSS كيفية تنسيق الصور باستخدام CSS كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS كيفية تنسيق عنصر div في HTML باستخدام CSS كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS كيفية بناء مخطط شبكي باستخدام CSS إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS كيفية إنشاء تذييل ثابت باستخدام HTML و CSS المتطلبات لتتمكن من متابعة هذا المقال تأكد من تجهيزك للمجلدات والملفات المطلوبة كما هو مشروح في مقالٍ سابق ضمن هذه السلسلة إضافة صور لملف index.html أولًا عليك إضافة صورة لمجلد images، إذ تستطيع استخدام أي صورة بصيغة JPEG/JPG أو PNG، وليعمل هذا التمرين بأفضل صورة عليك اختيار صورة أبعادها ضمن المجال 150-200 بكسل و 150-200 بكسل للعرض والطول. بعد اختيارك لصورة ما احفظها ضمن المجلد images بالاسم small-profile.jpeg، ففي حال حفظتها باسم آخر عليك تعديل مسار ملف الصورة ضمن الخطوة التالية. احذف الآن أي محتوى ضمن الملف index.html ما عدا السطر الأول من الشيفرة الآتية: <link rel="stylesheet" href="css/styles.css"> وأضف الشيفرة التالية. <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot"> تستخدم الشيفرة أعلاه الوسم <img> لإضافة صورة وإعلام المتصفح بموقع ملف الصورة (images/small-profile.jpeg)، لذا تأكد من أن مسار الصورة صحيح وغيره إلى المسار الصحيح في حال استخدام اسم مختلف للصورة. أضفت أيضًا النص البديل Sammy the Sahrk باستخدام السمة alt، حيث عند تصميم موقع إلكتروني يجب إضافة النص البديل لجميع الصور لدعم إمكانية الوصول للموقع من قبل الأفراد الذين يستخدمون تطبيقات قراءة الشاشة. احفظ ملف index.html وأعد تحميله ضمن المتصفح لتظهر لك صفحة بيضاء تعرض الصورة التي استخدمتها. إن لم تُعرض صورتك عليك التحقق من أخطاء ضمن الشيفرة والتأكد من استخدام المسار الصحيح للصورة. إضافة تنسيق للصور طالما أن ملف index.html يعرض الصور التي اخترتها، سوف تُضيف قاعدة CSS لتنسيق الصورة لذا احذف محتويات الملف styles.css (إن كان يتضمن شيفرة من المقالات السابقة) وأضف القاعدة التالية في أسفل الملف. img { border: 2px solid red; border-radius: 8px; width: 200px; } احفظ الملف styles.css وأعد تحميل الملف index.html ضمن المتصفح، يجب أن تظهر لك الآن الصورة مع خواص التنسيق الجديدة. حددت في قاعدة CSS السابقة القيم لثلاث خواص مختلفة للعنصر <img>، وهنا سوف نتوقف للحظة لمعاينة الخواص والقيم المختلفة. خاصية border تسمح لك بإضافة حدود للصورة وتخصيص حجم وتصميم ولون الحدود، ولاحظ أنك تستطيع إضافة عدة قيم لخاصية CSS هذه، إذ حدد في القاعدة حدود حمراء اللون red مستمرة solid وبعرض 2px. خاصية border-radius تُعرف قطر زاوية العنصر مما يسمح لك بالحصول على حواف دائرية للعنصر، وفي هذه القاعدة حدد حجم القطر ب 8 بكسل. جرب تغيير هذه القيمة لتتعرف على كيفية تأثر حواف الصورة بها. تُعرف خاصية width عرض الصورة، وفي هذه القاعدة حددت عرض الصورة ليكون 200 بكسل، ولاحظ في حال عدم تحديد قيمة ارتفاع الصورة سوف يُعدل ارتفاع الصورة ليتناسب مع نسبة عرض لارتفاع الصورة تلقائيًا. أيضًا جرب تغيير قيمة كل من الارتفاع والعرض بنفس الوقت لمعرفة ما سوف يحصل. تعلم كيفية تطبيق التصميم على جميع الصور انتبه أنه في حال أضفت صورًا إضافية لملف HTML سوف تمتلك هذه الصور نفس التصميم، ولدراسة كيفية عمل هذه القواعد أضف صورة ثانية لملف index.html باستخدام عنصر <img> (تستطيع نسخ ولصق عنصر <img> الأول إن كنت لا تملك صورة ثانية). <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot"> <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot"> تأكد من تغيير قسم src للمسار الصحيح لملف الصورة ثم احفظ ملف index.html وأعد تحميله ضمن المتصفح، يجب أن تعرض صفحة الويب الآن صورتين بنفس التصميم ونفس قواعد CSS للوسم <img>. تستطيع متابعة استكشاف الخيارات الممكنة للصور من خلال تغيير قيم قاعدة CSS التي أنشأتها ضمن ملف styles.css ثم حفظ الملف وإعادة تحميل ملف index.html والتحقق من النتائج. الخلاصة تعرفت في هذا المقال على كيفية تنسيق صورة باستخدام CSS من خلال تعديل حجم الحدود ولونها وظهور الصورة وارتفاعها وعرضها وحتى قطر الحدود، وسوف يكون لك عودة لتصميم الصورة عندما تبدأ ببناء موقعك الإلكتروني في النصف الثاني من هذه السلسلة التعليمية. أصبحت الآن معتادًا على تطبيق مجموعة قواعد تصميم على جميع عناصر وسم <img> وربما تتساءل كيفية تطبيق قواعد تصميم مختلفة لوسوم فردية أو مجموعة وسوم <img>، لذا سوف تتعلم في المقال التالي كيفية إنشاء أصناف CSS التي تسمح للمطورين ترتيب عناصر HTML ضمن أصناف مختلفة تمتلك قواعد CSS مختلفة. ترجمة -وبتصرّف- للمقال How To Style Images With CSS لصاحبه Erin Glass. اقرأ أيضًا تعرّف على أساسيات CSS الفرق بين صفحة الويب وموقع الويب وخادم الويب ومحرك البحث HTML و CSS للمبتدئين: كيف تنشئ موقعا من عدة صفحات تحويل واجهة موقع من مجرد تصميم على فوتوشوب إلى HTML و CSS

سوف تتعلم في هذا المقال كيفية فهم وإنشاء قواعد CSS (المعروفة أيضًا بمجموعة القواعد) للتصميم والتحكم بمُخطط محتوى HTML، سوف يبدأ هذا المقال بمثال عن قاعدة CSS التي تجعل عناصر HTML ذات الوسم <h1> باللون الأزرق وذلك لتتطلع على كيفية عمل قواعد CSS في الميدان قبل شرح كل مكون من مكونات قاعدة CSS. هذه المقالة هي واحدة من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية: كيفية بناء موقع باستخدام CSS كيفية فهم وإنشاء قواعد CSS كيفية تنسيق الصور باستخدام CSS كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS كيفية تنسيق عنصر div في HTML باستخدام CSS كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS كيفية بناء مخطط شبكي باستخدام CSS إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS كيفية إنشاء تذييل ثابت باستخدام HTML و CSS المتطلبات لتتمكن من متابعة هذا المقال تأكد من أنك ضبطت المجلدات والملفات الضرورية كما هو مشروح في المقال السابق. الاطلاع على مثال عن قاعدة CSS تجد في الأسفل مثالًا عن قاعدة CSS، اكتب القاعدة التالية ضمن الملف styles.css. h1 { color: blue; } احفظ الملف styles.css، وانتبه لوجود مسافة بادئة قبل color:blue بقيمة فراغين، ويُنصح باستخدام المسافة البادئة باعتبارها عُرف عند كتابة قواعد CSS يجعلها أسهل للقراءة من قبل المطورين. تطلب الشيفرة التي أضفتها للتو من المتصفح إعطاء اللون الأزرق لأي نص موجود ضمن الوسم <h1>. أضف الآن جزءًا من محتوى HTML موسومًا بالعنصر <h1> ضمن الملف index.html، وذلك أسفل السطر الآتي: <link rel="stylesheet" href="css/styles.css"> تمامًا في أعلى الملف. <h1>A Sample Title</h1> احفظ الملف وحمل ملف HTML ضمن المتصفح ثم تحقق من النتائج، حيث يجب أن تحصل على النتيجة في الصورة التالية ضمن متصفحك. إن لم تحصل على نفس النتيجة، تحقق من أنك حفظت كل من الملفين index.html و styles.css وأن الشيفرة خالية من الأخطاء. كيفية فهم عناصر قاعدة CSS لنتفحص الآن مثال قاعدة CSS لفهم كل من مكوناتها المختلفة، إذ إن قاعدة CSS عمومًا مؤلفة من محدد وكتلة تعريف وخصائص وقيم، يوضح الشكل التالي تمثيل كل من الأجزاء السابقة ضمن القاعدة. لنلق نظرة الآن على كل من هذه الأجزاء وعلاقتها مع مثال قاعدة CSS. يُشير المحدد إلى نوع المحتوى الذي سوف يُصمم باستخدام قاعدة CSS ويوضع في بداية قاعدة CSS وخارج الأقواس، وفي مثالنا فإن المحدد هو الوسم <h1> وهو عنصر HTML. سوف نتعلم أنواع محددات أخرى ضمن السلسلة التعليمية. كتلة التعريف هي الجزء المسؤول عن تعريف قاعدة التصميم للمحدد ضمن قاعدة CSS، وتوضع هذه الكتلة ضمن أقواس مجموعة، بالنسبة لمثالنا فإن كتلة التعريف هي ;color:blue. تُشير الخاصية إلى خاصية محتوى HTML الذي سوف تُعدله قاعدة CSS مثل color أو font-size، وفي مثالنا فإن الخاصية هي color ولاحظ وجود فاصلة منقوطة بعد الخاصية. تُشير القيمة إلى قيمة مُحددة مُسندة إلى الخاصية مثل 16px أو blue، وفي مثالنا فإن القيمة هي blue وانتبه لوجود فاصلة منقوطة في نهاية القيمة. حال التصريح عن قاعدة لمحدد سوف يُعرض كل جزء من محتوى HTML الذي يتضمن ذلك المحدد حسب القاعدة لكن هناك استثناءات يُمكن أن تظهر عند وجود قواعد CSS متعارضة حيث تُعطى الأولوية لقاعدة على الأخرى. كيفية التصريح عن قيم لعدة خواص في قاعدة CSS سوف تتعلم في هذا المقال كيفية التصريح عن القيم لعدة خواص ضمن قاعدة CSS، إذ يسمح لك هذا باستخدام العديد من تعليمات التصميم مثل الحجم واللون والمحاذاة لعنصر واحد في خطوة واحدة. سوف تتعرف أيضًا على كيفية إنشاء قواعد CSS متنوعة تسمح لك بتطبيق تصاميم مختلفة لأقسام مختلفة من المحتوى ضمن ملف HTML. إنشاء قاعدة CSS تتضمن تصريحات متعددة لإضافة أكثر من تصريح واحدة ضمن قاعدة CSS حاول تعديل قاعدة <h1> ضمن ملف styles.css (أو أضف الشيفرة التالية كاملةً إن كنت غير متابع للسلسلة منذ البداية) ليتضمن التصريحات المُشار لها في الشيفرة التالية. h1 { color: blue; font-size: 100px; font-family: Courier; text-align: center; } احفظ الملف وأعد تحميل ملف HTML ضمن المتصفح، يجب أن يكون النص ظاهرًا في منتصف الصفحة وحجمه 100 بكسل ونوع الخط Courier. سوف تُضيف في القسم التالي المزيد من قواعد CSS لزيادة خيارات التصميم الممكنة لمحتوى صفحة ويب. إنشاء قواعد CSS متعددة للتحكم بتصميم محتوى HTML سوف تُضيف في هذا القسم بعض النصوص لملف index.html باستخدام الوسم <p>، وسوف تُعدل خواصه باستخدام مجموعة قواعد جديدة ل CSS تُطبق فقط على وسوم <p>. أضف السطر الذي يتضمن <p>Some paragraph text</p> ضمن الملف index.html أسفل السطر الموجود <h1>A sample title<h1> والذي أضفته في المقال السابق. <h1>A sample title</h1> <p>Some paragraph text</p> احفظ ملف index.html وأعد تحميله ضمن المتصفح للتحقق من طريقة عرض الملف، حيث يجب أن يُعالج متصفحك العنوان باللون الأزرق ويعرض الفقرة كما يظهر في الصورة التالية. لنُضف الآن قاعدة CSS لتصميم العنصر <p>، وذلك بالعودة للملف styles.css وإضافة مجموعة القواعد التالية في أسفل الملف. p { color: green; font-size: 20px; font-family: Arial, Helvetica, sans-serif; text-align: center; } احفظ الملف وأعد تحميله ضمن نافذة المتصفح للتحقق من كيفية عرض الملف، حيث يجب أن يتضمن نص <p> التصميم الذي صرحت عنه في قاعدة CSS السابقة. الآن يوجد لديك قواعد CSS لكل من <h1> و <p> وأي نص تُحيطه بهذه الوسوم ضمن ملف HTML سوف يأخذ نفس التصميم الذي صرحت عنه في هذه العناصر ضمن ملف styles.css. تدريب عملي إضافي إن أردت المزيد من التدريب على قواعد CSS حاول إنشاء مجموعة قواعد CSS لنصوص موجودة ضمن عناصر HTML مختلفة مثل <h2> و <h3> و <h4> واستخدمها لتعديل النص ضمن ملف index.html، وإن كنت لا تدري كيف تبدأ بها تستطيع نسخ قواعد CSS الموجودة في المثال التالي وإضافتها لملف styles.css الذي لديك. h2 { color: red; font-size: 40px; } h3 { color: purple; font-size: 50px; } h4 { color: green; font-size: 60px; } احفظ الملف ثم أضف محتوى HTML التالي لملف index.html. <h2> This is red text with a size of 40 pixels. </h2> <h3> This is purple text with a size of 50 pixels. </h3> <h4> This is green text with a size 60 pixels. </h4> احفظ الملف وأعد تحميل ملف index.html ضمن المتصفح، حيث يجب أن تظهر لك النتائج التالية. الخلاصة تعرفت في هذا المقال على جميع المكونات التي تحتاجها لكتابة قاعدة CSS كاملة والتي تضمنت المحدد وكتلة التعريف والخواص والقيم، وضمن القسم التالي سوف تُضيف عدة خواص لقاعدة CSS وسوف تُنشئ قواعد CSS مُختلفة لملف HTML واحد، كما أنك تدربت على تخصيص القيم لعدة خواص باستخدام CSS، وتستطيع الآن إنشاء عدة قواعد CSS لتصميم تنسيق محتوى النص في ملف HTML، كما أن هذه المهارات سوف تتطور عندما تبدأ ببناء موقع إلكتروني لاحقًا ضمن السلسلة التعليمية، أما في المقال التالي سوف تبدأ بتعلم كيفية تنسيق الصور باستخدام CSS. ترجمة وبتصرف للمقالات How To Understand and Create CSS Rules وHow To Declare Values For Multiple Properties In a CSS Rule. اقرأ أيضًا تعرّف على أساسيات CSS الفرق بين صفحة الويب وموقع الويب وخادم الويب ومحرك البحث HTML و CSS للمبتدئين: كيف تنشئ موقعا من عدة صفحات تحويل واجهة موقع من مجرد تصميم على فوتوشوب إلى HTML و CSS

سوف تتعرف من خلال هذه السلسلة التعليمية على لغة CSS وهي لغة تُستخدم للتحكم بطريقة عرض المواقع الإلكترونية إذ سوف تبني موقعًا خاصًا بك باستخدام الموقع التوضيحي كنموذج، وعلى الرغم من أن الموقع التوضيحي يتضمن معلومات عن القرش Sammy إلا أنك تستطيع استبدال هذه المعلومات بالمعلومات الخاصة بك. تُعد لغة CSS إلى جانب HTML و جافا سكريبت واحدة من التقنيات الأساسية في عالم الويب، لذا إن كنت تملك بعض الفهم للغة HTML وتريد بناء مهارات تطوير الواجهة الأمامية فإن تعلم CSS خطوة ممتازة وضرورية. سوف يُعرفك النصف الأول من هذه السلسلة التعليمية على CSS من خلال تمارين عملية، أما النصف الثاني سيوفر لك خطوات تُساعدك على إعادة تصميم الموقع التوضيحي. سوف تمتلك عند الانتهاء من هذه السلسلة التعليمية ملفات جاهزةً لرفع موقع إلى استضافة، بالإضافة إلى امتلاكك المقدرة على متابعة تعديل تصميم الموقع باستخدام HTML و CSS، سوف تمتلك أيضًا الأساس لتعلم مهارات إضافية في مجال تطوير الواجهات الأمامية للويب (مثل جافا سكريبت). هذه المقالة هي المقالة الأولى من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية: كيفية بناء موقع باستخدام CSS كيفية فهم وإنشاء قواعد CSS كيفية تنسيق الصور باستخدام CSS كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS كيفية تنسيق عنصر div في HTML باستخدام CSS كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS كيفية بناء مخطط شبكي باستخدام CSS إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS كيفية إنشاء تذييل ثابت باستخدام HTML و CSS المتطلبات محرر شيفرة مثل Visual Studio Code أو Atom، وفي هذه السلسلة سوف نستخدم Visual Studio Code كمحرر شيفرة افتراضي لكنك تستطيع استخدام أي محرر تريده، كما أن هناك بعض التعليمات التي تحتاج للتعديل قليلًا عند استخدام محرر مختلف. متصفح ويب مثل فايرفوكس أو كروم، سوف نستخدم في هذه السلسلة المتصفح فايرفوكس كمتصفح افتراضي لكنك تستطيع استخدام أي متصفح تريده، مع العلم أنه يوجد بعض التعليمات التي تحتاج القليل من التعديل عند استخدام متصفح مختلف. صورتان شخصيتان لتخصيص موقعك (اختياري). معرفة بلغة HTML، فإنك لا تعلم أي شيء عن هذه اللغة أو ترغب في تنشيط معلوماتك تستطيع متابعة الدروس العشرة الأولى من سلسلة كيفية بناء موقع إلكتروني باستخدام HTML قبل البدء بهذه السلسلة. سوف تُصبح جاهزًا للبدء ببناء مشروع باستخدام CSS بالاعتماد على الدروس القادمة عند تجهيز المتطلبات السابقة. مقدمة مختصرة إلى CSS يتضمن هذا المقال أصل ظهور CSS وسوف يوفر لمحة شاملة عالية المستوى عن طريقة عمل CSS مع HTML، كما أنه سوف يُحضّرك لتُتابع التمارين العملية ومشروع بناء موقع في المحتويات التعليمية القادمة. تاريخ CSS قُدمت شيفرة CSS لأول مرة من قبل هاكون ويوم لي عام 1994 عندما كان يعمل في المنظمة الأوروبية للبحث النووي CERN - European Organization for Nuclear Research إلى جانب تيم بيرنرز لي مُبتكر شبكة الويب العالمية، وفي ذلك الوقت كان إنشاء صفحات الويب مُقتصرًا فقط على HTML (Hypertext Markup Language) التي طورها بيرنرز لي في التسعينيات، لكن الهدف الرئيسي من تطوير HTML كان لوصف دلالات مكونات وثيقة ضمن الشبكة (مثل عناوينها وفقراتها) وليس توفير تعليمات تصميمية، وعندما أصبح الاستخدام المُتنامي لشيفرة HTML لتصميم صفحات الويب غير عملي قُدمت CSS لتوفر طريقة أكثر فعالية لتصميم مظهر وهيكلية موقع إلكتروني بالاشتراك مع HTML. كيف تعمل CSS مع HTML تتألف المواقع المبنية باستخدام HTML و CSS من ملف HTML يتضمن محتوى مثل النص وروابط الصور ووسوم HTML، وملف CSS يتضمن قواعد التصميم التي تُطبق على محتوى HTML، فعلى سبيل المثال يُمكن لملف HTML أن يتضمن نص العنوان (موسوم بالوسم <h1>) ونص فقرة (موسوم بالوسم <p>)، وملف CSS المرتبط به يُمكن أن يتضمن قواعد توجه المتصفح لجعل جميع نصوص العناوين بحجم 20 بكسل ونص الفقرة بلون أزرق. سوف تُطبق قواعد CSS هذه على نصوص جميع العناوين والفقرات أينما ظهرت ضمن ملف HTML دون الحاجة لإضافة تعليمات التصميم ضمن ملف HTML كل مرة. إن CSS أداة قوية لإعادة ترتيب محتوى الموقع حيث تستطيع استخدامه لإنشاء صناديق محتوى من خلال التحكم بالحجم واللون وخواص اخرى تُساعدك على تصميم الهيكلية لصفحة الويب. سوف تستخدم CSS في المقالات التعليمية التالية للتحكم بتصميم النص والصورة وعناصر HTML الأخرى، إضافةً إلى تصميم تخطيط الصفحة، وللبدء بهذا عليك أولًا إنشاء بضع ملفات ومجلدات لتتدرب فيها على كتابة شيفرة HTML و CSS، وفي الفقرة التالية سوف نُرشدك عبر خطوات للبدء بمشروع HTML و CSS باستخدام محرر الشيفرات المجاني المتوفر Visual studio Code. كيفية البدء بمشروع تدريبي على HTML و CSS باستخدام محرر الشيفرة سوف تُنشئ في هذه الفقرة المجلدات والملفات الضرورية لاستخدام CSS وبناء موقع إلكتروني، وسوف تستخدم محرر الشيفرة لإنشاء مسار لمشروع موقعك الإلكتروني يتضمن مجلدًا بداخله ملف لشيفرة CSS الخاصة بنا وملفًا يتضمن شيفرة HTML ومجلدًا يتضمن الصور. سوف نستخدم في هذه السلسلة التعليمية برنامج Visual Studio Code، وهو محرر شيفرة مجاني متوفر لأنظمة ماك وويندوز ولينكس لكن لك الحرية في استخدام أي محرر شيفرة تُفضله، وانتبه إلى وجود بعض التعليمات أو الخطوات التي تحتاج تعديلات طفيفة في حال استخدمت محررًا مُختلفًا. كيفية إنشاء ملفات ومجلدات HTML و CSS افتح محرر النصوص المُفضل لديك ثم افتح مجلد مشروع جديد وأسمه css-practice، سوف نستخدم هذا المجلد لحفظ جميع الملفات والمجلدات التي سوف تُنشئها خلال هذه السلسلة التعليمية. لإنشاء مجلد مشروع جديد في برنامج Visual Studio Code توجه إلى قائمة File في القائمة العلوية ثم اختر Add Folde to Workspace، سوف تظهر لك نافذة جديدة اضغط فيها على خيار مجلد جديد لإنشاء مجلد باسم css-practice. أنشئ الآن مجلدًا جديدًا ضمن المجلد css-practice وأسمه css، وضمن هذا المجلد افتح ملفًا جديدًا ضمن مسار المشروع واحفظه بالاسم styles.css (هذا هو الملف الذي سوف تستخدمه لحفظ قواعد تنسيق CSS)، وفي حال كنت تستخدم برنامج Visual Studio Code تستطيع إنشاء مجلد جديد بالنقر باستخدام زر الفأرة الأيمن (ضمن نظام ويندوز) أو الضغط على CTRL + ضغط زر الفأرة الأيسر (ضمن نظام ماك) على مجلد css-practice واختيار "New Folder" وإنشاء المجلد css، ثم اضغط بزر الفأرة الأيمن (في نظام ويندوز) أو اضغط CTRL + زر الفأرة الأيسر (نظام ماك) على المجلد الجديد css واختر "New File" وأنشئ الملف styles.css كما هو موضح في الصورة المتحركة التالية. احفظ الملف وأبقه مفتوحًا. يجب عليك أيضًا إنشاء ملف لإضافة محتوى HTML من نص وصور وعناصر HTML أخرى سوف يُعالجها المتصفح، لذا افتح ملفًا جديدًا إضافيًا ضمن المجلد css-practice واحفظه باسم index.html بنفس الطريقة التي شرحناها لملف styles.css. ملاحظة: تأكد من حفظ ملف index.html ضمن مجلد css-practice وليس ضمن مجلد css. عليك الآن إضافة سطر برمجي ضمن الملف index.html يطلب من المتصفح استخدام ملف styles.css كملف التصميم الخاص بنا، ولعمل هذا سوف تستخدم الوسم <link> وتربطه مع ملف styles.css من خلال إضافة الشيفرة البرمجية التالية لملف HTML. <link rel="stylesheet" href="css/styles.css"> تُخبر الشيفرة السابقة المتصفح أن يُفسر شيفرة HTML بالاعتماد على ملف CSS الموجود ضمن css/styles.css، لذا عليك عدم حذف هذا السطر عند إضافة أو إزالة محتوى من ملف index.html أثناء اتباع الخطوات المشروحة في هذه السلسلة. احفظ الملف index.html وأبقه مفتوحًا. أنشئ الآن مجلدًا إضافيًا ضمن المجلد css-practice وأسمه images بنفس الطريقة المشروحة سابقًا لإنشاء المجلد css، وسوف تستخدم هذا المجلد لحفظ الصور التي سوف تستخدمها ضمن هذه السلسلة التعليمية. يجب أن يكون لديك الآن مجلد مشروع اسمه css-practice يتضمن المجلدات والملفات الضرورية للتعرف على CSS في هذه السلسلة التعليمية: مجلد اسمه css يتضمن ملفًا اسمه styles.css مجلد فارغ اسمه images ملف اسمه index.html إن كنت تستخدم برنامج Visual Studio Code يجب أن تظهر لديك شجرة الملفات التالية والملفات المفتوحة. لاحظ أن أسماء الملفات تتضمن الامتدادات .html و .css والتي تُشير إلى نوع المحتوى الذي تتضمنه، وخلال التدريبات العملية سوف تُضيف محتوى لهذه الملفات. إصلاح مشاكل وأخطاء CSS و HTML الدقة مهمة عند العمل مع HTML و CSS حيث أن فراغًا إضافيًا أو أي خطأ إملائي في محرف ما يُمكن أن يمنع شيفرتك من العمل كما هو متوقع منها، لذا في حال لم يُعالج المتصفح شيفرة CSS و HTML كما هو متوقع عليك التأكد أن كتبت الشيفرة تمامًا كما هي مكتوبة ضمن المقال، وبالرغم من أننا نُشجعك على كتابة الشيفرة يدويًا لتتعلمها إلا أن النسخ واللصق مفيد في بعض الأوقات لضمان أن الشيفرة مُطابقة للأمثلة. هناك عدة أسباب لظهور أخطاء CSS و HTML، إذ عليك التحقق من الوسوم وقواعد CSS من وجود فراغات إضافية أو مفقودة و وسوم مفقودة أو تتضمن أخطاء إملائية وعلامات تنصيص أو محارف مفقودة أو خاطئة، وعليك أيضًا التأكد من عدم استخدام علامات الاقتباس المائلة أو الذكية مثل “ و " المُستخدمة غالبًا من قبل معالجات النصوص. إن علامات الاقتباس المائلة مُصممة للنص المقروء من قبل الإنسان وسوف يُسبب خطأ ضمن الشيفرة كونها غير مُعرفة كعلامات اقتباس من قبل المتصفح، لذا عند كتابة علامات الاقتباس مباشرةً ضمن محرر الشيفرة تستطيع أن تضمن أنك تستخدم علامات الاقتباس الصحيحة. تأكد من حفظ الملف في كل مرة تُجري فيها تغيير على الشيفرة قبل إعادة تحميله ضمن المتصفح للتحقق من النتائج. ملاحظة سريعة حول ميزات دعم HTML التلقائية إن بعض محررات الشيفرة مثل محرر Visual Studio Code الذي نستخدمه في هذه السلسلة التعليمية توفر دعمًا تلقائيًا لكتابة شيفرة HTML فمثلًا إن Visual studio Code يوفر اقتراحات ذكية وإكمال تلقائي للشيفرة، وبالرغم من كون هذه الميزة مفيدة إلا أنه عليك الانتباه من إمكانية توليد أجزاء إضافية ضمن الشيفرة سوف تُسبب ظهور أخطاء في حال لم تكن معتادًا على استخدام هذه الميزات. إن شعرت أن هذه الميزات مربكة تستطيع تعطيلها ضمن تفضيلات محرر الشيفرة. أصبحت جاهزًا الآن للمتابعة بالسلسلة التعليمية، وفي المقال التالي سوف تبدأ بالتعرف على كيفية استخدام قواعد CSS للتحكم بالتصميم وتخطيط محتوى HTML ضمن صفة الويب. ترجمة -وبتصرّف- للمقالات A Brief Introduction To CSS و How To Set Up Your CSS and HTML Practice Project With a Code Editor لصاحبه Erin Glass. اقرأ أيضًا تعرّف على أساسيات CSS الفرق بين صفحة الويب وموقع الويب وخادم الويب ومحرك البحث HTML و CSS للمبتدئين: كيف تنشئ موقعا من عدة صفحات تحويل واجهة موقع من مجرد تصميم على فوتوشوب إلى HTML و CSS

إن ضبط الضرائب ونسبة الضرائب هي أولى المهام التي ترغب في إنجازها عند ضبط المتجر، وهو أمر يُمكن أن يكون معقدًا لكن هدف ووكومرس هو جعل هذه العملية بسيطة قدر الإمكان. تفعيل الضرائب عليك تفعيل الضريبة لتتمكن من الوصول لنافذة ضبط الضرائب: توجه إلى WooCommerce ثم اضغط على "الإعدادات" واختر تبويب "عام". اختر تمكين أسعار الضرائب والعمليات الحسابية. احفظ التغييرات. ضبط خيارات الضريبة بعد تفعيل الضرائب في الخطوة السابقة توجه إلى WooCommerce ثم اضغط على "الإعدادات" واختر تبويب "الضرائب"، والذي يظهر فقط عند تفعيل الضرائب. يعرض هذا التبويب عدة خيارات تستطيع ضبطها لتناسب احتياجاتك – تعتمد الإعدادات التي تختارها على الموقع الذي يتبع له متجرك. الأسعار المدخلة مع الضريبة إن هذا الخيار ربما هو الأهم فيما يخص إدارة الضرائب ضمن متجرك حيث يُحدد كيف سوف تُدخل أسعار المنتجات لاحقًا. نعم، سأقوم بإدخال الأسعار متضمنةً الضريبة: يعني هذا أن أسعار المنتجات التي تُدخلها ضمن متجرك تتضمن الضريبة، فعلى سبيل المثال في المملكة المتحدة سوف تدخل الأسعار متضمنة الضريبة وهي 20% فمثلًا لو أدخلت سعر منتج ما 9.99 جنيه استرليني فإنه يتضمن الضريبة 1.67 جنيه، وبالتالي سوف يدفع العميل ضمن الممكلة المتحدة مبلغًا وقدره 9.99 جنيه كما هو واضح في سعر المنتج لكن عميل ضمن أمريكا سوف يدفع 8.32 جنيه كونه لا يخضع لهذه الضريبة. لا، سأقوم بإدخال الأسعار غير متضمنةً الضريبة: يعني هذا أن أسعار المنتجات التي تُدخلها ضمن متجرك لا تتضمن الضريبة، فعلى سبيل المثال فإن متجرًا ضمن المملكة المتحدة سوف يُدخل سعر 8.32 جنيه كسعر للمنتج والضريبة سوف تكون 20% والتي تُضاف للسعر عند إتمام الطلب وهذا يجعل المجموع الكلي 9.99 جنيه. حساب الضريبة للأسعار التي تتضمن الضريبة كالتالي: tax_amount = price - ( price / ( ( tax_rate_% / 100 ) + 1 ) ) حساب الضريبة للأسعار التي لا تتضمن الأسعار كالتالي: tax_amount = price * ( tax_rate_% / 100 ) عرض الأسعار في المتجر يحدد هذا الخيار كيفية عرض الأسعار ضمن المتجر حيث تستطيع الاختيار بين عرض السعر متضمن للضريبة أو بدون ضريبة، وننصح بضبط هذا الخيار لعرض السعر بدون ضريبة إن كانت الأسعار المُدخلة لا تتضمن ضريبة أو عرض السعر مع ضريبة إن كانت الأسعار المُدخلة تتضمن الضريبة. ملاحظة: إن لم تكن هذه الإعدادات متوافقة، عندها يُمكن يظهر للعميل خطأ في تشكيلة معينة لأسعار المنتج ونسب الضريبة، حيث يحصل هذا عندما يكون السعر المحسوب (سواء كان يتضمن الضريبة أو لا) يمتلك خانات بعد الفاصلة أكثر من المسموح عرضه ضمن المتجر وكنتيجة لهذا يُقرب السعر. حساب الضريبة يُحدد هذا الخيار أي عنوان يُستخدم لحساب الضريبة. عنوان فاتورة الزبون. عنوان شحن للزبون (الافتراضي). عنوان المتجر. إن كنت تستخدم عنوان المتجر عندها سوف تُحسب الضرائب دائمًا اعتمادًا على موقع المتجر وليس موقع العميل. فئة ضريبة الشحن تُورث فئة ضريبة الشحن في معظم المتاجر من العنصر المشحون فعلى سبيل المثال عند شحن عنصر ذي نسبة ضريبة مخفضة مثل ملابس الأطفال سوف تكون نسبة ضريبة الشحن مخفضة، وفي حال لم يكن هذا الأمر متوافقًا مع المنطقة الضريبة التابع لها عليك اختيار فئة ضريبة مختلفة. وفي حال وجود عدة نسبة ضريبية مختلفة ضمن نفس الطلب فإن ضريبة الشحن سوف تُطبق كالتالي: إن كنت تملك منتجًا بأسعار معيارية في الطلب عندها سوف تُستخدم للشحن بغض النظر عما إذا كانت هذه النسبة مرتفعة أم لا. إن كنت لا تملك منتجًا بأسعار معيارية في الطلب عندها سوف تُستخدم نسبة الضريبة الموجودة أولًا ضمن قسم "فئات ضريبة إضافية". الهدف هو التأكد من أن أعلى نسبة هي الأولى ضمن قسم "فئات ضريبة إضافية" في حال لم تستخدم الأسعار المعيارية وكنت تريد تطبيق أعلى نسبة ضريبة على الشحن على سبيل المثال. إليك ضبطًا يوضح الفكرة بصريًا: الفئة المعيارية موجودة افتراضيًا لكن الضريبة ( أ ) والضريبة ( ب ) والضريبة ( ج ) يجب إنشاؤها لكل فئة على الترتيب، وانتبه إلى أنه من غير الممكن حذف الفئة المعيارية لكنك تستطيع إبقاءها فارغة لتجاهلها. الأسعار المعيارية فارغة. الضريبة أ (24%) – تظهر النسبة الأعلى أولًا ضمن القائمة. الضريبة ب (14%). الضريبة ج (10%). وبالمحصلة سوف تُطبق نسبة الضريبة الأعلى على الشحن ضمن الطلب الذي يتضمن عدة معدلات ضريبة مختلفة للمنتجات: التقريب إن فعّلت الخيار قدّر سعر الضريبة على مستوى المجموع الكلي، بدلًا من أن يكون التقريب لكل سطر سوف تُنجز عملية التقريب على مستوى المجموع الجزئي، لذا عليك التحقق من القانون الضريبي التابع له لمعرفة إن كان هذا الأمر صحيحًا. فئات ضريبة إضافية تُعين فئات الضريبة إلى المنتجات، وفي معظم الحالات ترغب في استعمال الأسعار المعيارية، لكن إن كنت تبيع منتجات تتطلب فئة ضريبية مختلفة، تستطيع إضافة فئات هنا، وللبدء بهذا الأمر أضفنا فئات الضريبة المعيارية والمُخفضة وذات المعدل الصفري. تُعرض كل فئة في أعلى صفحة إعدادات الضريبة وما عليك سوى الضغط على الفئة لعرض معدلات الضريبة المُسندة للفئة. عرض الأسعار ضمن السلة وأثناء إتمام الطلب يُحدد هذا الخيار كيفية عرض الأسعار ضمن السلة وصفحة إتمام الطلب، حيث يعمل مستقلًا عن أسعار قائمة المنتجات، وتستطيع الاختيار بين عرض الضريبة مُضمنة أو غير مُضمنة. النص المعروض بعد السعر يسمح لك بتغيير العرض إلى "الأسعار تتضمن _% ضريبة/ضريبة القيمة المضافة" أو أي شيء مناسب لمتجرك، حيث تستطيع استخدام هذين الاختصارين إن أردت عرض النص قبل وبعد السعر. {price_including_tax} {price_excluding_tax} فعلى سبيل المثال "السعر يتضمن ضريبة القيمة المُضافة: price_including_tax" سوف يعرض كالتالي :السعر يتضمن ضريبة القيمة المضافة: $15 (إن كان هذا هو السعر)، لذا إن ضبطت الضرائب لتعرض السعر بدون ضريبة، تستطيع إضافة كيف يُصبح السعر مع تضمين الضريبة. اللواحق ضمن المنتجات متعددة الانواع هذه الخاصية غير مُفعلة على مستوى المنتج متعدد الأنواع لأنه من غير الممكن معرفة الأسعار التي تتضمن أو لا تتضمن الضريبة، وذلك لأن السعر ناتج عن الأنواع والتي ربما تملك فئات ضريبية مختلفة، فمثلًا لنقل أنك تمتلك منتجًا متعدد الأنواع يمتلك نوعين وكلاهما بنفس السعر 10$ لكن أحد الأنواع يمتلك معدل ضريبة بنسبة 20% والآخر يمتلك معدلًا منخفضًا بنسبة 10%. ما هو السعر متضمنًا الضريبة؟ الطريقة الوحيدة لعرض أسعار دقيقة هي من خلال تحميل النوع والحصول على سعره، الأمر الذي يُضيف عبءًا إضافيًا ومع ذلك يمكن أن تكون القيم غير دقيقة في بعض الحالات النادرة. تدعم الأنواع (يُكشف السعر عند اختيار نوع) اللواحق لأن الأنواع تتضمن معدل/ فئة ضريبة. تستطيع تخصيص هذه الطريقة باستخدام خطافات ترشيح عند الحاجة للمنتجات متعددة الأنواع، فعلى سبيل المثال: add_filter( 'woocommerce_show_variation_price', '__return_true' ); عرض إجمالي الضريبة يُحدد فيما إذا كانت الضرائب المتعددة تُعرض كمجموع كلي خلال عملية إتمام الطلب أو على شكل قائمة ضرائب. ضبط معدلات الضريبة تُعرض فئات الضريبة في أعلى نافذة الضرائب، وبالضغط على أي منها سوف تُعرض معدلات الضريبة للتصنيف، وتستطيع ضمن جدول معدلات الضريبة تعريف معدلات الضريبة (واحد في كل صف)، اضغط على "إدخال صف" للبدء. يمتلك كل معدل ضريبة السمات التالية: رمز الدولة: رقم من خانتين هو رمز الدولة للمعدل الضريبي، استخدم الرموز ISO 3166-1 alpha-2، أبقِ الحقل فارغًا (*) لتطبيق المعدل على جميع الدول. رمز الولاية: رقم من خانتين للمعدل، ألق نظرة على الملف i18n/states/COUNTRYCODE.php لمعرفة الولايات المدعومة، أبقه فارغًا (*) لتطبيقه على جميع الولايات. ZIP/ الرمز البريدي: أدخل الرمز البريدي لمعدل الضريبة، وتستطيع فصل عدة قيم بفاصلة منقوطة (;)، وبإمكانك استخدام المحرف () لمطابقة عدة رموز بريدية فعلى سبيل المثال PE يُطابق جميع الرموز البريدية التي تبدأ ب PE أو تستطيع استخدام مجالات رقمية. أبق الحقل فارغًا (*) لتطبيق معدل الضربية على جميع الرموز البريدية. المدينة: تستطيع فصل قائمة المدن بفاصلة منقوطة (;) لهذا المعدل أو أبقه فارغًا لتطبيق المعدل على جميع المدن. المعدل %: أدخل معدل الضريبة، فعلى سبيل المثال 20.000 هي لمعدل ضريبة 20%. اسم الضريبة: أعط اسمًا للضريبة، مثلًا "ضريبة القيمة المُضافة". الأولوية: اختر أولوية لمعدل الضريبة، وسوف يُستخدم معدل ضريبة واحد لكل أولوية، ولتعريف عدة معدلات ضريبة لمنطقة واحدة عليك تحديد أولويات مختلفة لكل معدل. مركب: إن كان معدل الضريبة مركب (يُطبق على جميع الضرائب السابقة) عليك تفعيل هذا الحقل. الشحن: إن كان هذا المُعدل يُطبق أيضًا على الشحن عليك تفعيله. أمثلة عن معدل الضريبة إليك مثالًا عن طريقة إعداد الضريبة لمتجر ضمن المملكة العربية السعودية – 20% للعملاء ضمن المملكة فقط. في هذا المثال لدينا معدل ضريبة 6% لجميع الولايات في الولايات المتحدة ما عدا كاليفورنيا والتي معدل ضريبتها 7% ومعدل الضريبة المحلي هو 2% لرمز ZIP التالي 90210، وانتبه جيدًا للأولويات حيث يوضح هذا المثال كيفية تطبيق المعدلات فوق بعضها البعض. استيراد وتصدير معدلات الضريبة يوجد أزرار استيراد CSV و تصدير CSV أسفل جدول معدلات الضريبة، تستطيع استخدامهما لاستيراد وتصدير معدلات الضريبة إلى و من ملف CSV، ويتطلب ملف CSV للاستيراد 10 أعمدة هي: country code, state code, postcodes, cities, rate, tax name, priority, compound, shipping, tax class. أبق على عمود tax class فارغًا للمعدلات القياسية. يتضمن الملف التالي عينة عن ملف CSV لمعدل الضريبة في الولايات المتحدة بالاعتماد على ضريبة الولاية فقط، ويجب ألا يُستخدم هذا الملف لمتجر على قيد العمل كون معدلات الضريبة تتغير دوريًا، لذا تحقق من المعدلات ودقتها قبل استخدام الملف. حذف معدلات الضريبة إن أضفت معدلات ضريبة خاطئة أو في حال أضاف استيراد CSV سطور ضريبة غير صحيحة، يجب حذف هذه المعلومات، ولحذفها اتبع الخطوات التالية: توجه إلى WooCommerce ثم اضغط على "الإعدادات" ثم "الضرائب" ثم اضغط على الضريبة الخاصة بك (المعياري أو المعدل المخفض أو الصفري). اختر السطور غير الصحيحة عبر الضغط عليها لتُصبح مميزة باللون الأصفر. اضغط على "أزل الصفوف المحددة" لحذف السطور المميزة باللون الأصفر. حفظ التغييرات. إن أردت حذف جميع معدلات الضريبة دفعة واحدة استخدام حذف معدلات الضريبة ووكومرس ضمن أدوات في الحالة ضمن WooCommerce. عرض تقرير الضريبة تستطيع العثور على تقرير الضريبة ضمن WooCommerce ثم اضغط على التقارير ثم الضرائب ثم الضرائب بالتاريخ ثم العام. توجه إلى التقارير ثم الضرائب ثم الضرائب بالرمز ليظهر لك تقرير مختلف يعرض الضرائب بشكل منفصل. الأسئلة المتكررة لماذا تتغير الأسعار عندما "الأسعار تتضمن الضريبة"؟ إن كنت تُدخل الأسعار متضمنةً الضريبة عليك الانتباه إلى أن السعر يمكن أن يتغير حسب الدولة التي يتواجد فيها العميل، فعلى سبيل المثال إن كان متجرك ضمن المملكة المتحدة سوف تُنشئ معدل ضريبة واحد ل GB هو 20%. سوف تُنشئ منتج بسعر 120 جنيه استرليني يتضمن الضريبة. سوف يدفع العملاء ضمن المملكة المتحدة 120 جنيه استرليني (100 جنيه + 20 جنيه ضريبة). أما العملاء الموجودون خارج المملكة المتحدة سوف يدفعون 100 جنيه استرليني لأنك لم تضبط أي معدلات ضريبة لأي دولة أخرى. أو لنفترض أن المتجر ضمن المملكة المتحدة عندها سوف تُنشئ معدل ضريبة لـ GB بنسبة 20% ومعدل ضريبة 19% لفرنسا و 25% للنرويج. أنشئ منتج مع سعر 120 جنيه استرليني يتضمن الضريبة. سوف يدفع العملاء ضمن المملكة المتحدة 120 جنيه استرليني (100 جنيه سعر المنتج + 20 جنيه ضريبة). سوف يدفع العملاء ضمن فرنسا 119 جنيه استرليني (100 جنيه سعر المنتج + 19 جنيه ضريبة). سوف يدفع العملاء ضمن النرويج 125 جنيه استرليني (100 جنيه سعر المنتج + 25 جنيه ضريبة). أما العملاء من خارج المملكة المتحدة وفرنسا والنرويج سوف يدفعون 100 جنيه لأنك لم تضبط أي معدل ضريبة للدول الأخرى. تجد شرح أوسع ضمن كيفية عمل الضرائب في ووكومرس. لا تظهر الضرائب عند زيارة بعض العملاء لمتجري. تعتمد الضريبة على موقع العميل في معظم طرق ضبط المتجر، لكن تحديد الموقع الجغرافي يمكن أن يتسبب في إخفاء الضرائب إلى حين التحقق من العنوان الحقيقي للعميل، ولمنع حصول هذا توجه إلى WooCommerce ثم "الإعدادات" ثم تبويب "عام" وألغ اختيار الموقع الافتراضي للعميل لتعطيل تحديد الموقع الجغرافي، واختر موقع المتجر بدلًا منه. لماذا خيارات الضريبة غير فعالة (لون رمادي)؟ تكون خيارات الضريبة بلون رمادي عند تفعيلك لخيار الضرائب المؤتمتة باستخدام إضافة WooCommerce Shipping & Tax، ولتعديل خيارات الضريبة اختر تعطيل الضرائب المؤتمتة واضغط على حفظ التغييرات. ترجمة -وبتصرّف- للمقال Setting up Taxes in WooCommerce. اقرأ أيضًا كيفية إعداد الضرائب في ووكومرس كيفية ضبط خيارات شحن المنتجات في متجر ووكومرس كيفية ضبط إعدادات ووكومرس

يُنشأ الطلب عندما يُتم العميل عملية الدفع، وتكون الطلبات مرئية لرتبتي مدير الموقع ومدير المتجر فقط، ويُمنح معرف فريد لكل طلب. ملاحظة: معرف الطلب ليس قيمة تسلسلية كونها تستخدم قيمة المعرف ID الافتراضية لووردبريس. حالات الطلب في ووكومرس يمتلك الطلب حالة، إذ تسمح لك حالات الطلب معرفة موضع الطلب حاليًا ضمن المتجر، وتبدأ الحالات بالحالة "بانتظار الدفع" وتنتهي بالحالة "مكتمل". الحالات التالية مُستخدمة في ووكومرس: بانتظار الدفع: استقبل المتجر طلبًا لكن لم يُدفع ثمنه بعد، أي ما زال في انتظار الدفعة المالية. فشل: فشل الدفعة أو رُفضت أو تتطلب توثيق SCA، وانتبه إلى أن هذه الحالة لن تظهر مباشرةً بل يظهر مكانها "معلق" حتى التأكد منها. قيد التنفيذ: استقبلت الدفعة وانخفضت كمية مخزون المتجر، والطلب ينتظر إكمال متطلباته من جهة المتجر، حيث تتطلب كل الطلبات معالجة ما عدا الطلبات التي تتضمن منتجات تكون. مُكتمل: اكتملت كل عناصر الطلب ولا يحتاج أي إجراءات إضافية. قيد الانتظار: ينتظر وصول الدفعة المالية لكن ينقص من المخزون عناصر الطلب وهنا تحتاج لتأكيد الدفعة يدويًا. ملغي: يُلغى الطلب من قبل المدير أو العميل لترتفع كمية المنتجات في المخزون، ولا حاجة لأي إجراءات إضافية. مُسترد: تُعاد قيمة الطلب المالية من قبل المدير ولا حاجة لأي إجراءات إضافية. يتطلب التوثيق: ينتظر إجراء من قبل العميل يوثق فيه عملية التحويل المالي و/أو يُكمل متطلبات SCA. مخطط بصري لتوضيح حالات الطلب يتبع هذا التوضيح الرسومي الطلب خلال حالاته بدءًا من "بانتظار الدفع" وانتهاءً بـ "مكتمل" أو "ملغي" أو "مُسترد". حالات الطلب وبوابات الدفع تستطيع الاطلاع على كيفية ارتباط حالات الطلب وبوابات الدفع ضمن قسم "حل المشاكل عند إدارة الطلب" في الأسفل. حالات الطلب ورسائل البريد الإلكتروني تستطيع الاطلاع على معلومات أكثر حول الرسائل المختلفة للبريد الإلكتروني التي ترسل تلقائيًا في إعدادات البريد الإلكتروني. إن كنت تستخدم بايبال والطلبات تبقى في حالة "معلق" فغالبًا لديك مشكلة مرتبطة ب IPN. عرض وإدارة عدة طلبات عندما يبدأ المتجر في استقبال الطلبات تبدأ صفحة إدارة الطلبات بالامتلاء، وهنا عليك التوجه إلى "الطلبات" ضمن ووكومرس WooCommerce في لوحة تحكم ووردبريس. يعرض كل سطر عدة تفاصيل، بعض هذه التفاصيل موجود افتراضيًا والبعض الآخر تستطيع إضافته، وفي ما يلي الخيارات المتوفرة: رقم الطلب واسم العميل تاريخ الشراء حالة الطلب عنوان الفاتورة عنوان الشحن القيمة الكلية للطلب الإجراءات ولتغيير هذه الأعمدة، عليك اتباع الخطوات التالية: توجه إلى "الطلبات" ضمن WooCommerce. اضغط على "خيارات الشاشة" في الزاوية العلوية اليسرى. اختر الأعمدة التي تريد عرضها. اختر عدد العناصر التي تريد عرضها ضمن الصفحة الواحدة. اضغط على "تطبيق". فرز وتصفية الطلبات تستطيع تصفية الطلبات حسب التاريخ (الشهر/العام) أو عن طريق العميل المُسجل. اختر الشهر أو ابحث عن العميل. اضغط على "تصفية". تستطيع ترتيب الطلبات تصاعديًا أو تنازليًا حسب رقم الطلب أو التاريخ أو القيمة الكلية للطلب، وانتبه إلى أن المجموع الكلي للطلب لا يأخذ بالحسبان القيمة المستردة. اضغط على رقم الطلب واسم العميل لعرض صفحة الطلب الواحد، كما تستطيع الضغط على "تحرير" لتعديل تفاصيل الطلب وتحديث الحالة وإضافة ملاحظات. اطلع على قسم عرض وتعديل الطلبات في القادم من المقال لمزيد من المعلومات. البحث عن المنتجات وتصفيتها يمكن العثور على الطلبات باستخدام صندوق البحث في الزاوية العلوية اليسرى لقائمة الطلبات، فقط أدخل رقم الطلب او اسم العميل أو أي معلومات معروضة ضمن قائمة الطلبات مثل العنوان. اضغط على بحث عن الطلبات أو زر Enter ضمن لوحة المفاتيح لتعرض نتائج البحث قائمة بالطلبات المتوافقة مع بحثك. معاينة الطلبات يوجد ضمن صف الطلب زر "عين" للمعاينة. سوف يظهر لك نافذة منبثقة عند الضغط على زر المعاينة تتضمن هذه النافذة رقم الطلب وحالة الطلب وتفاصيل الفاتورة وطريقة الدفع وتفاصيل الشحن وطريقة الشحن ومنتجات الطلب وخيار لتعديل حالة الطلب. حالات الطلب ضمن المعاينة يوجد ترميز لوني لحالات الطلب وهو كالتالي: ملغي – رمادي مكتمل – أزرق فشل – أحمر مُعلق – برتقالي بانتظار الدفع – رمادي قيد التنفيذ – أخضر مُسترد – رمادي إجراءات الطلب عند تحريك المؤشر فوق حالة الطلب سوف يظهر لك ملاحظات خاصة بحالة الطلب. يوجد في نهاية الصف اختصارات لتعيين الطلب بسرعة بحالة "قيد التنفيذ" أو "مكتمل". عرض وتعديل طلب في ووكومرس تستطيع ضمن صفحة الطلب الواحد رؤية معلومات الطلب وتعديلها وتحديثها. تغيير حالة الطلب. تعديل عناصر الطلب – تعديل المنتج والأسعار والضرائب. المخزون – إنقاص واستعادة المخزون لطلب ما. إجراءات الطلب – إرسال تفاصيل الطلب للعميل (مفيدة في حال إنشاء الطلب يدويًا لعميلك) أو إعادة توليد صلاحيات التنزيل. تعديل البيانات الوصفية للمنتج لتعديل أنواع المنتج من خلال إزالة أو إضافة بيانات وصفية. تطبيق قسيمة، وهنا تحتاج لمعرفة رمز القسيمة التي تريد استخدامها على الطلب. عدد مرات استخدام القسيمة مُسجل ويمكن إزالة القسيمة من الطلبات، ويجب أن تنتبه أنه ليكون للقسيمة تأثير على الطلب يجب أن يكون غير مدفوع. إضافة تكاليف، حيث تستطيع إدخال قيمة أو نسبة مئوية لإضافة تكاليف للطلب، والقيمة السلبية للتكاليف سوف تُقسم الضرائب بين جميع العناصر ولن تؤدي لقيمة سالبة للمجموع الكلي للسلة. تفاصيل الطلب تستطيع ضمن صفحة تفاصيل الطلب الاطلاع على : رقم الطلب تفاصيل الدفع تاريخ ووقت الطلب حالة الطلب تفاصيل الطلب اسم المستخدم وعنوان البريد الإلكتروني مع رابط لعرض الحساب الشخصي وعمليات الشراء الأخرى التي أجراها العميل في السابق. تفاصيل الفاتورة تفاصيل الشحن تستطيع تعديل معظم تفاصيل هذا القسم وذلك لتحديثها و/أو تغييرها. تغيير الوقت والتاريخ من خلال استخدام القائمة المنسدلة لتقويم التاريخ ومحدد القيمة للوقت. تغيير الحالة يكون من خلال القائمة المنسدلة. تغيير العميل من خلال اختيار العميل الحالي والبحث عن عميل جديد. يُمكن تغيير تفاصيل أخرى ضمن أقسام الشحن والفاتورة ولإنجاز ذلك عليك الضغط على أيقونة القلم بجانب كل منها. تستطيع ضمن قسم الفاتورة تغيير الأجزاء التالية: عنوان الفاتورة – يمكن تحميل هذه المعلومات من الملف الشخصي للعميل من خلال اختيار "تحميل عنوان الفاتورة". عنوان البريد الإلكتروني. رقم الهاتف. طريقة الدفع والتفاصيل. تستطيع ضمن قسم الشحن تغيير الأجزاء التالية: عنوان الشحن – يمكن تحميل هذا العنوان أيضًا من الملف الشخصي للعميل أو نسخة من عنوان الفاتورة. ملاحظة مرسلة للعميل. اضغط على تحديث عند انتهائك من التغييرات الضرورية على الطلب. عناصر الطلب والمجموع الإجمالي له القسم التالي ضمن صفحة الطلب هي عناصر الطلب التي تتضمن المنتجات وتفاصيل الشحن وملخص الطلب. يتضمن كل صف منتج: صورة المنتج اسم المنتج سعر المنتج الواحد الكمية المجموع الإجمالي (سعر المنتج × الكمية مع أخذ الخصم بالحسبان) الضرائب تُعرض معلومات الشحن أسفل ما سبق وتتضمن ما يلي: طريقة الشحن العناصر التي ضمن رزم الكلفة الكلية الضرائب يتضمن القسم الأخير ملخصًا عن تكاليف الطلب، وتتغير محتويات هذا القسم في حال استرداد قيمة الطلب، ويتضمن افتراضيًا: الإجمالي الفرعي للعناصر – الكلفة بدون احتساب الضريبة القسيمة أو القسائم – القيمة التي خُصمت بناءًا على استخدام القسائم وهنا تُعرض القسائم المستخدمة على يمين القسم. الشحن – كلفة شحن الطلب. الضرائب – قيمة الضرائب الكلية للطلب والذي يُستبدل برمز الضريبة المُطبق على الطلب. المجموع الإجمالي للطلب – المجموع الكلي للتكاليف السابقة. ملخص عن المدفوعات والتكاليف المُقتطعة من بوابة الدفع. لا يمكن تعديل عناصر الطلب إلا في حال كانت حالة الطلب "بانتظار الدفع" أو "معلق" لكنك تستطيع السماح للعميل باسترداد قيمة الطلب، أما لتعديل عناصر المنتج عليك بالضغط على أيقونة القلم بجانب المنتج. تستطيع تعديل العناصر التالية ضمن المنتج في الطلب: إضافة معلومات: أضف أو أزل بيانات وصفية لتغيير خيارات نوع المنتج. الكمية: عدد العناصر التي يريد العميل شراءها من هذا المنتج. الإجمالي: سعر هذا السطر وضريبته قبل الخصم السابق لتطبيق الضريبة. الضريبة: كلفة الضريبة، فعلى سبيل المثال إن كان العميل معفى من الضريبة ربما ترغب في إزالة الضرائب. تستطيع بعد ذلك تنفيذ أربع إجراءات في أسفل النافذة: إضافة عنصر (عناصر): سوف يعرض لك هذا الخيار 6 خيارات جديدة: إضافة منتجات: أضف منتجات إضافية للطلب. إضافة رسوم إضافية: أضف كلفة إضافية مثل كلفة تغليف الهدية. إضافة الشحن: أضف كلفة الشحن وعند إضافة كلفة شحن تستطيع الضغط على أيقونة القلم لتحديث اسم وطريقة وكلفة وضريبة الشحن. أضف ضريبة: أضف رمز ضريبي إضافي لكل قسم ضمن الطلب. إلغاء: اضغط على إلغاء إن كنت لا تريد عمل أي تغييرات. حفظ: اضغط على حفظ حال الانتهاء من التغييرات. حال انتهائك من هذا تستطيع إعادة الحساب إن أردت إجراء حسابات جديدة تلقائيًا بالاعتماد على إعدادات المتجر، وهذا مفيد جدًا في حال أضفت أو أزلت منتجات أو قسائم أو طرق شحن أو غيرها من الطلب، وانتبه أن أي تغييرات في الضريبة أجريتها يدويًا سوف تُزال لأن إعدادات الضريبة ضمن متجرك سوف تُطبق اعتمادًا على عنوان العميل. استخدام القسيمة: إن نسي العميل إضافة قسيمة أو ترغب في إهداء العميل قبل أن يدفع فإن استخدام هذا الخيار سوف يعرض لك نموذج يسمح لك باستخدام رمز القسيمة. إعادة المبلغ: لإعادة المال للعميل. الحقول المخصصة استخدم صندوق الحقول المُخصصة لإضافة حقول بيانات وصفية مخصصة. ملاحظات الطلب تعرض لوحة ملاحظات الطلب الملاحظات المرافقة للطلب والتي يمكن استخدامها لحفظ تفاصيل الحدث مثل نتائج الدفعة أو انخفاض مستوى المخزون أو إضافة ملاحظات للطلب ليطلع عليها العميل كما أن بعض بوابات الدفع تُضيف ملاحظات عند إصلاح المشاكل. أنواع الملاحظات الأربع التالية متوفرة: بنفسجي: ملاحظات حالة النظام مثل تفاصيل بوابة الدفع. رمادي: تحديثات عامة للحالة مثل تغييرات الحالة أو ملاحظات خاصة، وهنا لا يستطيع العميل الاطلاع على هذه الملاحظات لكن يمكن أن يتلقى إشعارًا بها مثل عند تغيير الحالة من قيد التنفيذ إلى مُكتمل سوف يُرسل بريد إلكتروني (هذا يعتمد على الإعدادات). أزرق: ملاحظات للعميل حيث يتلقى العميل الملاحظات عبر البريد الإلكتروني لكنه يستطيع أيضًا الاطلاع على هذه الملاحظات من خلال الطلب ضمن حسابه على المتجر. إن الملاحظات أداة قوية للتواصل مع العملاء أو مدراء المتاجر الآخرين. هل تحتاج لإضافة رقم تتبع للشحن؟ هل هناك تأخير في المخزون؟ أضف ملاحظة للعميل وسوف يصلهم إشعار تلقائيًا. اتبع الخطوات التالية لإضافة ملاحظة: استخدم مساحة النص لإضافة محتوى للملاحظة. اختر ملاحظة خاصة أو ملاحظة للزبون من القائمة المنسدلة. اضغط على إضافة. إضافة طلب يدويا اتبع الخطوات التالية لإضافة طلب يدويًا في ووكومرس: توجه إلى "الطلبات" ضمن تبويب WooCommerce. استخدم زر "إضافة جديد" في أعلى الصفحة، لتظهر لك صفحة إضافة الطلب. أدخل تفاصيل العميل وأضف صفًا للعناصر واستخدم القسائم وطبق التكاليف واحسب المجموع الكلي، وهي نفسها الأقسام المشروحة في قسم "تحرير أو إضافة عناصر الطلب". اضبط حالة الطلب الجديد فإن كان بحاجة للدفع من قبل العميل اختر "بانتظار الدفع". اضغط على "حفظ". استخدم القائمة المنسدلة لإجراءات الطلب لإرسال تفاصيل الطلب عبر البريد الإلكتروني للعميل مع تعليمات الدفع. الدفع لطلب ما في ووكومرس يمكن الدفع للطلبات التي هي بحالة "بانتظار الدفع" عبر رابط دفع، وتستطيع كمدير للمتجر العثور على هذا الرابط ضمن ملخص الطلب. إن كان العميل ضيف عندها يستطيع أي شخص يملك الرابط الصحيح من الاطلاع على صفحة الدفع ودفع قيمة الطلب. إن كان العميل مُسجلًا ضمن موقعك: فقط هذا العميل يستطيع الاطلاع على رابط الدفع في حال كان مُسجلًا دخوله ضمن الموقع. يستطيع العميل أيضًا العثور على الطلب ضمن "الطلبات" في صفحة حسابي ضمن المتجر. إن عُين العميل للطلب سوف يُطلب منه تسجيل الدخول قبل الدفع. إن كنت مالك المتجر وترغب في الدفع عن العميل تستطيع استخدام إضافة User Switching (لا يُشجع ووكومرس على ذلك) لتسجيل الدخول بحساب العميل وإتمام عملية الدفع نيابةً عنه. إزالة البيانات الشخصية أصبح ممكنًا بدءًا من ووكومرس 3.4 إزالة بيانات العميل ولعمل هذا اتبع الخطوات التالية: توجه إلى WooCommerce ثم "الإعدادات" ثم "الحسابات والخصوصية". فعّل " السماح بإزالة البيانات الشخصية بشكل مُجمّع من الطلبات ". احفظ التغييرات. أصبح هذا الخيار متوفرًا الآن للطلبات: توجه إلى "الطلبات" ضمن تبويب WooCommerce في لوحة تحكم ووردبريس. اختر الطلبات التي تريد إزالة البيانات الشخصية منها. اضغط على قائمة الإجراءات واختر إزالة البيانات الشخصية. اضغط على تطبيق. أما على مستوى الطلب الواحد سوف تُحدث البيانات كالتالي: الطلبات الملغية أو المعلقة أو الفاشلة التي تّزال منها هذه البيانات سوف تُنقل لسلة المهملات. الطلبات المكتملة التي تُزال منها هذه البيانات سوف تُصبح مجهولة لكن إحصائيات المبيعات لن تتأثر. سوف تُحذف الحسابات غير النشطة، والحساب غير النشط هو الحساب الذي لم يسجل مالكه به ضمن الموقع أو لم ينفذ أي طلب ضمن المتجر لمدة معينة. يُمكن معالجة إزالة البيانات الشخصية مع طلبات مسح الحساب، حيث يسمح ووردبريس بحذف تفاصيل المستخدم بناءً على طلبه من خلال مسح البيانات الشخصية ضمن تبويب الأدوات، ويمكن ربط عملية الإزالة هذه مع الطلبات الخاصة بالمستخدم. توجه إلى WooCommerce ثم اضغط على "الإعدادات" ومنها "الحسابات والخصوصية". أسفل طلبات محو الحساب: فعّل ** إزالة البيانات الشخصية من الطلبات عند الطلب** إن أردت إزالة بيانات الطلب عند تطبيق هذا الإجراء. فعّل إزالة الوصول إلى التنزيلات عند الطلب إن كان يجب ألا يتمكن العميل من الوصول لروابط التزيل بعد إزالة معلوماته الشخصية. يُمكن أيضًا أتمتة الاحتفاظ بالبيانات الشخصية: توجه إلى WooCommerce ثم "الإعدادات" ومنها تبويب "الحسابات والخصوصية". اضبط المدة ضمن "الاحتفاظ بالبيانات الشخصية" للحسابات غير النشطة والطلبات بحالاتها المختلفة. احفظ التغييرات. عند تفعيل هذا الخيار سوف تعمل وظائف Cron يوميًا، وسوف تُتبع الحسابات غير النشطة باستخدام البيانات الوصفية وسوف تُزال فقط حسابات العملاء والمشتركين. طلبات المتجر المتعدد بدءًا من ووكومرس 3.4+ أصبح هناك ودجت متوفرة تظهر ضمن لوحة التحكم تعرض معلومات الطلب من جميع المواقع، وتستطيع الضغط على الطلب ليُعاد توجيهك إلى تفاصيل الطلب ضمن الموقع. إصلاح المشاكل عليك فهم الترابط بين حالات الطلب وبوابات الدفع: table { width: 100%; } thead { vertical-align: middle; text-align: center; } td, th { border: 1px solid #dddddd; text-align: right; padding: 8px; text-align: inherit; } tr:nth-child(even) { background-color: #dddddd; } الحالة الوصف تعليقات بوابة الدفع مُعلق بانتظار الدفع – نقصت كمية المخزون لكن عليك تأكيد الدفعة. عادة تظهر هذه الحالة مع طرق دفع معينة تحتاج فيها لتأكيد يدوي أن عملية الدفع تمت مثل التحويل البنكي أو الشيك. سوف تظهر لك هذه الحالة أيضًا عند ضبط بوابة الدفع للسماح بعملية الدفع بدلًا من التقاط الدفعة، وهنا يحتاج مالك المتجر لتعديل الحالة إلى "قيد التنفيذ" يدويًا. قيد الانتظار تلقى المتجر الطلب (غير مدفوع). تعلم معظم بوابات الدفع الموقع أن عملية الدفع أنجزت وتغير حالة الطلب إلى "قيد التنفيذ" (الدفع ناجح) أو "فشل" (الدفع غير ناجح)، وفي حال لم يتلق المتجر أي من الإشارتين السابقتين سوف يبقى على حالة "قيد الانتظار". قيد التنفيذ وصلت الدفعة ونقص المخزون وينتظر الطلب إتمام الإجراءات من طرف المتجر إلا في حال كانت منتجات الطلب افتراضية وقابلة للتنزيل. إن كانت عملية الدفع ناجحة والطلب لا يتضمن منتجات رقمية أو قابلة للتنزيل عندها سوف تُضبط حالة الطلب إلى "قيد التنفيذ"، لتكون هذه إشارة لصاحب المتجر أو المخزن للبدء بشحن الطلب وتأشيره يدويًا على أنه "مكتمل". مكتمل الطلب اكتمل ولا يتطلب أي إجراء إضافي. غير مهمة لأن في هذه الحالة سار كل شيء على ما يرام. فشل فشل الدفعة أو رُفضت الدفعة. يُمكن إلغاء الطلب يدويًا لكن يمكن أن تظهر هذه الحالة إن انتهت صلاحية نافذة الدفع وهذا يحصل لعدة أسباب: أهمل المنتج قبل إتمام الدفعة وانتهت المدة الزمنية لحجز المنتج ضمن المخزون أو لنفس أسباب حالة "قيد الانتظار". التوثيق مطلوب يجب على العميل إتمام متطلبات SCA. إجراء عملية الشراء من قبل عميل جديد أو عند تجديد اشتراك موجود سابقًا. هل ترغب في متجر ووكومرس احترافي لبدء تجارتك الإلكترونية؟ احصل على خدمات مميزة لإنشاء متجرك الإلكتروني وتحسينه وإدارته على خمسات أنشئ متجر ووكومرس الآن ترجمة -وبتصرّف- للمقال Managing Orders. اقرأ أيضًا كيفية إعداد متجر ووكومرس جديد كيفية ضبط إعدادات ووكومرس كيفية ضبط خيارات شحن المنتجات في متجر ووكومرس كيفية التعامل مع منتج رقمي قابل للتنزيل في ووكومرس

يتضمن ووكومرس ميزة استيراد وتصدير المنتجات عبر ملف CSV، مما يسمح لك باستيراد أو تصدير أو تحديث مئات بل آلاف المنتجات ضمن متجر ووكومرس عبر ملف CSV واحد، حيث تدعم هذه الأداة مُعظم أنواع المنتجات بما فيها المنتجات مُتعددة الأنواع. يستطيع أصحاب المواقع الجديدة الانطلاق بسرعة من خلال تصدير واستيراد المنتجات أثناء إنشاء المتجر. يستطيع أصحاب المتاجر الحالية تحديث عشرات ومئات المنتجات بمعلومات جديدة أو عرض تخفيضات عليها أو مزامنتها مع واجهات متاجر متعددة. أنشئ ملف CSV الخاص بك ما هو محرر ملفات CSV الذي ننصح به؟ ننصح باستخدام: محرر ملفات متوفر على الإنترنت مثل Google Drive. تطبيق محرر جدول مجاني مثل OpenOffice. تطبيق Calc المجاني في LibreOffice. برنامج Numbers لمستخدمي نظام ماك. تجنب استخدام برنامج Microsoft Excel قدر الإمكان بسبب المشاكل التي يمكن أن تظهر والمرتبطة بتنسيق وترميز المحارف. كيفية إنشاء ملف CSV؟ أنت تحتاج لملف CSV يتضمن معلومات المنتج سواء كنت تريد استيراد أو تحديث منتجات موجودة. تستطيع تصدير ملف CSV للمنتجات من متجر موجود. تنزيل ملف CSV يتضمن عينات من GitHub واستبدال المعلومات التي يتضمنها. استخدام ملف CSV الخاص بك، ويجب أن تتبع المعلومات الموجودة ضمنه تنسيق وأعمدة ملف استيراد المنتجات. إن كنت تستخدم الأداة المبنية ضمن ووكومرس لاستيراد وتصدير المنتجات فهي تتبع الترميز والتنسيق المطلوب للملفات، وإن كنت تستخدم ملف CSV الفارغ فهو أيضًا يتبع نفس الترميز والتنسيق، لذا كل ما عليك هو إدخال المعلومات بالترتيب الصحيح. تعليمات عامة يجب أن يكون ملف CSV بتنسيق UTF-8. يجب تعريف التواريخ بالمنطقة الزمنية المحلية للمتجر. استخدم 1 أو 0 ضمن CSV إن كنت تستورد قيم منطقية. تُفصل القيم المُتعددة ضمن الحقل الواحد باستخدام الفواصل. إحاطة القيم بإشارات التنصيص يسمح لك باستخدام فاصلة. يجب أن يُسبق المعرف ب "id:" عند الإشارة لمعرف منتج موجود، ولا حاجة لاستخدام البادئة هذه عند الإشارة إلى SKU. مثال: id:100 و SKU101. إن البيانات المُخصصة مدعومة ويُمكن استيرادها لكن فقط النص الصريح أي لا يوجد دعم لـ JSON أو البيانات المتسلسلة. يُشار لهرمية الأصناف بالرمز ">" حيث يفصل بين العبارات فواصل. لا تُصدّر المنتجات المسودة، بل فقط المنتجات المنشورة والمنشورة الخاصة. لا يُمكن تعيين معرف منشور معين لمنتج عند الاستيراد، سوف تستخدم المنتجات دائمًا المعرف التالي المتوفر بغض النظر عن المعرف المُضمن في ملف CSV المستورد. الصور يجب رفع الصور مُسبقًا أو أن تكون متوفرة للاستيراد على الإنترنت إلى متجرك. الروابط الخارجية مدعومة وتُستورد مباشرة إلى مكتبة الوسائط إن استخدمت على فرض أن الصورة الموفرة يمكن الوصول لها مباشرةً وليست خلف شيفرة إعادة توجيه (كما يحصل في بعض خدمات التخزين السحابي). تستطيع تعريف اسم الملف إن كانت الصورة موجودة مُسبقًا ضمن مكتبة الوسائط. الاستيراد تستطيع تحديث أو إضافة منتجات جديدة عند الاستيراد. إضافة منتجات جديدة يستطيع أصحاب المواقع الجديدة أو القديمة التي تستخدم ووكومرس استعمال ملف CSV لإضافة منتجات جديدة عبر رفع ملف واحد فقط. توجه إلى "جميع المنتجات" ضمن تبويب "المنتجات". اضغط على "استيراد" في أعلى الصفحة، لتظهر لك نافذة رفع ملف CSV. اضغط على "Choose File" وارفع ملف CSV الذي ترغب في استخدامه. محدد CSV (خيار متقدم) يُحدد الرمز الذي يفصل بين عناصر CSV وهو افتراضيًا الفاصلة، لكن إن كنت تستخدم رمزًا آخر ضمن ملفك عليك التصريح عنه في هذا الحقل. متابعة. سوف تُعرض نافذة تعيين العمود حيث يحاول ووكومرس مطابقة الأعمدة تلقائيًا وذلك للربط بين اسم العمود من ملف CSV والحقول. استخدم القائمة المنسدلة على اليسار لتعديل الحقول أو استخدم خيار "عدم الاستيراد"، وافتراضيًا لن يُستورد أي عمود غير مُصنف. اختر تشغيل أداة الاستيراد. انتظر ريثما ينتهي المستورد، وهنا لا تُحدث الصفحة أو تغير أي شي ضمن المتصفح خلال هذه الأثناء. تحديث المنتجات الموجودة يستطيع أصحاب المتاجر استخدام أداة استيراد CSV لتحديث منتجات موجودة بمعلومات جديدة مثل إضافة علامة تجارية جديدة أو تغيير تصنيف الضريبة أو تحديث بالجملة للمنتجات لاستخدام تخفيضات على كامل المنتجات أو غيرها. أنشئ ملف CSV كما شرحنا سابقًا في قسم "إنشاء ملف CSV الخاص بك" واستخدم المعرفات ID و/أو أرقام SKU للمنتجات التي ترغب في تحديثها، وذلك لأن أداة الاستيراد تستخدم المعرف أو/ و رقم SKU للمطابقة التلقائية والتحديث التلقائي للمعلومات التي أدخلتها في كل سطر. توجه إلى "جميع المنتجات" في تبويب "المنتجات". اضغط على "استيراد" في أعلى الصفحة لتظهر لك نافذة استيراد ملف CSV. اضغط على "Choose File" واختر ملف CSV الذي ترغب في استخدامه. فعّل الخيار "تحديث المنتجات الحالية". اضغط على "متابعة". سوف تُعرض نافذة تعيين العمود حيث يحاول ووكومرس مطابقة الأعمدة تلقائيًا وذلك للربط بين اسم العمود من ملف CSV والحقول. استخدم القائمة المنسدلة على اليسار لتعديل الحقول أو استخدم خيار "لا تستورد"، وافتراضيًا لن يُستورد أي عمود غير مُصنف. اضغط على "تشغيل أداة الاستيراد". انتظر ريثما ينتهي المستورد، وهنا لا تُحدث الصفحة أو تغير أي شي ضمن المتصفح خلال هذه الأثناء. تحويل منتج بسيط موجود إلى منتج متعدد الأنواع يستطيع أصحاب المتاجر استخدام أداة استيراد CSV لتحويل منتج بسيط موجود إلى منتج متعدد الأنواع، ولإنجاز هذا اتبع الخطوات التالية: أنشئ منتجًا بسيطًا يتضمن سعر ورقم SKU. صدّر المنتج باستخدام أداة تصدير CSV في صفحة "جميع المنتجات". افتح ملف CSV وحول المنتج البسيط إلى منتج متعدد الأنواع، والخطوات التي يجب اتباعها لتحقيق ذلك (مثلًا تحويل منتج بسيط إلى منتج متعدد الأنواع مع سمة واحدة ونوعين) هي: أضف سطرين جديدين. أضف أربع أعمدة بعد العمود الأخير: اسم السمة 1 قيمة/قيم السمة 1 عرض السمة 1 سمة عالمية 1 سوف نُضيف "الحجم" لذا سوف تكون الأعمدة الأربعة الخاصة بنا هي: غير نوع المنتج من "simple" (بسيط) إلى "variable" (متعدد الأنواع) وأضف "النوع" ضمن أسطر النوع (السطرين الجديدين الذين أنشأتهما) ثم أضف SKU لأسطر النوع، وأعط اسمًا لكل منها لتبدو كما في المثال: حدّث الأعمدة التالية أيضًا وأي أعمدة أخرى مطلوبة. من المهم جدًا إضافة SKU لجميع الحقول ضمن العمود "Parent"، لربط المنتج الأب مع الأنواع الخاصة به. احفظ ملف CSV الجديد. استورد ملف CSV المُحدث ضمن الموقع باستخدام أداة استيراد CSV الموجودة في صفحة "جميع المنتجات". اختر تحديث المنتجات الموجودة قبل الاستيراد طالما أننا نريد تحديث المنتجات الموجودة ضمن الموقع. تابع بعملية الاستيراد (لا داعي لربط الحقول). يجب أن تظهر لك الرسالة التالية عند إتمام عملية الاستيراد. توجه إلى المنتج لتجد الآن أنه أصبح متعدد الأنواع ويمتلك سمة واحدة بدون أنواع ولاحظ أن خيار "يُستخدم مع الأنواع" غير فعّال، وهذا متوقع. افتح الآن ملف CSV مرة أخرى (الملف الذي أنشأت ضمنه أسطرًا للأنواع) واحذف سطر المنتج الأب وأبقِ على أسطر الأنواع بدون أي تغيير. احفظ ملف CSV. استورد الآن ملف CSV المُحدث ضمن الموقع لكن هذه المرة لا تُفعل خيار "تحديث المنتجات الحالية". تابع بعملية الاستيراد (لا حاجة لربط الحقول) وسوف تجد الآن أن الأنواع استوردت للموقع. بعد إكمال عملية الاستيراد توجه إلى المنتج لتجده الآن منتج متعدد الأنواع مع الأنواع التي أضفتها. تصدير يستطيع أصحاب المواقع الذين يرغبون في تصدير منتجاتهم الحالية لأي سبب توليد ملف CSV باستخدام أداة استيراد/تصدير المنتج. توجه إلى "جميع المنتجات" ضمن تبويب "منتجات". اختر "تصدير" في أعلى الصفحة لتظهر نافذة تصدير المنتجات. اختر "تصدير جميع الأعمدة" أو اختر الأعمدة التي تريد تصديرها باستخدام القائمة المنسدلة. اختر "تصدير جميع المنتجات" أو اختر أنواع المنتجات التي تريد تصديرها باستخدام القائمة المنسدلة. اختر "تصدير جميع التصنيفات" أو اختر التصنيفات التي تريد تصديرها باستخدام القائمة المنسدلة. فعّل خيار "هل ترغب في تصدير بيانات التعريف المخصصة؟" إن كنت بحاجة لهذه المعلومات. عادةً تكون هذه البيانات من إضافات أخرى وتُصدر هذه البيانات متبوعة بالبادئة "meta:"، وافتراضيًا لا تُصدر أي بيانات وصفية إضافية. اختر توليد وإنشاء ملف CSV وانتظر لتنتهي عملية التصدير. اخرج من المُصدر. هل ترغب في متجر ووكومرس احترافي لبدء تجارتك الإلكترونية؟ احصل على خدمات مميزة لإنشاء متجرك الإلكتروني وتحسينه وإدارته على خمسات أنشئ متجر ووكومرس الآن ترجمة -وبتصرّف- للمقال Product CSV Importer and Exporter. اقرأ أيضًا معالج إعداد ووكومرس WooCommerce كيفية استخدام مكون ووكومرس جميع المنتجات ضبط إعدادات المنتجات (Products) لمتجرك الإكتروني على منصة WooCommerce

تُعد القسائم طريقة رائعة لتقديم خصومات (حسومات) وجوائز لعملائك ويمكن أن تُساعدك على زيادة المبيعات ضمن متجرك، ولاستخدام القسائم في ووكومرس عليك اتباع الخطوات التالية: توجه إلى WooCommerce ثم اضغط على "الإعدادات" ثم اختر "عام" ومنه فعّل خيار "تمكين القسائم" لتفعيل استخدام رمز القسيمة ضمن متجرك. احفظ التغييرات. إضافة قسيمة عليك اتباع الخطوات التالية لإضافة قسيمة ضمن متجر ووكومرس: توجه إلى "التسويق" ثم اضغط على "القسائم". أنشئ قسيمة جديدة بالضغط على "إضافة قسيمة" أو حرك مؤشر الفأرة فوق قسيمة موجودة واضغط على "تحرير" لتعديلها. أدخل أو ولّد رمز القسيمة، حيث يُستخدم هذا الرمز من قبل العميل لتطبيق القسيمة والحصول على الخصم المرتبط بها، لذا يجب أن يكون هذا الرمز فريدًا كونه يعمل معرفًا للقسيمة. رمزك الخاص: أدخل أي قيمة رقمية أو محرفية لتشكيل رمزك الخاص وانتبه إلى أن رمز القسيمة ليس حساس لحالة الأحرف. أي رمز كان: اضغط على "إنشاء رمز القسيمة" إن أردت أن يولد ووكومرس تلقائيًا رمز القسيمة من خلال خوارزمية. أدخل وصف (اختياري): معلومات عن القسيمة للاستخدام الداخلي، فعلى سبيل المثال اسم الترويج أو الحدث أو تواريخ تفعيل القسيمة أو نسبة الخصم أو اسم العميل. يوجد ضمن بيانات القسيمة ثلاث أقسام تستطيع استخدامها لإضافة قيود على استخدام القسيمة وهي عام و تقييد الاستخدام وحد الاستخدام. عام نوع الخصم: خصم بالنسبة المئوية: خصم نسبة مئوية للمنتجات المُختارة فقط، فعلى سبيل المثال إن كانت السلة تتضمن 3 قمصان بسعر 20 ريال لكل منها = 60 ريال للكل فإن قسيمة بخصم 10% سوف تخصم مبلغ 6 ريال من المجموع الكلي. خصم ثابت لسلة المشتريات: قيمة خصم ثابتة من السلة ككل فعلى سبيل المثال إن كانت السلة تتضمن 3 قمصان بسعر 20 ريال لكل منها = 60 ريال للكل فإن قسيمة بخصم 10 ريال سوف تخصم مبلغ 10 ريال من المجموع الكلي. خصم ثابت للمنتجات: خصم ثابت للمنتجات المختارة فقط، حيث يتلقى العميل خصمًا لكل عنصر، فعلى سبيل المثال 3 قمصان بسعر 20 ريال لكل منها = 60 ريال للكل فإن قسيمة بخصم 10 ريال سوف تخصم مبلغ 30 ريال من المجموع الكلي. قيمة القسيمة: قيمة ثابتة أو نسبة مئوية وهذا يعتمد على نوع الخصم الذي اخترته، وتُدخل هذه القيمة بدون واحدة عملة أو إشارة النسبة والتي تُضاف تلقائيًا فعند إدخال 10 سوف تكون 10 ريال أو 10%. السماح بالشحن المجاني: إزالة تكاليف الشحن عند استخدام القسيمة، وهذا يتطلب تفعيل الشحن المجاني. تاريخ انتهاء القسيمة: التاريخ الذي تُصبح فيه القسيمة بدون قيمة ولا يُمكن استخدامها، وتنتهي الصلاحية الساعة 12:00 صباحًا أو 00:00 في التاريخ المختار، وإن كنت تريد للقسيمة أن تكون فعالة خلال عيد الأم مثلًا وتنتهي صلاحيتها مع انتهاء اليوم عندها عليك اختيار التاريخ YYYY-03-22 كتاريخ انتهاء الصلاحية حيث تنتهي صلاحية هذه القسيمة الساعة 00:00 من يوم 22-03-YYYY وذلك حسب المنطقة الزمنية التي يستخدمها موقعك والمضبوطة في تبويب "عام" ضمن "الإعدادات". تقييد الاستخدام الحد الأدنى لقيمة المشتريات: يسمح لك هذا الحقل بضبط الحدّ الأدنى للإنفاق (المجموع) المسموح به لاستخدام هذه القسيمة. حد الاستخدام الأقصى: يسمح لك هذا الحقل بضبط الحدّ الأقصى للإنفاق (المجموع) المسموح به لاستخدام هذه القسيمة. استخدام القسيمة لوحدها: حدد هذا الاختيار لجعل القسيمة غير قابلة للإستخدام مع قسائم أخرى. استبعاد المنتجات المخصومة: حدد هذا الاختيار في حالة عدم تطبيق القسيمة على المنتجات المخصومة. القسائم المخصصة للمنتج الواحد ستعمل فقط إذا كان المنتج لا يقع تحت الخصم. القسائم المخصصة لجميع المنتجات ستعمل إذا كانت المنتجات المتواجدة في السلة لا تقع تحت الخصم. المنتجات: المنتجات التي سوف تُستخدم عليها القسيمة أو التي يجب أن تكون ضمن السلة لتكون القسيمة فعّالة. المنتجات المستبعدة: المنتجات التي لن يكون للقسيمة تأثير عليها أو التي يجب ألا تكون ضمن السلة للاستفادة من الخصم "خصم ثابت لسلة المشتريات". تصنيفات المنتج: التصنيفات التي سوف تُستخدم عليها القسيمة أو التي يجب أن تكون ضمن السلة لتكون القسيمة فعّالة. التصنيفات المستبعدة: التصنيفات التي لن يكون للقسيمة تأثير عليها أو التي يجب ألا تكون ضمن السلة للاستفادة من الخصم "خصم ثابت لسلة المشتريات". رسائل البريد الإلكتروني المسموح بها: عناوين البريد الإلكتروني التي تستطيع استخدام القسيمة، وهي نفسها العناوين المستخدمة في فاتورة العميل، وأصبح ووكومرس بدءًا من الإصدار 3.4 يسمح لك باستخدام (*) لمطابقة عدة عناوين بريد إلكتروني فعلى سبيل المثال *@gmail.com سوف يسمح لأي بريد إلكتروني من جيميل باستخدام القسيمة. ملاحظة: الإبقاء على حقلي المنتجات والمنتجات المستبعدة فارغين يسمح باستخدام القسيمة على كامل المتجر. حدود الاستخدام حد الإستخدام لكل قسيمة: كم مرة يمكن إستخدام هذه القسيمة قبل أن تكون ملغية. حد الإستخدام لكل مستخدم: كم مرة يمكن إستخدام هذه القسيمة بواسطة مستخدم فردي. باستخدام البريد الإلكتروني لعنوان الفاتورة الخاص بالضيوف، ومُعرّف اسم المستخدم للمستخدمين المسجلين. اضغط على "نشر" حال الانتهاء من ضبط جميع الإعدادات لتُصبح قسيمتك جاهزة للاستخدام، وإن كنت لا تريد للقسيمة أن تكون متوفرًا على الفور تستطيع جدولة عملية نشرها لتكون متوفرة في تاريخ مستقبلي بضبط خيارات النشر. إرسال قسيمة بمجرد نشر القسائم سارع في توفيرها للعميل وذلك من خلال نسخ العنوان وإرسالها عبر البريد الإلكتروني أو وسائل التواصل الاجتماعي أو نشرها ضمن الموقع. استخدام قسيمة يُمكنك إضافة القسائم -بدءًا من ووكومرس 3.2- أو إزالتها من الطلبات ضمن نافذة تعديل الطلب، حيث يجب أن تكون الطلبات غير مدفوعة وأنت بحاجة لمعرفة رمز القسيمة التي ترغب في استخدامها. الأسئلة المتكررة ما هو أثر القسائم على حسابات الضريبة؟ تُطبق القسائم على سعر المنتج قبل حساب الضريبة، ولتضمن أن الضرائب محسوبة بطريقة صحيحة بعد التقريب، عليك فصل الخصم ضمن جميع العناصر ضمن السلة بدلًا من إزالة جزء من القيمة الكلية للسلة، وعندما توزع الخصم على جميع عناصر السلة يُمكن أن تظهر قيم كسرية وبالتالي تتسبب عملية التقريب بمشكلات عند جمع الناتج الكلي، ولمساعدتك على منع حصول هذا يستخدم ووكومرس كسور العملة الأساسية فقط، وعند توزيع الخصم على عناصر السلة سوف يُطبق أي باقي على كل نوع من المنتجات ضمن السلة، وعندها يحتسب المجموع الكلي القيمة الكلية للخصم، وهذا مهم جدًا في الخصومات الثابتة لمحتوى السلة. كيف تؤثر القسائم على حسابات الشحن؟ تُطبق القسائم على المنتجات الفردية أو العناصر ضمن السلة، وكلف الشحن ليست من ضمن السلة لذلك فإن الخصم المُطبق عن طريق القسيمة لن يؤثر على عمولات الشحن، فعلى سبيل المثال قسيمة بقيمة 50$ طُبقت على منتج بسعر 40$ وعمولة شحن ثابتة 10$ سوف تخصم فقط قيمة 40$ من الطلب وتبقى كلفة الشحن 10$. هل أستطيع تخصيص دالة توليد رمز القسيمة؟ نعم، إن كنت مطورًا فمن الممكن تخصيص دالة توليد رمز القسيمة من خلال تحديد طول الرمز وإضافة بادئة أو لاحقة له، وانتبه إلى أن فريق ووكومرس استثنى استخدام المحارف التي يُمكن أن تكون غير واضحة أو صعبة القراءة. ترجمة -وبتصرّف- للمقال Coupon Management. اقرأ أيضًا إدارة القسائم والودجات والشيفرات المختصرة في متجرك الإلكتروني على منصة WooCommerce دليلك الشامل لاستخدام قسائم ووكومرس كيفية إنشاء قسائم الخصم في ووكومرس والاستفادة منها

تلعب خلاصة الموقع RSS في ووردبريس دورًا مهمًا ضمن موقعك الإلكتروني حتى لو لم تكن مدركًا لها، فهي ربما تُبقي القُراء مشدودين لأحدث المنشورات أو حتى تُحسن من ظهور محتواك، لذا من المهم إصلاح المشاكل التي تتعرض لها هذه الميزة للحفاظ على عمل موقعك بسلاسة، وفي هذا المقال سوف نتكلم عن الأسباب التي تُفضي لتعرض هذه الميزة لأخطاء ثم سوف نناقش ثلاث خطوات لإصلاحها. لم تظهر أخطاء خلاصة الموقع RSS في ووردبريس؟ يجب أن تكتسب فكرة بسيطة عن كيفية عمل هذه الميزة لكي تفهم الأخطاء التي تتعرض لها خلاصة الموقع RSS، وعلى الأخص يجب أن تعلم أن خلاصة الموقع RSS تُوّلد من خلال XML وهي لغة وسوم تُبسط عملية نقل البيانات ومشاركتها وتوفيرها. تتطلب XML استخدام صيغة صارمة لكي تعمل دون أخطاء، وأمر بسيط مثل فاصل سطر بغير مكانه يُمكن أن يُسبب في توقف عملها، وهذا هو السبب الرئيسي لمعظم أخطاء خلاصة الموقع RSS في ووردبريس. يوجد مصدر آخر للمشاكل وهو إضافة مكتوبة بشيفرة ضعيفة لتعديل خلاصة الموقع RSS، حيث ينتج عن مشاكل التوافقية بين الإضافات أخطاء يُمكن أن تُسبب توقف عمل خلاصة الموقع RSS، وأخيرًا فإن الأخطاء الناتجة عن القوالب هي الأقل احتمالًا لكنها تبقى سببًا لحصول أخطاء في خلاصة الموقع RSS، فربما هناك مشكلة في التخطيط تمنع خلاصة الموقع RSS من تولد بشكل صحيح أو ربما هناك ميزة يوفرها القالب تتعارض مع خلاصة موقع RSS. إن مصدر معظم أخطاء خلاصة الموقع RSS في ووردبريس هو الشيفرة بطريقة أو بأخرى، ولحسن الحظ أنك لا تحتاج لامتلاك خبرة باستخدام XML لتتمكن من إصلاح المشكلة. كيفية إصلاح أخطاء خلاصة الموقع RSS في ووردبريس يعتمد أفضل حل لإصلاح خلاصة الموقع RSS في ووردبريس (بجزء منه) على المشكة المُسببة للخطأ، لكننا ننصح باتباع الخطوات التالية لإصلاح الخطأ بطريقة منهجية وإيجاد الحل. الخطوة الأولى: تحقق يدويا من وجود أخطاء ضمن ملف functions.php إن ملف functions.php هو المكان الأول الذي عليك التحقق منه في حال صادفك خطأ وخصوصًا إن أجريت أي تعديلات عليه مؤخرًا، وأحد أكثر الأخطاء الشائعة التي تُسبب تعطل خلاصة الموقع RSS هي الفراغات غير الضرورية أو فواصل الأسطر الموجودة بعد وسم إغلاق PHP. يوجد طريقتان تستطيع من خلالهما الوصول لملف functions.php، فإذا كنت مرتاحًا لاستخدام بروتوكول نقل الملفات FTP تستطيع الاتصال مع الخادم باستخدام FTP Client مثل FileZilla ثم التوجه إلى مجلد القالب النشط ضمن مجلد themes الموجود ضمن wp-content ثم ابحث عن ملف functions.php. أو تستطيع الدخول للوحة تحكم ووردبريس والتوجه إلى قسم "مظهر" ثم تبويب "محرر القالب" والبحث عن ملف functions.php هناك. حال دخولك للملف توجه إلى نهايته وتحقق من وجود فواصل أسطر أو فراغات بعد وسم إغلاق PHP وأزلها في حال وجودها لكن الأسهل إزالة وسم إغلاق PHP. إن وسم الإغلاق ليس ضروريًا لتعمل الشيفرة لكن عليك إزالة الفراغات الزائدة وفواصل الأسطر واختبار الشيفرة إن كانت ما تزال تعمل قبل إزالة أي جزء من الشيفرة، لكنها تستحق التجريب إن استمرت المُشكلة بالظهور. الخطوة الثانية: استخدم القالب الافتراضي إن كان كل شيء طبيعيًا في ملف functions.php عندها تكون الخطوة التالية هي التحقق من قالب ووردبريس حيث من الممكن أن يتضمن ميزة تتعارض مع خلاصة الموقع RSS أو مشاكل في التخطيط تمنع خلاصة الموقع من العمل بشكل صحيح، أضف إلى ما سبق أنه في حال عدلت خلاصة الموقع RSS باستخدام إضافة يُحتمل أن يكون قالبك غير متوافقًا معها، والحل الأسهل لاكتشاف المشكلة هو بتفعيل القالب الافتراضي لووردبريس مثل Twenty Twnety. توجه ضمن لوحة تحكم ووردبريس إلى "مظهر" ثم "قوالب" واضغط على "تفعيل" القالب الافتراضي الذي تُفضله. في حال كنت لا تستطيع الوصول للوحة تحكم ووردبريس، اتصل مع الخادم باستخدام FTP Client ثم توجه إلى مجلد wp-content ثم لمجلد themes وأعد تسمية جميع المجلدات ما عدا القالب الافتراضي. سوف يُجبر هذا ووردبريس على تفعيل القالب الوحيد الذي يعمل، الآن عد إلى موقعك وتحقق ما إذا كانت خلاصة الموقع RSS عادت للعمل كما يجب، وفي ما زال الخطأ قائمًا انتقل للخطوة التالية. من الناحية الأخرى إن كانت خلاصة الموقع RSS تُعرض بصورة صحيحة عندها أصبحت تعلم أن القالب هو المشكلة، وفي هذه المرحلة لديك خياران، الأول استبدال القالب بقالب يعمل مع خلاصة الموقع RSS والخيار الثاني هو التواصل مع مطور القالب الذي تستخدمه أو فريق دعمه لتحديد إن كانوا على علم بهذه المشكلة وإن كانوا قادرين ومستعدين لحل المشكلة فربما تستطيع المتابعة باستخدام القالب دون أي مشاكل أخرى. الخطوة الثالثة: ابحث عن تعارض في الإضافات إن عدلت خلاصة الموقع RSS باستخدام إضافة فيجب أن تكون هذه هي نقطة توقفك التالية بعد التأكد من أن القالب ليس مصدر الخطأ، وهناك سببان رئيسيان يُمكن أن يُسببا المشكلة: إضافة خلاصة الموقع RSS غير متوافقة مع إضافة أخرى ضمن موقعك. الإضافة التي اخترتها مكتوبة بشيفرة ضعيفة وتتضمن أخطاء في كتابة XML. يُفضل البحث عن مشاكل عدم توافقية في الإضافة أولًا ولعمل هذا عليك تعطيل جميع الإضافات ما عدا المسؤولة عن تعديل خلاصة الموقع RSS. إن كنت لا تستطيع الوصول للوحة التحكم فإنك تستطيع تعطيل الإضافات باستخدام FTP وذلك بالتوجه إلى مجلد wp-content ثم مجلد plugins عبر برنامج FTP Client ثم إعادة تسمية كل مجلد. تحقق الآن من خلاصة الموقع RSS إن كانت تعمل دون مشاكل وفي هذه الحالة أصبحت تعلم أن إضافتك تتعارض مع إضافة أخرى، لذا أعد تفعيل جميع الإضافات واحدة تلو الأخرى وتحقق كل مرة إن كانت خلاصة الموقع RSS ما تزال تعمل، وفي حال عادت المشكلة يكون المُسبب هو آخر إضافة فعلتها. عليك الآن أخذ قرار إن كنت تستطيع إزالة أو استبدال إضافة خلاصة الموقع RSS أو الإضافة غير المتوافقة معها أو تستطيع التواصل مع مطورها لتقديم حل. إن جربت جميع الخطوات السابقة دون نتيجة فغالبًا هناك خطأ في كتابة شيفرة XML ضمن إضافة خلاصة الموقع RSS وهنا تستطيع محاولة الاتصال مع مطور الإضافة أو فريق الدعم للمساعدة، لكن في حال لم تتلقى ردًا أو مساعدة عليك إزالة أو استبدال الإضافة لتعمل خلاصة الموقع RSS لديك من جديد. الخلاصة إن كنت تستطيع إصلاح الخطأ في خلاصة الموقع RSS في ووردبريس سوف تضمن أن مستخدمي موقعك سوف يحصلون على آخر التحديثات عن علامتك التجارية، وهذا أسهل باستخدام ميزة خلاصة الموقع الأخبار سواء كنت تريد إبقاء المستخدمين على اطلاع بأحدث المنشورات أو تريد الترويج لمنتج جديد. عرضنا في هذا المقال كيفية إصلاح خطأ خلاصة الموقع RSS في ووردبريس من خلال ثلاث خطوات فقط: تحقق يدويًا من أخطاء ضمن ملف functions.php استبدل القالب بالقالب الافتراضي. تأكد من وجود تعارض بين الإضافات. ترجمة -وبتصرّف- للمقال How to Fix RSS Feed Errors in WordPress لصاحبه Will Morris. اقرأ أيضًا كيفية استخدام مكون خلاصة الموقع RSS في ووردبريس كيفية إصلاح الخطأ (هل أنت متأكد من رغبتك بفعل هذا؟) في ووردبريس كيفية تنقيح أخطاء ووردبريس بخطوات احترافية كيفية إصلاح (أو حذف) الروابط المعطلة على موقع ووردبريس الخاص بك

يمكن لقسم التعليقات ضمن ووردبريس أن يكون كنزًا مليئًا بالنقاشات الغنية أو مكانًا يصخب بالإهانات والتعليقات المزعجة والفوضى، وتعتمد النتيجة التي تحصل عليها ضمن موقعك على جهودك المبذولة في إدارة ورقابة هذا القسم. تتطلب إدارة التعليقات الكثير من المهارة أكثر مما تظن، ولهذا سوف نعرض ضمن هذا المقال عدة نصائح تُساعدك على التمكن من إدارة تعليقات ووردبريس، وسوف نناقش فيما إذا كان قسم التعليقات ضروريًا لموقعك وكيفية تحسين النظام الافتراضي للتعليقات في ووردبريس. لم عليك إدارة تعليقات ووردبريس إن إدارة التعليقات في ووردبريس مهمة ضرورية من الناحية التقنية، حيث تتطلب إعدادات المنصة الافتراضية من مدير الموقع الموافقة على التعليق الأول لكل مستخدم. وإلى حين الموافقة على هذه التعليقات سوف تظل بانتظار المراجعة ولن تكون ظاهرة ضمن الواجهة الأمامية للموقع، وفي حال أجريت تعديلات على إعدادات المناقشة يُمكن أن تنطبق هذه الجزئية على جميع العليقات وليس فقط على المُعلقين لأول مرة، وفي حال رأيت سابقًا قسم تعليقات متاح للجميع فأنت تعلم لم من المهم إدارة محتوى هذا القسم، فعندما تعطي الصلاحية للمعلقين بكتابة ما يريدون يُمكن للبعض منهم أن يستغل المنصة للإساءة لعلامتك التجارية أو حتى لك شخصيًا. لا نعني بما سبق أن جميع الزوار يتعمدون الإساءة لكن السرية التي يمنحها الويب تُشجع الكثيرين على إبداء آراء وأفعال لم يكونوا ليفصحوا عنها في الظروف العادية، وهذا يُمكن أن يُولد انطباعًا سلبيًا حول محتواك ويُقلل مستوى التفاعل. الأهم مما سبق أن التعليقات المزعجة ضمن المقالات يُمكن أن تُقلل من جودة التفاعل مع موقعك ومن سويته ضمن محركات البحث، إذ يعمد الكثير من الأشخاص لنشر روابط ضمن قسم التعليقات لديك لا علاقة لها بجمهورك بهدف جذب زيارات لمواقعهم. أيضًا هناك تعليقات شائعة مثل "مقال جيد" تحجز مساحة دون إضافة أي قيمة مثلها مثل الكثير من التعليقات غير المرتبطة بمحتواك والتي لا معنى لها وغير مفيدة لمدونتك، وبالتالي من دون إدارة لهذا القسم سوف يصعب على زوارك بناء مجتمع يُمكنهم التفاعل معه من خلال نقاشات مفيدة ومُنتجة، لذا فإن الأمر يعود لك أو لمن توكل له مهمة إدارة هذا القسم ليضمن أن جميع التعليقات الظاهرة تتقيد بقواعد أساسية تُناسب موقعك. تعطيل تعليقات ووردبريس بالكامل يجب أن نذكر قبل الحديث عن إدارة التعليقات أن هذا القسم غير ضروري لجميع المواقع، وعادةً ما يكون موجودًا ضمن المواقع ذات المحتوى الكثيف مثل المدونات والمواقع الإخبارية وغيرها، لكن يُمكن أيضًا أن تزور الكثير من هذه المواقع التي استغنت عن قسم التعليقات تمامًا، ففي بعض الأحيان يكون المحتوى الذي تكتبه جدليًا (مثل المحتوى السياسي) ويصعب كثيرًا إدارة قسم التعليقات في مثل هذه المواقع، وغالبًا لن يكون التفاعل على هذا المحتوى منتجًا لذا الخيار الأفضل هنا هو تعطيل قسم التعليقات. يوجد أيضًا أنواع من المواقع لا فائدة لهذا القسم ضمنها مثل مواقع التجارة الإلكترونية والتي تستفيد من نظام المراجعات، وبعد ذكر كل ما سبق فإن التعليقات يُمكن أن تكون مهمة جدًا في حالات معينة ومن المهم مقارنة إيجابيات وجود هذا القسم مع سلبيات غيابه قبل اتخاذ قرار تعطيله نهائيًا. توجيهات لإدارة قسم التعليقات في ووردبريس تبدو عملية إدارة قسم التعليقات عملية سهلة لكن قلة ممن وُكلّت لهم هذه المهمة سوف يخبرونك بأنها بسيطة، ولحسن الحظ أن ووردبريس يتضمن بعض الوظائف التي تُساعدك على إدارة التعليقات لكن مع ذلك تتضمن هذه الوظيفة جهدًا كبيرًا من طرفك، وإليك بعض التوجيهات الأساسية التي عليك تذكرها عند إدارة هذا القسم. أبق على التعليقات متحضرة من خلال إزالة المسيئة ومنع عرضها يوجد مكان ووقت مُخصصان ليتجادل الناس مع جيرانهم لكن قسم التعليقات ليس هذا المكان، وأول ما عليك عمله كمراقب لهذا القسم هو إزالة أي تعليقات مُسيئة أو متطرفة، ففي حال سمحت للزوار باستخدام عبارات مسيئة وهجومية ضمن قسم التعليقات سوف تُنفر بقية المُستخدمين من الاشتراك بمناقشة راقية، ويبقى فقط من يبحث عن المشاكل ليُصبح قسم التعليقات بدون فائدة ولا يستحق حجز مساحة له ضمن موقعك. كما أن التعليقات السيئة والمحتوى الذي يُصنف على أنه "تنمر رقمي" وغيرها من المنشورات المُماثلة تجعل موقعك يبدو غير احترافي، وهذا يُصعّب أكثر إنشاء شراكات مع علامات تجارية. هناك أمر واحد تستطيع عمله لجعل وظيفتك أسهل وهو عرض رسالة قبل قسم التعليقات ليعرف زوارك ما يُسمح به وما هو ممنوع ضمن التعليقات، وفي حال أردت تستطيع ضبط قائمة سوداء لحجب التعليقات المسيئة تلقائيًأ، وهذه ميزة متوفرة في ووردبريس ولاستخدامها توجه إلى تبويب "المناقشة" ضمن قسم "الإعدادات" في لوحة تحكم ووردبريس. توجه لأسفل الصفحة إلى قسم "مفاتيح التعليقات غير المسموح بها" وأدخل العبارات التي تريد حجبها تلقائيًا ثم احفظ التغييرات. يجب أن تختار بعناية ما تريد حجبه كي لا تحجب عن طريق الخطأ تعليقات مفيدة وقيمة، ومع ذكر كل ما سبق من المهم أن تعي وجود فاصل رفيع بين الحفاظ على قسم التعليقات ضمن موقعك حضاريًا وبين مراقبته. كن عادلا وتجنب دور الرقيب تستطيع إدارة التعليقات بأي طريقة تراها مناسبة لموقعك الإلكتروني، وإن أردت منع المستخدمين من مشاركة آرائهم تستطيع ذلك، لكن هذا يُمكن أن يُغضب قاعدة مُستخدميك ويرتد سلبًا عليك. يُمكن أن تظهر وسوف تظهر خلافات ضمن قسم التعليقات لكن طالما أن النقاش مُستمر بصورة حضارية، فالأفضل عدم إزالة تعليقات أي شخص وعدم منع هذه التعليقات من النشر، وهذا يتضمن آراءً لا تتوافق مع رأيك. لنقل أنك كتبت مراجعة طويلة لإضافة وكانت مراجعتك إيجابية لكن أحد المستخدمين كتب تعليقًا على المقال يوضح فيه تجربته السيئة مع نفس الإضافة، عندها الأفضل الحفاظ على تعليقه بدلًا من إزالته لأنه يتناقض مع مقالك، حيث يمكن أن يجد المستخدمون الآخرون قيمة في هذا التعليق، وسوف يقدرون أنك توفر لهم المعلومات اللازمة التي تُساعدهم على اتخاذ قرار فيما إذا كانت الإضافة خيارًا جيدًا لمواقعم أم لا. تستطيع أيضًا الرد على هذا التعليق وشكر الناشر لمشاركته رأيه مع الآخرين، فهذا يُؤكد لقُرائك أنك منفتح لمختلف الأفكار مما يُدعم البيئة اللازمة لإنشاء مجتمع بين هؤلاء القراء. مثال آخر عن التعليقات عندما يكتب أحدهم انتقادًا بناءً لك، فربما اقتبست إحصائيات خاطئة وصحح القارئ لك (بطريقة مهذبة) معلوماتك، وهنا عليك شكر هؤلاء القُرّاء كون هذا أكثر فعالية من إظهار غضبك تجاههم أو حذف تعليقهم لتغطية خطئك. إن الاعتراف بالخطأ لا يزيد من مصداقيتك أمام الزوار فقط بل يجعلهم يشعرون أنهم قدموا مُساهمة مفيدة لموقعك، وهذا يمكن أن يُنمي شعور الولاء والانتماء من قبل القارئ لمدونتك أو علامتك التجارية. اسمح بالروابط فقط إن كانت مُصاحبة لتعليقات مفيدة يوجد استراتجيات تحسين محركات البحث تندرج تحت القبعة السوداء وتتمحور حول إضافة روابط ضمن مواقع أخرى عن طريق قسم التعليقات، ففي حال أدرت مدونة فلا بد أنك تعلم أن هذا يحصل دائمًا، وفي بعض الحالات لا يبذل هؤلاء الأشخاص أي جهد في إخفاء نواياهم في استغلال منشوراتك عن طريق التعليقات المزعجة. وفي أحيان أخرى سوف تجد تعليقات مفيدة تُساهم في بدء عملية النقاش ويصدف أنها تتضمن رابطًا، لكن طالما أن المصدر يوفر قيمة للزوار فلا سبب يدعو لإزالة هذا التعليق، فعلى سبيل المثال لنقل أننا نتحدث عن المدونات الصوتية للتسويق عبر وسائل التواصل الاجتماعي عندها من الطبيعي إن كان القارئ مُطلع على مدونة صوتية تهمنا أن ينشر رابطها ضمن قسم التعليقات، لذا بدلًا من إضاعة تعليقات ذات قيمة غالبًا عليك ضبط المزيد من الإرشادات للمنشورات التي تتضمن روابط لكي لا تُحجب. تستطيع ضمن إعدادات المناقشة في ووردبريس عمل هذا من خلال جعل التعليقات التي تتضمن عدد معين من الروابط بحاجة لموافقة مدير الموقع. ننصحك أيَضًا لتكون على الضفة الآمنة أن تكون جميع الروابط ضمن التعليقات Nofollow وبهذه الطريقة لن يتمكن المُعلق من استغلال قسم التعليقات لأهداف مرتبطة بتحسين محركات البحث. كيفية تحسين نظام التعليقات في ووردبريس جميع الاستراتيجيات التي ذكرناها سابقًا تصب في اتجاه تحسين قسم التعليقات في ووردبريس لكن لم تحدث أبدًأ عن تغيير نظام التعليق لتوفير خدمة أفضل للقُراء. تستطيع مثل أي ميزة أخرى في ووردبريس استبدال قسم التعليقات الافتراضي في ووردبريس من خلال إضافة، وأحد الإضافات المُفضلة لدينا هي wpDiscuz، حيث تُضيف ميزات مثيرة للاهتمام مثل ترتيب التعليقات وإضافة زر "تحميل المزيد من التعليقات" والاشتراكات وغيرها الكثير. تستطيع استخدام أنظمة تعليق خارجية ضمن ووردبريس مثل DISQUS. يُمكن للمستخدمين مع DISQUZ التصويب مع أو ضد تعليق ما واستخدام الوجوه التعبيرية وإضافة صور، كما أنه يوفر وصول لأدوات رقابية متقدمة. الخلاصة إن أهملت قسم التعليقات في موقعك غالبًا لن تحصل على نقاشات مُثمرة مرتبطة بمنشوراتك، لذا عليك لعب دور الرقيب لتوفير بيئة صحية يُمكن للزوار التفاعل ضمنها فيما بينهم ضمن موقعك. تحدثنا في هذا المقال عن استراتيجيات رئيسية تُساعدك على إدارة قسم التعليقات: الحفاظ على الأمور حضارية من خلال حجب التعليقات المُسيئة. أن تكون عادلًا وغير متحيز. اسمح بوجود روابط ضمن التعليقات فقط إن كانت هذه التعليقات تُقدم أفكار جديدة. ترجمة -وبتصرّف- للمقال A Simple Guide to Moderating WordPress Comments لصاحبه Will Morris. اقرأ أيضًا التعامل مع التعليقات في ووردبريس أفضل 9 ملحقات ووردبريس لتسهيل إدارة التعليقات وتحسينها كيفية استخدام مكون آخر التعليقات في ووردبريس مدخل إلى التدوين ونشر المدونات وما يتعلق بها عبر منصة ووردبريس دليلك لاحتراف العمل على واجهة إدارة ووردبريس

إن أحد أكثر الميزات وفائدة أقلها استخدامها في محرر مكونات ووردبريس هي المكون القابل لإعادة الاستخدام، وهو عبارة عن مكون أو مجموعة من المكونات تُضبط معًا وتستطيع إعادة استخدامها، كما تستطيع استخدامها في عدة صفحات ومقالات بنفس الوقت دون الحاجة لتعديلها من جديد، وفي حال كنت تريد تعديلها من جديد يُمكن تطبيق التغييرات على مستوى الموقع مما يوفر عليك الكثير من الوقت. سوف نتعمق أكثر في هذا المقال عن كيفية إدارة المكونات القابلة لإعادة الاستخدام في ووردبريس. كيفية إنشاء مكون قابل لإعادة الاستخدام في ووردبريس إنشاء مكون قابل لإعادة الاستخدام في ووردبريس عملية بسيطة للغاية، حيث تستطيع ضمن أي مقال تجري تعديلات عليه باستخدام محرر المكونات (إلا في حال كنت تستخدم المحرر التقليدي) جعل أي مكون قابل لإعادة الاستخدام، وذلك بالضغط على القائمة المنسدلة ذات النقاط الثلاث ضمن إعدادات المكون التي تظهر عند تحريك مؤشر الفأرة فوق المكون، ثم اضغط على إضافة إلى المكونات القابلة لإعادة الاستخدام. سوف تظهر لك نافذة منبثقة تطلب منك اختيار اسم للمكون الجديد لتتمكن من الوصول له لاحقًا، لذا استخدام اسمًا يسهل حفظه ومرتبط بالوظيفة المطلوبة منه ضمن موقعك مثل "أحدث المقالات" أو "غلاف صورة لمنشورات المدونة" أو أي شيء مشابه. إن ارتكبت خطأ أثناء إنشاء مكون قابل لإعادة الاستخدام، تستطيع الضغط على القائمة المنسدلة مرة أخرى واختيار "إدارة المكونات القابلة لإعادة الاستخدام" ثم حذف المكون من هذه القائمة. تستطيع الضغط على المكون بعد حفظه لتعديله. تستطيع ضمن مكون الفقرة في المثال السابق تغيير اسم المكون، كما أن التعديلات التي تستطيع استخدامها تختلف من مكون آخر، فعلى سبيل المثال في مكون الصورة تستطيع تغيير الصورة من مكتبة الوسائط أو رفع صورة جديدة بالإضافة لتعديل المحاذاة والرابط. تعمل الطريقة السابقة مع جميع المكونات القابلة لإعادة الاستخدام، لكن تذكر أن أي تعديلات تُجريها على المكون القابل لإعادة الاستخدام بالطريقة السابقة سوف تُطبق على جميع النسخ المأخوذة من نفس المكون ضمن الموقع، لذا إن أردت تغيير الصورة في مكون واحد فقط سوف يُطبق التغيير في كل مكان استخدم فيه هذا المكون. كيفية إضافة المكونات القابلة لإعادة الاستخدام استخدام المكونات القابلة لإعادة الاستخدام في ووردبريس سهل للغاية، وما عليك سوى الدخول لمحرر المكونات ضمن أي مقال أو صفحة والضغط على أي إشارة "+" في أعلى يمين الصفحة ثم الانتقال إلى تبويب "قابل لإعادة الاستخدام". يُمكن أن تظهر المكونات القابلة لإعادة الاستخدام ضمن قائمة الأكثر استخدامًا والتي تظهر عند الضغط على إشارة "+" الموجودة ضمن جسم الصفحة أو المقال. سوف تتغير هذه المكونات عند استخدامك لمكونات مختلفة لكن في حال استخدمت نفس المكون القابل لإعادة الاستخدام (مثل تذييل لكل مقال) سوف يظهر هنا غالبًا. كيفية إدارة جميع المكونات القابلة لإعادة الاستخدام في ووردبريس سوف تجد في أسفل تبويب "قابل لإعادة الاستخدام" رابط "إدارة المكونات القابلة لإعادة الاستخدام"، وعند الضغط عليه سوف يوجهك نحو صفحة تستطيع عبرها الاطلاع على جميع المكونات القابلة لإعادة الاستخدام التي أنشأتها سابقًا، وهي تشبه تمامًا صفحة عرض القائمة الافتراضية للمقالات والصفحات ضمن لوحة التحكم. سوف تجد عدة خيارات مهمة في هذه القائمة مثل "استيراد من JSON" و "تصدير بصيغة JSON" و "تحرير"، واستخدام المحرر هنا مشابه لعملية تحرير المكونات لكن بدل أن تكون ضمن مقال ما يظهر المكون لوحدة ضمن محرر يُشبه محرر المقالات يسمح لك بتحديث هذا المكون فقط، وتذكر أن التغييرات على هذا المكون سوف تُطبق على نطاق الموقع كاملًا. عند الضغط على زر "تصدير بصيغة JSON" سوف يعرض لك نافذة (يعتمد هذا على إعدادات المتصفح) لتختار موقع حفظ ملف JSON المُولّد، ويتضمن الملف نفسه بيانات JSON تعرض نوع الملف (مكون) والعنوان الذي اخترته أثناء التحرير أو الإنشاء وشيفرة HTML التي يوفرها ووردبريس لمعالجة المكون ومحتوياته ضمن الواجهة الأمامية للموقع. إن الاستيراد من ملف JSON عملية بسيطة وما عليك سوى تحديد موقع ملف JSON ضمن حاسوبك ورفعه مثل أي ملف آخر. سوف يظهر المكون ضمن قائمة المكونات القابلة لإعادة الاستخدام حال الضغط على زر "استيراد"، لكن انتبه ففي حال كنت تملك مكونًا بنفس الاسم فإن المكون المستورد حديثًا لن تُعاد تسميته وعليك إعادة تسميته يدويًا لتتمكن من التفريق بينهما. ما الحاجة لاستيراد وتصدير المكونات القابلة لإعادة الاستخدام؟ توجد عدة أسباب تدفعك لاستيراد وتصدير المكونات القابلة لإعادة الاستخدام لكن الغاية الرئيسية من استخدام هذه الميزات هي عمل نسخ احتياطية عن هذه المكونات وتسهيل عملية نقلها بين المواقع، وهذا غالبًا ميزة تحتاجها وخصوصًا عندما تعمل على عدة مواقع وتريد حفظ الوقت الذي استغرقته في تصميم مكون وتوفير الوقت ضمن موقع آخر. تُساعدك هذه الميزة على مشاركة المكون مع أعضاء فريق عملك أو حتى بيع المكون كما هو للعملاء، وعند استخدامك لخيار "مكونات المجموعة" تستطيع استيراد وتصدير قوالب صفحة كاملة كمكونات قابلة لإعادة الاستخدام بصيغة ملفات JSON. كيفية إنشاء مجموعات من المكونات القابلة لإعادة الاستخدام في ووردبريس إن إنشاء مجموعة من المكونات القابلة لإعادة الاستخدام يُساعد على تدعيم ميزة المكونات القابلة لإعادة الاستخدام، فبدلًا من استخدام ميزة المكون القابل لإعادة الاستخدام على صورة أو فقرة أو عنوان والتي تستطيع إدخالها في أي مكان، يُمكنك استخدام مكون المجموعة في ووردبريس مع ميزة المكون القابل لإعادة الاستخدام لحفظ مجموعة مكونات كمكون واحد قابل لإعادة الاستخدام، وهذا يعني أن تستطيع على سبيل المثال تجميع مكون عنوان ومكون فقرة ومكون صورة ومكون شيفرة HTML معًا لإنشاء نموذج بريد إلكتروني لجميع مقالاتك ضمن محرر المكونات. لإنشاء مجموعة من مكونات ووردبريس القابلة لإعادة الاستخدام فقط اضغط على زر Shift مع النقر على المكونات التي تريد إضافتها ضمن المجموعة، لتُحدد المكونات التي اخترتها بلون أزرق للحدود الخارجية لها. الآن اضغط على تجميع من القائمة لتندمج المكونات معًا ضمن مكون واحد تستطيع تحويله إلى مكون قابل لإعادة الاستخدام بنفس الطريقة التي شرحناها سابقًا. سوف تظهر المجموعة الجديدة ضمن قائمة المكونات القابلة لإعادة الاستخدام ضمن تبويب قابل لإعادة الاستخدام عند إضافتك لمكون جديد ضمن أي مقال أو صفحة. كيفية إنشاء قالب قابل لإعادة الاستخدام ذكرنا سابقًا أن المكون القابل لإعادة الاستخدام ضمن ووردبريس هو مكون على مستوى الموقع، وهذا يعني أن أي تغييرات تُجريها على نسخة عن المكون سوف تتأثر بها جميع المكونات الأخرى ضمن الموقع، فمثلًا إذا غيرت نص أو صورة مكون قابل لإعادة الاستخدام سوف يظهر هذا التغير في أي مكان استخدم فيه هذا المكون ضمن الموقع، لكنك تستطيع استخدام المكونات القابلة لإعادة الاستخدام كقوالب يُمكنك تعديلها فرديًا، ولعمل هذا عليك إضافة مكون قابل لإعادة الاستخدام ضمن المحرر عبر الضغط على زر "+" والتوجه إلى تبويب قابل لإعادة الاستخدام ثم اختيار المكون الذي تريد إضافته. عندما يظهر المكون اضغط على النقاط الثلاث لتظهر القائمة المنسدلة ثم اختر منها "تحويل إلى مكونات عادية". سوف يُطبق خيار تحويل إلى مكونات عادية على هذا المكون فقط، وعند استعماله أنت تُخبر ووردبريس أنك تريد جعل هذا المكون فقط مستقل عن أي تعديلات تُجرى على المكون القابل لإعادة الاستخدام الذي أُضيف منه، وبالتالي أي تغييرات تُجريها على المكونات القابلة لإعادة الاستخدام لن تُطبق على المكون هذا الذي حولته وبالعكس فأي تعديلات على هذا المكون لن تؤثر على بقية المكونات القابلة لإعادة الاستخدام ضمن الموقع. هكذا فإن استخدام الخيار تحويل إلى مكونات عادية يُمكنك من إضافة قالب أساسي للمكون (أو مجموعة المكونات) وإزالة مكون واحد من التعديلات الشاملة للموقع ليعمل المكون القابل لإعادة الاستخدام الأصلي كقالب لبقية المقالات والصفحات. الخلاصة المكونات القابلة لإعادة الاستخدام في محرر المكونات Gutenberg هي من أكثر الميزات استخدامًا وتنوعًا كونها تسمح للمستخدم بمشاركة المكونات والمحتوى بين المواقع والأصدقاء كما يُمكن استخدامها كقالب لأكثر العناصر استخدامًا ضمن الموقع، الأمر الذي يُسهل إنشاء وتصميم الصفحات والمقالات وينقلها لمستوى آخر من الفاعلية والإبداع. ترجمة -وبتصرّف- للمقال WordPress Reusable Blocks: How to Import, Export, and Create Them لصاحبه John Hughes. اقرأ أيضًا كيفية استخدام مكون تضمين ووردبريس كيفية استخدام مكون ووردبريس التقليدي كيفية استخدام مكون الشيفرة البرمجية في ووردبريس كيفية تغيير حجم مكون في ووردبريس