تركيب القالب : 

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

إختيار اللغة :

  1. إقتح واجهة بلوجر و اتجه لقسم .
  2.  إختر اللغة التي تعمل به (االلغات الإفتراضية  الموجودة في القالب هي العربية - الإنجليزية - الفرنسية - الألمانية ).
القالب سيتغير حسب اللغة التي اخترتها 

ملاحظة!
هناك بعض الكلمات التي يجب تغييرها يدويا في مثل نصوص رسائل المدونة الإلكترونية و صفحة تحويل الروابط.


رفع القالب :

1-  قُم بأخذ نسخة احتياطية للقالب الحالي في المدونة من خلال الذهاب إلى في الشريط الجانبي ومن ثم الضغط على السهم بجانب زر وثم على "الاحتفاض بنسخة احتياطية". 


2-  ثم قم بالضغط على خيار وقم بحدف جميع الأكواد الموجودة، وضع مكانها قالب التنظيف :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.3.3' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:attr expr:value='data:view.isSingleItem ? &quot;og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#&quot; : &quot;og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#&quot;' name='prefix'/>
  <b:skin><![CDATA[
  /* -----------------------------------------------
  Name : Cleaning Template
  Designer URL : https://qawa3id.com/
  year     : 2024
  ----------------------------------------------- */
  ]]></b:skin>
</head>
<body>
	<b:section class='main' id='main' showaddelement='yes'/>
</body>
</html>

3- نحن جاهزون لتركيب القالب الأن للتسهيل سنلخص كل شيء في هذا الفيديو :

تفعيل القالب :

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


تجهيز أكواد الميتا :

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

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

 المكتوب أعلاه  <!-- Meta Codes -->   ما تحت هذا العنوان هو ما ستقوم بملء محتواه والضغط على زر الحفظ كالتالي :


  1. معرف (id) تطبيق الفيس بوك .

  2. معرف (id) حساب مدير التطبيق .

  3. رابط صفحة موقعك على الفيس بوك .

  4. رابط حساب المؤلف على الفيس بوك


إعدادات القالب :

نقوم الآن بضبط إعدادات القالب الموجودة في حيث يمكنك التحكم في العديد من العناصر في القالب من خلال تعليمات بسيطة و هي إما " true " لتشغيل الميزة أو " false "لإيقافها يوضح الجدول التالي كل ميزة ووضيفتها :

