لوحة المتصدرين
المحتوى الأكثر حصولًا على سمعة جيدة
المحتوى الأعلى تقييمًا في 09/25/19 في كل الموقع
-
تعلّمنا في الدرسين السابقين كيفية إنشاء ونشر موقعنا الأوّل. في الحقيقة موقعنا حاليًّا بسيط وذو محتوى قليل وليس جذّابًا بعد. سنتعلّم في هذ الدرس كيف نستخدم تنسيقات CSS لتنسيق الصفحة. كما سنتعلّم في درس لاحق كيف نضيف المزيد من التنسيقات إلى موقعنا وذلك بمساعدة إطار عمل اسمه Bootstrap. البنية والتنسيق Structure and Style لنتذكّر معًا: يُعبّر HTML عن بنية صفحة الويب، في حين تُعرّف CSS المظهر العامّ للصفحة. يُعتبر فصل بنية الصفحة عن تنسيقها أمر في غاية الأهميّة وله الكثير من المزايا رغم أنّه ليس إلزاميًّا. لذلك سنعمل دومًا على جعل رُماز HTML وتنسيقات CSS في ملفات منفصلة. الربط مع ملف CSS ملف CSS هو ملف نص عادي له الامتداد (css.) ونربط معه من داخل ملف HTML. أنشئ ملف جديد ضمن المجلّد Portfolio وسمّه main.css. افتح الملف index.html واضف العنصر <link> ضمن العنصر <head>. سنخبر الصفحة index.html عن طريق العنصر <link> أن تُحمّل ملف CSS، أي سننشئ رابط بينهما: <link rel="stylesheet" href="main.css"> أضف العنصر السابق إلى العنصر <head>. ستبدو الشيفرة لديك مُشابهة لما يلي: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="main.css"> <title>Web Portfolio of Marco</title> </head> <body> <h1>Web Portfolio of Marco</h1> <h2>Welcome!</h2> <p>Thanks for stopping by.</p> <p>Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have fun.</p> <img src="marco.jpg" alt="Picture of me"> <p>Marco :-)</p> </body> </html> ملاحظة مهمّة: لكي يكون من الممكن الوصول لملف CSS، يجب أن تحتوي السمة href على المسار الصحيح للملف. وهذا يعني بدوره أنّه إذا كان ملف CSS في مجلّد فرعي، يحب أن نضم هذا المجلّد الفرعي إلى مسار الملف كما هو واضح. يمكنك مراجعة هذا الموضوع في الدرس الأوّل في فقرة عناوين URL النسبيّة والمطلقة. الألوان إلى الآن ما يزال ملف CSS فارغًا، لنبدأ الآن بكتابة أولى تنسيقات CSS. تحوي CSS ما يُعرف بالقواعد CSS Rules. يمكننا باستخدام قاعدة CSS أن نُخبر المتصفّح كيف يُعالج جزءًا مُحدّدًا من مستند HTML. كمثال على ذلك، سنغيّر لون الخلفيّة ولون النص للعنوان من المستوى الثاني h2 ضمن الملف index.html الخاص بنا. أضف ما يلي إلى ملف CSS: الملف main.css h2 { background-color: #607d8b; color: #ffffff; } يجب أن تحصل على شكل شبيه بما يلي: أكواد الألوان Color Codes تظهر الألوان على الشاشة كمزيج من نسب متفاوتة من الأحمر والأخضر والأزرق (RGB). يمكن التعبير عن المزج بين هذه الألوان الثلاثة في CSS بطريقتين: كقيم RGB عشرية (محصورة بين 0 إلى 255 لكل لون) أو كقيم RGB ستة عشرية hex values. وفي الواقع تُستَخدم القيم الستة عشرية في الغالب. إذا نظرنا إلى مثالنا الأخير، فنجد أنّنا قد عيّنا لونًا أزرقًا مائلًا للرمادي كلون خلفية باستخدام كود اللون 607d8b# بالترميز الستة عشري. أمّا لو أردنا استخدام الترميز العشري المُكافئ له فسنكتب (rgb(96, 125, 139. في التمثيل الستة عشري، يُعبّر أوّل رمزين من اليسار عن اللون الأحمر، والرمزين في الوسط عن اللون الأخضر، ويُعبّر الرمزان الأخيران عن اللون الأزرق. العمل مع أكواد الألوان يُعتبر التعامل مع الألوان كأكواد، شائع جدًا لكنه صعب في الحقيقة. لأنّك تتعامل مع قيم ورموز وليس مع ألوان، يُنصح دوماً استخدام أداة لانتقاء الألوان color picker. إذا كنت تستخدم المحرّر Brackets عندها يمكن أن تفتح أداة انتقاء اللون الموجودة ضمن ملف CSS الذي تعمل ضمنه. فقط تحتاج لأن تنقر بزر الفأرة الأيمن على كود اللون وتختار تحرير سريع Quick Edit أو أن تضغط Ctrl+E من لوحة المفاتيح. يؤدي ذلك إلى ظهور أداة اختيار الألوان حيث يمكنك اختيار اللون الذي يناسبك بسهولة. كما يمكنك اختيار ترميز اللون بالصيغة التي ترغبها من خلال ثلاثة أزرار موجودة في الأسفل. أدوات اختيار الألوان من الانترنت إذا لم تتوفّر أداة لاختيار الألوان ضمن المحرّر لديك، فيمكنك استخدام عدد كبير جدًّا من هذه الأدوات ولكن على الانترنت، فعلى سبيل المثال لا الحصر: HTML Color Codes ColorPicker ألواح الألوان من الانترنت نحتاج في كثير من الأحيان إلى أكثر من لون واحد لاستخدامه في موقعنا. لذلك نحتاج إلى أداة تزوّدنا بمجموعة من الألوان المنسجمة، والتي تتناغم مع بعضها لإضفاء تأثير جميل على الموقع. وهذا ما تفعله ألواح الألوان color palettes. هناك بعض المواقع على الانترنت التي توفّر مثل هذه الميزة. أمثلة على مواقع بمجموعات ألوان معرّفة مسبقًا: Colour Lovers Design Seeds Google Color Palette أمثلة على مواقع تولّد مجموعات ألوان حسب رغبة المستخدم: Kuler: يُعرّف قاعدة لون (سنتكلّم عن القواعد بعد قليل)، ويسمح لنا بالحصول على خمسة ألوان منسجمة معًا. Paletton: أداة متقدّمة للحصول على مجموعات ألوان منسجمة. Colourco.de: مولّد ألواح ألوان عملي أيضًا. قواعد CSS رأينا كيف تُغيّر CSS من هيئة عناصر HTML من خلال تأثيرها على الألوان. لنلقي نظرة عن كثب حول CSS وطريقة عملها. تُعتبر القاعدة rule البنية الأساسية لـ CSS وهي تتكوّن من ثلاثة عناصر: المحدِّد Selector والخاصية Property والقيمة Value. تُشير القاعدة السابقة إلى أنّ جميع عناصر <h2> يجب أن يكون لها لون خلفية له الكود 607d8b#. محددات CSS تُقرّر المحدّدات أيّ عناصر HTML ستُطبّق عليها قاعدة CSS. ملاحظة: سنتعلّم هنا المحدّدات الأكثر أهمية. من أجل الاطلاع على أنواع المُحدّدات الأخرى ابحث في Google عن CSS Selectors. محددات النوع Type Selectors تستهدف محدّدات النوع جميع العناصر التي يكون لها وسم HTML مُحدّد. فلو أردنا مثلًا استهداف جميع عناصر الفقرة p ضمن المستند بتنسيقات معيّنة، فسنكتب شبيه بما يلي: CSS p { ... } HTML <p>...</p> <p>...</p> محددات الصنف Class Selectors تُستخدم هذه المحدّدات بشكل متكرّر، وتُعتبر أنّها مُخصّصة أكثر قليلًا من مُحدّدات النوع، كما أنّه بإمكانها استهداف مجموعة مخصّصة من العناصر بدلًا من عناصر النوع الواحد فقط. لاستخدام محدّدات الصنف نضيف السمة class إلى العنصر المراد استهدافه، ونسند إليها قيمة مُعبّرة من اختيارنا. عند استخدام محدّد الصنف فإنّنا نستخدم نقطة عادية يليها قيمة السمة class التي أضفناها إلى العنصر. سيستهدف محدّد الصنف في المثال التالي، جميع العناصر التي لها سمة class تحمل القيمة highlight: CSS .highlight { ... } HTML <p class="highlight">...</p> <p>...</p> <p class="highlight new">...</p> لاحظ من شيفرة HTML في الأعلى، أنّ التنسيق سيُطبّق على عنصر p الأوّل والثالث فحسب، لأنّ عنصر p الثاني لا يمتلك سمة class لها القيمة highlight. كما نلاحظ أنّ عنصر p الثالث له أكثر من قيمة ضمن سمة class الخاصة به (highlight وnew). في الحقيقة يمكن استخدام عدة قيم لعنصر واحد بشرط أن نفصل بينها بفراغات. محددات معرف العنصر ID Selectors تشبه هذه المحدّدات محدّدات الصنف. فهي تستهدف جميع عناصر HTML التي تملك السمة id بقيمة مُعيّنة. من المهم أن نوضّح أنّ السمة id عبارة عن مُعرّف العنصر ضمن شيفرة HTML ورغم أنّه ليس من الملزم وضعها مع كل عنصر، إلّا أنّه في حال وجودها يجب أن تكون القيمة التي تحملها فريدةً ضمن كامل مستند HTML. نستنتج إذًا أنّ أي محدّد معرّف عنصر سيستهدف في الواقع عنصر واحد فقط ضمن مستند HTML. عند استخدام محدّد معرّف العنصر فإننا نكتب الرمز # يليه معرّف العنصر (قيمة السمة id). سيستهدف محدّد معرّف العنصر في المثال التالي عنصر واحد فقط ضمن مستند HTML بحيث تكون قيمة السمة id له هي navigation: CSS #navigation { ... } HTML <p id="navigation">...</p> <p>...</p> محددات الفروع Descendant Selectors يمكنك باستخدام هذا النوع من المحدّدات استهداف العناصر الأبناء لعنصر مُعيّن. ونقصد بالعناصر الأبناء لعنصر معيّن، تلك العناصر التي تقع ضمن هذا العنصر بصرف النظر عن المستوى الذي تقع فيه. انظر المثال التالي: <p id="level1"> <p id="level2"> <a href="myfile.html">My File</a> </p> </p> نلاحظ بأنّ كلًّا من العنصر <p> (ذو المعرّف level2) والعنصر <a> هما ابنان للعنصر <p> (ذو المعرّف level1). لأنّهما يقعان ضمنه بصرف النظر عن المستوى. في حين يُعتبر العنصر (ذو المعرّف level2) ابنًا مباشرًا للعنصر <p> (ذو المعرّف level1). أمّا بالنسبة لمحدّدات الفروع فنلق نظرة خاطفة على هذ المثال البسيط قبل أن نبدأ بالشرح: CSS p a { ... } HTML <p> <a href="http://code.makery.ch">My Website</a> </p> <a href="http://www.example.com">Example Website</a> نلاحظ بأنّ محدّد الفروع p a يستهدف جميع عناصر <a> أينما وُجدَت داخل عنصر <p>. وبناءً عليه نجد أنّ التنسيق سيُطبّق على My Website وليس على Example Website لأنّ الأخيرة موجودة ضمن عنصر <a> لا يقع ضمن أي عنصر <p> كما هو واضح. ملاحظة: ليس من الضروري أن يكون العنصر <a> في المثال في الأعلى ابنًا مباشرًا للعنصر<p>. فمحدّد الفروع السابق يستهدف أي عنصر <a> موجود ضمن أي مستوى ضمن العنصر <p>. إذا أردنا استهداف الابن المباشر فحسب، فيمكننا استخدام مُحدّد الابن ( > ). خصائص CSS تُقرّر قواعد CSS كيف يجب أن تظهر عناصر HTML. هناك العديد من الخصائص التي يمكن تعريفها في CSS. في الواقع لقد صادفنا اثنتان منهم: background-color وcolor. لن نتوسّع في الحديث عن خصائص CSS المختلفة، لأنّ هذا الدرس ليس مرجعًا لهذه الخصائص، لكن سنتعلّم كيف نجد المزيد من المعلومات عنها بأنفسنا. سنستفيد بشكل أكبر عندما نتعلّم هذه الخصائص عندما نحتاج إليهم فعليّا. توجد حالتان مختلفتان يمكن أن نصادفهما لنتعلُّم المزيد عن CSS. الحالة الأولى: عندما نصادف خاصية CSS لا نعرفها في هذه الحالة نبحث عن معلومات عنها في الانترنت، اكتب اسم الخاصية متبوعًا بكلمة css ضمن محرّك البحث. يمكنك أن تجرّب هذه الطريقة الآن لتحصل على معلومات حول خاصية CSS جديدة وهي: padding: 5px; استخدم css padding كعبارة بحث. لا تكتفي بالاطلاع على نتيجة البحث الأولى، بل اطّلع على النتائج الخمس الأولى أو أكثر إن أحببت. بعد ذلك قرّر أيُّ المواقع ستوفّر المعلومات المناسبة لك. جرّب تطبيق قاعدة CSS السابقة (أي القاعدة padding: 5px) على عنصر h2 في مشروعنا. الحالة الثانية: نريد تغيير أسلوب عرض أحد العناصر ولكن لا نعرف خاصية CSS المناسبة ابحث في الانترنت عن الشيء الذي ترغب أن تقوم به، متبوعًا بكلمة css. ربما تحتاج إلى إجراء عدة عمليات بحث قبل أن تجد ضالّتك. فإذا أردنا مثلًا تغيير حجم النص. في هذه الحالة استخدم الكلمات التالية text size css في محرّك البحث. ومرّة أخرى لا تكتفي بالنتيجة الأولى فقط من نتائج البحث. قيم CSS لقد صادفنا قبل قليل بعضًا من قيم CSS، فمثلًا القيم الست عشرية مثل ffffff# أو تلك القيم المتعلّقة بتعيين قياسات الأحجام مثل 5px. يتوجّب علينا أحيانًا وبحسب خاصية CSS المستخدمة استخدام كلمات مُعيّنة مثل left أو right لمحاذاة النصوص على سبيل المثال. أكثر قيم CSS المستخدمة هي القيم المتعلّقة بتعيين قياسات الأحجام. لذلك سنتناولها بشيء من التفصيل. غالبًا ما يُعرّف الحجم باستخدام البيكسل Pixel، ونرمز له اختصارًا بالرمز px. p { font-size: 16px; } توجد إمكانية أخرى وهي تعيين الأحجام باستخدام النسبة المئوية Percentage. دائمًا ما تكون النسب المئوية نسبيّةً بالنسبة للعنصر الأب. في المثال التالي سيشغل العنصر p ما مقداره 60% من عرض width العنصر الأب الذي يقع ضمنه، في حين سيشغل العنصر الأب عرض النافذة كاملًا. p { width: 60%; } توجد وحدة قياس مشهورة أخرى للأحجام وهي em. والـ em ترتبط دومًا بحجم الخط. ويعني ذلك أنّنا إذا غيّرنا حجم الخط فإنّ حجم العنصر المُقاس بالوحدة em سيتغيّر أيضًا. كمثال على ذلك إذا كان لعنصر ما حجم خط مقداره 20px وعرض 5em، فسيكون عرض العنصر الفعلي في هذه الحالة 100px (أي 20 مضروبة بـ 5). انظر إلى الشيفرة التالية: p { font-size: 20px; width: 5em; } محددات الصنف في مشروعنا إذا أردنا تكبير العنوان الرئيسي في موقعنا: "Web Portfolio of Marco". فسيكون ذلك ممكنًا بتعريف قاعدة CSS للعنصر h1 كما يلي: h1 { font-size: 65px; } المشكلة التي ستصادفنا هنا أنّ جميع عناصر h1 الموجودة في المستند ستكبُر بتأثير هذه القاعدة. لذلك فإذا أردنا أن نُكبّر عنوان h1 الأوّل الموجود في المستند فسنستخدم لهذا الغرض مُحدّد صنف class selector. سنضيف السمة class إلى عنصر h1 المراد استهدافه، ويمكننا بالطبع إسناد أي قيمة لهذه السمة، سنختار القيمة title: <h1 class="title">Web Portfolio of Marco</h1> يمكننا الآن استهداف عنصر h1 هذا بكتابة قاعدة CSS بالشكل التالي: .title { font-size: 65px; } إذا جرت الأمور على ما يرام فستحصل على شكل شبيه بما يلي: سننتقل الآن إلى الدرس الرابع، والذي يتحدّث عن أدوات التطوير البرمجية المتاحة ضمن متصفّح الانترنت. ترجمة -وبتصرّف- للمقال HTML & CSS Tutorial - Part 3: Introduction to CSS لصاحبه Marco Jakob.1 نقطة -
لقد أصبحت التجارية الإلكترونية E-Commerce تُستخدم على نطاق واسع عالميًا، ولا بد من أنّك استخدمت شكلًا من أشكالها من قبل. تتم التجارة الإلكترونية باستخدام مجموعة متنوعة من التطبيقات، من ضمنها المتاجر الإلكترونية. قد يبدو إنشاء المتجر الإلكتروني وإعداده مهمة شاقة، لكن بوجود ووردبريس وملحقاته أصبحت هذه المهمة سهلة جدًا. من هذه الملحقات WooCommerce. يعتبر WooCommerce من منصات التجارة الإلكترونية الآمنة والمستقرة. وهو من المحلقات الأكثر شعبية الذي يساعدك على إنشاء متجر إلكتروني قائم على ووردبريس، وإدارته بسهولة. من مميزات ملحق WooCommerce أنه مجاني، آمن جدًا، ذو مرونة عالية (بإمكانك بيع مختلف الفئات من المنتجات)، مفتوح المصدر، بالإضافة إلى أنّه سهل الاستخدام. تثبيت WooCommerce لكي تستخدم WooCommerce يجب أن تقوم بتثبيته أولًا عبر لوحة التحكم في ووردبريس. قم بتسجيل الدخول إلى موقعك ثم اذهب إلى: لوحة التحكم Dashboard > إضافات Plugins > أضف جديد Add New في حقل البحث اكتب "woocommerece" ثم اضغط Enter: سيكون الملحق هو النتيجة الأولى، انقر على زر التثبيت Install Now: سيتم تنزيل الملحق وتثبيته. بعد التثبيت سيكون لديك خياران، إما تفعيل الملحق Activate Plugin، أو العودة إلى نافذة مثبّت الملحقات Return to Plugin Installer: انقر على Activate Plugin لفتح نافذة مرشد (wizard) تهيئة الملحق، وهو عبارة عن خطوات بسيطة تساعدك على ضبط إعدادات صفحات WooCommerce، إعدادات المتجر، إعدادات الضريبة والشحن، بوابات الدفع وغيرها الكثير. الأمر راجع لك سواء كنت ترغب في استخدام المرشد أو لا. لتخطي هذه الخطوات انقر على Not Right Now. لكننا نوصي بالمواصلة والنقر على "!Let's Go" إذا كانت هذه هي المرة الأولى التي تقوم فيها بضبط إعدادات WooCommerce: الخطوة الأولى ستكون نافذة إعداد الصفحة Page Setup، ومن خلالها يتم إنشاء 4 صفحات يحتاج WooCommerce إلى تشغيلها، وهي المتجر Shop، السلّة Cart، المحاسبة/الدفع Checkout، وصفحة حسابي My Account. وهذه الصفحات تشبه الصفحات العادية في ووردبريس. سيقوم WooCommerce بإنشائها وإضافة شيفرات مختصرة shortcodes إليها لجعلها تعمل كما يجب: انقر على Skip this step إذا لم تكن ترغب في إنشاء هذه الصفحات، أو Continue لكي يقوم WooCommerce بإنشائها. الخطوة الثانية هي نافذة Store Locale: في الحقل الأول قم بتحديد الموقع الذي يوجد فيه متجرك، حدد البلد (والمدينة إن وجدت) من القائمة، أو قم بإدخال اسم البلد بواسطة لوحة المفاتيح. هذا الخيار سيساعدك لاحقًا في ضبط إعدادات الشحن والضريبة. الحقل الثاني خاص بالعملة التي يستخدمها متجرك، وستجد أنّها محددة تلقائيًا اعتمادًا على الموقع. يمكنك تغييرها من القائمة، أو النقر على رابط add it later إذا لم تكن العملة موجودة ضمن القائمة. من الحقلين الأخيرين حدّد الوحدات التي تريد استخدامها لقياس وزن وأبعاد المنتج. ستحدد هذه الخيارات تلقائيًا أيضًا واعتمادًا على الموقع، لكن بإمكانك تغييرها. بعد تحديد جميع خياراتك انقر على Continue للمواصلة. الخطوة الثالثة هي إعدادات الشحن والضريبة Shipping & Task: إذا كنت ستقوم بشحن سلع ماديّة، قم بتأشير الخيار Yes, I will be shipping physical goods to customers. ستلاحظ ظهور 4 حقول. في الحقلين العلويين قم بإدخال كلفة الشحن المحلي Domestic Shipping لكل طلب و/أو لكل سلعة. وفي الحقلين السفليين قم بإدخال كلفة الشحن الدولي International Shipping لكل طلب و/أو لكل سلعة. وإذا كنت ستقوم بفرض ضريبة مبيعات، قم بتأشير الخيار Yes, I will be charging sales tax. سيظهر خياران إضافيان. حدد الأول، I will enter prices inclusive of tax، إذا كنت ستقوم بإدخال أسعار شاملة للضريبة، أو الثاني، I will enter prices exclusive of tax، إذا كنت ستقوم بإدخال أسعار غير شاملة للضريبة. بعد تحديد خياراتك انقر على Continue للمواصلة. الخطوة الرابعة هي إعدادات الدفع Payment. بإمكانك من هذه النافذة إعداد القليل من بوابات الدفع المدرجة، PayPal Standards و Offline Payments: فإذا كنت تقبل استلام المدفوعات عبر PayPal، قم بإدخال عنوان بريدك الإلكتروني على PayPal في حقله المخصص. وإذا كنت تريد تمكين استلام المدفوعات بالطرق التقليدية، قم بتأشير Cheque Payments لتمكين الدفع عبر الصكوك، Cash on Delivery لتمكين الدفع عند التسليم، أو (Bank Transfer (BACS لتمكين الدفع عبر الحوالات المصرفية. يمكنك تمكين أحد هذه الطرق أو جميعها. الخطوة الأخيرة هي نافذة !Ready، وفيم يتم سؤالك فيما إذا كنت تريد المساعدة في تحسين WooCommerce بالسماح لموقع WooThemes بتجميع البيانات التشخيصية غير الحساسة ومعلومات الاستخدام، وفي المقابل تحصل على تخفيض 20% عندما تقوم بشراء قالب من WooThemes في المرة القادمة. انقر على Allow للسماح بإرسال البيانات أو No Thanks لعدم السماح بذلك. بعد ذلك بإمكانك الشروع في إنشاء منتجك الأول، أو الاطلاع على المزيد من المصادر من قسم Learn More. وكذلك بإمكانك العودة إلى لوحة التحكم في ووردبريس بالنقر على Return to WordPress dashboard إذا لم تكن ترغب في إنشاء المنتج حاليًا. ستلاحظ وجود WooCommerce ضمن قائمة لوحة التحكم، ومنه يمكنك الوصول إلى الطلبات Orders، القسائم Coupons، التقارير Reports، الإعدادات Settings، حالة النظام System Status، وكذلك الإضافات Add-ons التي قد تستخدمها. وكذلك ستلاحظ وجود قائمة خيارات للمنتجات، والتي من خلالها يمكنك تحديث المنتجات الحالية Products، إضافة منتجات جديدة Add New، إدارة فئات المنتجات Categories، العلامات Tags، أنواع الشحن Shipping Classes، والسمات Attributes: إعدادات عامة General بعد أن تم تثبيت الملحق والانتهاء من ضبط إعدادات التهيئة، قم بضبط إعدادات متجرك. من لوحة التحكم اذهب إلى: WooCommerce > Settings ستفتح صفحة تحتوي على مجموعة تبويبات، وكل تبويب يحتوي على الإعدادات ذات الصلة. وبعض هذه التبويبات يحتوي على تبويبات فرعية أيضًا. على سبيل المثال يحتوي تبويب Products على إعدادات عامة General، العرض Display، مخزون السلع/الجرد Inventory، والمنتجات القابلة للتنزيل Downloadable Products: سنقوم في هذه الفقرة بشرح الإعدادات العامة الرئيسية في تبويب General: بعض الإعدادات في هذا التبويب قمنا بضبطها سابقًا من خلال مرشد التهيئة كالموقع Location والعملة Currency. من قائمة Selling Location يمكنك أنّ تحدد الخيار Sell to specific countries إذا كنت تريد البيع لبلدان محددة. ثم قم بإدخال أسماء تلك البلدان في حقل Specific Countries: أما حقل Default Customer Address فيساعد على تحديد العنوان لحساب الضريبة وكلفة الشحن قبل أن يقوم المشتري بإدخال عنوانه عند الدفع: يحتوي الحقل على أربعة خيارات: No Address: وكما هو واضح من الاسم، يعني عدم استخدام عنوان محدد، مما يتطلب من المشتري أن يقوم بإدخال الرمز البريدي zip code لحساب كلفة الضريبة والشحن على أساسه. Shop base address: عند تحديد هذا الخيار سيتم استخدام عنوان موقع متجرك الأساسي لحساب الضريبة والشحن. Geolocate: هذا الخيار يعني أنّه سيتم استخدام عنوان IP للمشتري، ومن ثم اختيار الرمز البريدي لأقرب موقع لحساب الضريبة والشحن على أساسه. (Geolocate (with page caching support: استخدم هذا الخيار إذا كان لديك أي نوع من التخزين المؤقت (caching) على موقعك، وتريد استخدام خيار تحديد الموقع Geolocate. الخيار التالي هو Store Notice والذي عند تأشيره ستتمكن من إضافة ملاحظة في الجزء العلوي من موقعك تظهر لجميع الزائرين. على سبيل المثال يمكنك استخدامها لإخبار الزائر بأنّك تبيع منتجات محددة أو لمناطق محددة فقط: بعد تأشير هذا الخيار قم بإدخال رسالتك في الحقل المخصص. علمًا أنّه يمكن تنسيقها لاحقًا بواسطة CSS لتتناسب مع مظهر موقعك. الخيارات الأخيرة هي خاصة بالعملة: في WooCommerce يمكنك استخدام عملة واحدة فقط والتي تُحدد في حقل Currency. بعدها قم بضبط موضع رمز العملة من حقل Currency Position. ثم قم بضبط نوع الفاصل الذي يستخدم لفصل الآلاف Thousand Separator، نوع الفاصلة العشرية Decimal Separator، وكذلك عدد المراتب العشرية بعد الفاصلة Number of Decimals. بعد ضبط جميع الخيارات انقر على Save Changes. بهذا نصل إلى نهاية الدرس، لكن هناك المزيد لتعلّمه حول ضبط إعدادات المتجر. تابع معنا الدروس القادمة. هل ترغب في متجر ووكومرس احترافي لبدء تجارتك الإلكترونية؟ احصل على خدمات مميزة لإنشاء متجرك الإلكتروني وتحسينه وإدارته على خمسات أنشئ متجر ووكومرس الآن1 نقطة -
تمتلك معظم المتصفّحات أداة خفيّة تسمح لنا بالنظر خلف كواليس ما يجري في صفحة الويب. يُعتبر هذا أمرًا مفيدًا جدًّا من أجل تفحّص مواقع الويب الخاصّة بنا أو من أجل الاستلهام من مواقع ويب الأخرى. يمتلك متصفّح Chrome حاليًّا أكثر هذه الأدوات فعاليةً والتي تُسمّى أدوات المطوّر Developer Tools أو اختصارًا DevTools. تعلمنا في الدروس السابقة كيفية إنشاء و نشر و تنسيق موقعنا الأول باستخدام CSS. سنقوم في هذا الدرس باستعمال أدوات المطور لتفحص موقعنا والتعديل عليه. فتح أدوات التطوير البرمجية في Chrome يمكن الوصول إلى هذه الأدوات بعدّة أساليب: انقر بز الفأرة الأيمن على أيّ عنصر في صفحة الويب ثم اختر Inspect. استخدم Ctrl+Shift+I من لوحة المفاتيح أو اضغط F12. لنجرّب ذلك على موقعنا الحالي. يجب أن تحصل على شكل شبيه بما يلي: ملاحظة: إذا كنت تستخدم المحرّر Brackets فمن الأفضل أن تلغي تفعيل ميزة Live Preview (التي تحدّثنا عنها في الدرس الأوّل: كيف تصمم أول صفحة ويب لك) ثم أعد تحميل الصفحة ضمن المتصفّح وإلّا فيمكن أن ترى معرّفات id إضافية في الشيفرة يُضيفها المحرّر Brackets تلقائيًّا. تفحص عنصر يمكن باستخدام أدوات التطوير DevTools تفحُّص أي عنصر ضمن صفحة الويب. كمثال على ذلك، لنتفحّص العنصر h2 وذلك بالنقر بزر الفأرة الأيمن على العنوان "Welcome" ثم اختيار Inspect. سيؤدّي ذلك إلى فتح DevTools والانتقال إلى العنصر h2 ضمن الرماز مباشرةً: تظهر هذه الأدوات في القسم الأيمن لنافذة المتصفّح (وقد تظهر في القسم السفلي منها)، ومن هناك يمكننا أن نشاهد التنسيقات المُطبّقة على العنصر h2. يجب أن نرى الألوان التي عرّفناها مسبقًا ضمن الملف main.css. يمكننا أن نرى قسمًا اسمه user agent stylesheet وفيه نجد قواعد التنسيق الافتراضيّة المطبّقة على أيّ عنصر من النوع h2 وذلك من قِبَل المتصفّح. أمّا في الأسفل فيمكننا أن نرى مستطيلًا ملوّنًا. يرينا هذا المستطيل الحجم والمسافات والحدود لعنصر h2 الذي نتفحّصه. فمثلًا نجد أنّ الخاصية padding تحمل القيمة 5 كما عرّفناها مسبقًا ضمن الملف main.css. تغيير التنسيقات ورماز HTML سنتناول الآن الجزء المثير في هذا الدرس. يمكننا تغيير أو إلغاء تفعيل التنسيقات بالإضافة إلى تحرير رماز HTML مباشرةً ضمن المتصفّح. فمثلّا إذا نقرنا على المربّع الملوّن الموجود بجوار background-color يمكننا تغيير لون الخلفيّة للعنصر h2 الذي نتفحّصه حاليًّا، أو حتى يمكننا إدخال قيمة جديدة للخاصيّة padding. يمكن تغيير رماز HTML بالنقر بزر الفأرة الأيمن على رماز العنصر في نافذة DevTools ثم اختيار Edit as Html. يُعتبر هذا الأسلوب فعّالًا للغاية في إجراء التجارب دون التعديل الفعلي ضمن مستند HTML الأصلي، فأيّة تعديلات نجريها ضمن المتصفّح ستكون مؤقّتة وستختفي بمجرّد إعادة تحميل الصفحة ضمنه. الاستلهام من مواقع ويب الأخرى يمكننا تفحّص أي صفحة باستخدام أدوات DevTools وإجراء تغييرات مؤقّتة عليها. حاول أن تصبح عادةً لديك، فمثلًا إذا رأيت لونًا أعجبك بينما تتصفّح صفحات ويب، يمكنك استخدام DevTools للحصول على القيمة الست عشرية له، بحيث تستطيع استخدام هذا اللون ضمن ملفات css الخاصّة بك. من أجل مواقع ويب الأكبر يمكن أن يكون عدد التنسيقات كبيرًا، فيمكن أن توجد عدة قواعد css لنفس العنصر تتجاوز بعضها البعض. يمكن أن نرى مثالًا على ذلك مع عنصر h1. فحجم الخط الذي عرّفناه لهذا العنصر في الدرس (مقدمة إلى تنسيقات CSS) يتجاوز حجم الخط القياسي المعرّف افتراضيًّا ضمن المتصفّح له، وهكذا يتم تجاوز التعريف الأصلي. سننشئ في الدرس الخامس ثلاث صفحات من أجل المدوّنة Blog والمشاريع Projects والتواصل Contact لمشروعنا. ترجمة -وبتصرّف- للمقال HTML & CSS Tutorial - Part 4: Development Tools in the Browser لصاحبه Marco Jakob.1 نقطة