المحتوى عن 'template'.



مزيد من الخيارات

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المُحتوى


التصنيفات

  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • نصائح وإرشادات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • التجارة الإلكترونية
  • الإدارة والقيادة
  • مقالات ريادة أعمال عامة

التصنيفات

  • PHP
    • Laravel
    • ووردبريس
  • جافاسكريبت
    • Node.js
    • jQuery
    • AngularJS
    • Cordova
  • HTML
    • HTML5
  • CSS
  • SQL
  • سي شارب #C
    • منصة Xamarin
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • Sass
    • إطار عمل Bootstrap
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • برمجة أندرويد
  • لغة Swift
  • لغة R
  • لغة TypeScript
  • ASP.NET
    • ASP.NET Core
  • سير العمل
    • Git
  • صناعة الألعاب
    • Unity3D
  • مقالات برمجة عامة

التصنيفات

  • تجربة المستخدم
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
    • كوريل درو
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • نصائح وإرشادات
  • مقالات تصميم عامة

التصنيفات

  • خواديم
    • الويب HTTP
    • قواعد البيانات
    • البريد الإلكتروني
    • DNS
    • Samba
  • الحوسبة السّحابية
    • Docker
  • إدارة الإعدادات والنّشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • مقالات DevOps عامة

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • التسويق بالرسائل النصية القصيرة
  • استسراع النمو
  • المبيعات
  • تجارب ونصائح

التصنيفات

  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • مقالات عمل حر عامة

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
  • أندرويد
  • iOS
  • macOS
  • ويندوز

التصنيفات

  • شهادات سيسكو
    • CCNA
  • شهادات مايكروسوفت
  • شهادات Amazon Web Services
  • شهادات ريدهات
    • RHCSA
  • شهادات CompTIA
  • مقالات عامة

أسئلة وأجوبة

  • الأقسام
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة البرمجة
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات
    • أسئلة الشهادات المتخصصة

التصنيفات

  • ريادة الأعمال
  • العمل الحر
  • التسويق والمبيعات
  • البرمجة
  • التصميم
  • DevOps