المعرف عناصر التحكم الوظيفة
lazy-load تحميل بطيء للصور [true] تحميل الصور بعد تحريك الماوس او السكرول
speed-first تحميل أكواد القالب بدون تمرير [true] تحميل أكواد القالب بدون تمرير
lazy-ads التحميل البطيء للإعلانات [true] تحميل إعلانات أدسنس بعد القيام بالسكرول
menu-fixed تثبيت رأس المدونة [true] تثبيت رأس المدونة عند السكرول
auto-ads تحميل سكربت الأدسنس تلقائيا [true] إضافة رابط سكربت الأدسنس بشكل تلقائي وتسريع الإعلانات اكثر (false : إبطال الإعلانات)
comment-system نظام الإعلانات [blogger - disqus - facbook] إختيار نظام التعليقات في مدونتك حاليا يمكن تفعيل نظام واحد للتعليقات للحفاظ على السرعة
disqus-id معرف disqus معرف disqus الذي تحصل عليه في الموقع ، تضع هذا المعرف إذا كنت تستعمل نظام تعليقات disqus
support-webp دعم صيغة الصور webp [true] تشغيل دعم تحويل الصور إلى صيغة webp.
img-appear تأثير ظهور الصور [zoomin - fade - zoomout - rotate - blur] تأثير او Amimation التي تحدث عند ظهور الصور
spinner إضهار preloader إضهار preloader خلال تحميل المدونة
darkmode-button إضهار زر الوضع المظلم [true] إضهار زر الوضع المظلم في الهيدر
bookmark-button إضهار زر المقالات المفضلة [true] إضهار زر المقالات المفضلة في الهيدر و المقالات
show-article-settings إضهار إعدادات المقال [true] تشغيل إعدادات المقال مع كل الخصائص المتعلقة بها
show-scrollTop إضهار زر الصعود لأعلى [true] إضهار زر الصعود لأعلى
show-post-navigation إضهار التنقل بين المقالات [true] تشغيل خاصية التنقل بين المقالات
show-author إضهار آداة الكاتب [true] إضهار آداة الكاتب أسفل المقال
related-style تصميم آداة المواضيع ذات صلة [slider - grid - list] إختيار تصميم لأداة المواضيع ذات صلة من بين 3 تصاميم مختلفة
show-related تشغيل آداة مواضيع ذات صلة [true] تشغيل آداة مواضيع ذات صلة أسفل المقال
max-related العدد الأقصى للمقالات العدد الأقصى للمقالات في آداة المواضيع ذات صلة
see-also تشغيل آداة إقرأ أيضا [true] تشغيل آداة إقرأ أيضا في صفحة المقال
read-also-position مكان آداة إقرأ أيضا [top - mid - bot] إختر واحدة من القيم التالية لتغيير مكان اللآداة
toc تشغيل آداة جدول المحتويات [true] تشغيل آداة جدول المحتويات
no-select إيقاف خاصية النسخ [true] إيقاف خاصية النسخ لمنع سرقة المحتوى
no-mouse إيقاف الزر الأيمن للماوس [true] إيقاف الزر الأيمن للماوس
invert-logo عكس ألوان اللوجو [true] عكس ألوان اللوجو في الوضع المظلم (خاصية في مرحلة التجريب)
activate-redirect تشغيل خاصية تحويل الروايط [true] تشغيل خاصية تحويل الروايط
redirect-page رابط صفحة تحويل الروابط [URL] رايط صفحة الروابط التي قمت بإنشائها ووضع الكود الخاص بها
redirect-text-Configure النص الدي يظهر خلال عملية التحميل [جاري تهيئة الرابط] النص الدي يظهر خلال عملية التحميل حتى إنتهاء الوقت
redirect-text-ready النص الدي يظهر عند اكتمال التحميل [الرابط جاهز] النص الدي يظهر عند اكتمال التحميل
redirect-text-err النص الدي يظهر في حال عطب الرابط رأو عدم وجوده [رابط معطل] النص الدي يظهر في حال عطب الرابط رأو عدم وجوده
redirect-timer الوقت الدي تأخده صفحة التحويل لتحميل الرابط [15] الوقت الدي تأخده صفحة التحويل لتحميل الرابط
redirect-block-site المواقع أو النطاقات التي لا تريد إشتغال صفحة تحويل الروابط عليها [google.com,facebook.com] المواقع أو النطاقات التي لا تريد إشتغال صفحة تحويل الروابط عليها
redirect-popup إضهار موقت تحويل الروابط في نافذة [true] إضهار موقت تحويل الروابط في نافذة بدل إضهاره في الصفحة
redirect-protection تشغيل وضع حماية الرابط [true] تشغيل وضع حماية الرابط

تغيير نوع الخط و الأيقونات :

يمكنك تغيير نوع الخط و الأيقونات عن طريق :

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

بالنسبة لنوع الأيقونات هناك خياران فقط 1 أو 2 أما نوع الخط فهناك 5 خطوط عربية و 4 خطوط لاتينية كالتالي :

الرقم نوع الخط اللغة المدعومة
1 tajawal عربي
2 cairo عربي
3 changa عربي
4 elmessiri عربي
5 almarai عربي
6 poppins لاتينية
7 changa لاتينية
8 outfit لاتينية
9 montserrat لاتينية


عناصر القالب :

سنشرح هنا جميع العناصر الموجودة في  

القائمة الرئيسية :

إضافة ميجا مينيو : 

لعرض ميجا مينيو تحت رابط رئيسي يتم إضافة [mega] مع عنوان الرابط ، ثم الرابط الرئيسي.

إضافة عنصر فرعي : 

