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

إذا كنت تستخدم ووردبريس لفترة، أو حتى إذا كُنت مستخدمًا جديدًا، فغالبًا ما ستحتاج في وقت ما أن تجري بعض التعديلات في النص البرمجي لموقعك. قد يكون أي شيء، مثل إضافة خاصية أساسية إلى موقعك لا تتطلب إضافة كاملة plugin، أوإنشاء قالب فرعي child theme، وهذا فقط غيض من فيض. لكن توقف ها هنا! هناك بعض القواعد الأساسية التي يجب معرفتها فيما يتعلق بتعديل النص البرمجي في ووردبريس، بالإضافة إلى بعض المناطق التي يجب تفاديها تمامًا. وهذا ما سنتناوله في مقالنا. قاعدة عامة: إياك أن تعدّل في البنية الأساسية لووردبريس (WordPress Core) ربما قد تكون سمعت تلك العبارة الخالدة مرارًا من متمرسي ووردبريس: “لا تعدّل في البنية الأساسية" “Don’t hack core". ما يعنيه هذا هو أنك يجب ألا تلمس الملفات الأساسية، وهي الملفات المسؤولة عن عمل ووردبريس. لم هذا؟ حسنًا، هناك العديد من الأسباب، لكن دعنا نكتف باثنين من أهمها هنا: عدم ضمان استمرارية موقعك مستقبلًا. إذا أجريت تعديلات في بنية ووردبريس، فإنك تخسر القدرة على التحديث مع المحافظة على تعديلاتك. أي ببساطة، عندما يصدر تحديث جديد وتضغط على زر التحديث لينطبق على موقعك (لأنك شخص منظم يحافظ على تحديث موقعه بانتظام)، فإن تعديلاتك سيتم الكتابة فوقها بالتحديث. مما يضطرك لإعادة كتابتها، وهذا مضيعة للوقت في رأيي. توجد بالفعل إضافة متاحة لهذا. عندما تعدل في بنية ووردبريس، فإنك تفعل بالضبط ما تفعله الإضافات: تغيير، أو إضافة إلى الطريقة التي يعمل بها ووردبريس. بالتالي الإضافات هي طريقة أفضل بكثير في تحقيق ما تريد فعله بدلًا من تعديل البنية الأساسية. إذًا الآن تعرف لم لا يجب تعديل البنية الأساسية، دعنا نر ما المتاح تعديله بأمان. بنية ملفات ووردبريس هذه لقطة توضح بنية ملفات موقع ووردبريس نموذجي. سترى أن هناك ثلاث مراحل عليا من المجلدات ومجموعة من الملفات. المجلدات المسماة wp-admin وwp-include محظورة، يجب ألا تلمس شيئًا هناك. أما مجلد wp-content فإنه يحوي القوالب، الإضافات، وأي صورة أو مستند نصي رفعتها على الموقع. ويمكنك أن تجري تعديلات على قالبك الخاص عن طريق ملف functions.php. وبالنسبة لملفات المستوى الأعلى، فالملف الوحيد المسموح بالتعديل فيه هو ملف wp-config.php. سنغوص في بعض الأمثلة لكيفية تعديل كلا الملفين لاحقًا، لكن دعنا نتحدث عن بعض من أفضل الممارسات قبل أن نفعل. أفضل الممارسات لتعديل ملفات ووردبرس يأتي ووردبريس مع محرر قوالب وإضافات كجزء من الخواص الأساسية. يمكنك أن تجده في موقعك من الشريط الجانبي: المظهر > المحرر أو Appearance > Editor ألقِ نظرة عليه إذا أحببت، ثم بعدها انس أمره تمامًا، لأنك لن تستخدم محرر ووردبرس لأي شيء. في الحقيقة، أود أن تحذف هذه الخاصية تمامًا من ووردبرس لسببين: هذا المحرر ليس محررًا نصّيّا برمجيًا كامل الوظائف، ويمكن بسهولة ارتكاب أخطاء تنتج عنها "شاشة الموت البيضاء". حين تضغط على زر الحفظ، ليس هناك زر للرجوع. ليس هناك إمكانية لإعادة المحاولة. معظم محررات النصوص البرمجية الجيدة تُتيح لك إمكانية التّراجع عن التغييرات التي أجريتها في حال لم تعمل كما يجب. إذًا، ما هو البديل؟ حسنًا، إذا أردت استخدام محرر نص برمجي، فستحتاج دراية بـ FTP . FTP هو اختصار لـ File Transfer Protocol بروتوكول نقل الملفات. ولنشرح ذلك بأنه عبارة عن نقل الملفات من جهازك إلى خادم الويب الذي يوجد عليه موقعك. ستحتاج للاتصال بموقعك عن طريق عميل FTP، ثم تحمّل نسخة من الملف الذي تريد تغييره، أجرِ التغييرات ثم ارفعه إلى الخادم، وسيحل محل النسخة القديمة في الخادم. بعض محررات النصوص البرمجية – Coda على سبيل المثال– يسمح لك بتعديل الملفات مباشرة على الخادوم. والبعض الآخر يسمح باستعراض تعديلاتك (عادة لملفات HTML وCSS فقط). إذا كان محرر النص البرمجي الخاص بك يفعل هذا، فمن المستحسن أن تحفظ نسخة من الملف الأصلي باسم جديد (وليكن filename_old.php مثلًا). بهذه الطريقة، إذا ارتكبت أي خطأً لا تستطيع الرجوع فيه، فيمكنك ببساطة حذف الملف المعدّل، وإعادة تسمية النسخة الاحتياطية التي أنشأتها إلى اسمها الأصلي وكل شيء سيكون على ما يرام. حان الوقت لتعديل بعض ملفات ووردبريس سنجري بعض التعديلات البسيطة على ملفين wp-config.php وfunctions.php وهي ملفات غير تابعة للقالب، غالبًا ما ستحتاج إلى تعديلها. تعديل ملف wp-config.php ملف wp-config.php هو واحد من أهم الملفات في موقع ووردبريس الخاص بك. ولا يأتي مع النسخة الأساسية لووردبريس؛ إذ أنك تنصب ملفًا يُدعى wp-config-sample.php. ويُنشأ ملف wp-config.php أثناء عملية التنصيب (تحديدًا عند إدخال معلومات قاعدة البيانات الخاصة بموقعك)، أو يمكنك ببساطة إعادة تسمية ملف wp-config-sample إلى wp-config وإضافة معلومات قاعدة البيانات إلى الملف. ستجد كلّا الملفين في الجذر الأساسي لمسار الويب. إذا أتممت عملية التنصيب (لقطة لها بالأسفل)، بما في ذلك إعدادات قاعدة البيانات الخاصة بالموقع، فإنك بالفعل قد أنشأت ملف wp-config.php. الآن، دعنا نفتحه في محرر النص البرمجي المفضل لديك لنجري بعض التغييرات. مثال نص برمجي مفيد: تعطيل التحديثات التلقائية كانت التحديثات التلقائية جزءًا من ووردبريس منذ الإصدارة رقم 3.7. ولا يفضل الجميع هذه الخاصية، إذ يودون لو أنهم يغلقونها. كل ما تحتاجه لفعل هذا هو إضافة ذلك السطر إلى ملف wp-config.php الخاص بموقعك. /* تعطيل تحديثات ووردبرس الة */ define( 'WP_AUTO_UPDATE_CORE', false ); عندما أضيف نصًا برمجيًا إلى ملف wp-config، فإنني أتأكد دومًا من وضعه في مكان يسهل الرجوع إليه عند الحاجة. انظر إلى السطر 85 في ملف wp-config.php (من السهل الوصول إليه باستخدام محرر النص البرمجي)، ستجد هذه الجملة: /* That's all, stop editing! Happy blogging. */ بمعنى: /* هذا هو المطلوب! توقف عن التعديل. نتمنى لك التوفيق في موقعك! */ إنني أضع جميع تعديلاتي قبل ذلك السطر مباشرة. وبهذا أستطيع العثور على جميع التعديلات التي أجريتها في مكان ثابت مع كل موقع أعمل عليه. فقط تأكد من حفظ نسخة احتياطية من الملف قبل أية تعديلات. تعديل ملف functions.php ملف functions.php يسمح لك بتعديل وظائف ووردبريس. إذ يعمل هذا الملف كإضافة، فينشء خصائص ومزايا جديدة في موقع ووردبريس الخاص بك. وعادة ما تجد الملف موجودًا في مجلد القالب الخاص بك في المسار /wp-content/themes/yourthemename/ (حيث yourthemename هو اسم القالب). إذا لم تمتلك واحدًا، يمكنك بسهولة إنشاءه؛ فقط تأكد من أنك تضعه في القالب المٌفعّل. إذا بدأت بملف جديد، فستحتاج لبداية نص PHP مستخدمًا php?>. وعلى عكس ملف php التقليدي، فإنك لن تحتاج لإغلاق النص البرمجي (في الواقع، تقل احتمالية الأخطاء إذا تركته مفتوحًا). وستجد بالأسفل مثالين للخصائص التي يمكنك إضافتها إلى ملف functions.php خاصتك ملحقة بالنص البرمجي، لا تنس أنه من المستحب إضافة التعديلات الكبيرة عن طريق قالب فرعي. مثال نص برمجي مفيد: إضافة دعم المُصغّرات thumbnails إذا كان قالبك لا يدعم المُصغّرات، فيمكنك إضافة النص البرمجي التالي إلى ملف functions.php الخاص بك: add_theme_support( 'post-thumbnails'); لاستخدامه في قالبك، فقط أضف هذا السطر من الكود إلى الحلقة loop حيث تريد للمُصغرات أن تظهر: <?php the_post_thumbnail(); ?> مثال نص برمجي مفيد: تخصيص طول الاقتباسات الطول الافتراضي للاقتباسات في ووردبريس هو 55 كلمة، ولكن يمكنك تعيين طول الاقتباس حسبما تريد عن طريق إضافة ذلك النص البرمجي إلى ملف functions.php الخاص بك: //وظيفة تخصيص طول المقتبس custom_excerpt_length($length) { return 20; } add_filter('excerpt_length', 'custom_excerpt_length'); فقط كل ما تحتاجه تغيير رقم "20” إلى عدد الكلمات التي تريدها. الخاتمة والآن قد أصبحت تعرف القواعد الأساسية بخصوص تعديل ملفات البنية الأساسية لووردبريس. أتمنى أن تكون قد استمتعت بالمقال. وبالطبع نود معرفة آرائكم ونسر بالإجابة على ما يلتبس عليكم في التعليقات. مُترجم بتصرف من مقالة How to Edit Your WordPress Website Without Hacking Core Files لصاحبها Tom Ewer.