تمّ العثور على 6 نتائج

  1. في الوقتِ الذي تكبر فيه إدارة الأعمال على الإنترنت بشكلٍ كبير، يتزايد عددُ العملاء الرّاغبين في دفع مبالغ كبيرة من المالِ للأشخاص الذين يمتلكون مهارةَ بناءِ المواقع. ربّما تكون قد تعلَّمت طريقة بناء موقعٍ بواسطة HTML و CSS، و لكن للأسف ذلك النّوع من المواقعِ لا يلّبي احتياجاتِ كُبرياتِ الشَّركات، بل لا تُلبِّي حتّى احتياجات مدوّنة في أيامنا هذه. هذا هو أهمُّ سببٍ يجعل من الضروريِّ لك أن تتعلَّم طريقة تحويل قالب html و css ساكِن إلى قالب ووردبريس متفاعِل. الموارد التِّي ستحتاجها لإكمال هذا الدّرسِ: قالب NeoBlog مصنوع من html و css. معرفة أساسيّة بأكواد ووردبريس. معرِفةٌ متوسِّطة بلغةِ PHP ومكتبة jQuery. ما سنقوم بإنجازه: قالب ووردبريس هو وسيلتُك لتغيير الشَّكل الخارجيِّ لموقعك. القالب يُمكن أن يقوم بتغيير كبيرٍ للشَّكلِ العامِّ لموقعك، حيثُ أنّه يوفِّر لك واجهة رسومِيَّةً عن طريق ملفّاتهِ. عِند إنشاء قالب ووردبريس عليك الانتباه للنقاطِ التاليّة: انتبه لاسمِ ملفّات القالب التي أنشأتها، في الوضع الافتراضي ووردبريس يتعّرف على أسماء ملّفات القالب الافتراضيّة مثلَ single.php و page.php لذا أنصحك بأن تتحقّق من اسم القالب الافتراضيِّ لووردبريس قبل أن تبدأ بتسميةِ ملفاتك الخاصّة. اطّلع على دليل ووردبريس من أجل بعض الدوالِّ، الوسوم أو بعضِ أكواد PHP لاستخدامها في ملفَّات قالبك، هذا الأمر سيبقيك على الطّريق الصحيح للوصولِ إلى الوظائف التي تريد من قالبك تنفيذها. في بعضِ الأحيان قد تحتاج بعضَ ملفّاتِ الـ jQuery لتحسينِ الشَّكل الخارجيِّ لقالبك أو لإضافة بعضِ الوظائف. ووردبريس لن يقوم بتوفير كلِّ شيءٍ لك. تأكّد من كتابة برمجيّةٍ بِهيكلة جيِّدة، خاليّةٍ من أخطاء PHP و HTML مصادقٍ عليه. استخدم CSS نقيّا مصادقًا عليه. اتبع دليل التصميم لتصميم الموقع ونُسوقِه. اعمل نُسخًا احتياطيّةً لملفّاتك. أنت لن تخسر شيئًا عند القِّيام بذلك. لذا وجب عليك دائمًا أخذ معايير وقائيّة عن طريق عمل نُسخٍ احتياطيّة لملفّات قالبك، الإضافات التي تستخدمها إضافة الى بعض الملفّات الأخرى التي تستخدمها في تطوير قالبك. لِمَ يتوجّبُ عليك أخذ ملاحظات حولَ PHP: PHP هي لغة برمجة لإنشاء مواقع ديناميكيّة متفاعلة. هي مستخدمة على نطاقٍ واسعٍ بسبب كونها لغة مفتوحةَ المصدر وهي مناسبة لك كونك تستطيع تضمينها داخل وُسوم HTML. تّمت كتابة ووردبريس باستخدام لغة PHP ومثلَها يُعتبر سكريبت ووردبريس مفتوحَ المصدر مصادقٌ عليه من طرفِ مبادرةِ المصدرِ المفتوح. بعض أجزاء برمجيّة ووردبريس المكتوبة بلغة PHP متعارضة في نسقها لذا وجب أن تكونَ لديك معرفة بأساسيّات لغة PHP. على كلِّ حالٍ لست مضطرًّا لأن تكون مطوِّر مواقع PHP لكي تتمكّن من إنشاءِ قالب ووردبريس، كلُّ ما ستحتاجه هو امتلاك قاعدة قويِّةٍ في لغات HTML، CSS، و JavaScript مع خلفيّة عن أساسيّات PHP. مخطّط العمل: أوّلا، سنقوم بالتعرّف على الملفّات التي سنحتاجها لبناء قالب ووردبريس مُتكامل. الخطوة التاليّة ستكون البدء بكتابة الأكواد داخل كلِّ ملفٍّ من ملفّات القالب. طيلة الطريق، ستكون هناك دوالّ قد لا تبدو واضحةً بالنّسبة لك. في هذه الحالةِ دليل ووردبريس سيُصبح أحسن صديقٍ لك. بعد الانتهاء من إنشاء القالب سنقوم بإضافة المحتوى إليهِ للتأكّد مِن أنَّ البرمجيّة تعمل بالشكل المطلوب على موقعك. فلنبدأ للبدءِ بتحويل قالب NeoBlog لقالبِ ووردبريس فلنقم أوّلًا بإنشاء مجلّدٍ في المسار content/themes. ستجده بداخل المجلّد الذي نصَّبت به ووردبريس. خذ في الحُسبان أنَّ اسم المجلَّد يجب أن يكون نفس اسم القالب الذي تريد إنشاءه. في هذا الدّرس قمت بتسمية قالبي NeoBlog. الجزء الأوّل: 1. ملفّات القالب بالمقارنة مع قالب HTML و CSS ساكن، قالبُ ووردبريس يحتوي على العديد من الملفّات. هذه الملفّات هي مَن تحتوي على الأكوادِ التِّي تجعلُ قالب ووردبريس يعمل. للقيامِ بذلك قم بإنشاء الملفّات التاليّة داخل مجلّدِ قالب NeoBlog: مجلّد CSS: هذا المجلّد سيحتوي على جميع ملفّات التنسيقات، قم بنسخهِ من مجلّد قالب HTML وCSS NeoBlog. مجلّد الخطوط: هذا المجلّد سيحتوي على جميع الخطوط الخارجيّة المستخدمة في التصميم. قم بنسخه أيضًا من مجلّد قالب HTML وCSS NeoBlog. مجلّد الصُّور: هذا المجلّد سيحتوي على جميع الصّور المستخدمةِ في التّصميم مثل الشعار وغيره. قم بنسخه أيضًا من مجلّد قالب HTML وCSS NeoBlog. مجلّد جافا سكريبت: يحتوي كلّ ملفّات جافا سكريبت المستخدمة في قالبنا. هذا المجلّد أيضًا قم بنسخه من مجلّد قالب HTML وCSS NeoBlog. header.php : هذا الملّف سيحتوي على أكواد القِسم الرأسيِّ للقالب. footer.php : هذا الملّف سيحتوي على أكواد القِسم السفليِّ للقالب. index.php : هذا هو الملفّ الأساسي للقالب، سيحتوي على أكواد المنطقة الرئيسيّة للقالب كما سيحدّد مِن أين سيتّم تضمين الملفّات الأخرى. functions.php : هذا الملّف سيتصرّف كإضافة ووردبريس، بحيث أنّه يضيف مميّزاتٍ و خصائص للقالب. single.php : سيحتوي على نسق صفحة عرض المقال. page.php : سيحتوي على نسق صفحة ووردبريس. page-about.php : هذا الملفُّ عبارة عن نموذج مقالٍ خاصٍّ يأتي مدمجًا داخل ووردبريس، يُستخدم هذا النموذج عادة لجعل صفحةٍ أو مجموعة صفحاتٍ تُعرض بشكلٍ مختلفٍ عن الشّكل العام للصّفحة في القالب. في حالتنا سنقوم بإنشاء نموذجٍ خاصٍّ لصفحة “عن الموقع”. page-contact.php : نوع آخر من النّماذج المدمجة مع ووردبريس. هذا النّموذج سيتم استخدامه لِعرضِ استمارة “تواصل معنا” للصّفحة التي تم تحديدها. content-search.php : هذا الملفّ يحتوي على حلقة تِكرارٍ تقوم بعرض نتائج البحث. search.php : هذا الملفّ مسؤولٌ عن عرضِ صفحات نتائج البحث. searchform.php : هذا الملفّ سيحتوي على نسقِ استمارة البحث. comments.php : هذا الملفّ سيحتوي على الكود المسؤول عن عرضِ التعليقات. sidebar.php : هذا الملفّ سيحتوي القائمة الجانبيّة. 404.php : هذا الملفّ سيحتوي على صفحة الخطأ التي ستعرض نصَّ “لم يتم إيجاد نتائج مطابقة” و سيتّم التوجيه إلى هذه الصّفحة عندما لا تكون نتائج الاستعلام المطلوب موجودة بقاعدة البيانات. style.css : هذا الملفّ سيحتوي على تنسيقات و معلومات قالبنا NeoBlog. Screenshot : صورة بصيغة png تقوم بعرضِ تصميم القالب أو عنوانه. طيلة هذا الدّرسِ سنقوم بإضافة أكوادٍ لهذه الملفّات تتضّمن قوائم، مُعلِّقات، حلقات تِكرار وَوِدجت. الخطوة 1.1- نسخ الملفّات الضرورية لقالب ووردبريس NeoBlog بدايةٌ قم بنسخِ مجلّداتcss, fonts, images و js من مجلّد قالب HTML وCSS NeoBlog و ألصقها في قالب ووردبريس NeoBlog. الخطوة 2.1- تسميّة قالبك ووردبريس عن طريق style.css قبل البدءِ بالعمل على ملفّات القالب، فلنقم أوّلًا بشبك ملفّات تنسيق قالب HTML وCSS NeoBlog داخل ملفِّ قالبنا NeoBlog لووردبريس. بداية أنشئ ملفَّ style.css ثمّ ألصق الكود التّالي بداخله. /* Theme Name: NeoBlog Theme URI: https://1stwebdesigner.com/ Author: Sam Norton Author URI: https://1stwebdesigner.com/ Description: A Simple Blog Theme for 1stwebdesigner.com Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */ @import url("css/reset.css"); @import url("css/bootstrap.css"); @import url("css/style.css"); لا شيء معقّدٌ هنا، هذا الكود يحتوي معلوماتٍ عن القالب مثل اسم القالب، المؤلِّف، رابط موقع المؤلِّف وغيرها. جميع المعلومات مُضمّنة داخل وسم تعليق. هذه المعلومات ستُسهِّل التعرّف على القالب أثناء التنصيب. يحتوي هذا الكود أيضا على مجموعةٍ وُسوم @import وظيفتها استدعاء ملفّات CSS الخاصّة بقالبنا من مجلّد CSS الذي سبق وأن أنشأناه من قبل. الخطوة 3.1- إنشاء صورة مصغّرة للتعريف بالقالب الآن وبعد أن أعطينا اسمًا لقالبنا عبر ملفِّ style.css، فلنقم بإضافة صورة تعريفيّة للقالب. بداية قم بإنشاء صورةٍ بأبعاد 880*660 بِكسل عن طريق فوتوشوب ثم بعد ذلك أضف لها عنوان القالب، تعريفٌ مختصر واسم مؤلِّف القالب. في الحقيقة هذه الصورة ستُعرض بأبعاد 387*290 بِكسل في لوحة تحكّم المدير ولكّننا تعمّدنا إنشاءها بحجم مضاعف حتى تظهر بشكل أوضح على الشاشات الفائقة الدّقة HiDPI. بعد ذلك قم بحفظِ الصورة بامتداد png داخل المجلّد الرئيسي لقالب NeoBlog لووردبريس. الخطوة 4.1- تفعيل القالب بعد إضافتنا للصورة فلنقم الآن بتفعيل القالب. لكن قبل تفعينا للقالب، ولِكي نقوم بالتحقّق إن كان يعمل أم لا، فلنقم بإنشاء ملّف index.php فارغ داخل المجلّد الرئيسي لقالب NeoBlog لووردبريس (لا تقلق، سنضيف الأكواد المناسبة لهذه الصّفحة لاحقًا). الآن دعنا نُفعِّل القالب من خلال لوحة تحكُّمِ المدير عن طريق اختيار مظهر< قوالب ثمّ بعد ذلك نضغط على زرِّ تفعيل. إن أردت التحقّق أنَّ القالب يعمل، كلُّ ما عليك القّيام به هو التوجّه إلى الصفحة الرئيسّية وستلاحظ ظهور صفحةٍ بيضاء فارغة وهذا راجع إلى أنّنا لم نقم بعد بإضافة أكواد لصفحة index.php. أهمُّ المشاكلِ التي قد تواجهك خلال هذا الدّرس خلال تجريبك لهذا الدّرس ، قد تواجهك مشاكل أثناء دمج أكواد PHP مع أكواد HTML. يجب عليك دائمًا التحقّق مرّتين من أكوادك، أحيانًا قد تنسى غلق حلقة التّكرار “while” أو غلق الشّرط “if”. مثلًا في الكود أسفله هناك خطأ حيث أنّنا نسينا إغلاق شرط “if”. <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); // // Post Content here // } end while; } // end if supposed to be here ?> لكنّنا قمنا بإصلاح ذلك هنا: <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); // // Post Content here // } end while; } // end if supposed to be here ?> عليك أيضًا الانتباه عند نهاية كوده PHP لغلقِه بواسطة وسمِ الإغلاق، إن نسيت ذلك فإنّ الكود الخاصّ بك قد لا يعمل عندما يتداخل مع أكواد HTML. إن أردت أن تتعلّم إضافة وظائف أخرى لموقعك فعليك بالاطلاع على دليل ووردبريس . ماهي حُدود هذه السلسلة ؟ رغم أنَّ هذا الدّرس يعطيك مدخلًا لكيفيّة إنشاء قالبك الخاص، إلَّا أنّ لديه حدودًا، فهو سيعلّمك فقط استخدام المميّزات الأساسيّة لإنشاء قالب مدوّنةٍ مثل القائمة الجانبيّة، التذييل، صندوق البحث، قائمة المقالات، الصورة البارزة وغيرها. ملخص الجزء الأوّل جميل! لقد أكملنا الجزء الأوّل من هذا الدّرس. لقد تعلّمت طريقة تضبيط ملفّات القالب، ما يجب عليك تفاديه، بعض النقاط التي وجب عليك البحث عنها، إضافةً إلى الخطوات الواجب إتّباعها لإنشاء قالب ووردبريس. ملفّ HTML مجهّز الآن للبدء بتحويله إلى مجموعة ملفّات ستُشكّل قالب ووردبريس. في الدرس القادم سنعمل على هذه الملفّات ونضيف لها بعض الدّوال لجعل قالبنا يدعم بعض الوظائف. ترجمة -وبتصرّف- للمقال How to Convert a Static HTML Template into a Responsive WordPress Theme
  2. بدأنا في الدرس السابق بتخصيص الموقع عبر تعريف الثوابت وإنشاء ملفات header.php و footer.php والعمل على ملفات searchform.php و sidebar.php. الخطوة 2.6- كتابة ملفِّ index بعد إضافة كلِّ تلك الملفّات للقالب، حان الوقت للعمل على الصفحة الرئيسية للموقع، طبعا نحن نتحدّث عن ملفّ index.php. قم بإنشائه داخل مجلّد قالبنا ثم أضف إليه الكود التّالي: <?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?> دعنا الآن نلقي نظرةً على رئيسيّة الموقِع لنرى التغييرات التي طرأت عليها. لاحظ أنّه ما عدا القائمة الجانبيّة، فإنّ كلًّا من رأس وتذييل القالب في مكانها المحدّد. لإضافة بعض المحتوى إلى رئيسيّة الموقع افتح ملفّ index.html وقم بنسخ المنطقة المحدّدة بين “blog area section” إلى غاية وسم غلق div ذو الكلاس box-layer align-center page-nav ثمّ ألصِق كلّ ذلك في ملفِّ index.php مباشرةً تحت دالّة get_header ستحصل على شيء مشابه لهذا: <!-- BLOG AREA --> <section> <hr class=&"no-margin&" /> <div class=&"blog-container section-content&"> <div class=&"container&"> <div class=&"row&"> <div class=&"col-md-8&"> <ul class=&"negative-margin&"> <li> <h1><a href=&"single-blog.html&" class=&"gray&">Should I use a Pencil or a Ballpen?</a></h1> By <a href=&"#&">Sam Norton</a> / On July 20, 2014 / <a href=&"#&">Life Hacks</a> <figure> <img class=&"opacity-hover box-layer img-responsive&" src=&"images/thumb1.jpg&" alt=&"Pencil or Ballpen&" /> </figure> Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.. <div class=&"btn-margin&"> <a href=&"single-blog.html&" class=&"btn btn-primary&">CONTINUE READING >>> </a> </div> </li> <li> <h1><a href=&"single-blog.html&" class=&"gray&">How to test your patience!</a></h1> By <a href=&"#&">Sam Norton</a> / On July 20, 2014 / <a href=&"#&">Life Tips</a> <figure> <img class=&"box-layer img-responsive&" src=&"images/thumb2.jpg&" alt=&"Pencil or Ballpen&" /> </figure> Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.. <div class=&"btn-margin&"> <a href=&"single-blog.html&" class=&"btn btn-primary&">CONTINUE READING >>> </a> </div> </li> </ul> <div class=&"box-layer align-center page-nav&"> <ul class=&"btn&"> <li><a href=&"#&">Next Page >>> </a></li> </ul> </div> </div> الكود أعلاه سيقوم بعرض محتوًى ساكنٍ. لجعله ديناميكيٍّ سنستخدم حلقة تِكرارِ ووردبريس داخل منطقة التدوينات لعرضها بشكل متكرّرٍ مع محتوًى مختلفٍ. قم بتعويض الكود الذي نسخته سابقا بهذا الكود: <?php get_header(); ?> <!-- BLOG AREA --> <section> <hr class=&"no-margin&" /> <div class=&"blog-container section-content&"> <div class=&"container&"> <?php if (have_posts()) : ?> <div class=&"row&"> <div class=&"col-md-8&"> <ul class=&"negative-margin&"> <li> <?php while(have_posts()) : the_post(); ?> <h1><a href=&"<?php the_permalink(); ?>&" class=&"gray&"><?php the_title(); ?></a></h1> By <a href=&"<?php the_author_posts() ?>&"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / In <?php the_category(', '); ?> <?php if (has_post_thumbnail()) : ?> <figure> <a href=&"<?php the_permalink(); ?>&"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure> <?php the_excerpt(); ?> <div class=&"btn-margin&"> <a href=&"<?php the_permalink(); ?>&" class=&"btn btn-primary&">CONTINUE READING >>> </a> </div> </li> <?php endif; ?> <?php endwhile; ?> </ul> <?php global $wp_query; if ($wp_query->max_num_pages > 1) : ?> <div class=&"box-layer align-center page-nav&"> <ul class=&"btn&"> <li><?php previous_posts_link('<<< Previous Page', $wp_query->max_num_pages); ?></li> <li><?php next_posts_link('Next Page >>>', $wp_query->max_num_pages); ?></li> </ul> </div> <!-- end box --> <?php endif; ?> <?php endif; ?> </div> <aside> <div class=&"col-md-3 col-md-offset-1 margin-sidebar&"> <?php get_sidebar(); ?> </div> </aside> </div> </div> </div> </section> <?php get_footer(); ?> حلقة تِكرار ووردبريس عبارة عن أقسامِ أكواد تُستخدم من طرف ووردبريس لعرض المقالات. باستخدام حلقة التِّكرار هذه ووردبريس سيقوم بتناول كلِّ مقالٍ على حِدى ليتمّ عرضه في الصّفحة الحاليّة، بحيث يتم العرض وفق المعايير المحدّدة داخل وسوم حلقة التِّكرار. في العادة هذه الحلقة تأتي بهذه الأقسام من الأكواد: <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); // // Post Content here // } // end while } // end if ?> الكود أعلاه يمثّل الشّكل القياسيِّ لحلقة تكرار ووردبريس لِعرض المقالات ومع ذلك مازال علينا استخدام الدوالّ التالية ضمن الحلقة: the_permalink : تقوم بعرضِ الرّابط الدائم للمقالِ الحاليِّ. the_title : تقوم باسترجاع عنوان المقالِ الحاليِّ. the_author_posts : تقوم بعرض عدد المقالات التّي قام الكاتب الحاليُّ بنشرها. the_author : تقوم بعرض اسم كاتبِ المقالِ الحاليِّ. get_the_date : تسترجع التوقيت الذي كُتب به المقالُ الحاليِّ. the_category : تعرض التصنيف أو التصنيفات التي ينتمي إليها المقال الحاليّ. the_post_thumbnail : تعرض الصّورة البارزة للمقالِ الحاليِّ كما تمّ تحديده في شاشة تعديل المقال (سنرى هذا بشكل مفصّلٍ بعد قليل). the_excerpt : تعرض المقتطف للمقالِ الحاليِّ. بعد تطبيقِ بعض الفلاتر عليها وتضمين auto-p عليها سنقوم بتحويل line-breaks إلى فقرة HTML فيما يتعلّق بالصّورة البارزة فسنستخدم الكود التّالي: <?php if (has_post_thumbnail()) : ?> <figure> <a href=&"<?php the_permalink(); ?>&"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure> <?php endif; ?> أوّلًا يتّم التأكّد من أنّ المقال يحتوي على صورةٍ بارزة، بعد ذلك إذا كان يحتوي على واحدةٍ، سنقوم بعرض رابط الموضوع إضافة إلى الصورة نفسها. لاحظ أنّنا أضفنا مصفوفة تحتوي على كلاس opacity-hover box-layer img-responsive. هذه طريقة لإضافة كلاس للصورة البارزة وجعلها تبدو بشكلٍ أجمل عن طريق إضافة: تأثيرٍ عند تمرير الفأرة فوقها، حدودٍ وظِلّ صندوق. لكنّ القيّام بكلّ هذا لن يقوم بعرض الصورة البارزة، يجب عليك أوّلًا تسجيل الصّورة البارزة. قم بنسخ الكود التّالي وأضِفه في ملفِّ functions.php. <?php /***********************************************************************************************/ /* Add Theme Support for Post Thumbnails */ /***********************************************************************************************/ if (function_exists('add_theme_support')) { add_theme_support('post-thumbnails'); set_post_thumbnail_size(742, 428); } ?> جيّد! الصورة البارزة ستظهر الآن. التّالي سيكون إضافة دالّةٍ تقوم بنزع العارِضات والنِّقاط بينهما من نهاية المقتطف التي تعرض فيه بطريقة افتراضية. دائما في ملفِّ functions.php أضف الكود التالي: <?php /***********************************************************************************************/ /* Remove the brackets, ellipsis and hellip on excerpt */ /***********************************************************************************************/ function trim_excerpt($text) { $text = str_replace('[hellip;]', '...', $text); return $text; } add_filter('get_the_excerpt', 'trim_excerpt'); ?> تاليًّا، سنقوم بتشغيل ترقيم الصّفحات التيّ قمنا بإضافتها سابقًا في ملفِّ index.php. الكود التّالي سيقوم باستدعاء wp_query، هناك كلاس محدّدة في نواةِ ووردبريس تتعامل مع تعقيدات استعلامات المقالات (أو الصفحات) لمدوّنة ووردبريس. هذه الكلاس بإضافة روابط لـ previous_post_link و next_posts_link function للتنقّل بين صفحاتِ مدوّنتك. ألقِ نظرةً على الكود التّالي: <?php global $wp_query; if ($wp_query->max_num_pages > 1) : ?> <div class=&"box-layer align-center page-nav&"> <ul class=&"btn&"> <li><?php previous_posts_link('<<< Previous Page', $wp_query->max_num_pages); ?></li> <li><?php next_posts_link('Next Page >>>', $wp_query->max_num_pages); ?></li> </ul> </div> <!-- end box --> <?php endif; ?> <?php endif; ?> كلمسةٍ ختاميِّة، قم بتضمين دالّة get_sidebar داخل وسم div ذو كلاس col-md-3 col-md-offset-1 margin-sidebar الكلُّ داخل وسمِ HTML5 aside، ستحصل كود مشابه للتّالي: <aside> <div class=&"col-md-3 col-md-offset-1 margin-sidebar&"> <?php get_sidebar(); ?> </div> </aside> كمراجعة نهائيّة ملفّ index.php يجب أن يحتوي على الكود أدناه، راجعه لتفادي أيّة أخطاء محتملة. <?php get_header(); ?> <!-- BLOG AREA --> <section> <hr class=&"no-margin&" /> <div class=&"blog-container section-content&"> <div class=&"container&"> <?php if (have_posts()) : ?> <div class=&"row&"> <div class=&"col-md-8&"> <ul class=&"negative-margin&"> <li> <?php while(have_posts()) : the_post(); ?> <h1><a href=&"<?php the_permalink(); ?>&" class=&"gray&"> <?php the_title(); ?> </a></h1> By <a href=&"<?php the_author_posts() ?>&"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / In <?php the_category(', '); ?> <?php if (has_post_thumbnail()) : ?> <figure> <a href=&"<?php the_permalink(); ?>&"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure> <?php the_excerpt(); ?> <div class=&"btn-margin&"> <a href=&"<?php the_permalink(); ?>&" class=&"btn btn-primary&">CONTINUE READING >>> </a> </div> </li> <?php endif; ?> <?php endwhile; ?> </ul> <?php global $wp_query; if ($wp_query->max_num_pages > 1) : ?> <div class=&"box-layer align-center page-nav&"> <ul class=&"btn&"> <li><?php previous_posts_link('<<< Previous Page', $wp_query->max_num_pages); ?></li> <li><?php next_posts_link('Next Page >>>', $wp_query->max_num_pages); ?></li> </ul> </div> <!-- end box --> <?php endif; ?> <?php endif; ?> </div> <aside> <div class=&"col-md-3 col-md-offset-1 margin-sidebar&"> <?php get_sidebar(); ?> </div> </aside> </div> </div> </div> </section> <?php get_footer(); ?> الخطوة 2.7- العملُ مع ملفِّ single.php الآن سنقوم بعرض كلِّ مقالةٍ بشكل منفصل، أنشئ ملفّ single.php ثمّ أضف له الكود التّالي: <?php get_header(); ?> <!-- BLOG AREA --> <section> <hr class=&"no-margin&" /> <?php if (have_posts()) : while(have_posts()) : the_post(); ?> <div class=&"blog-container section-content&"> <div class=&"container&"> <div class=&"row&"> <div class=&"col-md-8&"> <div class=&"box-layer custom-padding&"> <section> <h1><a href=&"<?php the_permalink(); ?>&" class=&"gray&"><?php the_title(); ?></a></h1> By <a href=&"<?php the_author_posts() ?>&"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / In <?php the_category(', '); ?> <?php if (has_post_thumbnail()) : ?> <figure> <a href=&"<?php the_permalink(); ?>&"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure> <?php the_content(); ?> <?php endif; ?> </section> <?php endwhile; ?> <?php endif; ?> <section> <div class=&"comment-section&"> <?php // If comments are open or we have at least one comment, load up the comment template if ( comments_open() || '0' != get_comments_number() ) : comments_template(); endif; ?> </div> </section> </div> <!-- RELATED ARTICLE AREA --> <section> <div class=&"box-layer related-articles custom-padding&"> <h3 class=&"align-center&">Related Articles</h3> <?php $current_categories = get_the_category(); $first_category = $current_categories[0]->term_id; $args = array( 'post_per_page' => 3, 'category__in' => array($first_category), 'post__not_in' => array($post->ID) ); $related_articles = new WP_Query($args); if ($related_articles->have_posts()) : ?> <ul> <?php while ($related_articles->have_posts()) : $related_articles->the_post(); ?> <li class=&"col-md-4&"> <?php if (has_post_thumbnail()) : ?> <figure> <a href=&"<?php the_permalink(); ?>&"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure> </figure> <a href=&"<?php the_permalink(); ?>&"><?php the_title(); ?></a> <?php endif; ?> </li> <?php endwhile; ?> <div class=&"clear&"></div> </ul> <?php endif; ?> <?php // Restore original Post Data wp_reset_postdata(); ?> </div> </section> </div> <!-- SIDEBAR AREA --> <aside> <div class=&"col-md-3 col-md-offset-1 margin-sidebar&"> <?php get_sidebar(); ?> </div> </aside> </section> <?php get_footer(); ?> ولإظهار التعليقات، قم بإضافة الكود التّالي: <section> <div class=&"comment-section&"> <?php if ( comments_open() || '0' != get_comments_number() ) : comments_template(); endif; ?> </div> </section> هذا الكود سيتحقّق إن كانت التعليقات مُتاحةً أو إن كانت هناك تعليقات ليقوم باستدعاء نموذج التعليقات (سنتناول ذلك لاحقا). الخطوة 2.8- العملُ مع ملفِّ page.php بعد أن أنهينا العمل على صفحة التّدوينة، سنتوجّه للعملِ على الصّفحات العادية. أنشئ ملفّ page.php ثم ألصق به الكود التّالي: <?php get_header(); ?> <!-- BLOG AREA --> <section> <hr class=&"no-margin&" /> <div class=&"blog-container section-content&"> <div class=&"container&"> <div class=&"row&"> <div class=&"col-md-8&"> <div class=&"box-layer custom-padding&"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h3> <?php the_title(); ?> </h3> <?php if (has_post_thumbnail()) : ?> <figure> <a href=&"<?php the_permalink(); ?>&"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure> <?php endif; ?> <?php the_content(); ?> <?php endwhile; endif; //ends the loop ?> </div> </div> <!-- SIDEBAR AREA --> <aside> <div class=&"col-md-3 col-md-offset-1 margin-sidebar&"> <?php get_sidebar(); ?> </div> </aside> </section> <?php get_footer(); ?> مجدّدًا لا جديد في هذا الملفِّ عدا أنّه لا يحتوي على قسمٍ للتعليقات كونه سيعرضُ صفحةً عاديّة. في الملفّين المقبلين سنقوم باستخدام نموذجين مُدمجين في ووردبريس لعرض الصّفحات بِنسقٍ مختلفٍ. ترجمة -وبتصرّف- للمقال How to Convert a Static HTML Template into a Responsive WordPress Theme
  3. تابعنا في الدرس السابق العمل على ملفات index و single.php و page.php وسننهي في هذا الدرس الأخير في هذه السلسلة عملية تحويل القالب. الخطوة 2.9- العملُ مع ملفِّ page-about.php في هذا الدّرس سنقوم بإنشاء صفحة تعريفيّةٍ للموقع. ابدأ بإنشاء ملفّ page-about.php. بما أنّها صفحة تعريفيّة فلن يحتوي ملفّها إلَّا على كود HTML بالإضافة إلى كلٍّ من رأس، تذييل والقائمة الجانبيّة للقالب. أضف تعليقًا في بداية الملفّ لجعل ووردبريس يعرف أنّه يمثِّل صفحة نموذج. انسخ الكود التّالي داخل ملفِّ page-about.php. <?php /* Template Name: About Page */ ?> <?php get_header(); ?> <!-- BLOG AREA --> <section> <hr class=&"no-margin&" /> <div class=&"blog-container section-content&"> <div class=&"container&"> <div class=&"row&"> <div class=&"col-md-8&"> <div class=&"box-layer custom-padding&"> <img src=&"<?php print IMG; ?>/my_image.png&" class=&"opacity-hover img-responsive center&" alt=&"my image&" /> <div class=&"align-center&"> <h3>About Me</h3> I am a web designer and a front web developer with over 2 years of experience in the industry. Have a passion for designing detailed, creative and modern websites graphics. I spend most of my time practically every day, experimenting with HTML, CSS and WordPress. <hr/> <h3 class=&"blue&">Feel free to contact me for some Web Projects</h3> <i class=&"fa fa-envelope&"></i> Email: [your email] <i class=&"fa fa-twitter&"></i> Twitter: [your twitter username] </div> </div> <!-- END RELATED ARTICLE AREA --> </div> <!-- SIDEBAR AREA --> <aside> <div class=&"col-md-3 col-md-offset-1 margin-sidebar&"> <?php get_sidebar(); ?> </div> </aside> </section> <?php get_footer(); ?> الخطوة 2.10- العملُ مع ملفِّ page-contact.php يمكنُ للعديد من إضافات ووردبريس إضافة استمارة تواصلٍ لمدوّنتك، ولكنّك تستطيع القيام بذلك دون الحاجة لإضافة. قم بإنشاء ملفِّ page-contact.php ثمّ أضف إلية بعض أكواد PHP و JavaScript. الآن أنشئ استمارةً بسيطةً فقط بلصق الكود التّالي داخل ملفّك. <?php /* Template Name: Page Contact */ ?> <?php if(isset($_POST['submitted'])) { if(trim($_POST['contactName']) === '') { $nameError = 'Please enter your name.'; $hasError = true; } else { $name = trim($_POST['contactName']); } if(trim($_POST['email']) === '') { $emailError = 'Please enter your email address.'; $hasError = true; } else if (!preg_match(&"/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+.[a-z]{2,4}$/i&", trim($_POST['email']))) { $emailError = 'You entered an invalid email address.'; $hasError = true; } else { $email = trim($_POST['email']); } if(trim($_POST['subject']) === '') { $subjectError = 'Please enter a subject.'; $hasError = true; } else { $subject = trim($_POST['subject']); } if(trim($_POST['comments']) === '') { $commentError = 'Please enter a message.'; $hasError = true; } else { if(function_exists('stripslashes')) { $comments = stripslashes(trim($_POST['comments'])); } else { $comments = trim($_POST['comments']); } } if(!isset($hasError)) { $emailTo = get_option('tz_email'); if (!isset($emailTo) || ($emailTo == '') ){ $emailTo = get_option('admin_email'); } $subject = '[PHP Snippets] From '.$name; $body = &"Name: $name nnEmail: $email nnComments: $comments&"; $headers = 'From: '.$name.' <'.$emailTo.'>' . &"rn&" . 'Reply-To: ' . $email; wp_mail($emailTo, $subject, $body, $headers); $emailSent = true; } } ?> ما تمّ القيام به هنا هو التأكّد من أنّ الاستمارة تمّ ملئُها وإرسالها بطريقةٍ صحيحة عن طريق التحقّق من عدم وجود حقولٍ فارغة أو بريد إلكترونيٍّ غير صحيحٍ. في حالة العكس، سيتمّ إظهار رسالة خطأ ولن يتّم إرسال الاستمارة. الآن، فلنقم بإنشاء الاستمارة وعرض رسائل الخطأ الموافقة لكلِّ حقلٍ. <?php get_header(); ?> <section> <hr class=&"no-margin&" /> <div class=&"blog-container section-content&"> <div class=&"container&"> <div class=&"row&"> <div class=&"col-md-8&"> <div class=&"box-layer custom-padding&"> <div id=&"container&"> <div id=&"content&"> <div class=&"align-center&"> <h3>We want to hear from you!</h3> If you are seeking to contact us, please fill up the form below. If you want to advertise or be partner with us just inform us on the message box below. Thank you so much for your support! We really appreciate! <div class=&"entry-content&"> <?php if(isset($emailSent) $emailSent == true) { ?> <div class=&"thanks&"> Thanks, your email was sent successfully. </div> <?php } else { ?> <?php the_content(); ?> <?php if(isset($hasError) || isset($captchaError)) { ?> Sorry, an error occured. <?php } ?> <form action=&"<?php the_permalink(); ?>&" id=&"contactForm&" method=&"post&" class=&"general-form&"> <div class=&"contactform&"> <input type=&"text&" name=&"contactName&" class=&"form-control&" id=&"contactName&" placeholder=&"Your Name..&" value=&"<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>&" class=&"required requiredField&" /> <?php if($nameError != '') { ?> <span class=&"error&"><?=$nameError;?></span> <?php } ?> <input type=&"text&" name=&"email&" id=&"email&" class=&"form-control&" placeholder=&"Your Email..&" value=&"<?php if(isset($_POST['email'])) echo $_POST['email'];?>&" class=&"required requiredField email&" /> <?php if($emailError != '') { ?> <span class=&"error&"><?=$emailError;?></span> <?php } ?> <input type=&"text&" name=&"subject&" id=&"subject&" class=&"form-control&" placeholder=&"Your Subject..&" value=&"<?php if(isset($_POST['subject'])) echo $_POST['subject'];?>&" class=&"required requiredField subject&" /> <?php if($subjectError != '') { ?> <span class=&"error&"><?=$subjectError;?></span> <?php } ?> <textarea name=&"comments&" id=&"commentsText&" class=&"form-control&" placeholder=&"Your Message&" rows=&"4&" cols=&"100&" class=&"required requiredField&"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea> <?php if($commentError != '') { ?> <span class=&"error&"><?=$commentError;?></span> <?php } ?> <input type=&"submit&" class=&"btn btn-primary no-border&" value=&"Send Message&"></input> </div> <input type=&"hidden&" name=&"submitted&" id=&"submitted&" value=&"true&" /> </form> <?php } ?> </div> <!-- .entry-content --> </div> <!-- .post --> </div> </div> </div> <!-- RELATED ARTICLE AREA --> </div> <aside> <!-- SIDEBAR AREA --> <div class=&"col-md-3 col-md-offset-1 margin-sidebar&"> <?php get_sidebar(); ?> </div> </aside> </section> <?php get_footer(); ?> هذه الاستمارة تعمل بشكلٍ جيّد الآن ولكن يُمكننا إدخال تحسيناتٍ إضافيّة عليها عن طريق إضافة التحقُّقات في جهة العميل، للقيامِ بهذا سنستخدم إضافة jQuery للتحقّق والمُصادقة . أوّلًا قُم بتحميل الإضافة ثمّ ضعها في مجلّد js داخل مجلّد قالبنا ووردبريس. بعد ذلك أضف الكود التّالي في ملفّ header.php قبل وسمِ إغلاقِ head. <?php if( is_page('contact') ){ ?> <script type=&"text/javascript&" src=&"<?php bloginfo('template_directory'); ?>/js/jquery.validate.min.js&"></script> <script type=&"text/javascript&" src=&"<?php bloginfo('template_directory'); ?>/js/verif.js&"></script> <?php } ?> الآن أنشئ ملفّ verif.js وضع داخله كود jQuery لتفعيل التحقّق، قم بنسخ الكود التّالي: $(document).ready(function(){ $(&"#contactForm&").validate(); }); جميل! تمّ إنشاء استمارة التواصل. هذه الاستمارة ستقوم بالتحقّق فقط بالتأكّد من أنّ الحقول التي تمتلك كلاس "مطلوب-required" قد تمّ ملئها بشكلٍ صحيحٍ. الخطوة 2.11- تعيين نماذج الصّفحات للصفحة رائع! تمّ إنشاء نماذج الصّفحات، الآن علينا العمل على تعيينها لصفحة ما. في هذا الجزء من الدّرسِ، أنشئ أوّلًا صفحةً من لوحة التحكّم، ثمّ بعد ذلك عيّن نموذجًا لها. للقيام بهذا، اذهب إلى صفحات> أضف جديدًا ثمّ أعطها عنوان "تواصل معنا" أو "عن الموقع". الآن فلنقم بتعيين نموذجٍ لصفحتنا، اذهب إلى الجهة اليُمنى أو اليُسرى (على حسب لغة القالب) ستجد هناك قائمة خياراتٍ تحت عنوان نموذج، اختر منها النموذج الذّي تريده ثم اضغط على زرِّ نشر الآن يمكنك أن تتحقّق أنّ الصفحة تعمل بالتوجّه إليها عن طريق الضغط على الرابط أسفل العنوان. الخطوة 2.21- العملُ مع ملفِّ search.php لقد تمَّ إعداد هيكلةِ صندوق البحثِ ولكِّنه لا يعملُ بعد، إذ سيتوجّب علينا إضافة بعضِ الدوالِّ لجعله يعمل وذلك ما سنقوم بهِ في هذا الجزءِ من الدّرس. الكود أدناه يحتوي على بعض أكواد PHP لجعلِ عمليّة البحث تُرجِع نتائج، عدا ذلك سنحصل على رسالة الخطأ " Bummer! No results found" المُضمّنة بين وَسمي H2. أنشئ أوّلًا ملفّ search.php ثم أضف له الكود أدناه: <?php get_header(); ?> <section> <hr class=&"no-margin&" /> <div class=&"blog-container section-content&"> <div class=&"container&"> <div class=&"row&"> <div class=&"col-md-8&"> <?php if ( have_posts() ) : ?> <header class=&"page-header&"> <h3 class=&"page-title&"><?php printf( __( 'Search Results for: %s', '_s' ), ' <h3>' . get_search_query() . '</h3> ' ); ?></h3> </header> <!-- .page-header --> <?php /* Start the Loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php /*** Run the loop for the search to output the results. */ get_template_part( 'content', 'search' ); ?> <?php endwhile; ?> <?php else : ?> <h3>Bummer! No results found</h3> <?php endif; ?> </div> <div class=&"col-md-3 col-md-offset-1 margin-sidebar&"> <?php get_sidebar(); ?> </div> </div> </div> </div> </section> <?php get_footer(); ?> الخطوة 2.13- العملُ مع ملفِّ content-search.php ملفّ search.php يقوم فقط بالتحكّمِ بنتائج البحث لكنه لا يعرضها لذا سيتوجّب علينا إضافة حلقة تِكرارٍ لعرض هذه النتائج. أوّلًا قم بإنشاء ملفّ content-search.php داخل المجلّد الرئيسيِّ لقالبنا، ثمّ انسخ هذا الكود بداخلهِ. <div id=&"post-<?php the_ID(); ?>&" <?php post_class(); ?>> <header class=&"entry-header&"> <?php the_title( sprintf( ' <h1 class=&"entry-title&"><a href=&"%s&" rel=&"bookmark&">', esc_url( get_permalink() ) ), '</a></h1> ' ); ?> <?php if ( 'post' == get_post_type() ) : ?> <div class=&"entry-meta&"> <?php endif; ?> </header> By <a href=&"<?php the_author_posts() ?>&"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / <?php the_category(); ?> <?php the_excerpt(); ?> </div> الخطوة 2.14- العملُ مع ملفِّ comments.php للتّذكير، في ملفِّ single.php قمنا بإضافة وسم div ذو كلاس comment-section يحتوي على كود PHP وقلنا حينها أنَّ هذا العنصر سيحتوي على التعليقات. هذا كان الكود الذي أضفناه: <div class=&"comment-section&"> <?php if ( comments_open() || '0' != get_comments_number() ) : comments_template(); endif; ?> </div> كما سبق وأن أشرنا إليه، هذا الكود سيقوم بالتحقّق إن كانت التعليقات متاحةً من لوحة التحكّم، إن كان الجواب "نعم" فهو سيقوم باسترجاع عدد التعليقات ومِن ثَمَّ عرضها بكلِّ بساطة. انتبه إلى أنَّ هذا الكود لن يكفي بمفردهِ لعرضِ التعليقات، سنكون بحاجةٍ لإنشاء comment_template باستخدام ملفِّ comments.php. في هذا الجزء من هذا الدّرس التعليميِّ قُم بإنشاء هذا الملفِّ في مجلّد قالبنا الرئيسيِّ ثم انسخ الكود أدناه بداخلهِ: <?php /** * The template for displaying comments. * * The area of the page that contains both current comments * and the comment form. * * @package NeoBlog */ /* * If the current post is protected by a password and * the visitor has not yet entered the password we will * return early without loading the comments. */ if ( post_password_required() ) { return; } ?> <div id=&"comments&" class=&"comments-area&"> <?php // You can start editing here -- including this comment! ?> ?php if ( have_comments() ) : ?> <h3 class=&"comments-title&"> <?php printf( _nx( 'One Comment on ldquo;%2$srdquo;', '%1$s comment on ldquo;%2$srdquo;', get_comments_number(), 'comments title', '_s' ), number_format_i18n( get_comments_number() ), ' <h3>' . get_the_title() . '</h3> ' ); ?> </h3> <?php if ( get_comment_pages_count() > 1 get_option( 'page_comments' ) ) : // are there comments to navigate through ?> <nav id=&"comment-nav-above&" class=&"comment-navigation&" role=&"navigation&"> <h1 class=&"screen-reader-text&"><?php _e( 'Comment navigation', '' ); ?></h1> <div class=&"nav-previous&"><?php previous_comments_link( __( 'larr; Older Comments', '_s' ) ); ?></div> <div class=&"nav-next&"><?php next_comments_link( __( 'Newer Comments rarr;', '_s' ) ); ?></div> </nav> <!-- #comment-nav-above --> <?php endif; // check for comment navigation ?> <ol class=&"comment-list&"> <?php wp_list_comments( array( 'style' => 'ol', 'short_ping' => true, )); ?> </ol> <!-- .comment-list --> <?php if ( get_comment_pages_count() > 1 get_option( 'page_comments' ) ) : // are there comments to navigate through ?> <nav id=&"comment-nav-below&" class=&"comment-navigation&" role=&"navigation&"> <h1 class=&"screen-reader-text&"><?php _e( 'Comment navigation', '' ); ?></h1> <div class=&"nav-previous&"><?php previous_comments_link( __( 'larr; Older Comments', '_s' ) ); ?></div> <div class=&"nav-next&"><?php next_comments_link( __( 'Newer Comments rarr;', '_s' ) ); ?></div> </nav> <!-- #comment-nav-below --> <?php endif; // check for comment navigation ?> <?php endif; // have_comments() ?> <?php // If comments are closed and there are comments, let's leave a little note, shall we? if ( ! comments_open() '0' != get_comments_number() post_type_supports( get_post_type(), 'comments' ) ) : ?> <?php _e( 'Comments are closed.', '' ); ?> <?php endif; ?> <?php $fields = array( 'author' => ' '.'<input class=&"form-control&" placeholder=&"Your Name..&" id=&"author&" name=&"author&" type=&"text&" value=&"' . esc_attr( $commenter['comment_author'] ) . '&" size=&"30&"' . $aria_req . ' /> ', 'email' => ' '.'<input id=&"email&" class=&"form-control&" placeholder=&"Your Email..&" name=&"email&" type=&"text&" value=&"' . esc_attr( $commenter['comment_author_email'] ) . '&" size=&"30&"' . $aria_req . ' /> ', 'url' => ' ' . '<input id=&"url&" class=&"form-control&" placeholder=&"Your Website..&" name=&"url&" type=&"text&" value=&"' . esc_attr( $commenter['comment_author_url'] ) . '&" size=&"30&" /> ' ); $comments_args = array( 'fields' => $fields, 'title_reply'=>' <h3>'.'Leave a Comment'.' <h3>', 'comment_field' => ' <textarea id=&"comment&" class=&"form-control&" name=&"comment&" rows=&"4&" cols=&"100&" aria-required=&"true&" placeholder=&"Write your comment here..&"></textarea> ', 'comment_notes_after' => '', 'id_submit' => 'submit-btn' ); ?> <?php comment_form($comments_args); ?> </div> <!-- #comments --> هناك العديد من الأشياء التي تحدث في هذا الملفِّ. أوّلًا، هو يقوم بالتحقّق إن لم يكن المقال يشترط كلمة سرٍّ مِن المُستخدِم، إن كانت الإجابة بـ "لا" فهو سيقوم بعرض عددِ التعليقات وعرضِ هذه التعليقات أيضًا. لاحظ أنّ هناك روابط للتنقّل بين التعليقات، كِلا الرّابطين (next) و (previous) يستخدمان الدالّتين previous_comments_link و next_comments_link على التّوالي. أخيرًا، استخدم دالّة wp_list_comments لعرض التعليقات الخاصّة بمقالةٍ أو صفحةٍ ما بالاعتماد على مجموعةٍ من الإعدادات، بما فيها تلك التّي تمّ تحديدها من لوحةِ التحكّم. بعد ذلك أضف wp_enqueue_script للتحقّق من أنّ التعليقات التَشعُبيّة متاحة. في حالة كان الجواب بِـ "نعم" سيتمّ إضافة زر "رد". افتح ملفّ functions.php وأضف إليه الكود التّالي: <?php if( get_option('thread_comments') ){ wp_enqueue_script('comment-reply'); } ?> الخطوة 2.15- العملُ مع ملفِّ php.404 إنشاء صفحة خطأ خاصّة سيكون أمرًا سهلا باستخدام ملفِّ php.404 في قالب ووردبريس خاصّتنا. هذه الخطوة ستجعل قالبنا يتأكّد أنّ كلّ رابطٍ يقود إلى صفحة ما، في حالة كان الرّابط معطوبًا فسيتّم عرض هذه الصّفحة. فقط قُم بإنشاء ملفّ php.404 داخل مجلّد قالبنا الرئيسي ثمّ قم بنسخ الكود التّالي بداخله. <?php get_header(); ?> <!-- BLOG AREA --> <section> <hr class=&"no-margin&" /> <div class=&"blog-container section-content&"> <div class=&"container&"> <div class=&"row&"> <div class=&"col-md-8&"> <div class=&"box-layer custom-padding&"> <section> <h3> Oh Snap! Page not found!</h3> <h3> It seems you're looking for something that isn't here!</h3> <a href=&"<?php echo home_url(); ?>&">Click here</a> to go back to homepage! </section> </div> </div> <aside> <!-- SIDEBAR AREA --> <div class=&"col-md-3 col-md-offset-1 margin-sidebar&"> <?php get_sidebar(); ?> </div> </aside> </section> <?php get_footer(); ?> صفحة 404 "الصّفحة المطلوبة غير موجودة" هي صفحة خطأ يتّم توليدها عن طريق الخادم لإعلام المستخدم أنّ الصفحة المطلوبة غير متوفّرةٍ. الكود أعلاه سيعرض رسالة الخطأ التاليّة "!Oh Snap! Page not found" بمعنى "لم يتمَّ العثور على الصّفحة" إضافة إلى رابط يقود إلى رئيسيّة الموقِع حتّى نضمن بقاء الزّائر في موقعنا. مبروك! لقد أكملنا العمل على قالبنا ووردبريس! الشّكلُ النهائيُّ لقالبنا تحميل القالب نصائح يجب إتِّباعها لتذكّر هذا الجزء من الدّرس ابقَ دائمًا على إطِّلاع على دليل ووردبريس للحصول على الدوالّ، الوُسوم وأكواد PHP. هذا الأمر سيبقيك دائمًا على الطّريق الصّحيح في التّعامل مع الأكواد. تحقّق دائمًا من استخدام كودٍ مُهيكلٍ بشكلٍ جيّدٍ، خالٍ من أخطاء PHP و HTML مصادقٍ عليه. ألقِ نظرة على معايير ووردبريس. اتبع دليل التصميم لتصميم الموقع ونُسوقِه. اعمل نسخًا احتياطيّة لملفّاتك دائمًا. أنا أكرّر! دائمًا اعمل نسخًا احتياطيّة لملفّاتك لأنّه في حالة عملت تغييرات كثيرة على ملفّاتك سيمكنك دائمًا استرجاعها بسهولة. ابحث عن المساعدة. إن كنت تعملُ على قالب آخر فإن احتمال مواجهتك لمشاكل أثناء تحويلك لبعضِ الملفّات كبير جدًّا. ماهي تقنّيات حلّ الأخطاء التي يُمكنك استخدامها لا يوجد هناك طريقة رسميّة للتحقّق من الأخطاء لمّا تكون بصددِ تطوير قالب ما. قد يكون هناك خطأ إملائي في كتابتك لبعض أجزاء الكود أو ربّما أنّك نسيت إنشاء أحد ملفّات ووردبريس. مع ذلك فإنّ أحسن طريقة لتصيّد الأخطاء ستكون تشغيل وضع التصحيح "Debugging mode" أو التحقّق من سجّل الأخطاء لديك. خاتمة مبروك! لقد قُمتَ لتوِّك بتحويل قالب HTML و CSS إلى قالب مدّونة ووردبريس. كلّ ذلك تمَّ بسهولة، أليس كذلِك؟ ترجمة -وبتصرّف- للمقال How to Convert a Static HTML Template into a Responsive WordPress Theme
  4. تابعنا في الدرس السابق مخطط لعمل وتعرّفنا على ملفات القالب وتعلّمنا طريقة تضبيط ملفّات القالب، ما يجب عليك تفاديه، بعض النقاط التي وجب عليك البحث عنها، إضافةً إلى الخطوات الواجب إتّباعها لإنشاء قالب ووردبريس. الجزء الثّاني: 2. تخصيص موقعك ووردبريس يمكنك تصميم موقعك المثاليِّ بداية بإنشاء نموذج للتصميم عن طريق فوتوشوب ومن ثَمَّ تحويل هذا التصميم إلى ملفّات HTML و CSS. بعد ذلك سنقوم بتحويل هذه الملفّات إلى قالب ووردبريس شغّالٍ بالكامِل. تصميم المواقع بواسطة فوتوشوب ومِن ثمَّ تحويلها إلى قوالب ووردبريس هي إحدى أسهل طرقِ تطوير المواقع هذهِ الأيّام. في الحقيقة هذه أحسن طريقة لتوفير مواقع لعملائك في أقل وقت ممكن وبسهولةٍ بالغة. في هذا الجزء من الدّرس سنقوم بالعملِ على الملفّات التاليّة: functions.php header.php footer.php searchform.php sidebar.php index.php single.php page.php page-about.php page-contact.php page-contact.php search.php content-search.php comments.php php.404 في الجزء الأوّل من هذا الدّرس تعلّمنا كيفيّة تحضير ملفّات HTML و CSS لتحويلها إلى قالب ووردبريس ثم بعد ذلك قمنا بتفعيل هذا القالب. في هذا الجزء ستتعلّم ماهي الأكواد التي يحتاجها قالب ووردبريس والتّي سيتوجّب عليك إضافتها كي تتمكّن من إنشاء قالب ووردبريس يعمل. بنهاية هذا الدّرس ستتحصّل على نفس القالب الذي أريناك صورةً عنه في بداية الجزء الأوّل. الخطوة 1.2- تعريف الثّوابتِ وتسجيل دعمِ قائمةِ شريط التنقّل القالب مُفعّلٌ مسبقا! الآن فلنقم بإضافة دعم قائمة التنقّل داخل ملفِّ functions.php. فلنبدأ بإنشاء ملفِّ functions.php في المجلّد الرئيسيِّ لقالبنا. بعد ذلك، فلنقم بتعريف ثوابت مسار مجلّدِ قالبنا. قُم بنسخ الكود أدناه داخل ملفِّ functions.php الذي أنشأناه قبل قليل. <?php /***********************************************************************************************/ /* Define Constants */ /***********************************************************************************************/ define('THEMEDIR', get_stylesheet_directory_uri()); define('IMG', THEMEDIR.'/images'); ?> بعد ذلك سنحتاج لتسجيل دالّة تفعيل قائمة التنقّل لقالبنا (navbar). قم بنسخ الكود التّالي داخل ملفِّ functions.php. <?php add_action('init', 'register_my_menus'); function register_my_menus() { register_nav_menus(array( 'main-menu' => 'Main Menu' )); } ?> تَمّ إضافة معلِّق add_action لتسجيل قائمة التنقّل. المُعامِل الأوّلُ يمثّل الوَسم (أين سنضيف هذا الفِعل) أمّا المُعامِل الثّاني فيمثِّل اسم الدالّة التي سنستدعيها للقيام بتسجيل القائمة. لتعرف أكثر حول هذا الأمر، اطّلع على هذه الصفحة . الخطوة 2.2- إنشاء ملفِّ header.php الآن أنشئ ملفَّ header.php. قم بفتحِ ملفِّ index.html وقم بنسخ كلِّ شيء منه بدءًا من DOCTYPE إلى إغلاق وسم header في هذا الملفِّ ثمّ انسخ كلّ شيءٍ داخل ملفّ header.php الذّي أنشأناه داخل مجلّد قالبنا. <!DOCTYPE html> <!--[if IE 8]> <html lang=&"en&" class=&"ie8&"> <![endif]--> <!--[if !IE]><!--> <html lang=&"en&"> <!--<![endif]--> <head> <meta charset=&"utf-8&"> <title>NEOBLOG</title> <meta name=&"description&" content=&"A simple WordPress blog theme for 1stwebdesigner.com&"> <meta name=&"author&" content=&"Sam Norton&"> <!-- Mobile Specific Meta --> <meta name=&"viewport&" content=&"width=device-width, initial-scale=1, maximum-scale=1&"> <!-- Stylesheets --> <link rel=&"stylesheet&" href=&"css/reset.css&" /> <link rel=&"stylesheet&" href=&"css/bootstrap.css&" /> <link rel=&"stylesheet&" href=&"css/style.css&" /> <link href=&"http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css&" rel=&"stylesheet&"> <!--[if lt IE 9]> <script src=&"http://html5shim.googlecode.com/svn/trunk/html5.js&"></script> <![endif]--> </head> <body> <!-- HEADER --> <header class=&"main-header align-center &"> <a href=&"index.html&" class=&"logo&" ><img src=&"images/logo.png&" class=&"img-responsive&" alt=&"NEOBLOG blog theme&" /></a> <nav class=&"main-nav&"> <ul class=&"inline&"> <li><a href=&"index.html&" class=&"active&">Home</a></li> <li><a href=&"about.html&">About</a></li> <li><a href=&"contact.html&">Contact</a></li> </ul> </nav> </header> بعض وُسومِ HTML سيتِّم تعويضها ببعض دوالّ ووردبريس مثل وسوم: اللّغة، ميتا “meta” وغيرها. أضف معلِّق wp_head قبل إغلاق وسمِ head. يُستخدم هذا المعلِّق لطبع بعضِ مرجعات الدّوال التي سنُضيفها لاحقا، او لجعله يقوم ببعض الأعمال في الخلفيّة. لمزيد من المعلوماتِ راجع دليل ووردبريس. من أجل قائمة التنقّل سنستخدم الدالّة التّي قمنا بإنشائها سابقًا wp_nav_menu لعرض قائمة التنقّل التي أنشأناها من خلال لوحة تحكّمِ المدير في ووردبريس. إعداد theme_location سيقوم بعرض القائمة المعيّنة للمكان المحدّد بالدالّة wp_nav_menu. في حالة لم يتمّ تعيين قائمة لذلك المكان، إعداد fallback_cb سيقوم بتحديد ما سيتّم عرضه. لمزيد من المعلومات حولَ دالّة wp_nav_menu راجع هذه الصّفحة. قم بنسخ الكود التّالي داخل ملفّ header.php لتعويض الكود الذي نسخته من قبل. <!DOCTYPE html> <!--[if IE 8]> <html lang=&"en&" class=&"ie8&"> <![endif]--> <!--[if !IE]><!--> <html <?php language_attributes(); ?>> <!--<![endif]--> <head> <meta charset=&"<?php bloginfo('charset'); ?>&"> <title><?php wp_title('|', true, 'right');?><?php bloginfo('name');?></title> <meta name=&"description&" content=&"<?php bloginfo('description'); ?>&"> <meta name=&"author&" content=&"Sam Norton&"> <!-- Mobile Specific Meta --> <meta name=&"viewport&" content=&"width=device-width, initial-scale=1, maximum-scale=1&"> <!-- Stylesheets --> <link rel=&"stylesheet&" href=&"<?php bloginfo('stylesheet_url'); ?>&" /> <link rel=&"stylesheet&" href=&"css/bootstrap.css&" /> <link rel=&"stylesheet&" href=&"css/style.css&" /> <link href=&"http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css&" rel=&"stylesheet&"> <!--[if lt IE 9]> <script src=&"http://html5shim.googlecode.com/svn/trunk/html5.js&"></script> <![endif]--> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <!-- HEADER --> <header class=&"main-header align-center &"> <a href=&"<?php echo home_url(); ?>&" class=&"logo&" ><img src=&"<?php print IMG;?>/logo.png&" class=&"img-responsive&" alt=&"<?php bloginfo('name');?>&" /></a> <nav class=&"main-nav&"> <?php wp_nav_menu(array( 'theme_location' => 'main-menu', 'container' => '', 'menu_class' => 'inline' )); ?> </nav> </header> الخطوة 2.3- إنشاء ملفِّ footer.php من أجل هذا الجزء سنقوم بإنشاء ملّف footer.php فارغٍ، ثمّ مجدّدًا نفتح ملفَّ index.html من مجلّد قالب HTML وCSS NeoBlog ثمّ نقوم بنسخ كلِّ شيءٍ انطلاقًا من ”sharing idea section” إلى آخر وسمٍ في هذا الملفِّ ثمّ قم بنسخها في ملفِّ footer.php الذي قمنا بإنشائه داخل مجلّد قالبنا ووردبريس. يجب أن يكون لديك نفس الكود أدناه. <!-- SHARING IDEAS AREA --> <section> <div class=&"sharing-container section-content align-center&"> <h3>WANT TO SHARE YOUR THOUGHTS?</h3> Life is short. Start sharing your knowledge to people. It may inspire them to enjoy life and learn how to face life difficulties. <h4><a href=&"contact.html&" >CLICK HERE TO LEARN MORE >>></a></h4> </div> </section> <!-- FOOTER --> <footer class=&"main-footer section-content align-center&" id=&"contact-info&"> copy; 2014 - <a href=&"https://1stwebdesigner.com/&" target=&"_blank&">NEOBLOG theme</a> by <a target=&"_blank&" href=&"https://twitter.com/NickDalusung&">Sam Norton</a> </footer> </body> </html> مثلما فعلنا في السّابقِ مع ملفِّ header.php سنقوم مجدّدًا بتعويض بعض وسوم HTML بدوالِّ ووردبريس مثل رابطٍ للصفحة الرئيسية، السّنة الحاليّة ومعلومات المدوّنة. ألقِ نظرةً على الكود أدناه: <!-- SHARING IDEAS AREA --> <section> <div class=&"sharing-container section-content align-center&"> <h3>WANT TO SHARE YOUR THOUGHTS?</h3> Life is short. Start sharing your knowledge to people. It may inspire them to enjoy life and learn how to face life difficulties. <h4><a href=&"<?php home_url(); ?>&" >CLICK HERE TO LEARN MORE >>></a></h4> </div> </section> <!-- FOOTER --> <footer class=&"main-footer section-content align-center&" id=&"contact-info&"> copy; <?php echo date('Y'); ?> - <a href=&"<?php home_url(); ?>&"><?php echo bloginfo('name'); ?></a> by <a target=&"_blank&" href=&"https://twitter.com/NickDalusung&">Sam Norton</a> </footer> <?php wp_footer(); ?> </body> </html> الخطوة 2.4- العمل مع ملفِّ searchform.php التّالي على القائمة سيكون وضع الترميز (باستخدام دوالّ ووردبريس)، الذي سيقوم بإظهار صندوق البحث في القائمة الجانبيّة. قم بإنشاء ملفِّ searchform.php ثمّ انسخ الكود التّالي بداخله. <div class=&"controller&"> <form role=&"search&" method=&"get&" class=&"search-form&" action=&"<?php echo home_url(); ?>&"> <input type='textbox' name=&"s&" class=&"form-control&" id=&"search-box&" value=&"<?php the_search_query(); ?>&" placeholder=&"Search..&"/> <input class=&"btn btn-primary no-border&" type=&"submit&" class=&"search-submit&" value=&"Search&" /> </form> </div> لاحِظ أنّنا استخدمنا دالّة the_search_query كقيمة لصندوق البحث، وهذا لإظهار الكلمات التي نبحث عنها داخل صندوق البحث في حالة قِيامنا بعمليِّة بحثٍ ما. الخطوة 2.5- العمل مع ملفِّ sidebar.php قبل البدءِ بإنشاء ملفِّ sidebar.php علينا أوّلًا تسجيل القائمة الجانبيّة في ملفِّ functions.php. قُم بفتح ملفِّ functions.php وأضِف له الكود التّالي <?php register_sidebar( array( 'id' => 'main-sidebar', 'name' => __( 'Main Sidebar', $text_domain ), 'description' => __( 'This the main sidebar.', $text_domain ), ) ); ?> الكود أعلاه سيقوم بإنشاء تعريفٍ للقائمة الجانبيّة ويقوم بإرجاع المُعرِّف. بعد هذا فلنقم باستدعاء هذه القائمة. بدايةً سنُنشِئ ملفَّ sidebar.php في مجلّد قالبنا الرئيسيِّ ثمّ بعد ذلك أنسخ هذا الكود بداخله. <?php if ( is_active_sidebar( 'main-sidebar' ) ) : ?> <?php dynamic_sidebar( 'main-sidebar' ); ?> <?php endif; ?> هذا الكود يحتوي على دالّةٍ تقوم باستدعاء الوِدجت ذات المعرّفِ main-sidebar وتقوم بطبعها في القائمة الجانبيّة ولكن قبل ذلك ستتحقّق أنّ الوِدجت مُفعّلة من لوحة التحكّم. ترجمة -وبتصرّف- للمقال How to Convert a Static HTML Template into a Responsive WordPress Theme
  5. تعتبر السيرة الذاتية من أهم الأدوات عند التقدم للحصول على وظيفة ولذلك يجب أن تكون جيدة الصياغة وتعرض مؤهلاتك بصورة ذكية. يتيح مايكروسوفت وورد إمكانية إنشاء سيرة ذاتية باستخدام القوالب الجاهزة أو إنشائها يدويا من الصفر. ولمعرفة كيفية إنشاء سيرتك الذاتية بإحدى الطريقتين، بالإضافة إلى بعض الأدوات والنصائح لتحسينها تابع معنا هذا الدرس. إنشاء السيرة الذاتية باستخدام القوالببالإمكان الوصول إلى قوالب السيرة الذاتية مباشرة من نافذة بداية وورد: في حقل البحث سنكتب Resume ونضغط Enter لعرض القوالب الخاصة بالسير الذاتية. وهذه القوالب مصنفة بفئات مختلفة. أن كنت تستخدم إصدارات أقدم من وورد 2013 يمكنك الوصول إلى هذه القوالب من: ملف File > جديد New ثم البحث في حقل البحث الخاص بالقوالب. حقوق الصورة ننقر على أحد المصغرات لعرض معاينة للقالب، ونستخدم الأسهم للتنقل بين القوالب. عندما نختار المناسب ننقر إنشاء Create: بعد تنزيل القالب وفتحه في وورد سنبدأ بتحرير القالب وكتابة المعلومات الشخصية، الهدف المهني، المهارات، الخبرات، إلخ. يحتوي القالب على إرشادات بسيطة تخبرنا ما الذي يجب كتابته في كل حقل: بإمكاننا نسخ ولصق النصوص من نسخة قديمة من السيرة الذاتية إن وجدت. عند لصق النصوص يمكننا تنسيقها من خانة الأنماط لتتلاءم مع تنسيقات القالب. أو استخدام خيارات اللصق عن طريق زر Ctrl. نستخدم الأمر Keep Text Only إذا كنا نرغب في اللصق دون تنسيق: أو نستخدم خيار Merge Formatting لدمج التنسيقات، أي جعل حجم ونوع الخط متناسقا مع القالب، والاحتفاظ بالتنسيقات الأخرى للنص الأصلي كالنصوص العريضة والمائلة، إلخ: يجب أن نأخذ في الاعتبار عند إنشاء السيرة الذاتية أن نكون محددين جدا في فقرة الهدف المهني Objective. إذ يجب أن يكون الهدف مختلفا باختلاف الشركة التي نقدم للحصول على وظيفة فيها. لا تستخدم نفس الهدف المهني لجميع الشركات. تحتوي القوالب، وخصوصا قوالب السير الذاتية، على حقول بتنسيقات معينة، وتحتوي على نصوص إرشادية، تسمى هذه الحقول عناصر التحكم بالمحتوى Content Controls. كمثال على هذه العناصر الحقل المؤشر في الصورة أدناه: لدينا خيار استخدام هذه العناصر أو إزالتها بالنقر بزر الفأرة الأيمن عليها واختيار Remove Content Control: يمكننا التعديل على تنسيق وتصميم القالب من تبويب تصميم Design. يمكننا اختيار التنسيق الذي يناسبنا من أحجام النصوص، الألوان أو المسافات بين الأسطر والفقرات، وغيرها، وذلك معرض تنسيقات المستند Document Formatting: أو من معرض نسق Themes: استخدام الجداول في إنشاء السيرة الذاتيةيفضل البعض عدم استخدام القوالب لإنشاء السيرة الذاتية، ويعتمدون على مفتاح tab أو المسطرة في تنسيق المسافات بين عناوين الأقسام وما يقابلها. لكن هناك طريقة أسهل وأسرع وهي استخدام الجداول. ولفعل ذلك سنقوم بالخطوات التالية: سنقوم بفتح مستندًا جديدًا وكتابة المعلومات الشخصية في بداية الصفحة، ثم سنقوم بإدراج جدول Table من تبويب إدراج Insert: سنقوم بإدراج عمودين، أحدهما لعنوان القسم، والآخر لما يقابل تلك الأقسام من معلومات. أما عدد الصفوف فيعتمد على عدد الأقسام التي تريد إضافاتها، أي صف للهدف المهني، صف للخبرات، صف للمهارات، إلخ. بعدها سنقوم بكتابة المحتويات، وسنستخدم خلية واحدة لكل قسم، أي سنكتب جميع المهارات أو الخبرات السابقة في خلية واحدة من الجدول مهما كان عددها: الخطوة التالية بعد الانتهاء من الكتابة هي تنسيق الجدول. سنقوم بتقليل عرض العمود الأول لإزالة المساحة الزائدة والاستفادة منها في زيادة عرض العمود الثاني. سنضع المؤشر على الحد بين العمود إلى أن يتغير شكله إلى متجهين، ثم سنقوم بالسحب إلى جهة اليسار: ثم سنقوم بإضافة عمود وسطي كحاجز رفيع يفصل بين العمودين، بالنقر على علامة (+) التي تظهر عن وضع المؤشر على الحد بين العمودين وهي طريقة سريعة لإدراج أعمدة (أو صفوف) في إصدار 2013 من البرنامج: أو بالنقر داخل أحد خلايا العمود الأول، والتأشير فوق إدراج Insert واختيار إدراج عمود إلى اليمين Insert Column to Right: وسنقوم بتقليل عرض هذا العمود لأننا لا نريد من الحاجز أن يكون كبيرًا جدًا: بالتأكيد لا نريد إظهار حدود الجدول في السيرة الذاتية لذلك سنقوم بإزالتها. سنحدد جميع خلايا الجدول أولا من أيقونة (+) في حافة الجدول: ثم سنذهب إلى تبويب تصميم Design السياقي الخاص بالجدول، ونختار بلا حدود No Borders من أمر حدود Borders: ما زال بإمكاننا تعديل أبعاد الجدول حتى بعد إزالة الحدود. يمكننا استخدام خطوط الشبكة Gridlines. هذه الخطوط لا تظهر عند الطباعة لكنها تساعدنا على معرفة أماكن حدود أعمدة وصفوف الجدول. سنقوم بتحديد الجدول أولا من أيقونة (+) كما في الخطوة السابقة، ومن أمر حدود سنختار عرض خطوط الشبكة View Gridlines: انتهينا تقريبا من إنشاء السيرة الذاتية. ما تبقى هو تنسيق النصوص وأحجامها، أو إضافة عناصر تصميمية في رأس Header الورقة. نصائح وأدوات لتحسين السيرة الذاتيةاليوم أصبح أغلب الباحثين عن عمل يقدمون سيرهم الذاتية عبر الإنترنت. وتخضع تلك السير الذاتية للبحث عن كلمات معينة بواسطة أنظمة تتبع تستخدم من قبل أصحاب العمل. الأمر أشبه بتهيئة محركات البحث SEO، إذ يجب أن تتضمن سيرتك الذاتية الكلمات التي تجعل العثور عليها سهلا عند البحث. تسمى هذه الكلمات بالكلمات المفتاحية Keywords أو الكلمات الفعالة Power Words. تختلف هذه الكلمات باختلاف الوظيفة التي تُقدم إليها ويجب عليك أن تذكر الكلمات المناسبة ذات الصلة بالعمل الذي تبحث عنه والتي تجذب صاحب العمل. ابحث عن الكلمات المستخدمة في الوصف الوظيفي وضمنها في سيرتك الذاتية. فإذا كانت الوظيفة تتطلب خبرة في برامج التصميم الجرافيكي من ضمنها Photoshop ،Illustrator ،After Effects ...إلخ، تحدث عن هذه البرامج ضمن خبراتك أو اذكرها ضمن مهاراتك، لكن بالطبع إذا كنت مؤهلا لذلك. وإذا كنت تقدم طلبا للعمل في شركة هواتف، تحدث عن الهواتف بالتحديد وليس الأجهزة الذكية بصورة عامة. كن محددا. من الأمور الأخرى التي يجب مراعاتها في السيرة الذاتية هو تجنب تكرار الكلمات. في بعض الأحيان تكرر الكثير من الكلمات دون أن تدرك ذلك. في المثال أدناه هناك العديد من الكلمات المكررة، "expert specialist"، "high experience"... ما سنفعله هو أننا سنقوم بالبحث عن مرادفات لتلك الكلمات واستبدالها. أولا سنقوم بوضع المؤشر فوق إحدى الكلمات، ثم ننقر بزر الفأرة الأيمن ونؤشر فوق مرادفات Synonyms، وسنختار واحدة من المرادفات المقترحة: وإذا لم نجد الكلمة التي تناسبنا سنبحث في Thesaurus الذي يوفر المزيد من المرادفات: وكذلك هناك ما يسمى بصفحة المقدمة أو الخطاب المرفق مع السيرة الذاتية Cover Letter. وهي عبارة عن صفحة تُرفق في بداية السيرة الذاتية توضح بشكل مختصر وسريع الهدف من الوظيفة والمؤهلات التي تجعلك مناسبا للوظيفة التي تقدم إليها. يجب أن تحرص على صياغة صفحة المقدمة بطريقة ذكية وجذابة، فقد تكون هي فرصتك للحصول على الوظيفة. وإذا لم تكتب صفحة مقدمة من قبل، أو لم تكن معتادا على كتابتها يمكنك استخدام قوالب وورد. إذ تتوفر عدة قوالب بالتنسيق الرسمي، يمكنك تنزيلها وتحريرها. من صفحة البداية وفي حقل البحث، اكتب resume cover letter واختر أحد القوالب. قم بتنزيل القالب وابدأ بتحريره حسب الإرشادات في حقول التحكم بالمحتوى.
  6. مِمَّا لا شكَّ فيه أنَّ هُناك قوالب ووردبريس رائعة المظهر ولكن هُناك العديد من الأمثلة على أشياءٍ بسيطة قد نُريد تغييرها في القالب. كلونٍ هُنا، حجم خطٍ هُناك ورُبَّما استدعاء للإجراء على الأزرار. تتمحور المُشكلة في أنَّ تعديل القالب حتَّى ولو كانَ تعديلًا بسيطًا يمنعُكَ من تحديثه إلى نُسخة جديدة في المُستقبل، هذا ببساطة راجع إلى أنَّه إذا قُمتَ بتحديثه فسيؤدِّي هذا إلى فُقدان كُلّ التغييرات التي أُحدِثَت عليه. تُقدِّم القوالب الفرعيَّة حلًّا لهذه المُشكلة عن طريق السَّماح لكَ باستخدام وظائف القالب المُختار إلى جانب إمكانيَّة التَّحديث دون الخوف من فُقدان تلكَ التَّعديلات. سنُقدِّم من خلال هذا الدرس توضيحًا للفائدة من استخدام قالب ووردبريس فرعي وكيفيَّة إنشائه. كيفيَّة عمل قوالب ووردبريس الفرعيَّة والفائدة من استخدامهاالقوالب الفرعيَّة هي قوالب مُنفصلة تعتمد على قالب أساسي في تأدية مُعظم وظائفها. إذا كُنتَ تستخدم قالب فرعي، فإنَّ ووردبريس سيقوم أوَّلًا بالتحقُّق من قالبك الفرعي ليتأكَّد من ما إذا كانت هُناك تأدية وظيفيَّة مُحدَّدة به. إذا لم يجد ووردبريس أيَّة تأدية وظيفية مُحدَّدة فسوف يستخدم القالب الأساسي مُباشرةً. تُعتبر هذه ميزة رائعة حيثُ أنَّها تُتيح لكَ التَّعديل على ما تُريد تعديله فقط. يجب استخدام القوالب الفرعيَّة إن كُنتَ تنوي تعديل ولو مُجرَّد حرف واحد في قالبك. هُناك سببين أساسيَّين للاستخدام، هما: التَّحديثات والتَّنظيم. 1. التَّحديثاتإذا قُمتَ بتعديل قالب بدون استخدام قالب فرعي فسيكون لديكَ خيارين بعد عمليَّة التَّعديل: قد تختار عدم تحديث قالبك في المُستقبل، أو تحديثه وخسارة كُلّ التغييرات المُضافة إلى القالب. رُبَّما يعملُ الخيار الثَّاني فنيًّا ولكنَّه أمرٌ غير مُقترح. حتَّى لو كان من السَّهل نسخ ولصق تعديلاتك، ما هي الفائدة من تضييع دقيقتين من وقتك على مُهمَّة قد تُعرِّضك للخطأ في كُلِّ تحديث؟ مُجرَّد التَّفكير في عدم تحديث القالب ليست فكرة جيِّدة. تُعتبر القوالب الغير مُحدَّثة من أكثر القوالب تعرُّضًا للاختراق. يجب عليكَ دائمًا الإبقاء -بدون استثناء- على كلٍّ من: ووردبريس، قالبك والإضافات مُحدَّثين بما يتناسب مع الوقت الحالي. 2. التَّنظيمعندما تُضيف شفرات لقالب موجود فإنَّك بهذا تُضيف إلى قاعدة شفرات قد تحتوي على الآلاف والآلاف من الأسطر. سيواجه المُطوِّرون ممن يعملون على موقعك (بالاضافة إليكَ بالتَّأكيد) أوقاتًا صعبة في تعقُّب التَّغييرات. نتيجة واحدة على الأقل لهذا الأمر هي تكاليف تطوير زائدة. حيثُ أنَّ القوالب الفرعيَّة تعود من جديد إلى القالب الأساسي -إلَّا إذا تمَّ تحديد ما هو غير ذلك- فإنَّ قالبك الفرعي هو عبارة عن مجموعة من التَّغييرات في قالبك الأساسي. يُمكن أن ينتج عن هذا تغييرات شاملة في حين أنَّ القالب الفرعي قد يحتوي على مُجرَّد مائة سطر من الشَّفرات. إنشاء قالب فرعييُعتبر إنشاء قالب فرعي أمرٌ بسيطٌ للغاية لدرجة أنَّه بامكانك تنفيذ هذا بمُجرَّد نسخ ولصق المثال الموجود بالأدنى. لإنشاء قالب فرعي لقالب عليكَ اتَّباع الخطوات التالية: أنشئ مُجلَّد قالب في تثبيت ووردبريس.أنشئ ملفّ نمط يحتوي على معلومات عن قالبك الفرعي.قُم بإيقاف تفعيل أنماط القالب الأساسي.يُمكنكَ تفعيل القالب الفرعي بمُجرَّد الانتهاء من تنفيذ هذه الخطوات وسيبدو موقعك تمامًا مثلما كان من قبل، الفرق الوحيد هو أنّ الموقع سيستخدم القالب الفرعي في عمله. دعونا الآن ندرس الخطوات أعلاه بالتَّفصيل. سأنشئ على سبيل المثال قالب فرعي للقالب الافتراضي Twenty Fourteen. أوَّلًا، توجَّه إلى مُجلَّد القالب وقُم بانشاء ملفًّا لقالبك الجديد. يُمكنكَ تسميته بالاسم الذي تُريد. من أجل التَّوضيح سنُسمِّي القالب twentyfourteen-child. الخطوة الثَّانية هي إنشاء ملفّ نمط. يجب تسمية هذا الملفّ style.css قُم بنسخ ولصق الشفرات التالية إلى الملف الذي أنشأته لتوِّك: /* Theme Name: Twenty Fourteen Child Theme URI: http://yourwebsite.com/twentyfourteen-child/ Description: My first child theme, based on Twenty Fourteen Author: Daniel Pataki Author URI: http://danielpataki.com Template: twentyfourteen Version: 1.0.0 Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready, responsive-layout, infinite-scroll, post-slider, design, food, journal, magazine, news, photography, portfolio, clean, contemporary, dark, elegant, modern, professional, sophisticated Text Domain: twenty-fourteen-child */العُنصرين الأساسيَّين في هذه الشَّفرة هي السُّطور البادئة بـ "Theme Name" و"Template". يُخبر اسم القالب Theme Name ووردبريس عن اسم قالبك ويُعرَضُ هذا في مُنتقي القالب. أمَّا Template فيُحدِّد لووردبريس أيُّ القوالب يجب اعتباره القالب الأساسي. ما تبقى يصف نفسه بنفسه باستثناء نطاق النَّصّ text domain والوسوم tags. يُستخدم نطاق النَّصَّ لترجمة المقاطع. يجب أن يكون نطاق النَّصّ مُميّزٌ لقالبك ويجب استخدامه متى قُمتَ باستخدام دوال التَّرجمة. لمعلوماتٍ أكثر راجع I18n لمُطوِّري ووردبريس. قسم الوسوم هو قائمة من الوسوم التي تُستَخدم بواسطة مُستودع قالب ووردبريس. على سبيل المثال قد قُمتُ بالنَّظر في ملف style.css الخاصّ بالقالب الأساسي وببساطة قُمتُ بنسخ ولصق الوسوم من هُناك. إلى هذه النُّقطة فإنَّ قالبك الفرعي يعمل بشكلٍ جيِّد. إذا قُمتَ بتفعيله ثُمَّ إعادة تحديث الصَّفحة ستجد كُلّ مُحتواك بها ولكن لن تحتوي على أيّ تنسيق. ذكرتُ سابقًا أنَّ ووردبريس يبحثُ عن التأديَّات الوظيفيَّة في القالب الفرعي وإذا لم يجدها فإنَّه يعود مُجدَّدًا إلى القالب الأساسي. في حالتنا هذه فإن لدينا بالفعل ملف نمط ولذلك فإنَّ ووردبريس قد فهم أنَّه غير مسموح بتحميل ملفّ القالب الأساسي. وبُناءً عليه فإنَّنا سنحتاج إلى إدراج ملفّ نمط القالب الأساسي لكي نتأكَّد من أنَّنا قد قُمنا بتحميله. يُمكن عمل هذا في ملفّ القالب function.php دعونا نُنشيء الآن هذا الملفّ وننسخ الشفرات التالية به: add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); }إذا لم تكُن لديك أيَّة فكرة عن PHP وكُلّ ما تُريده هو تغيير بعض الأنماط فقط فلا تهتمّ كثيرًا لمعرفة سبب عمل هذا. يُمكنكَ الآن التوجُّه ببساطة إلى ملف النَّمط والبدء بعمل التَّغييرات التي تُريد. إذا كان لديكَ فضول لمعرفة المزيد عن الإدراج يُمكنكَ الاطِّلاع على صفّ وتسجيل ملفات Javascript و CSS في قوالب ووردبريس. تقنية القوالب الفرعيَّةإذًا كيف يعمل القالب الفرعي؟ تعملُ القوالب الفرعية في مستوى الملف. عند استخدام ملف خلال عملية تحميل قالب فيتمّ التحقُّق من ما إذا كان هذا الملفّ موجود في القالب الفرعي. إذا كان الملف موجودًا، يتمّ استخدام محتوى هذا الملف. أمَّا إذا لم يكن موجودًا، فيتمّ استخدام نفس الملف في القالب الأساسي. هُناكَ استثناءٌ واحد لهذه القاعدة ألا وهو ملفّ دوال القالب. يتمّ تحميل ملف functions.php الموجود في كلٍّ من القالب الأساسي والقالب الفرعي. إذا قامت دوال القالب الفرعي باستبدال دوال القالب الأساسي فقد تواجه موقعًا به خلل أو قد تحتاج إلى نسخ ولصق محتويات ملف دوال القالب الأساسي كلُّها إلى ملف القالب الفرعي والتي تُفشِلُ نوعًا ما الهدف من تمديد قالب. خطوات سير العمل عند تعديل التأدية الوظيفيَّة هي كالتَّالي: إذا أردتَ عمل تعديلات على التَّرويسة header فعليكَ نسخ ولصق ملفّ القالب الأساسي header.php إلى قالبك الفرعي. قُم بتعديل الملفّ كما يحلو لك، قُم بحفظ الملف بعد الانتهاء من التَّعديل وشاهد نتائج عملك. بعض المُلاحظات إلى صانعي قوالب ووردبريسإذا كُنتَ تُنشيء قالبكَ الخاصّ فهُناكَ بعض الإرشادات التي رُبَّما عليكَ اتِّباعها من أجل بناءٍ أسهل للقالب الفرعي. الإرشادين الأهمّ هما: معرفة الفرق بين دالَّتي ()get_stylesheet_directory و()get_template_directory، وإنشاء دوال قابلة للإضافة. 1. المُجلَّد الصحيحعليك -عند الرَّبط مع مُمتلكات باستخدام الدَّوال المذكورة- أن تكون على دراية بأنَّ عائلة دوال get_template_ ستُشيرُ دائمًا إلى مُجلَّد القالب الأساسي في حين أنَّ عائلة دوال get_stylesheet_ ستُشيرُ دائمًا إلى مُجلَّد القالب الفرعي. <a href="http://twitter.com/danielpataki"><img src="<?php echo get_template_directory_uri() ?>/images/twitter.png" alt='Twitter Logo'>Follow Me</a> <a href="http://github.com/danielpataki"><img src="<?php echo get_stylesheet_directory_uri() ?>/images/github.png" alt='Github Logo'>On Github</a>في المثال أعلاه، يأخذ الرابط الأول صورته من القالب الأساسي في حين أنَّ الرابط الثاني يأخذ صورته من القالب الفرعي. ليس هُناك أفضيلة لطريقة على الأخرى، اختيار احداهما هو أمرٌ يرجع إليك. ميزة استخدام ()get_stylesheet_directory_uri هي أنَّه يُمكن لمُطوِّري القالب الفرعي استخدام صورهم الخاصَّة ويتمّ هذا ببساطة عن طريق إنشائها في الموقع المُناسب. على الجانب الآخر، إذا لم تكن الصور موجودة في القالب الفرعي فلن يتم عرضها على الإطلاق. سبب هذا هو أنَّه إذا كان القالب الفرعي مُفَعَّل فإنَّ دالَّة ()get_stylesheet_directory_uri لا تتحقَّق من (ولا تعرف) ما هو الملفّ الذي تقوم أنتَ بتحميله ولذلك فلن تقوم الدَّالَّة بالتحقُّق من وجوده أصلًا. ستقوم الدَّالَّة دائمًا بإعادة مُعرِّف الموارد المُوحَّد URI للقالب الفرعي. 2. دوال قابلة للتَّعديلالطريقة الأخرى التي عليكَ استخدامها هي ما يُسمِّيها ووردبريس دوال قابلة للإضافة. يسمح هذا لمالكي القالب الفرعي الكتابة على الدوال التي قُمتَ بتعريفها في القالب الأساسي. يشتمل هذا على إحاطة دوالّك بتأكيدات ()function_exists. لنفترض أنَّكَ قد قُمتَ بإنشاء دالَّة تُسمَّى ()my_meta لعرض بادئة تدوينة مُخصَّص. لا يوجد مجال للقالب الفرعي لتعديل هذه الدَّالَّة حيثُ أنَّه لا يُمكن تعريفها مرَّتين. حلّ المُشكلة هو إنشاء هذه الدَّالَّة إذا لم يتمّ تعريفها (تذكَّر، يتمّ تحميل ملف دالَّة القالب الفرعي أوَّلًا). if ( !is_defined( 'my_meta' ) ) { function my_meta() { // code for postmeta here } }ختامًايُمكنكَ باستخدام بعض خطوات النَّسخ واللَّصق البسيطة إنشاء بيئة مُستقبليَّة لقالبك والتي ستُبعد عنكَ الكثير من المتاعب. رغم أنَّه من المُغري استخدام مُحرِّر القالب المُدمج في ووردبريس، إلَّا أنَّه غالبًا ما يُسبِّب أخطاءً أكثر مِمَّا يحلّ في حالة عدم استخدام قالب فرعي. قُم باستغلال بعض الوقت لاتِّباع الخطوات الموجودة بهذا الدَّرس وسيكون موقعك ومُطوِّره شاكرين لفعلكَ هذا. أخيرًا، إن كان لديكَ بعض النَّصائح حول القوالب الفرعيَّة، لا تتردَّد في اعلامنا بها.