لعرض قائمة فرعية تحت رابط رئيسي يتم إضافة   _   قبل عنوان الرابط ، ثم ترتيب الروابط باستخدام الأسهم الصغيرة بالجانب الأيسر لجعل الروابط الفرعية أسفل الرابط الرئيسي.

إضافة عنصر فرعي في المستوى الثاني :

لعرض قائمة فرعية تحت رابط فرعي يتم إضافة  __  قبل عنوان الرابط ، ثم ترتيب الروابط باستخدام الأسهم الصغيرة بالجانب الأيسر لجعل الروابط الفرعية أسفل الرابط الفرعي.

رسائل المدونة الإلكترونية :

أدخل على التخصيص و تعديل المظهر بالضغط على و انتقل في الإعدادات المتقدمة إلى المشاركات حيث يمكنك تغيير تصميم عرض آخر المشاركات عن طريق تغيير العدد في Post Number by line : 


السلايدر الرئيسي و شريط الأخبار :



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

  •   recent   : عرض التدوينات الأخيرة 
  •   random   : عرض تدوينات عشوئية
  •   تسمية   : عرض تدوينات من تصنيف محدد 
  1. data-no : خاصة بعدد التدوينات التي تظهر في الآداة بالنسبة لشريط الأخبار 
  2. data-slider : لتفعيل السلايدر او إبطاله بالنسبة للسلايدر الرئيسي (  yes  ) لتفعيل السلايدر و  (  no  ) لإبطاله.

الأقسام الرئيسية :

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

قائمة الروابط :

إضافة إلى التصميم الإفتراضي تأتي قائمة الروابط مع 4 تصاميم مختلفة لخدمة جميع احتياجات مدونتك ، لتطبيق هاته التصاميم يجب أن تظيف الأكواد القصيرة الخاصة بكل تصميم في عنوان الآداة :


[List2] :

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


[ACC] :

يسمح هذا الشكل بإضافة أكورديون كالتالي :


[GAL][2] :

عند إضافة هذا الشكل يمكنك إضافة معرض للصور حيث يرمز الرقم لعدد الصور في سطر واحد مثل آداة رسائل المدونة الإلكترونية :


[SOC] :

تمكنك هاته الآداة من إضافة أيقونات التواصل الإجتماعي ، حيث يمكنك تطبيق جميع أيقونات التواصل الموجودة على هاته القائمة:
  • facebook
  • linkedin
  • twitter
  • telegram
  • tumblr
  • youtube
  • whatsapp
  • pinterest
  • behance
  • flickr
  • blogger
  • wordpress
  • skype
  • instagram
  • google-play
  • reddit
  • google-news
  • tiktok
  • discord
  • quora
  • khamsat
  • mostaql
  • tradent
  • kafil
  • paypal
  • dribbble
  • twitch
  • facebook-messenger
  • snapchat
  • shopify
  • x-twitter

المشاركات الرائجة :

تمتلك هاته الآداة 3 تصاميم 2 منهم من التصاميم التلقائية لإضهار التصميم الثالث كل مع عليك فعله هو إضافة  [FeaturedAlt]   لعنوان الآداة و تفعيل "عرض صورة مصغّرة للمشاركات"  :


آداة الترجمة :

في حال أردت تخصيص لغة غير مضمنة في القالب كل  ما عليك فعله هو
1 -  ترجمة النموذج التالي للغة التي تريدها :


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

2 - ثم تقوم بوضعه في آداة الترجمة :


آداة الكتاب :

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

  1. إضافة رتبة أو وظيفة الكاتب في المدونة.

  2. إضافة روابط الصفحات الشخصية للكاتب على مواقع التواصل الاجتماعي.

  3. إضافة وحدات اعلانية مستقلة لكل كاتب تظهر في تدويناته فقط.

لإضافة كاتب جديد أضف آداة قائمة الروابط في نفس القسم 

ثانياً - نقوم بكتابة أسم المؤلف في خانة العنوان ، ولابد أن يكون أسم المؤلف المكتوب في العنوان متطابق مع أسم المؤلف في المدونة من حيث الهمزات والنقاط والمسافات...إلخ .



