البحث في الموقع
المحتوى عن 'مخصصة'.
-
ووردبريس هو منصة رائعة لإدارة المحتوى. إذا كنت تملك أيّ محتوى يأتي في شكل وحدات شبيهة بالمقالات (أو ما شابهها مثل منتجات) فلا أجد سببا يدفعك لعدم استخدام ووردبريس. قد يكون التعاون باستخدام سكربت ميديا ويكي سهل أيضا، واستخدام دروبال مع أنظمة الشركات يعد أمرا سهلا وشائعا، لكن ووردبريس له مكانته أيضا في هذا المجال، وهو في رأيي، يوفر تجربة تحرير أفضل. أحد الطرق لجعل المحتوى في ووردبريس يعمل بشكل أفضل هو إضافة معلومات إضافية له (metadata). قد يكون الأمر على شكل تصنيفات خاصة (taxonomies) أو على شكل بيانات تستخدم لهدف واحد (custom fields). ماهو الحقل المخصص في ووردبريس؟إذا أردت أن تستخدم معلومات محددة متغيرة لكل مقال ما (أو شيء شبيه بمقال كمنتج)، هنا تستطيع استخدام الحقول المخصصة في ووردبريس. "الحقول المخصصة" لها تسميتان مختلفتان في ووردبريس، غالبا ما يطلق عليها خصائص المنشور أو المعلومات الجانبية (post metadata) أو post_meta وعادة ما يطلق عليها باسم الحقول المخصصة، وهذه الترجمة الرسمية التي يستخدمها فريق ترجمة ووردبريس العربي. نحن نضيف الحقول المخصصة عندما نريد أن نخزن خصائص إضافية لمنشور ما. منشورات ووردبريس تأتي بالعديد من الخصائص الإضافية بشكل مسبق: تاريخ النشر، كاتب الموضوع، آخر وقت تّم التعديل عليهم. لكنك قد تريد المزيد، مثلا تريد أن تضيف عنوانا ثانويا للمنشور، أو تريد أن تضيف ملخص المنشور تصميم منفرد. ووردبريس يقوم بتخزين هذه المعلومات في قاعدة البيانات، وباستخدام دوال معينة نقوم بتحديدها وتخزينها واسترجاعها. الحقول المخصصة تنفرد عن خيارات الموقع site_settings حيث أنّ لهم علاقة بالمنشور وليس بالموقع ولكن كلاهما يعملان بنظام عنوان وقيمة key/value pair يتم استخارجهم من قاعدة البيانات عبر دوال محددة، لذا إن كانت لك تجربة بنظام خيارات الموقع Settings API فلن تواجه مشكلة في فهم الحقول المخصصة. كيف أضيف الحقول المخصصة لمنشور؟هناك العديد من الطرق التي تستطيع استخدامها لإضافة الحقول المخصصة، الواجهة الافتراضية للتعامل مع الحقول الخاصة في ووردبريس قديمة ولم يتم تحديثها منذ مدة، ورغم أنها تخدم الهدف إلا أنها بعيدة عن المثالية. الجزء المضاف في الأسفل "ما بعد الأساسيات" سيدخل في التفاصيل حول خيارات أخرى تستطيع اللجوء لها من أجل التحكم في الحقول الخاصة، لكن سنقوم الآن بفهم الواجهة الأصلية فحسب، لأنها ستكون موجودة دوما في كل المواقع. في شاشة التعديل على منشور ستجد صندوق "خصائص إضافية"، وستقوم أنت بتعديل الحقول المخصصة فيه. لا داعي لنمر على كامل معلومات تكوين الصندوق، ستقوم ببساطة باختيار الاسم (أو تضيف واحدا جديدا في حال لم تقم بالأمر من قبل). من ثم تقوم بإضافة القيمة، إضغط على الزر ولقد قمت بإضافة الحقل إلى منشورك، محفوظا مع بقية عناصرك. إظهار الحقول المخصصة في منشوراتكلتستخدم الحقول الخاصة في منشوراتك أمامك عدة دوال، وتسمياتهم تختلف حسب طريقة تكلم الناس عنهم، الدوال الأساسية هي كالتالي: ()the_meta: مثل كل دوال ووردبريس التي تبدأ بـ _the فدالة ()the_meta الهدف منها طبع المعلومات (echo) حتى لا تقوم بالأمر يدويا. تستطيع استخدامها عندما لا تريد أن تغير أيّ شيء بالمعلومات التي تريد طباعتها. لكنها تبدو لي غبر مفيدة لأنها لا تتيح لك أيّ تحكم بهيكلة المعلومات التي تحصل عليها، كما أنها تقوم بطبع كل المعلومات للصفحة.()get_post_meta: هي الدالة التي أستخدمها أنا طوال الوقت، المتغير الأول (parameter) الذي تحتاجه هو معرف (ID) المنشور، المتغير الثاني هو اسم الحقل الذي تريد جلبه، والثالث هو Boolean في حال كنت تريد القيمة على شكل string أو array مصفوفة (true من أجل string وfalse ل array).()get_post_custom: عمل بشكل شبيه جدا لـ ()get_post_meta لكنها تختلف في التسمية، الفرق أنك تقوم بتمرير ID المنشور له فحسب (بشكل اختياري أيضا) وسيقوم بإرجال كل القيم المخصصة للمنشور على شكل array.ما بعد الأساسيات: كيفية تحسين واجهة الحقول المخصصةأحد نقاط ضعف ووردبريس من ناحية الحقول المخصصة هو الصندوق الذي تستخدمه للتعديل عليها، فكما أسلفنا الذكر، الصندوق ليس مفيدا لتلك الدرجة، لذا أنت تملك الفرصة لتحسين التجربة لمستخدميك وزبائنك. الدوال التي تحتاجها للتعامل مع الحقول الخاصةحتى الآن، فقد تعلمنا كيف نسترجع الحقول الخاصة فحسب، مهمة أخرى ستقوم بها عند التطوير هي تعديل أو حذف المعلومات. من أجل هذه المهمة يقدم ووردبريس 3 دوال بسيطة للقيام بالأمر وهي: ()add_post_meta : هي الطريقة التي تستخدمها لإنشاء الحقل لأول مرة، تقوم بتمرير ID المنشور لها واسم الحقل المخصص (meta_key) والقيمة التي تريدها، وبشكل اختياري تستطيع تحديد أن يجعل ووردبريس تلك القيمة فريدة من نوعها. addpostmeta($postid, $metakey, $meta_value, $unique = false) ()update_post_meta : يمكن أيضا استخدام هذه الدالة لإنشاء حقل مخصص جديد، لذا هي تملك القدرة لتحل مكان ()add_post_meta في حال لم تكن واثقا أن الحقل جديد أو لا فتستطيع استعمالها، أول ثلاث خيارات هم نفس خيارات ()add_post_meta والخيار الأخير هو القيمة السابقة، وهو أمر لم استخدمه من قبل حقا ولكن قد يكون مفيدا في حال كنت تملك الكثير من القيم لاسم واحد (key). updatepostmeta($postid, $metakey, $metavalue, $prevvalue='') ()delete_post_meta : هي كما تتوقع تماما، وخياراتها مثل البقية تماما، عدى أن الخيار الأخير (قيمة الحقل) هي قيمة اختيارية تستطيع أن لا تحددها. deletepostmeta( $postid, $metakey, $meta_value = '' ) شرح كيفية استخدام هذه الدوال داخل لوحة التحكم هو خارج نطاق المقال، لكنك تستطيع استعمالها عبر إنشاء صندوق جديد، واستخدام الدوال اللازمة وحفظ المعلومات أثناء حفظ المنشور. استخدام إضافات مصممة لتحسين تجربة الحقول الخاصةهناك العديد من الإضافات الرائعة التي تقوم بتحسين واجهة الحقول الخاصة، أشهرها في نظري هي Pods و Advanced Custom Fields. تقوم هذه الإضافات باستخدام custom post type لإنشاء حقول جديد تعمل بمثابة حقل مخصص. أداة أبسط وأقوىالطريقة التي استخدمها عادة والتي تختلف عن البقية هي إضافة CMB2 فهي تتيح لك تحكم عبر الشفرة البرمجية (عكس الإضافات الأخرى التي تتطلب منك إنشاء الحقول عبر واجهة). استخدام هذه الطريقة للبناء بدل الطريقة التقليدية الذي يوفرها ووردبريس هو أمر مختلف تماما وتجربة رائعة. لن تحتاج لكتابة دوال كبيرة لبناء صناديق لحقول مخصصة ثم محاولة حفظها فهي تقوم بكل شيء بشكل أوتوماتيكي. كل ما عليك القيام به هو وضع الملفات في قالبك أو إضافتك أو تنصيب الإضافة والعمل مع دوالها من قالبك، لشرح أكبر لها اقرأ التوثيق المرفق لها. يجدر الذكر أنّ الإضافة مترجمة للعربية بنسبة 93% (بتاريخ هذا اليوم) ويعتبر هذا دعما ممتازا للعربية لذا الشكر لكل من ساهم في ترجمتها (تستطيع الانضمام لهم عبر موقع Transifex). قوة الحقول المخصصة في ووردبريسكما أسلفنا الذكر، الحقول المخصصة تعتبر جزءا مهما في تطوير استخدامك لووردبريس. استخدام الأمور المبنية في ووردبريس لنشر المحتوى أمر جيد، ولكن الحقول المخصصة هي ما تسمح لإضافات مثل WooCommerce و Easy Digital Downloads بإضافات مميزات قوية لووردبريس. ترجمة -وبتصرف- للمقال: Everything You Should Know about WordPress Custom Fields لصاحبه: DAVID HAYES.
-
إذا كنت تُصمّم قالبًا جديدًا لووردبريس أو تعدّل قالبًا جاهزًا، فإن الخطوط المُخصّصة ستجدّد منظر قالبك. في حين تأتي متصفحات الإنترنت بخطوط جاهزة افتراضية، وهي التي تستدعيها في ملف style.css، استخدام نفس الخطوط التي يستخدمها الآخرين يبدو مملًا بعض الشيء. لحسن الحظ، بإمكانك إضافة الخط الذي تختاره بسهولة عن طريق قاعدة font-face@ في CSS3. كل ما تحتاجه هو رفع الخط إلى خادوم الويب الخاص بك، ثم إضافته إلى قالبك عن طريق بضعة سطور من CSS. العثور على خطهناك أماكن عديدة للعثور على خطوط ويب جيدة مجانًا مثل FontSquirrel أو Adobe Edge Web Fonts. فقط تأكد من اختيارك لخط ذي رخصة تلائم احتياجاتك. حيث أن الخطوط المجانية ليست جميعها متاحة للاستخدام التجاري، ولكن يمكنك شراء خطوط بمقابل مادّي للاستخدام التجاري من أماكن عديدة مثل Typekit. هناك نوعان رئيسيان من الخطوط في اللغة الإنجليزية: serif و sans-serif. تمتلك خطوط serif منحنيات في أطرافها بينما لا تمتلكها خطوط sans-serif. عندما يقع اختيارك على الخط الجديد، ستحتاج لتحميل ملفه. ضع في اعتبارك أن هناك أنواع مختلفة من ملفات الخطوط وليست كلها متوافقة مع أغلب متصفحات الإنترنت. إليك مُلخّصا سريعًا عن الأنواع المختلفة للخطوط وصيغ ملفاتها: (TrueType Font (TTF: متوافق مع إنترنت اكسبلور 9.0 وما يليها، وكروم بداية من الإصدارة 4.0، فيرفكس من الإصدارة 3.5، سافاري من الإصدارة 3.1 وأوبرا من الإصدارة 10.0.(OpenType Font (OTF: له نفس التوافقيات لخط TrueType.(Web Open Font Format (WOFF: يدعمه إنترنت إكسبلورر من الإصدارة 9.0 وما يليها، كروم بداية من الإصدارة 5.0، فيرفكس من الإصدارة 3.6، سافاري من الإصدارة 5.1 وأوبرا من الإصدارة 11.1.(Web Open Font Format 2.0 (WOFF2: مدعوم فقط في كروم من الإصدارة 36.0، فيرفكس من الإصدارة 35.0، وأوبرا من الإصدارة 26.0.(Embedded Open Type Font (EOT: متاح خصيصًا لإنترنت إكسبلورر 6.0 وما يليه.صيغة Web Open Font Format هي الصيغة المفضلة نظرًا لأن الخطوط تٌضغط فيها لتستهلك مساحة أقل من الاتّصال المتاح لك وتحتوي على بيانات وصفية إضافية. ولكن للأسف فإنها ليست دائمًا متاحة للتحميل. فإذا وجدت صعوبة بالعثور على هذه الصيغة، يمكنك استخدام صيغ TrueType وOpenType المتاحة بشكل أكبر للتحميل كما أنها اختيارجيد أيضًا. رفع خطوطك على خادوم الويبحين تجد الخط الذي تريد استخدامه وتتبع إرشادات مصدر الخط لتحميل الملف، فقد حان الوقت إذن لرفعه إلى خادوم الويب الخاص بك. وقبل أن تفعل ذلك، تذكر أن تحتفظ بنسخة احتياطية من موقعك بالكامل قبل إجراء أي تعديلات. من المستحسن إضافة الخط إلى المجلد الذي يحوي قالبك، والذي يمكن أن تجده في المسار: wp-content > themes > your-theme حيث your-theme هو اسم قالبك. يمكنك أيضًا إذا أردت إضافة مجلد Fonts ليحتوي خطوطك حتى تنظم حاجياتك، خاصة إذا كنت تخطط لإضافة أكثر من خط واحد. فك ضغط الملف المضغوط وارفع المحتويات إلى مجلد القالب الخاص بك عن طريق لوحة التحكم. عبر النّقر على زر File Manager تحت Files في الصفحة الرئيسية للوحة التحكم. وغالبًا ستظهر لك نافذة منبثقة، فحينها ستختار مكان موقعك وبعدها تضغط زر الذهاب Go. انتقل إلى مجلد القالب الخاص بك واضغط زر الرفع Upload في أعلى الصفحة. يمكنك ترك صلاحيات الملف 644 ولن تواجه مشاكل غالبا. ولكن إذا واجهتك مشكلة صلاحية، فجرب حذف الملفات ثم إعادة رفعها مجددا بصلاحيات مختلفة. اضغط على زر اختيار الملف Choose file في صفحة رفع الملفات واختر ملفات الخط من حاسوبك. عندما تفتحها، فإن عملية الرفع ستبدأ تلقائيًا دون ضغط زر إضافي على هذه الصفحة. لا يهم المكان الذي تضع فيه ملف الخطوط، بل ستحتاج لتتذكر مساره. وستجده مكتوبًا في صفحة رفع الملفات بالبنط العريض بعد جملة Select files to upload to. إضافة خطوطك إلى القالبلإظهار خطوطك المرفوعة في قالبك، ستحتاج لاستدعائها في ملف style.css الخاص بالقالب، حيث يمكنك العثور عليه في: wp-content > themes > yourtheme في لوحة التحكم، اختر الملف ثم اضغط زر التعديل في أعلى الصفحة. إذا لم تكن قد منعت النوافذ المنبثقة مسبقًا، ستظهر لك نافذة منبثقة، في هذه الحالة اضغط على Go في الأسفل. انسخ النص البرمجي بالأسفل إلى الملف، ويفضل لصقه في الجزء المُخصّص لاستدعاء الخطوط. تأكد أن هناك سطرًا فاصلًا بين كل جزء من أجزاءئ النّص البرمجي في الملف. @font-face { font-family: FontName; src: url(public_html/your-site/wp-content/themes/your-theme/fonts/FontName-Regular.ttf); font-weight: normal; }لا تنس استبدال FontName باسم الخط الذي اخترته، وعدّل في الشيفرة البرمجية لتغيير مسار ملفات الخطوط إلى المسار الصحيح. أضف نفس شيفرة CSS مجددًا لتعريف النمط السميك، المائل، والعناوين الرئيسية للخطوط وما شابه، وتأكد من تغيير اسم الخط ومسار الملف بشكل صحيح. وفي النهاية، حدّد كيفية استخدام خطك ببعض النصوص الإضافية من CSS مثل المثال بالأسفل: p { font-family: FontName; } في هذا المثال، كل نصوص الفقرات (الموسومة بوسم p) ستستخدم الخط الجديد. حين تنتهي من تعديل النص البرمجي إلى اختياراتك الخاصة وتحفظ الملف، سيظهر الخط الجديد على موقعك. خاتمةمع هذه التعليمات، يجب أن تكون قادرًا على إضافة خطوط جديدة إلى القالب الخاص بك دون أي مشاكل. ومع ذلك، هناك العديد من الإضافات التي يمكنها مساعدتك على إضافة خطوط دون الحاجة إلى أي برمجة إذا أردت حلًا أسهل. لمزيد من المعلومات عن استخدام الخطوط في ووردبريس، اقرأ الدليل التالي: اللعب بالخطوط. ترجمة -وبتصرف- للمقال: Adding Custom Fonts to WordPress with @Font-Face and CSS3 لصاحبه: Jenni McKinnon.