4.27.2017

تنظيم البيانات التلقائي للموقع سكيما Schema.org الجزاء الخامس الدرس التاسع

تنظيم البيانات بشكل تلقائي للموقع  عن طريق اكواد سكيما Schema.org
تعلمنا في الدروس السابقة  كيفية ترميز المواضيع أو محتوى الموقع

وتعلمنا من خلالها كيفية نقوم بتركيب الاكواد للموضوع بماء يناسبه
حيث أن كل موضوع يختلف عن الأخر  لذالك  كان  علينا أن نقوم بعمل ترميز
يدويا داخل الموضوع  حتى يتناسب الترميز مع الموضوع وهذا متعب بعض الشي

لأكنه يستحق العناء .
الدرس السابق :
تنظيم البيانات بأكثر من عنصر سكيما Schema.org الجزاء الرابع الدرس الثامن

وليس بضرورة أن نقوم بترميز جميع المواضيع فهذا يضيع وقتك وجهدك  وإنما يكفي أن 
نقوم بترميز المواضيع المميزة والتي نريد أن تكون في الصدارة 
إذا كنت ترى أن التميز للمحتوى أو الموضوع  يأخذ منك وقت فهناك ترميز يعمل بشكل تلقائي
وهو ما سنتعلمه في هذا الدرس
اليوم سنتعلم كيفية عمل ترميز تلقائي  للموقع  عن طريق اكواد سكيما Schema.org

الجديد هنا أو المختلف في هذا الدرس عن الدروس السابقة هو  أن الترميز سيكون ترميز تلقائي
أي انه  ترميز للموقع كامل  بكل محتوياته من أقسام ومواضيع  .... الخ
بحيث أن هذا الترميز سيجعل محركات البحث تتعرف على  الشكل العام للموقع
وكيفية ترتيب الأقسام والمحتويات بداخله  .
ولكي يكون الترميز تلقائي للموقع فأننا سنحتاج إلى تركيب هذا الاكواد  داخل القالب أو الاستايل  الخاص  

بالموقع بحيث يتم إضافة هذا الترميز بشكل أوتوماتيكي عند إضافة قسم معين أو موضوع
الترميز التلقائي غالبا يستخدم للأشياء العامة والمشتركة بين كل الكائنات
يمكننا هنا إضافة ترميز لكل موضوع  ويعمل بشكل تلقائي لكن هذا الترميز سيكون للعناصر والخواص المشتركة
بين كل المواضيع.
ما هي العناصر والخواص  المشتركة  بين مواضيع الموقع ؟
العناصر والخواص المشتركة مثلا كتالي :
عنوان الموضوع 
رابط الموضوع
مؤلف الموضوع
تاريخ الموضوع
وصف الموضوع

هذه الخواص أو العناصر مشتركة في كل موضوع فكل موضوع له عنوان ورابط وتاريخ ومؤلف ووصف
لأكن ليس كل موضوع يحتوي على صورة مثلا أو على مقطع فيديو أو على مقطع صوت
لذالك فان الترميز التلقائي يكون للعناصر والخواص  العامة والمشتركة بين كل المواضيع
هذا الترميز التلقائي يوفر عليك الوقت  والجهد لأكنه ليسئ بالكفاءة العالية للترميز اليدوي ألا في حاله واحده فقط .
وهي إذا كانت جميع مواضيع موقعك متشابه 

ماذا نقصدمتشابه ؟
لنفترض أن موقعك يختص بعرض برامج الجوال 
ففي هذا الحالة فان كل موضوع سيتكلم عن  برنامج بكل مكوناته ومميزاته
فأنت تحتاج  في كل موضوع أن تضع  الخواص التالية :
اسم البرنامج
صورة البرنامج
وصف البرنامج
حجم البرنامج
سعر البرنامج
تقيم البرنامج