ثالثا - نقوم بإستخدام الإدخالات التالية لإضافة محتوى الأداة الخاصة بالكاتب :


المعرف الوظيفة
rank رتبة الكاتب في المدونة
about نبذة عن الكاتب
top-ad شفرة إعلانية تظهر في بداية جميع مقالات هذا المؤلف
mid-ad شفرة إعلانية تظهر في منتصف جميع مقالات هذا المؤلف
bot-ad شفرة إعلانية تظهر في نهاية جميع مقالات هذا المؤلف
str-ad شفرة إعلانية تظهر قبل عنوان جميع مقالات هذا المؤلف
pgn-ad شفرة إعلانية تظهر بعد أزرار تقسيم المقال في جميع مقالات هذا المؤلف
rlt-ad شفرة إعلانية تظهر قبل المقالات المشابهة في جميع مقالات هذا المؤلف
cmt-ad شفرة إعلانية تظهر قبل التعليقات في جميع مقالات هذا المؤلف
end-ad شفرة إعلانية تظهر أسفل التعليقات في جميع مقالات هذا المؤلف

كذلك يمكن إدخال اسم اي موقع تواصل اجتماعي بحروف انجليزية صغيرة مثال facebook اوtwitter او instagram



الأكواد القصيرة :

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

تحويل الروابط :

<div id="pageredirect"></div>

إتصل بنا :

<div id="qawa3id-contact-form"></div>

تشغيل تعليقات Disqus :

عند إضافة هذا الكود ستتمكن من تشغيل تعليقات disqus في المقالة التي أضفت فيها الكود فقط.

<div id="qw-disqusCmnt"></div>

تشغيل تعليقات Facebook:

عند إضافة هذا الكود ستتمكن من تشغيل تعليقات Facebook في المقالة التي أضفت فيها الكود فقط.

<div id="qw-fbCmnt"></div>

مقالة بدون شريط جانبي :


<div id="qw-widepost"></div>

تقسيم المقال (تقسيم مرقم) :

<--->

تقسيم المقال :

<><>

عداد الخطوات :


  <ol class="step noList">
  <li>لوريم إيبسوم (Lorem Ipsum) هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) تفعل في صناعن شعدر الوطاب. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر عندما قامت بمهمة مجهولة برص مجموعة من الأحرف بشكل عشوائي أخذتها من نص</li>
  <li>لوريم إيبسوم (Lorem Ipsum) هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) تفعل في صناعن شعدر الوطاب. كان لوريم إيبسوم ولايزال المعيار</li>
  <li>لتكون كتيب بمثابة دليل أو مرجع شكلي لهذه الأحرف. خمسة قرون من الزمن لم تقضي على هذا النص ، بل انه حتى صار مستخدماً وبشكله الأصلي في الطباعة والتنضيدنيو.</li>
  <li>لتكون كتيب بمثابة دليل أو مرجع شكلي لهذه الأحرف. خمسة قرون من الزمن لم تقضي على هذا النص ، بل انه حتى صار مستخدماً وبشكله الأصلي في الطباعة والتنضيدنيو.</li>
</ol>

مقولة أو اقتباس مع معلومات صاحبها:


    <blockquote class="style-2">
  المقولة
  <div class="block-author">
    <div class="block-img">
      <img alt="المؤلف" data-src="صورة صاحب المقولة"/>
    </div>
    <div class="block-info"><span class="block-name">إسم صاحب المقولة</span><span class="block-desc">وصف صاحب المقولة</span></div></div>
</blockquote>

جدول :

يستعمل لعرض أكواد مختلفة في مساحة خاصة :

  <div class="table">  
  <table>    
    <thead>
      <tr>        
        <th>بيانات</th>
        <th>بيانات</th>
        <th>بيانات</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>بيانات</td> 
        <td>بيانات</td>
        <td>بيانات</td>
      </tr>
    </tbody>
  </table>
</div>

صور متقابلة :

