لوحة المتصدرين

لربما لاحظت مُؤخّرا أنّ CSS في تطور مستمر، وإلى الأفضل بالطبع. فمن جهة لدينا العديد من المُميّزات الجديدة (مثل القواعد الجديدة @rules وأشباه الأصناف المطورة) ونظم بناء الصّفحات وتقسيمها (مثل flexbox و Grid system). ومن جهة أخرى لدينا بعض الأدوات التي تُتيح لنا التّلاعب بالأشكال والصور مباشرة من المتصفح، وأنا أحب هذه الأمور، ومتأكد من أنّك تُحبّها أيضًا، وفي هذه المقالة سنعرض بعضا منها. سنتحدث عن بعض الأمور التي لا تحظى بالكثير من الشّهرة عادة، هذه الأمور المجهولة ستزيد من إنتاجيتك بشكل مُعتبر، وستجعلك تُفكّر بطرق مُختلفة لحلّ المشاكل اليومية. بعض هذه الأمور هي المُحدّدات Selectors الجديدة الخاصة باللغة، والبعض الآخر عبارة عن دوال، وأشباه أصناف pseudo-classes جديدة. وحدات القياس النّسبيةبحكم أنّنا في 2015 فلابد وأنّك قد تعاملت من قبل مع الوحدات النّسبية em والنّسب المئوية. ولذا فأنا واثق من أنّك وقعت في المُشكلة الشّائعة والتي تكمن في استخدام هذه الوحدات ضمن الوراثة. سأشرح الأمر بمثال بسيط. من الشّائع مُؤخّرًا أن يتمّ استعمال حجم خط ثابت في الصّفحة، ومن بعدها استعمال وحدات القياس النّسبية لتحديد حجم الخطّ لبقية العناصر في الصفحة. في CSS سيبدو الأمر كالتالي: html { font-size: 10px; } p { font-size: 1.4em; }إلى غاية هذه اللحظة، كل شيء يسير على ما يرام. لكن تظهر المشكلة عندما تريد أن تحدد حجم خط مُختلف لعنصر ما داخل العُنصر السّابق. لنجرب المثال التالي: The cat sat on the <span>mat</span>.إذا أردت أن يكون حجم خط span أصغر مثلا، وليكن مثلًا 1.2em، فما الذي ستفعله؟ تحضر الآلة الحاسبة وتحسب نتيجة 1.2/1.4؟ لتحصل على شيء كهذا: p span { font-size: 0.85714em; }مشكلة الوراثة ليست محدودة في em فحسب. فإذا كُنت تستخدم النّسب المئوية فالقيمة عادة منسوبة إلى العنصر الحاوي (الأب) وليس إلى حجم الصّفحة. لنضرب مثالًا بسيطًا، ولنقل أنك تملك عنصرًا بارتفاع يُقدّر بـ75% من الصفحة، وهذا العنصر يملك بداخله عنصرًا آخر، ونحن نريد من العنصر الابن أن يكون بارتفاع 40% من الصفحة، في هذه الحالة عليك أن تعطيه قيمة 53.33333%. الأمر ليس مثالّيًّا إطلاقًا. القيم المنسوبة إلى أساس ثابتكالعادة، لكل مشكلة حل. في حالتنا تم تقديم وحدة جديدة تُدعى rem. هذه الوحدة هي وحدة نسبية، ولكنها منسوبة إلى قيمة ثابتة وليس إلى حاويها. هذه القيمة هي حجم الخط في العنصر الأساسي في الصفحة (في حالة HTML فهذا العنصر هو دوما وسم html ). في مثالنا السابق، استعملنا 10px كحجم الخط في الصفحة، سنرى كيف يمكن لـrem أن تساعدنا: p { font-size: 1.4rem; } p span { font-size: 1.2rem; }الآن كلاّ من قيمة التصريحين منسوبة إلى حجم الخط المبدئي، وهذا أفضل من ناحية التّحكم والاستخدام. خُصوصًا إذا كنت تملك حجمًا مبدئيًّا بسيطًا مثل 10px أو 12px. الأمر شبيه باستخدام وحدة البكسل مُجدّدًا، عدى أنها قابلة للتوسع. هذه الخاصّيّة مدعومة بشكل جيّد من المُتصفّحات. كل المُتصفّحات المُتطوّرة إلى جانب IE9 تقوم بدعمها. لكن هناك مشاكل بسيطة في الدعم، فمُتصفّح IE لا يدعمها في حال ما إذا استخدمتها داخل الخاصّيّة المُختصرة font ويتم تجاهل التّصريح كاملًا. تستطيع قراءة المشاكل المعروفة هنا في خانة Known Issues في الأسفل Can I use rem. وحدات القياس المنسوبة إلى النّافذة (Viewport)إلى جانب وحدة rem، هناك وحدات جديدة أخرى. هذه الوحدات أتت لتحلّ مُشكلة النّسب المئوية والوراثة. هذه الوحدات تعمل بطريقة مُشابهة لـrem عدى أنّ الأساس التي تعتمد عليه هو أبعاد النّافذة أو شاشة الجهاز. الوحدات الرّئيسية هي vh (التي ترمز إلى viewport height) و vw (التي ترمز إلى viewport width) وهي منسوبة إلى ارتفاع وعرض النّافذة. الوحدتان منسوبتان إلى أبعاد النّافذة حيث أن قيمة واحدة تقدر بـ 1 بالمئة من أبعاد الشّاشة. أيّ `1vw = 1%’. هذا مثال بسيط لنشرح به الأمر: div { height: 50vh; }في هذا المثال، ارتفاع العنصر سيكون بالتّحديد نصف ارتفاع النافذة، حيث أنّه -كما أسلفنا- 1vh = 1% أيّ أن 50vh = 50%من ارتفاع النّافذة. قيمة الوحدة -كما سبقت الإشارة إليه- منسوبة إلى أبعاد النّافذة، فإذا تغيّر حجم النافذة ستتغير معه قيمة الوحدة. أُنشئت هذه الوحدة لتحل مشكلة النّسب المئوية في الوراثة، حيث أنّ10vw ستبقى دومًا منسوبة إلى حجم النّافذة مهما كان حجم الحاوي. هناك أيضا وحدة vmin والتي تُساوي أصغر قيمة من أيّ من vh أو vw، إلى جانب وحدة vmax التي تقوم بالعكس أيّ أكبر قيمة من أيّ منهما. دعم المتصفحات جيد، فكل المتصفحات إلى جانب IE9 تقوم بدعم كل من vh وvw. دعم وحدة vmin جيّد أيضًا، على عكس وحدة vmax فهي غير مدعومة في كل إصدارات IE. هناك بعض المشاكل في chrome في الإصدارات التي سبقت 34 (عند استعمال الوحدة داخل border وبعض التصريحات الأخرى) Can I use Viewport units. القيم المحسوبةخلال عملك على موقع مُتجاوب، ستصادفك مشكلة شائعة وهي الخلط بين الوحدات. كمثال على ذلك: أنت تريد أن تُسند إلى عنصر ما حجمًا بالنّسب المئوية، ولكنك تريد أن تُضيف له حاشيّة بقيمة ثابتة (عبر البكسل)، شيء كهذا مثلا: div { margin: 20px; width: 33%; }إن كنت تستخدم قيم padding و border فحسب في تقسيم عناصرك في الصّفحة، فتستطيع تخطّي المُشكلة السّابقة عبر استخدام box-sizing: border-box ولكن هذه الخاصّيّة لن تُساعدك في حال كنت تستخدم الحواشي margins. لذا تم توفير دالة تُدعى بـ calc(). هذه الدّالة تسمح لك بالقيام بعمليات حسابية على مختلف الوحدات. شاهد هذا المثال: div { margin: 20px; width: calc(33% - 40px); }تستطيع استعمال الخاصّيّة في أيّ مكان تريد، ولو داخل نفسها. انظر للمثال في الأسفل: width: calc(calc(50% - 4em) + 4vmin);هذه الخاصّيّة مدعومة بشكل جيد، كل الإصدارات الحديثة من المُتصفّحات إلى جانب الإصدار 9 من IE تدعمها (هناك بعض الاستثناءات التي يمكنك قراءتها في خانة known issues على Can I use calc()). تحميل مجموعة مُعيّنة من الأحرفالأداء هو عامل رئيسي في بقاء الزّائر في موقعك من عدمه. وسرعة تحميل الموقع هي أحد هذه العوامل. والآن مع انتشار الهواتف الذّكيّة وشبكات الإنترنت اللاسلكية (شبكات 3G التي من مشاكلها التّدفّق البطيء) تدفع المطور للتّحسين من سرعة الموقع أكثر وأكثر. القاعدة الرئيسية في تقليل وقت التحميل هي التقليل من حجم وعدد الملفّات الخارجية، والخاصيّة التّالية تقوم بهذا الأمر. الخاصية الجديدة تُدعى unicode-range وهي تأخذ مجالًا مُعيّنًا من unicode كقيمة (unicode هو إعطاء كل محرف قيمة له على مجال ما، مثلا الأحرف العربية تقع في المجال 0600—06FF وتقدر بحوالي 255 رمز، وكل ترميز يخصّ محرفًا). هذه الخاصّيّة تُضاف إلى تصريح @font-face. وعندما يقوم المُتصفّح بجلب الخط، سيقوم بجلب الحُرُوف المُحدّدة فحسب، ويتم التّخلّص من الحروف غير المرغوب فيها. الأمر مُفيدٌ جدًّا في الخطوط الكبيرة جدًّا مثل Helvetica الذي يُقدّر حجمه بـ500kbs ويحتوي أغلب لغات العالم. في هذا المثال سنقوم بسحب الحروف “عـ ، ـلـ، ـم” (يجب التّنويه إلى أنّ حرف العين المُنفصل ‘ع’ يملك رمزًا مُستقلّا عن حرف العين في أول الكلمة ‘عـ’ والذي يملك رمزًا مُستقلًّا عن نفس الحرف في نهاية الكلمة أو في وسطها، وهذا الأمر ينطبق على كلّ الحروف. تستطيع معرفة ترميز كل حرف من هنا). @font-face { font-family: foo; src: url('helvetica.ttf'); unicode-range: U+FECB,U+FEE0,U+FEE2; }في هذا المثال سنقوم بسحب الحروف العربية فقط عبر مجال كامل: @font-face { font-family: foo; src: url('helvetica.ttf'); unicode-range: U+0600-06FF; }سيُقلّل هذا من حجم الخط من 500kb إلى حوالي 30kb وهذا تحسن مُمتاز جدًّا. دعم المُتصفّحات ليس جيّدًا بما فيه الكفاية حاليًّا، الخاصية مدعومة من طرف chrome و من طرف Safari ومتصفح فيَرفُكس سيدعم الخاصية ابتدءًا من الإصدار 36، كما أنّها مدعومة من طرف IE9+ لكن يتم تجاهلها إذا استُخدمت u على شكل صغير (lowercase). Can I use Font unicode-range subsetting أشباه الأصناف الجديدة (pseudo-classes)إلى جانب كل تلك الأمور الجميلة التي رأيناها، فأنا أجزم أنّ أشباه الأصناف هي أجمل ما تم إصداره، عبر تحديد أنماط مُعيّنة من خلالها أصبحنا نملك القدرة على تحديد عناصر تتبع نمطًا مُعيّنًا وهذا من شأنه تقليل كمية الجافاسكربت المُستخدمة. شبه صنف التّجاهل (negation pseudo-class)شبه صنف التجاهل الجديد not() هو صنع رائع جدا إذا عرفت أين تستخدمه. لتستخدمه عليك أن تُمرّر مُحدّدًا (على شرط أن لا يكون مُركّبًا). سيتم تطبيق كل التأثيرات المُرادة على مجموعة العناصر هذه عدى العُنصر الذي تمّ تمريره للصّنف. فلنلق نظرة على المثال التّالي: لنقل أن لديك مجموعة من العناصر، وتريد أنّ تغيّر لون كل عنصر ذي مرتبة زوجية ما عدى العنصر الأخير، ستقوم بشيء كهذا: li { color: white;} li:nth-child(even) { color: red;} li:last-child { color: white;}لكن عبر مُحدّد التّجاهل تستطيع القيام بهذا عبر الشكل التالي li { color: white;} li:nth-child(even):not(:last-child) { color: red;}الخاصّيّة ليست عجيبة، فكما رأيت تستطيع أن تعيش بدونها، ولكنك ستقع في حالات تكون فيها الخاصية مُفيدة جدًّا. الخاصّيّة مدعومة بشكل جيد من طرف المُتصفّحات الحديثة ومن طرف IE9+. شبه صنف المُطابقة (matches-any pseudo-class)شبه صنف matches() يقبل مُحدِّدًا (selector)، أو مُحدِّدًا مُركّبًا، أو مجموعة من المُحدّدَات. لكن ما الذي يفعله؟ إنّه مفيد للقيام بتأثير ما على مجموعة من العناصر. كمثال، تخيل أنّه لديك مجموعة من وسوم الفقرات <p> في أماكن مختلفة من الصّفحة، وأنت تريد التّأثير على مجموعة مُعيّنة منها، قد تقوم بالأمر التّالي: .home header p, .home footer p, .home aside p { color: #F00; }لكن مع matches() تستطيع اختصار الأمر السّابق عبر إيجاد الأمور المشتركة في ما سبق. في مثالنا كل سطر يبدأ بـ .home وينتهي بـ p، لذا نستطيع استخدام matches() لتحديد كل العناصر الموجودة بينهما. لم تفهم كيف سنقوم بذلك؟ لابأس، هذا ما سنفعله: .home :matches(header,footer,aside) p { color: #F00; }شبه الصنف هذا هو جزء من CSS4 لذا دعمه ليس قويًّا كالبقية. حاليًّا تستطيع استخدامه مع chrome و safari بشكل عادي وفي IE9+ تحت الاسم matchesSelector وفي فيَرفُكس أيضًا، من الأفضل أخط الحيطة واستخدامه مع -moz- و -webkit- قبل اسمه. Can I use matches() DOM method إذًا، ما رأيك في ما سبق؟الرائع بشأن هذه الخواص أنها تحل مشاكل فعلية في حياتنا اليومية، انطلاقًا من المُحددّات المُتكرّرة المُزعجة في CSS إلى طرق أكثر رُقيًّا في بناء المواقع التجاوبية. سبق وأن استخدمت العديد من هذه الخواص كثيرا وسأستخدمها مُجدّدًا. الميزات الجديدة الأخرى مثل المُرشِّحات (filters) الخاصّة بالصّور قد تكون أجمل ولكن استخدامها محدُود على عكس الميزات التي استعرضناها. كل واحدة منها تستطيع جعل حياتك أسهل بشكل أكثر، ولكن لا تتوقّف هنا. هناك الكثير لتتعلمه فلا تتوقف عن البحث. ترجمة -وبتصرّف- للمقال Learning to Love the Boring Bits of CSS لصاحبه Peter Gasston

كنا قد ذكرنا في الدرس الأول لهذه السلسلة أنّ هناك مجموعة من الطرق يتيحها ووردبريس لحفظ واسترجاع البيانات ومن ضمن هذه الطرق استخدام الواجهة البرمجية للخيارات Options API التي يوفرها ووردبريس وهي الطريقة الأنسب لحفظ الخيارات العامة للإضافة في كثير من الأحيان. في هذا المقال سنلقي الضوء على هذه الطريقة وذلك بتناول أهم الدّوال التي يوفرها ووردبريس في الواجهة البرمجية للخيارات وكذلك طريقة إضافة صفحة إعدادات Settings Page في لوحة التحكم تمكن مستخدم الإضافة من إدخال وتعديل الخيارات الخاصة بالإضافة والتي سنستخدم فيها الواجهة البرمجية للإعدادات Settings API. الواجهة البرمجية للخيارات Options APIتوفر هذه الواجهة البرمجية مجموعة من الدّوال لإنشاء الخيارات وحفظها واسترجاعها حيث تستخدم قاعدة بيانات ووردبريس وبالتحديد جدول wp_options لحفظ البيانات. وإليك نظرة على أهم الدّوال في هذه الواجهة الدالة add_optionكما هو واضح من اسمها تمكننا دالة add_option من إضافة خيار جديد إلى قاعدة البيانات وهذه هي الصورة العامة لها add_option( $option, $value, $deprecated, $autoload ); حيث: $option (مطلوب) : هو عبارة عن اسم الخيار ويجب أن لا يتعدى 64 حرفًا ويُستحسن أن يكون بالإنجليزية ويتم استخدام الشرطة السفلية (_) للفصل بين الكلمات.$value (اختياري): قيمة هذا الخيار وهي القيمة الفعلية التي تود استقبالها من المستخدم واستخدمها فيما بعد (وعموما القيمة التي تود حفظها).$deprecated (اختياري): تم التخلي عن هذا المعامل في النسخة 2.3 من ووردبريس.$autoload (اختياري): هنا تحدد ما إذا أردت أن يتم تضمين الخيار في object cache في كل تحميل للصفحة. وهي متعلقة بما يعرف بالكاش cache.الدالة delete_optiondelete_option عبارة عن الدالة العكسية للدالة السّابقة، حيث تقوم بمسح الخيار من قاعدة البيانات. والصورة العامة لهذه الدالة هي: delete_option( $option ); حيث $option هو اسم الخيار الذي تود مسحه الدّالة get_optionتستخدم الدّالة get_option لاسترجاع الخيارات من قاعدة البيانات وهذه هي الصورة العامة لاستخدامها echo get_option( $option, $default );حيث: $option (مطلوب): اسم الخيار الذي تود استرجاعه$default (اختياري): القيمة الافتراضية للخيار في حالة لم يتم إيجاد قيمته في قاعدة البيانات.لاحظ أننا استخدمنا echo لعرض الخيار لكن يمكنك مثلا استرجاع الخيار وحفظه في أي متغير أو إجراء أي عملية عليه. إذا لم يوجد الخيار المطلوب في قاعدة البيانات ولم يتم تحديد قيمة للمعامل $default يتم إرجاع القيمة FALSE. هنالك مجموعة من الخيارات الخاصة بووردبريس والمحفوظة في جدول الخيارات يمكنك الوصول إليها من خلال الدالة get_option منها على سبيل المثال: admin_email: البريد الإلكتروني لمدير الموقع.blogname: اسم الموقع.siteurl: رابط الموقعوغيرها. الدالة update_optionتستخدم الدالة update_option لتحديث قيمة الخيار في قاعدة البيانات وتأخذ الصورة العامة update_option( $option, $new_value );حيث: $option (مطلوب): اسم الخيار المراد تحديثه.$new_value (مطلوب): القيمة الجديدة للخيار.هذه الدالة تقوم بفحص ما إذا كان الخيار $option موجودًا مُسبقا في قاعدة البيانات وفي حالة عدم وجوده تقوم باستخدام الدالة add_option لإنشائه بالصّورة التالية add_option('option_name', 'option_value')وبالتالي يمكنك استخدامها لاختبار ما إذا كان الخيار موجودًا وإنشائه إن لم يكن موجودًا، لكن لاحظ أنك لن تستطيع تحديد المعامل $autoload عند إنشاء الخيار. ترجع الدالة update_option القيمة TRUE في حالة تم تحديث قيمة الخيار بنجاح وترجع FALSE إذا لم يتم التحديث بنجاح. الواجهة البرمجية للإعدادات Settings APIتُمكّنك هذه الواجهة  من عمل الميكانيكية التي تستطيع من خلالها استقبال الخيارات من المستخدم وحفظها في قاعدة البيانات وتعمل سويًّا مع الواجهة البرمجية للخيارات لإنجاز المهمة. هنالك ثلاثة مكونات أساسية للواجهة البرمجية للإعدادات، وهي: الإعدادات: وهي الخيارات الفعلية والتي يتم حفظها في قاعدة البيانات وتستطيع الوصول إليها بعد ذلك عن طريق الدالة get_option التي تم شرحها أعلاه.الحقول Field: وهي حقول النموذج Form الذي يتم عرضه في صفحة الإعدادات والتي تمكن المستخدم من إدخال قيم البيانات.،الأقسام Section: وهي عبارة عن طريقة لتقسيم الإعدادات إلى مجموعات، أي أن كل مجموعة من الحقول يتم جمعها تحت قسم.بعد إنشاء أقسام وحقول الإعدادات التي تريدها (سنرى طريقة عمل ذلك في الفقرات القادمة) عليك أن تقرر ما إذا كنت تريد إضافة هذه الحقول والأقسام إلى:  صفحة إعدادات موجودة حاليًا مثل الصفحات الموجودة في القائمة الفرعية للإعدادات في لوحة تحكم ووردبريس (عام، كتابة، قراءة، ..الخ).أو إنشاء صفحة خيارات جديدة وسنرى في الفقرة التالية طريقة إنشائها.إنشاء صفحة خيارات في لوحة تحكم ووردبريسيتم ذلك من خلال استخدام الدالة add_options_page التي لها الصورة العامة add_options_page( $page_title, $menu_title, $capability, $menu_slug, $function);حيث: $page_title (مطلوب): عنوان الصفحة.$menu_title (مطلوب): عنوان القائمة والذي سيظهر في لوحة تحكم ووردبريس.$capability (مطلوب): صلاحيات المستخدم الذي يستطيع التّعديل على هذه الصفحة.$menu_slug (مطلوب): الاسم اللطيف للقائمة (والذي سيظهر في رابط الصفحة).$function (اختياري): الدالة المسؤولة من عرض المحتويات في هذه الصفحة، أي التي سيناديها ووردبريس ويعرض ما تخرجه في هذه الصفحة.يتم مناداة هذه الدالة (بالمعاملات المطلوبة) داخل دالة أخرى مثلا my_plugin_admin وتربط الدالة my_plugin_admin بالخطاف admin_menu وبهذه الطريقة ستظهر الصفحة في لوحة تحكم ووردبريس. إنشاء قسم إعدادات Setting Sectionلإنشاء قسم إعدادات حتى نربط به حقول الإعدادات نقوم باستخدام الدالة add_settings_section والتي لها الصورة العامة: add_settings_section( $id, $title, $callback, $page );حيث: $id (مطلوب): معرف فريد Unique لهذا القسم.$title (مطلوب): عنوان القسم.$callback (مطلوب): الدالة التي ستقوم بعرض محتويات هذا القسم من الحقول والتي عليك إنشاؤها لاحقا. ويجب أن تقوم الدالة بعمل echo لمحتويات القسم.$page (مطلوب): صفحة الخيارات التي سيتم إضافة هذا القسم لها (مثلا التي أنشأناها في الخطوة السابقة) ويجب أن تطابق قيمة هذا المعامل قيمة المعامل $menu_slug.ملاحظة: دالة الـ callback تستقبل معاملًا واحدًا اختياريًّا وهو عبارة عن مصفوفة لها ثلاث عناصر، مثال: add_settings_section( 'myplugin_setting_section', 'مثال لقسم إعدادت للإضافة', 'myplugin_setting_section_callback_function', 'my_plugin_admin_page' ); function myplugin_setting_section_callback_function( $arg ) { // echo section intro text here echo '<p>المعرف: ' . $arg['id'] . '</p>'; // المعرف: myplugin_setting_section echo '<p>العناون: ' . $arg['title'] . '</p>'; // العنوان: مثال لقسم إعدادت للإضافة echo '<p>دالة الcallback: ' . $arg['callback'] . '</p>'; // دالة الcallback: myplugin_setting_section_callback_function }إنشاء حقول الإعدادات Settings Fieldsيتم إنشاء حقول الإعدادات عن طريق الدالة add_settings_field والتي لها الصورة العامة: add_settings_field( $id, $title, $callback, $page, $section, $args );حيث: $id (مطلوب): معرف فريد للحقل.$title (مطلوب): عنوان الحقل.$callback (مطلوب): الدالة المسئولة من عرض الحقل. يتم تمرير معامل واحد لهذه الدالة وهو المصفوفة $args. ويجب على هذه الدالة أن تقوم بعمل echo لمخرجاتها.$page (مطلوب): الصفحة التي سيتم عرض الحقل فيها، ويجب أن يطابق $menu_slug الموجود في الدالة add_options_page.$section (اختياري): قسم الإعدادات الذي يتبع له هذا الحقل.$args (اختياري): معاملات إضافية يتم تمريرها لدالة الـcallback.تسجيل الإعداداتالخطوة التالية هي أن نُعلم ووردبريس بأننا نريد تسجيل إعدادات للإضافة وذلك من خلال استخدام الدالة register_setting والتي لها الصورة العامة: register_setting( $option_group, $option_name, $sanitize_callback );حيث: $option_group (مطلوب): هذا عبارة عن اسم لمجموعة الخيارات ويستخدم فيما بعد عند عرض render محتويات صفحة الإعدادات.$option_name (مطلوب): اسم الخيارات والذي سنستخدمه في الدالة get_option لاسترجاع الخيارات.$sanitize_callback (اختياري): الدالة المسؤولة من عمل sanitizes للخيارات.يجب أن يربط تسجيل الخيارات بالخطاف admin_ini بالصورة التالية function register_my_setting() { register_setting( 'my_options_group', 'my_option_name', 'intval' ); } add_action( 'admin_init', 'register_my_setting' ); مثال متكامل لإنشاء صفحة الخيارات وإضافة الإعدادات لهاadd_action( 'admin_menu', 'my_plugin_menu' ); function my_plugin_menu() { add_options_page( 'عنوان صفحة الإضافة', 'عنوان القائمة', 'manage_options', 'my_plugin_admin_page', 'my_plugin_options_page' ); } // ------------------------------------------------------------------ // أنشاء الحقول والأقسام وتعريف الإعدادات يربط بالخطاف admin_init // ------------------------------------------------------------------ // function myplugin_settings_api_init() { // إضافة قسم الإعدادات لصفحة الخيارات التي عرفناها أعلاه add_settings_section( 'myplugin_setting_section', 'مثال لقسم إعدادات للإضافة', 'myplugin_setting_section_callback_function', 'my_plugin_admin_page' ); // إضافة حقل الخيارات add_settings_field(   'myplugin_setting_name', 'مثال لاسم الحقل', 'myplugin_setting_callback_function', 'my_plugin_admin_page', 'myplugin_setting_section' ); // تسجيل الخيارات حتى يستطيع ووردبريس حفظ الإعدادات لنا register_setting( 'my_plugin_admin_page', 'myplugin_setting_name' ); } // إضافة الدالة أعلاة للخطاف المناسب وهو admin_init add_action( 'admin_init', 'myplugin_settings_api_init' ); // ------------------------------------------------------------------ // دالة الcallback لقسم الإعدادات // ------------------------------------------------------------------ function eg_setting_section_callback_function() { echo '<p>نص في بداية قسم الإعدادات</p>'; } // ------------------------------------------------------------------ // دالة الcallback لحقل الإعدادات // ------------------------------------------------------------------add_options_page // إنشاء مربع إختيار checkboxز بالطبع يمكنك إنشاء أنواع أخرى من الخقول function eg_setting_callback_function() { echo '<input name="myplugin_setting_name" id="myplugin_setting_name" type="checkbox" value="1" class="code" ' . checked( 1, get_option( 'eg_setting_name' ), false ) . ' /> مصال'; } // الدالة المسؤولة عن عرض بيانات صفحة خيارات الإضافة كما عرفناها اعلاه function my_options_page() { ?> <div class="wrap"> <h2>صفحة خيارات الإضافة</h2> <form action="options.php" method="POST"> <?php settings_fields( 'my_plugin_admin_pagep' ); ?> <?php do_settings_sections( 'myplugin_setting_section' ); ?> <?php submit_button(); ?> </form> </div> <?php } في البداية قمنا بإنشاء صفحة الخيارات عن طريق الدالة add_options_page وكما تلاحظ قمنا بوضعها داخل دالة وإضافة الدالة للخطاف المناسب وهو admin_menu. بعد ذلك قمنا بعمل دالة جديدة وبداخلها قمنا بعمل ثلاثة أشياء وهي: إضافة قسم إعدادات عن طريق الدالة add_settings_section، وبالطبع قمنا بتعريف دالة الـcallback الخاصة بهذا القسم والمسؤولة من عرضها وقمنا بإضافتها بعد هذه الدالة. إضافة حقل واحد للإعدادات عن طريق الدالة add_settings_field ومررنا لها اسم دالة الـcallback المسؤولة عن عرض هذا الحقل والتي أضفناها بعد هذه الدالة. تسجيل الإعدادات عن طريق الدالة register_setting لنخبر ووردبريس عن هذه الإعدادات حتى يقوم بعملية حفظ هذه الإعدادات بالنيابة عنا. بعد ذلك قمنا بإضافة هذه الدالة إلى الخطاف المناسب وهو الخطاف admin_init. أخيرًا قمنا بإنشاء الدالة المسؤولة من عرض محتويات صفحة الخيارات وكما تلاحظ استخدمنا فيها الدالة do_settings_sections والتي تضيف أقسام الإعدادات المرتبطة بهذه الصفحة وكذلك الدالة settings_fields المسؤولة عن إخراج ما يعرف ب nonce وهو متعلق بتأمين النموذج form. وأخيرًا قمنا بمناداة الدالة submit_button والتي ستعرض زر الحفظ. استرجاع البياناتلاسترجاع بيانات الإضافة حتى تستخدمها يمكنك استخدام الدالة التي عرفناها سابقا وهي get_option حيث سنمرر لها اسم الخيارات $option_name الذي عرفناه سابقا خلال تسجيل الإعدادات من خلال الدالة register_settings. خاتمةيوفر التعامل مع Setting API و Option API  الكثير من المجهود المُتعلّق بحفظ الخيارات واسترجاعها بالصورة التقليدية والتي تتطلب القيام بكل عمليات الاتصال مع قاعدة البيانات والتأكد من تأمين البيانات والتعامل مع نماذج الحفظ وغيرها من العمليات، لكن في البداية قد تجد صعوبة في التعامل مع هاتين الواجهتين خصوصا فيما يتعلق في حفظ أسماء الدوال ومعاملاتها وارتباطها مع بعضها البعض، لكن سيتغيّر الأمر بعد التّعامل معها لفترة قصيرة.