هل قمت من قبل باستعمال Media Queries CSS لإنشاء موقع متجاوب؟ إن كان جوابك لا فأعتقد أنه قد حان الوقت لذلك. ففي هذا الدرس سنقوم بتحويل قالب ووردبريس غير متجاوب إلى قالب متجاوب. في مقالات سابقة قمنا بتصميم، تكويد وبناء قالب ووردبريس كامل. التصميم نفسه قابل لأن يتم تحويله إلى تصميم متجاوب، لذلك سوف نستعمل نفس ملفات HTML وCSS لتحويل التصميم الثابت إلى آخر متجاوب. قبل أن نقوم بأي شيء أريدك أن تذهب لمعاينة النسخة الرئيسية من القالب قبل أن يصبح متجاوب وقم بتقليص حجم المتصفح ولاحظ ما يحصل. هل رأيت كيف يختفي جزء من الموقع عندما يصبح عرض المتصفح أقل من عرض الموقع نفسه وكيف يظهر شريط للتمرير (scrollbar) أسفل المتصفح؟ هذا ما يحدث للمواقع عندما لا تكون متجاوبة، فالفكرة من التصميم المتجاوب هو أن يتجاوب الموقع مع جميع أبعاد المتصفحات وأن يظهر الموقع بأفضل شكل مهما كانت أبعاد المتصفح الذي سيعرض الموقع. عند تصفح المواقع غير المتجاوبة على الأجهزة الذكية واللوحية فإن تلك الأجهزة تقوم تلقائيًا بعرض الموقع كاملًا (أي أنّه لن يختفي جزء من الموقع كما رأيت مسبقًا)، ولكنّك ستحتاج إلى التكبير(zooming) حتى ترى محتويات الموقع بشكل جيد وهذا ما لا نريده. ما نريده هو أن يتم عرض المواقع على الأجهزة ذات الأبعاد الصغيرة بشكل مناسب ومن دون الحاجة إلى التكبير(zooming). أول خطوة يجب القيام بها هي أن نقرر الأبعاد التي سوف نصمم لها، فهناك الكثير من الأبعاد والأحجام ولكن تعتبر الأبعاد 320px، 768px و1024px من الأبعاد الشائعة. ومن الجيد أيضًا أن تعلم بأنّ التصاميم التي تعتمد في تجاوبها على عدد معين من الأبعاد تسمى "adaptive"، أما تلك التي نستخدم فيها قيم em والنسب المئوية والتي لا تعتمد على عدد معين من الأبعاد فتسمى "responsive". <link href="mediaqueries.css" rel="stylesheet" />يمكننا الآن البدء باستعمال CSS media queries لجعل الموقع متجاوبًا. يمكنك إضافة الـmedia queries إلى ملف CSS الرئيسي ولكني أفضل أن أضعها بملفٍ مستقل وأن أربطها بملف الـHTML باستخدام الوسم `<link>` (كما هو موضح في الأعلى). <meta name="viewport" content="width=device-width; initial-scale=1.0">نريد أيضًا أن نمنع أجهزة الـiPhone من أن تقوم بعرض الموقع على كامل الشاشة مما يضطرنا إلى التكبير لرؤية المحتوى، لذلك سنقوم باستعمال وسم `<meta>` لإخبار متصفح Safari بأن يكون عرض الموقع هو نفسه عرض الجهاز. @media screen and (max-width: 960px) { ... } العرض الخاص بالتصميم الأصلي هو 960px ولذلك فإنّ أي عرض لمتصفح أقل من هذا العرض سوف يؤدي إلى إخفاء جزء من المحتوى وإلى ظهور أشرطة تمرير أسفل المتصفح (كما رأيت سابقًا في بداية الدرس). وبناءً على ذلك، فسيكون أول media query نقوم بوضعها هي للشاشات التي عرضها أقل من 960px: @media screen and (max-width: 960px) { #container, footer { width: 758px; } #content { margin: 0 20px 0 0; } #sidebar { width: 212px; } #sidebar section { clear: left; } #sidebar #search #searchbar { width: 152px; } } هناك عرض آخر أقل من 960px وهو 768px وهو أحد الأبعاد الشائعة كما ذكرنا آنفًا (تجد هذا العرض شائعًا في الوضع الطولي(portrait) للأجهزة اللوحية). لقد قلنا أننا سنقوم بتحويل قالب ووردبريس تم تصميمه سابقًا، وبما أنّ القالب قد تمّ تصميمه بناءً على grid ما وحتى نتماشى مع تقسيم الصفحة(layout) فسوف نقوم بإزالة عمود(column) ليبقى لدينا 758px. يمكن عندها للتقسيم الأصلي للصفحة أن يتقلص وذلك عن طريق تقليل قيمة الـmargin الخاصة بـdiv المحتوى (#content) وتقليل العرض الكُلّي للقائمة الجانبية(sidebar). @media screen and (max-width: 758px) { #container, footer, #sidebar { width: 524px; } header nav { clear: left; float: none; overflow: hidden; } header nav li { width: auto; margin: 0 25px 0 0; } header { margin: 0 0 44px 0; } header h1 { margin: 0 0 24px 0; } #sidebar section { float: left; clear: none; } #sidebar #social { margin: 0 20px 47px 0; } #sidebar #search #searchbar { width: 464px; } } يمكننا الآن استخدام قيمة 758px للـmedia query التالية، بحيث يتم الإنتقال إلى التقسيم التالي عندما يكون حجم المتصفح أقل من هذه القيمة، وبما أنّ عرض القائمة الجانبية عند هذه النقطة سيكون ضيّقًا ولن يكون بالإمكان جعله أضيق من ذلك، فسوف نجعله ينساب أسفل المحتوى الرئيسي، وهذا يعني بأنَّ عرض القائمة الجانبية يجب أن يزيد حتى يملأ عرض الصفحة إلى أقصى درجة ممكنة، وسوف نجعل العناصر الموجودة في هذه القائمة تنساب إلى جانب بعضها(floated) لتملأ المساحة المتبقية. أصبحت الترويسة(header) ضيّقة أيضًا ولن تستطيع استيعاب وجود الشّعار وعناصر القائمة الرئيسية إلى جانب بعضها البعض، لذلك سوف نجعل عناصر القائمة الرئيسية تظهر على سطر جديد لوحدها. @media screen and (max-width: 524px) { #container, footer, #sidebar, #content { width: 292px; } #content article h2 { font-size: 24px; } #content .postinfo li { margin: 0 10px 0 0; } #sidebar #social { margin: 0; } #sidebar #search #searchbar { width: 230px; } } بقي الآن آخر media query وهي التي سوف تكون مخصصة للشاشات والأبعاد الصغيرة جدًا (كالأجهزة الذكية على سبيل المثال(. سيكون عرض هذه التقسيمة أصغر من العرض الأصلي للمحتوى، وبذلك سوف نحتاج لتقليص العرض حتى يتناسب مع تلك الأبعاد. لقد أدّى العرض الصغير جدًا إلى إنزال الروابط الخاصة بالتدوينة على سطر جديد، ولكن يمكننا إصلاح الأمر وذلك بتقليل المسافة بينها (تقليل قيمة الـmargin). وبهذا نكون قد حصلنا على تصميم يمكنه التجاوب مع العديد من الأحجام والأبعاد الشائعة وسوف يساعد أيضًا على زيادة قابلية القراءة للمحتوى بدل أن يضطر الزائر إلى التمرير(scroll) أو التكبير حتى يستطيع قراءة المحتوى. يمكنك الإطلاع على الموقع المتجاوب من هنا. ترجمة -وبتصرّف- للمقال Create a Responsive Web Design with Media Queries لصاحبه Iggy.