شرح القالب

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

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

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

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

القالب سيتغير حسب اللغة التي اخترتها

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

رفع القالب :

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- نحن جاهزون لتركيب القالب الأن للتسهيل سنلخص كل شيء في هذا الفيديو :

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

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

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

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

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

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

معرف (id) تطبيق الفيس بوك .
معرف (id) حساب مدير التطبيق .
رابط صفحة موقعك على الفيس بوك .
رابط حساب المؤلف على الفيس بوك

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

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

المعرف	عناصر التحكم	الوظيفة
lazy-load	تحميل بطيء للصور	[true] تحميل الصور بعد تحريك الماوس او السكرول
lazy-ads	التحميل البطيء للإعلانات	[true] تحميل إعلانات أدسنس بعد القيام بالسكرول
menu-fixed	تثبيت رأس المدونة	[true] تثبيت رأس المدونة عند السكرول
adsense-url	رابط سكربت الأدسنس	[https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890] رابط سكربت الأدسنس لإضافته بشكل تلقائي وتسريع الإعلانات اكثر (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] تشغيل وضع حماية الرابط

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

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

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

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

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

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

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

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

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

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

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

recent : عرض التدوينات الأخيرة
random : عرض تدوينات عشوئية
تسمية : عرض تدوينات من تصنيف محدد

data-no : خاصة بعدد التدوينات التي تظهر في الآداة بالنسبة لشريط الأخبار
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 - ثم تقوم بوضعه في آداة الترجمة :

آداة الكتاب :

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

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

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

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

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

المعرف	الوظيفة
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>

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

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

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

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