هذا ما تحتاج أليه في كل موضوع دون زيادة أو نقصان سوى كان تميز يدوي أو تلقائي
إذا في هذا الحالة فان الترميز التلقائي هو الأفضل والأجدر .
هذه كانت مقدمة طويلة بعض الشي لأكنها كانت ضرورية لفهم الترميز التلقائي
التطبيق العملي :
كيفية نقوم بترميز الموقع ليعمل تلقائيا ؟
متطلبات الدرس
أولا :
عمل مدونة بلوجر:
ويتم وضع بها  على الأقل ثلاثة مواضع ويمكن أن تكتب بها أي كلام الغرض منها هو تطبيق الدرس
الأشخاص المبتدئين أو الذين ليس لديهم خلفية عن كيفية أنشاء مدونة بلوجر يمكنهم مراجعة الدرس التالي الذي يوضح
كيفية عمل مدونة بلوجر  من هنا 

ثانيا :
خلفية بسيطة في التعديل على لغة ال html :
ليسئ بالضرورة أن تكون لديك خلفية قوية في لغة ال html المهم هو أن تكون قادر على إضافة الترميز بدون أخطاء
وسيتم توضيح كيفية إضافة الاكواد
ثالثا :
يفضل أن يكون لديك برنامج لتحرير النصوص البرمجية  حتى لا تخطا في إضافة الكود
يمكنك تحميل برنامج brackets وهو من أفضل البرامج المجانية لتحرير

النصوص البرمجية برابط مباشر من هنا
رابعا :
تحميل القالب التالي واستبداله بدلا عن  القالب الأساسية للمدونة :
سأضع  رابط التحميل للقالب الذي سنقوم بتطبيق الدرس عليه وعليكم أن تقوموا بحذف القالب الأساسي للمدونة
وإضافة هذا القالب القالب هو من أنشاء مدونة أرمينيا للقوالب الاحترافية تعريب وتعديل مدونة إرباحي
وهو القالب الحالي لهذا الموقع موقع تيك سيو
قمت بإزالة اكواد الترميز لكي نقوم بإضافة الترميز معا انقر هنا لتحميل القالب برابط مباشر
ملاحظة مهمة :
في حالة أعجبك القالب وأحببت  أن تقوم بتركيبة على مدونتك فانه يمكنك التعديل على القالب حسب ما يناسبك لأكن يرجى
عدم حذف  حقوق التعريب والتطوير على هذا القالب وذالك  بحسب رغبة من قام بتعريب القالب (مدونة أرباحي) يرجى الانتباه
حفاظا على مجهود الآخرين
هذه متطلبات الدرس 
رابط المدونة التي سنقوم بتطبيق الشرح عليها :
تفضلوا هذا رابط المدونة التي سيتم تطبيق الدرس عليها انقر هنا للدخول إلى المدونة
خطوات العمل :
أولا :
قم باستبدال قالب المدونة التي أنشأتها بالقالب الذي قمت بتحميله أعلاه
ثانيا :
قم بإضافة ثلاث مواضيع على الأقل مع وضع تسمية لكل موضوع يفضل أن تعمل نفس العدد للمواضيع الموجودة في المدونة 
ونفس التسميات
ثالثا :
داخل القالب ابحث عن الكلمة التالية yyyyyyyyyy
واستبدلها برابط مدونتك
ستجد خمسة اسطر تحتوي على هذه الكلمة قم باستبدالها بشكل كامل في جميع الأسطر برابط مدونتك
شاهد الصورة


رابعا:
بعد أن تنتهي من كل هذا يفضل أن  تفتح المدونة في متصفح جوجل كروم لأننا سنستخدم جوجل كروم في درسنا
خامسا :
قم بفتح القالب الذي قمنا بإضافته في برنامج المحرر  وان  لم يوجد لديك البرنامج
فاترك قالب المدونة مفتوح للتعديل عليه
سادسا :
قم بفتح أداة اختبار البيانات المنظمة عن طريق الرابط التالي انقر هنا لفتح الأداة
وقم بنسخ رابط المدونة ووضعه في أداة اختبار البيانات المنظمة  للتتا كد بان المدونة خالية من أي ترميز
كما هو في الصورة التالية