تمكنك من عرض مجموعة من الصور بطريقة مناسبة لجميع الشاشات دون التأثير على سرعة المدونة.


<div class="gridImage">

  <!-- [الصورة] -->
  <div class="PLHolder">
    <img alt="تعريف بسيط لمحتوى الصورة" data-src="رابط الصورة" />
  </div>
  <!-- [أعد تركيب هذا الجزء حسب عدد الصور التي تريد إضافتها] -->

  </div>
</div>

معرض الأكواد البرمجية :

يستعمل لعرض أكواد مختلفة في مساحة خاصة :

  <pre><code>أكواد برمجية</code></pre>

الرسائل:

ملاحظة :


  <p class="note">محتوى الرسالة</p>

إنذار!


  <p class="note noteAlert">محتوى الرسالة</p>

مبارك


  <p class="note noteGift">محتوى الرسالة</p>

تحذير!


  <p class="note noteWarning">محتوى الرسالة</p>

الأزرار :


  <a class="button" href="هنا تضع الرابط">زر عادي</a>
  

  <a class="button outline" href="هنا تضع الرابط">زر عادي</a>

تحميل:


  <a class="button" href="هنا تضع الرابط">تحميل<i class="icon download"></i></a>

معاينة :


  <a class="button" href="هنا تضع الرابط">معاينة<i class="icon demo"></i></a>

جوجل نيوز :


  <a class="button outline" href="هنا تضع الرابط" target="_blank">إنظم إلينا في جوجل نيوز<svg class='icon fa-google-news'><use xlink:href="#ic-google-news"></use></svg></a>

تبرع :


  <a class="button donation" href="هنا تضع الرابط">تبرع<i class="icon donation"></i></a>

شراء :


  <a class="button" href="هنا تضع الرابط">شراء<i class="icon cart"></i></a>

تواصل في الواتساب :


  <a class="button whatsapp" href="هنا تضع الرابط">إتصل بي<i class="icon whatsapp"></i></a>

تحميل و معاينة :


  <div class="buttonInfo">
  <a class="button" href="هنا تضع الرابط">تحميل<i class="icon download"></i></a>
  <a class="button outline" href="هنا تضع الرابط">معاينة</a>
</div>

تحميل ملف :


  <div class="downloadInfo">
  <span class="fileType" data-text="لاحقة الملف (zip , rar ....)"></span>
  <div class="fileName">
    <span>إسم الملف.zip</span>
    <span class="fileSize">حجم الملف</span>
  </div>

  <a aria-label="تحميل" class="button fileLink" href="رابط تحميل الملف"><i class="icon download"></i></a>
</div>

أكورديون :


<div class="accordion">
  <div class="accordion-head"><i class="accorIcon"></i>سؤال</div>
  <div class="accordion-body" style="">لوريم إيبسوم (Lorem Ipsum) هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) تفعل في صناعن شعدر الوطاب. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر عندما قامت بمهمة مجهولة برص مجموعة من الأحرف بشكل عشوائي أخذتها من نص ، لتكون كتيب بمثابة دليل أو مرجع شكلي لهذه الأحرف. خمسة قرون من الزمن لم تقضي على هذا النص ، بل انه حتى صار مستخدماً وبشكله الأصلي في الطباعة والتنضيدنيو.</div>
  <div class="accordion-head"><i class="accorIcon"></i>سؤال</div>
  <div class="accordion-body" style="">لوريم إيبسوم (Lorem Ipsum) هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) تفعل في صناعن شعدر الوطاب. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر عندما قامت بمهمة مجهولة برص مجموعة من الأحرف بشكل عشوائي أخذتها من نص ، لتكون كتيب بمثابة دليل أو مرجع شكلي لهذه الأحرف. خمسة قرون من الزمن لم تقضي على هذا النص ، بل انه حتى صار مستخدماً وبشكله الأصلي في الطباعة والتنضيدنيو.</div>
</div>

كلمة من المطورين :

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

شكرا لشرائك قالب قواعد ويب ، تحياتنا.