انتهينا من تهيئة المدونة
ألان نأخذ لمحة بسيطة عن تقسيمات الموقع
طبعا كما هو معروف غالبا يتكون جسم الموقعbody 
من الأقسام التالية :
Header  -1 
الهيدر وهو الجز الذي يحتوي على عنوان الموقع والواجهة العلوية للموقع
Nav   -2  وهي القائمة التي تحتوي على أقسام الموقع للوصول السريع 
3- content  main
وهي القسم الذي يوجد به المحتوى للموقع أي الذي يوجد به الموضوع
4-  SideBar
وهو القائمة الجانبية التي قد تحتوي على المواضيع الشائعة والإعلانات الجانبية وغيرها
5 -  Footer
وهو أخر جزاء في الموقع وفيه يتم وضع حقوق الملكية وبعض الروابط والتقسيمات  وما إلى ذالك
انتهينا من شرح تقسيم الموقع
ألان حان وقت ترميز الموقع
سنبدأ بترميز القسم الأول وهو Header
قم بفتح المدونة في المتصفح
ضع مؤشر الماوس على عنوان المدونة وانقر على الزر الأيمن  للماوس ومن القائمة التالية انقر على الخيار الأخير ( فحص )
شاهد الصورة التالية

بعد أن قمت بالنقر سيتم اظهر الكود  أسفل المتصفح الذي يحتوي على نص عنوان المدونة
أعلا الكود  ستجد أن نص عنوان المدونة في وسم
<div> الذي يحتوي على  header
شاهد الصورة التالية

قبل البحث عن الوسم الرئيسي بنسخ  <div>
وهو النص التالي

<div id="header">
ملاحظة مهمة جدا :
عند البحث عن هذا السطر  في القالب لن تجده والسبب وجود علامتي التنصيب " " في المتصفح بينما في القالب توجد علامة
واحدة فقط  في كل جانب
إذن قم باستبدال علامة التنصيب  ( " )  بهذه العلامة (  '  )
ليصبح بشكل التالي

<div id='header'>

قم بنسخه بعد أن قمت بتعديله
توجه ألان إلى القالب  وانقر نقره واحدة  بزر الماوس الأيسر داخل القالب ثم من لوحة المفاتيح انقر على
Ctrl +f
سيظهر أمامك  مربع بحث الصق فيه النص ونقر على enter من لوحة المفاتيح
سيظهر أمامك السطر الذي يحتوي هذا النص في القالب
شاهد الصورة التالية


داخل هذا الوسم سنقوم بإضافة أو عنصر من عناصر سكيما  وهو عنصر WPHeader
وهو الكود التالي

itemscope='itemscope' itemtype='http://schema.org/WPHeader'
ليصبح وسم إل <div> الذي يحتوي  header
كتالي

<div id='header' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
ألان  ننقر على حفظ المظهر
شاهد الصورة التالية

إذن كما تعلمنا سابقا فان العنصر يتم وضعه في الوسم الرئيسي ويتم وضع الخواص أو العناصر المندرجة تحته في
الأوسمة الفرعية
سنقوم ألان  بوضع  خواص  لهذا العنصر وهي خاصية
الاسم name
والرابط  url
نفتح المدونة في المتصفح
كما تعودنا سابقا  نضع مؤشر الماوس على  نص  عنوان المدونة  وننقر على الزر الأيمن للماوس ونختار
الخيار الأخير فحص
ألان شاهد  أن نص  عنوان المدونة  ورابط عنوان المدونة توجد في وسم <h1>
وهو وسم ضمن الوسم الرئيسي  <div> الخاص بالهيدر header

شاهد الصورة التالية

ننسخ أول سطر من وسم <h1>
مع تعديل علامة التنصيب ( ' )
كتالي

<h1 class='title'>
ونقوم بالبحث عنه في القالب
سيكون داخل القالب بشكل التالي

<h1 class='title'>
        <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>
          <span><data:title/></span>
        </a>
      </h1>
نقوم بإضافة  خاصية الرابط داخل وسم <a>
ونقوم بإضافة خاصية الاسم داخل وسم <span>
عن طريق مصطلح الإشارة  itemprop
كما تعلمنا سابقا
ليصبح الكود بالشكل التالي

<h1 class='title'>
        <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
          <span itemprop='name'><data:title/></span>
        </a>
      </h1>

بعد التعديل ننقر على حفظ المظهر 

ألان ما قمنا به هو إضافة الخواص لعنصر ال header عندما نكون في الصفحة الرئيسية للموقع
أي أن هذه الترميز  لخواص العنصر header  خاصة فقط  بالترميز الصفحة الرئيسية
وعلينا أن نظيف هذه الخواص للعنصر header عندما نكون في صفحة المحتوى (الموضوع ) أو إحدى الأقسام
وبما أن عنصر header  يكون في كل الأحوال موجود
إذن علينا أن نضيف هذه الخواص في اكواد الموضوع
بكل بساطة قم بالنقر على إحدى روابط الموضوع للدخول أليه من المتصفح
وبنفس الخطوات السابقة
نضع مؤشر الماوس على عنوان المدونة وننقر بالزر الأيمن ونختار فحص
ملاحظة :
المؤشر على عنوان المدونة وليس عنوان  الموضوع نحن لازلنا في الهيدر
لاحظ ألان نفس الكود مع وجود اختلاف بسيط وهو أن اسم ورابط المدونة داخل وسم <h2>
بينما في الصفحة الرئيسية كان ضمن وسم <h1>
شاهد الصورة التالية

قم بنسخ السطر الأول لوسم <h2>
كتالي

<h2 class='title'>
وقم بالبحث عنه في القالب
ستجده بشكل التالي

<h2 class='title'>
        <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>
          <span><data:title/></span>
        </a>
      </h2>
ملاحظة : ستجد نفس الكود مكرر مرتين في القالب وعلينا أن نقوم بتعديل الاثنين
شاهد الصورة



 نقوم بإضافة الخواص للكوديين  كما هي في الكود السابق
ليصبح شكل الكوديين كتالي

<h2 class='title'>
        <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
          <span itemprop='name'><data:title/></span>
        </a>
      </h2>
ثم ننقر على حفظ المظهر للقالب
وبهذا نكون انتهينا من ترميز أول عنصر يعمل بشكل تلقائي  للموقع ولمحتوى الموقع
نقوم بذهاب إلى أداه اختبار البيانات المنضمة ونختبر رابط الصفحة الرئيسية
ورابط إحدى المواضيع  لنرى هل فعلا تم إضافة التميز

بعد التطبيق على مدونة اخرى  واختبارها تبين التالي
لقد تم إضافة التميز لعنصر إل header في رابط الصفحة الرئيسية
شاهد الصورة التالية

لقد تم إضافة التميز لعنصر ال header في رابط المواضيع
شاهد الصورة التالية

نتقل  إلى ترميز  القسم الثاني
ترميز ال  Nav
القسم الذي يحتوي  على أقسام الموقع ( القائمة  )
أي أننا سنقوم بتميز أقسام الموقع وهي هنا في  المدونة التي نقوم بتطبيق عليها قائمة تحتوي على 
التالي
الرئيسية – إطارات – سيارات – صيانة – ميكانيكا - محركات
ندخل على الصفحة الرئيسية للموقع
ونضع مؤشر الماوس  على المستطيل الذي بالون الأزرق والذي يحتوي على أقسام  الموقع وننقر بالزر الأيمن ونختار فحص كالعادة
لاحظ أن  القائمة موجودة  في داخل وسم <nav> وهي غير مرئية حاليا
يوجد وسم  <ul> داخل وسم <nav>
قم بفتح وسم  <ul><ul/>
شاهد الصورة التالية

لاحظ أن كل قسم من هذه الأقسام يقع أيضا داخل تاج فتح وإغلاق  لوسم
 <li><li/>
انقر على السهم الجانبي على احد أوسمة <li>
ستجد وسم<a>  داخل وسم <li>
ويوجد بداخله رابط إحدى الأقسام وأسفل منه اسم القسم
وكل هذه الأوسمة داخل الوسم الرئيسي وهو <nav>
شاهد الصورة التالية

إذن ننسخ أول سطر لوسم <nav>
وهو كتالي

<nav id='navi-arlina'>
بعد تعديل علامتي التنصيب طبعا
ألان ادخل على  قالب المدونة وابحث عن هذا السطر
ما يتم إضافة داخل هذه الوسم هو عنصر من عناصر سكيما يسمى
SiteNavigationElement
ويأتي بالشكل التالي

itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'
نقوم بإضافة داخل وسم <nav> ليصبح بشكل التالي
<nav id='navi-arlina' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
سنقوم ألان بإضافة الخواص لهذا العنصر
الخواص ستكون داخل وسم <a>  ووسم <span>
الذين يوجدان داخل وسم 

<li><li/>
أي أن كل <li> يوجد بداخله الوسم  <a>   و الوسم <span>
ويحتاج هذا القسم خاصيتين وهي أيضا
خاصية رابط القسم url

itemprop='url'
داخل وسم <a>
خاصية الاسم القسم name

itemprop='name'
داخل وسم <span>

نقوم بإضافة الترميز في كل قسم ماعدا القسم الأول الذي يحتوي على الرئيسية نتركه كما هو
بشكل التالي
قسم الرئيسية  نتركه كما هو

<li><a expr:href='data:blog.homepageUrl'>الرئيسية</a></li>
قسم الإطارات : سيكون كتالي
<li>
 <a href='https:// salemww.blogspot.com/search/label/إطارات' itemprop='url'>
 <span itemprop='name'>إطارات</span></a>
 </li>
قسم السيارات : سيكون كتالي
<li>
 <a href='https:// salemww.blogspot.com/search/label/سيارات' itemprop='url'>
<span itemprop='name'>سيارات</span></a>
 </li>
قسم الصيانة : سيكون كتالي
<li>
 <a href='https:// salemww.blogspot.com/search/label/صيانة' itemprop='url'>
<span itemprop='name'>صيانة</span> </a>
 </li>
قسم المحركات : سيكون كتالي
<li>
 <a href='https:// salemww.blogspot.com/search/label/محركات' itemprop='url'>
 <span itemprop='name'>محركات</span> </a>
 </li>
قسم الميكانيكا سيكون كتالي
<li>
<a href='https:// salemww.blogspot.com/search/label/ميكانيكا' itemprop='url'>
<span itemprop='name'>ميكانيكا</span></a>
 </li>

 بعد أن قمنا بكل التعديلات ننقر على حفظ المظهر
وبهذا نكون انتهينا من تميز ثاني عنصر من عناصر اسكيما ليعمل بشكل تلقائي
قم باختبار ما قمنا بتطبيقه على أداة اختبار البيانات المنظمة
شاهد الصورة التالية:

ألان نقوم بترميز القسم الثالث:
القسم الثالث وهو قسم content  أو main
وهو قسم مهم جدا حيث يوجد بداخله محتوى الموقع (المواضيع )
افتح رابط موضوع من مواضيع المدونة في نافذة جديدة في المتصفح
ثم ضع مؤشر الماوس على عنوان الموضوع وانقر بالزر الأيمن واختر  فحص
سيتم أظهار الوسم الذي يحتوي على عنوان الموضوع
قم بتمرير إلى أعلى داخل  الكود لمعرفة الوسم الرئيسي لهذا العنوان ستجد أن الوسم الرئيسي هو التالي

<div id='content-wrapper' role='main'>
شاهد الصورة التالية

نقوم بالبحث عن هذا السطر داخل القالب

<div id='content-wrapper' role='main'>

ونضيف أليه العنصر Blog وهو عنصر من عناصر سكيما ويعني التدوينة
ويأتي بشكل التالي

itemscope='itemscope' itemtype='http://schema.org/Blog'
تتم إضافته في الوسم الرئيسي بعد wrapper'
ليصبح الوسم بالشكل التالي

<div id='content-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
ألان حان وقت إضافة الخواص إلى هذا العنصر
أولا:
 خاصية هي خاصية  رابط الموضوع
ابحث في القالب عن الكود التالي

<meta expr:content='data:post.canonicalUrl'/>
وضع في نهايته الكود التالي
itemprop='url'
ليصبح بالشكل التالي
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
ثم قم بحفظ التغيرات
ثانيا:
 خاصية التاريخ  datePublished
قم بوضع مؤشر الماوس على التاريخ ونقر بالزر الأيمن واختر فحص
ستجد التاريخ داخل وسم <abbr>
الذي يبدءا بشكل التالي قم بنسخ هذا الكود وابحث عنه في القالب

<abbr class='published updated'
داخل وسم <abbr> في القالب ستجد الكود التالي
<abbr class='published updated' expr:title='data:post.timestampISO8601' >

شاهد الصورة التالية
  خاصية التاريخ ستكون كتالي
itemprop='datePublished'
يتم وضعها في نهاية وسم <abbr> ليصبح كود الوسم بشكل التالي

<abbr class='published updated' expr:title='data:post.timestampISO8601' itemprop='datePublished'>

احفظ التغيرات
ثالثا :
خاصة المؤلف author :
طبعا لكل تدوينه مؤلف  بلا شك
وعلينا أن نضيف خاصية المؤلف لأكن خاصية المؤلف لا يتم إضافتها في عنصر Blog مباشرة
لأنها ليست من خواصها
وإنما خاصية المؤلف author هي من خواص عنصر الشخص Person
كما شرحنا ذالك في الدروس السابقة
لذالك علينا أن  نضيف عنصر الشخص Person إلى عنصر المدونة Blog
بحيث يكون عنصر الشخص  Person مندرج ضمن عنصر Blog وخاصية من خواص عنصر Blog
وأيضا شرحنا في الدرس السابق كيفية أدراج العناصر ضمن عنصر واحد
طيب نعود إلى موضوعنا
على نفس الموضوع في المتصفح  نضع مؤشر الماوس على اسم المؤلف وننقر بالزر الأيمن للماوس ونختار فحص
سوف يظهر أمامنا الكود الذي يحتوي على اسم المؤلف
نبحث عن الوسم الرئيسي الذي يوجد به  اسم الموضوع
وهو الوسم التالي

<span class='author-info'>
شاهد الصورة التالية

ألان قم بنسخ الوسم الرئيسي وابحث عنه في  القالب
ستجد أنه موجود مرتين في القالب  وعلينا ترميز الاثنين
سنبدأ بالكود الأول
وهنا أرجو التركيز والانتباه  جيدا   في الخطوات التالي
 الوسم الرئيسي الذي قمنا بالبحث عنه في القالب هو وسم <span>
كتالي

<span class='author-info'>
وهذا الوسم له تاج فتح وتاج إغلاق  لذالك علينا معرفة تاج الإغلاق لهذا الوسم

نرجع إلى المتصفح لمعرفة تاج الإغلاق

</span>
ستجد أن بين تاج الفتح وتاج الإغلاق يوجد وسم <a>
وبداخله بيانات المؤلف
اسم المؤلف ورابط الملف الشخصي
شاهد الصورة
 

لأكن إذا ذهبنا إلى القالب سنجد هناك اختلاف بين الكود الموجود في المتصفح والكود الموجود في القالب
حيث انه في القالب لا يوجد أي بيانات تخص المؤلف عدا كلمة (المؤلف) فقط

بشكل التالي


<span class='author-info'>
             
             

                المؤلف&amp;nbsp;-&amp;nbsp;
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
 شاهد الصورة التالية للكود الاول والثاني داخل القالب

سنبدأ بترميز الكود الأول
تحت السطر الأول مباشرة نضيف وسم <span> جديد
ليصبح بشكل التالي

<span class='author-info'>
<span>
                المؤلف&amp;nbsp;-&amp;nbsp;
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>

ثم داخل  تاج الفتح  لوسم <span> الجديد نضيف عنصر الشخص Person
والشخص هنا هو مؤلف لذالك يتم إضافة خاصية المؤلف author في بداية كود العنصر
بشكل التالي

itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'

بعد أن نضيفه إلى الوسم سيصبح كتالي
<span class='author-info'>
<span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                المؤلف&amp;nbsp;-&amp;nbsp;
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>

قبل أن نضع تاج الإغلاق لوسم 
</span>
علينا إضافة خاصية اسم المؤلف name داخل الكود
فما هو السطر التي يتم إضافة هذا الخاصية بداخله ؟
هناك كود بداخل هذا الكود يقوم بإضافة اسم المؤلف إلى الموضوع
وهو الكود التالي

                  <data:post.author/>
علينا وضعه داخل وسم <span>
لنتمكن من أضافه خاصية الاسم
ليصبح بعد إضافة الوسم والخاصية بشكل التالي

<span itemprop='name'><data:post.author/></span>

ألان نقوم بإضافة تاج الإغلاق لوسم <span>   الجديد ونقوم بوضعه قبل تاج الإغلاق لوسم <span> الرئيسي
بحيث يكون فوقه مباشرة
بشكل التالي

              </span>
              </span>
سيصبح الكود بعد ترميزه بما ذكر أعلاه بشكل كامل كتالي
<span class='author-info'>
<span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                المؤلف&amp;nbsp;-&amp;nbsp;
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
                </a>
              </span>
              </span>
انتهينا من تميز الكود الأول
الكود الثاني
وهو موجود في القالب تحت الكود الأول مباشرة
كما هو موضح في الصورة السابقة
بشكل التالي

<span class='author-info'>
         <i class='fa fa-user'/>
     المؤلف&amp;nbsp;-&amp;nbsp;
                  <data:post.author/>
              </span>
في الكود الثاني لا نحتاج لإضافة عنصر الشخص Person
فقط ما علينا القيام به هو
إضافة خاصية الاسم name إلى الكود وذالك بإضافة وسم <span>
إلى كود الاسم بشكل التالي

<span itemprop='name'><data:post.author/></span>
ويصبح الكود الثاني بعد التميز بشكل كامل  كتالي
<span class='author-info'>
         <i class='fa fa-user'/>
     المؤلف&amp;nbsp;-&amp;nbsp;
<span itemprop='name'><data:post.author/></span>
              </span>

 نقوم بحفظ المظهر
وبهذا نكون قد انتهينا من ترميز القسم الثالث وهو content  main

 تميز  القسم الرابع هو SideBar القائمة الجانبية
بنسبه للمدونة الحالية التي نقوم بتطبيق الدرس عليها فلا يوجد  في القائمة الجانبية ما يحتاج إلى تميز يوجد بها
الأقسام والمواضيع الشائعة وسبق أن قمنا بترميزها في الهيدر لذالك لا نحتاج إلى إضافة أي خواص فقط سنقوم بوضع عنصر
القائمة الجانبية في الوسم الرئيسي  بحيث نستطيع إضافة خواصه في حالة احتجنا إلى ذالك
قم بوضع مؤشر الماوس في القائمة الجانبية التي في الجهة اليسرى للمدونة  والتي تحتوي على
مربع البحث والأقسام والمشاركات الشائعة ونقر بالزر الأيمن واختر فحص
سيظهر أمامك الوسم الرئيسي للقائمة الجانبية sidebar
وهو بشكل التالي
<div id='sidebar-wrapper'>
قم بنسخة وابحث عنه في القالب وقم بإضافة عنصر سكيما الخاص بالقائمة الجانبية WPSideBar
وهو بشكل التالي
itemscope='itemscope' itemtype='http://schema.org/WPSideBar'
ضعه داخل الوسم ليصبح بشكل التالي
<div id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>

ثم احفظ المظهر
انتهينا من القسم الرابع
نتقل إلى القسم الخامس والأخير وهو قسم  Footer
تميز القسم الخامس  ال Footer هو  دائما يكون القسم الأخير للموقع
لذالك  يضع الكثير من المبرمجين أو المصممين للمواقع  بداخل هذا القسم  مجموعة  من المعلومات والروابط الإضافية
وحقوق النشر وغيرها ما علينا نذهب لفحص القسم
ونرى ما يجب علينا فعله
كما كل مره نضع مؤشر الماوس في  أسفل الصفحة الرئيسية للمدونة تحديدا المنطقة ذات ألون الأزرق الغامض
والذي تحتوي على إعلان والأرشيف
وننقر على الزر الأيمن للماوس ونختار فحص
بما أن هذا القسم اسمه  Footer فعلينا أن نبحث على الوسم الرئيسي الذي يحمل اسم Footer
ستجده بشكل التالي
<footer id='footer-wrapper'>
قم بنسخ السطر وابحث عنه في القالب
نقوم بإضافة عنصر سكيما الخاص بهذا القسم   إلي هذا الوسم
وهو العنصر التالي
itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
ليصبح الوسم الرئيسي بشكل التالي
<footer id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
ما هي الخواص التي سنحتاج إلى تركيبها داخل قسم Footer
حقوق النشر داخل هذا القسم تحتاج إلى تميز وبما أن الحقوق هي خاصة لشخص أو لعدت أشخاص فأننا سنحتاج إلى
عنصر الشخص Person نقوم بإدراجه ليصبح ضمن خواص  عنصر WPFooter
لأكن هذه المرة لا يحمل خاصية المؤلف author وإنما يحمل خاصية الحقوق creator للموقع
نضع مؤشر الماوس على أخر الموقع حيث توجد العبارة التالية
( جميع حقوق النشر محفوظة لدى مدونة تعليمية )
في هذا المنطقة بتحديد نضع مؤشر الماوس وننقر الزر الأيمن ونختار فحص
ستجد ان هذه العبارة موجودة  داخل الوسم الرئيسي  التالي
<div class='cpleft'>

وبداخل الكود التالي
انسخ هذا الكود وابحث عنه في القالب
عند البحث عنه داخل القالب 
ستجد ان داخل هذا الوسم يوجد وسم <a>
بشكل التالي
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
داخل وسم <a> سنضيف عنصر Person
بشكل التالي
itemprop='creator' itemscope='itemscope' itemtype='http://schema.org/Person'
ليصبح شكل الكود كتالي
<a expr:href='data:blog.homepageUrl' itemprop='creator' itemscope='itemscope' itemtype='http://schema.org/Person'>

ثم أسفل هذا الكود وفي نفس وسم <a> ستجد السطر التالي
<data:blog.title/>
ضع هذا السطر بين وسم تاج وإغلاق لوسم <span>
ليصبح بشكل التالي
<span ><data:blog.title/></span>
ثم داخل تاج الفتح لوسم <span>
نضع خاصية الاسم name
بشكل التالي
<span itemprop='name'><data:blog.title/></span>
حيث يكون شكل الكود بعد التميز بشكل التالي
<a expr:href='data:blog.homepageUrl' itemprop='creator' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:blog.title/></span></a>
وبهذا نكون انتهينا من التميز التلقائي  للموقع بشكل كامل
ألان قم باختبار رابط الموقع ورابط  المواضيع في أداه اختبار البيانات المنظمة لتأكد من جميع العناصر وعدم وجود أي أخطاء 

شاهد الصورة التالية بعد أختبار القالب بشكل كامل
وبهذا الدرس أعزائي متابعي موقع تيك سيو نكون قد انهينا الدروس الخاصة بترميز البيانات عن طريق اكواد  سكيما Schema.org
وسنتقل بإذن الله في الدرس القادم إلى الترميز بطريقة أخرى من الطرق المعتمدة لدى محركات البحث
حتى ذالك الحين أترككم في حفظ الله ورعايته إلى أن نلتقي في درسنا القادم
إي استفسار أو إشكالية يمكنك أن تضيف  تعليق لنتمكن من مساعدتك  في حل الإشكالية
تحياتي

0 التعليقات

إرسال تعليق