جميع أكواد ومكونات وإضافات واجهة مستخدم قالب Plus UI

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

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

ملاحظة: العديد من هذه الميزات تعمل فقط في وضع HTML، ولا تعمل عند التبديل إلى وضع "الكتابة العادي".

1. في صفحة تحرير المقال، ابحث عن أيقونة ⋯ (النقاط الثلاث) في الزاوية اليمنى السفلية من العنوان.
2. اضغط عليها لتظهر لك خيارين: عرض HTML وعرض الكتابة.
3. اختر عرض HTML لرؤية الكود المصدري للمقال.
4. الصق الكود الذي تريده في المكان المناسب من المقال.
5. يمكنك الآن تعديل الكود حسب احتياجاتك.

نصيحة: احفظ نسخة احتياطية من مقالك قبل التعديل على كود HTML لتجنب أي أخطاء غير متوقعة.

تنسيق الفقرات في قالب Plus UI

يقدم قالب Plus UI عدة خيارات متقدمة لتنسيق الفقرات، مما يتيح لك إنشاء محتوى جميل ومنظم. فيما يلي أهم أنواع الفقرات المدعومة:

1. الفقرات العادية

استخدم العلامة <p> لإضافة فقرات أساسية إلى مقالتك:

<p>هذه فقرة عادية</p>

2. فقرات بمسافة بادئة

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

<p class='pIndent'>هذه فقرة بمسافة بادئة للسطر الأول</p>

3. فقرات بحرف كبير منسدل

إضافة حرف زخرفي كبير في بداية الفقرة:

<p><span class='dropCap'>ح</span>رف كبير منسدل في بداية الفقرة</p>

ملاحظة: الحرف المنسدل يعمل بشكل أفضل مع الفقرات الطويلة.

4. فقرات المراجع والمصادر

مثالية لعرض المصادر والمراجع في نهاية المقال:

<p class='pRef'>المصدر:<br> www.example.com</p>

1. حدد نوع الفقرة المناسب لمحتواك
2. انسخ الكود المطلوب
3. الصقه في محرر HTML
4. استبدل النص المثال بالنص الخاص بك

يوفر قالب Plus UI كل هذه الخيارات لتتمكن من إنشاء محتوى غني ومتنوع يلائم مختلف أنواع المقالات والتدوينات. جرب هذه الأنماط المختلفة لاكتشاف ما يناسب أسلوبك الكتابي.

جرب هذه الأنماط المختلفة لاكتشاف ما يناسب أسلوبك الكتابي.

تخصيص وعرض الصور في قالب Plus UI

يقدم قالب Plus UI عدة طرق متقدمة لعرض الصور، مما يتيح لك إنشاء معارض صور احترافية وتفاعلية. فيما يلي أهم الخيارات المتاحة:

1. الصور القياسية

عرض صورة أساسية بدون تأثيرات إضافية:

<img class='full' alt='وصف_الصورة' width='1280' height='720' src='رابط_الصورة'/>

ملاحظة: إضافة class='full' تزيل الهوامش الأفقية وتجعل الصورة متجاوبة مع جميع أحجام الشاشات.

2. الصور مع التعليقات التوضيحية

طريقتان لعرض الصور مع تعليقات:

الطريقة الأولى (مدعومة من بلوجر):

<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='وصف_الصورة' src='رابط_الصورة'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>تعليق_الصورة_هنا</td>
    </tr>
  </tbody>
</table>

الطريقة الثانية (HTML5):

<figure>
  <img alt='وصف_الصورة' src='رابط_الصورة'/>
  <figcaption>تعليق_الصورة_هنا</figcaption>
</figure>

3. الصور مع تأثير Lightbox

تتيح تكبير الصورة عند النقر عليها:

<div class="zmImg" data-text="عنوان الصورة عند التكبير">
  <img alt='وصف_الصورة' src='رابط_الصورة'/>
</div>

تحذير: لإلغاء تأثير Lightbox لصورة معينة، أضف السمة data-lightbox='false'

4. معرض الصور الشبكي

عرض عدة صور في تنسيق شبكي منظم:

<div class='psImg grImg'>
  <img alt='وصف_الصورة' src='رابط_الصورة'/>
  <img alt='وصف_الصورة' src='رابط_الصورة'/>
  <img alt='وصف_الصورة' src='رابط_الصورة'/>
</div>

5. الصور مع زر "إظهار الكل"

إخفاء بعض الصور وعرضها عند الطلب:

<input hidden class='inImg' id='hideImg1' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='وصف_الصورة' src='رابط_الصورة'/>
  <div class='btImg'>
    <label for='hideImg1'>إظهار الكل</label>
  </div>
  <div class='psImg shImg'>
    <img alt='وصف_الصورة' src='رابط_الصورة'/>
    <img alt='وصف_الصورة' src='رابط_الصورة'/>
  </div>
</div>

6. الصور مع تخطيط التمرير

عرض الصور في سلسلة قابلة للتمرير:

<div class='glImg'>
  <img alt='وصف_الصورة' src='رابط_الصورة'/>
  <img alt='وصف_الصورة' src='رابط_الصورة'/>
  <img alt='وصف_الصورة' src='رابط_الصورة'/>
</div>

7. التحميل البطيء للصور

تحسين سرعة الصفحة بتأجيل تحميل الصور:

<img class='lazyload' alt='وصف_الصورة' data-src='رابط_الصورة' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

نصيحة: لا تستخدم التحميل البطيء للصورة الأولى في المقالة لتحسين تجربة المستخدم.

1. اختر نوع عرض الصورة المناسب
2. انسخ الكود المطلوب
3. الصقه في محرر HTML
4. استبدل القيم النموذجية ببياناتك
5. احفظ التغييرات واختبر النتيجة

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

أشكال الروابط والأزرار في قالب Plus UI

يقدم قالب Plus UI مجموعة متنوعة من أنماط الروابط والأزرار التي تساعدك في تحسين تجربة المستخدم وتوجيه الزوار. فيما يلي الخيارات المتاحة:

1. الروابط الخارجية

تمييز الروابط التي تؤدي لمواقع خارجية لإعلام المستخدمين:

رابط خارجي عادي: زيارة الموقع

رابط خارجي بديل: رابط بديل

رابط خارجي ثانوي: رابط ثانوي

<a class='extL' href='رابط_الموقع' target='_blank'>نص الرابط</a>

<a class='extL alt' href='رابط_الموقع' target='_blank'>رابط بديل</a>

<a class='extL sec' href='رابط_الموقع' target='_blank'>رابط ثانوي</a>

ملاحظة: جميع الروابط الخارجية تفتح في نافذة جديدة وتحوي خاصية nofollow لأغراض SEO.

2. الأزرار التفاعلية

تصميمات مختلفة للأزرار حسب الغرض منها:

زر أساسي: زر عادي

زر مخطط: زر مخطط

زر تحميل: تحميل الملف

زر معاينة: عرض تجريبي

<!-- زر عادي -->
<a class='button' href='رابط_الزر'>نص الزر</a>

<!-- زر مخطط -->
<a class='button ln' href='رابط_الزر'>زر مخطط</a>

<!-- زر تحميل -->
<a class='button' href='رابط_التحميل'><i class='icon dl'></i>نص الزر</a>

<!-- زر معاينة -->
<a class='button' href='رابط_المعاينة'><i class='icon demo'></i>عرض توضيحي</a>

3. مربعات التحميل

لعرض ملفات للتحميل بطريقة منظمة:

ملف_ضغط.zip 2.5MB

دليل_الاستخدام.pdf 1.8MB

<div class='dlBox'>
  <span class='fT' data-text='نوع_الملف'></span>
  <div class='fN'>
    <span>اسم_الملف.امتداد</span>
    <span class='fS'>حجم_الملف</span>
  </div>
  <a class='button' href='رابط_التحميل'><i class='icon dl'></i></a>
</div>

نصيحة: يمكنك تغيير نوع الملف الظاهر بتعديل قيمة data-text (يدعم: zip, pdf, doc, xls, ppt, img, vid, audio)

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

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

أشكال الاقتباسات والتنبيهات في قالب Plus UI

يقدم القالب أنماطاً متعددة لعرض الاقتباسات والتنبيهات بشكل جذاب وواضح:

1. أنماط الاقتباسات

الاقتباس الأساسي:

هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى

مصدر غير معروف

الاقتباس بالنمط الأول (s1):

هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى

مصدر غير معروف

الاقتباس بالنمط الثاني (s2):

هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى

مصدر غير معروف

<!-- اقتباس أساسي -->
<blockquote>
  <p>نص الاقتباس هنا</p>
  <span>المصدر</span>
</blockquote>

<!-- اقتباس بالنمط الأول -->
<blockquote class='s1'>
  <p>نص الاقتباس هنا</p>
  <span>المصدر</span>
</blockquote>

<!-- اقتباس بالنمط الثاني -->
<blockquote class='s2'>
  <p>نص الاقتباس هنا</p>
  <span>المصدر</span>
</blockquote>

2. أنماط التنبيهات والملاحظات

ملاحظة عادية:

ملاحظة!
هذا تنبيه عادي للملاحظات العامة والمعلومات الإضافية.

تحذير:

تحذير!
هذا تنبيه مهم يحتوي على تحذير أو تنبيه هام.

تنبيهات متقدمة:

افتراضي تنبيه عادي بدون تصنيف محدد.

مخطط تنبيه بإطار خارجي مميز.

معلومات! تنبيه خاص بالمعلومات العامة.

تحذير! تنبيه تحذيري هام.

نجاح! تنبيه لإظهار نجاح عملية ما.

خطأ! تنبيه لإظهار وجود خطأ ما.

تنبيهات مخططة:

معلومات! تنبيه معلومات بإطار خارجي.

تحذير! تنبيه تحذيري بإطار خارجي.

<!-- ملاحظة عادية -->
<p class='note'><b>عنوان الملاحظة</b><br/>
  نص الملاحظة هنا
</p>

<!-- تحذير -->
<p class='note wr'><b>عنوان التحذير</b><br/>
  نص التحذير هنا
</p>

<!-- تنبيه معلومات -->
<div class='alert info'><b>معلومات!</b>
  نص التنبيه هنا
</div>

<!-- تنبيه نجاح -->
<div class='alert success'><b>نجاح!</b>
  نص التنبيه هنا
</div>

<!-- تنبيه خطأ -->
<div class='alert error'><b>خطأ!</b>
  نص التنبيه هنا
</div>

<!-- تنبيه مخطط -->
<div class='alert info outline'><b>معلومات!</b>
  نص التنبيه هنا
</div>

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

1. حدد نوع العنصر الذي تريد إضافته (اقتباس/تنبيه)
2. اختر النمط المناسب حسب الغرض من المحتوى
3. انسخ الكود المناسب
4. استبدل النص النموذجي بمحتواك
5. اضبط الفئات حسب الحاجة لتغيير النمط

هذه العناصر تساعد في تنظيم المحتوى وجذب انتباه القارئ لأجزاء معينة من النص، مما يحسن تجربة القراءة والفهم.

أشكال الجداول والأكواد والعناصر التفاعلية في قالب Plus UI

1. الجداول المتقدمة

جدول متكامل مع جميع الميزات:

الاسم	الوظيفة	المكتب	العمر	تاريخ البدء	الراتب
أحمد محمد	مهندس نظم	الرياض	32	2020/05/15	25,000 ر.س
سارة عبدالله	محاسبة	جدة	28	2021/03/10	18,000 ر.س
خالد علي	مطور ويب	الدمام	35	2019/11/20	22,000 ر.س

<div class='table sticky bordered stripped hovered'>
  <table>
    <thead>
      <tr>
        <th>العنوان 1</th>
        <th>العنوان 2</th>
        <th>العنوان 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>بيانات 1</td>
        <td>بيانات 2</td>
        <td>بيانات 3</td>
      </tr>
    </tbody>
  </table>
</div>

خصائص الجداول:

• sticky: تثبيت رأس الجدول عند التمرير
• bordered: إضافة حدود للجدول
• stripped: تلوين متناوب للصفوف
• hovered: تأثير عند تمرير المؤشر على الصفوف
• primary/warning/success/error: ألوان مختلفة لرأس الجدول

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

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

<!DOCTYPE html>
<html>
<head>
  <title>صفحة تجريبية</title>
</head>
<body>
  <h1>مرحباً بالعالم!</h1>
</body>
</html>

<pre><code>
  // أكوادك هنا
  function example() {
    return "Hello World!";
  }
</code></pre>

3. العناصر التفاعلية

أزرار التبديل:

أشرطة التقدم:

65%

<!-- زر التبديل -->
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

<!-- شريط التقدم -->
<div class="progress-bar">
  <div class="progress" style="width: 50%">50%</div>
</div>

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

1. حدد نوع العنصر الذي تريد إضافته (جدول/كود/عنصر تفاعلي)
2. انسخ الكود المناسب من الأمثلة
3. استبدل البيانات النموذجية ببياناتك
4. أضف الفئات الإضافية حسب الحاجة
5. اختبر العنصر بعد إضافته

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

عرض الخطوات والأكواد البرمجية في قالب Plus UI

1. عرض الخطوات المرقمة

مثال عملي لخطوات إعداد القالب:

1. قم بتحميل ملف القالب من المتجر
2. انقر على "تثبيت القالب" في لوحة التحكم
3. انتظر حتى اكتمال عملية التثبيت
4. ابدأ بتخصيص القالب حسب احتياجاتك

<ol class='steps'>
  <li>الخطوة الأولى</li>
  <li>الخطوة الثانية</li>
  <li>الخطوة الثالثة</li>
</ol>

ملاحظة: يستخدم هذا النمط لتوضيح الإجراءات المتسلسلة التي يجب تنفيذها بالترتيب.

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

مثال لعرض كود HTML:

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>مدونتي</title>
</head>
<body>
  <h1>مرحباً بكم</h1>
</body>
</html>

مثال لعرض كود مضمن:

استخدم الوسم <header> لتحديد رأس الصفحة.

مثال لأوامر لوحة المفاتيح:

للنسخ استخدم Ctrl + C

<!-- كود كامل -->
<pre data-comment='.html'><code>
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;...&lt;/html&gt;
</code></pre>

<!-- كود مضمن -->
استخدم الوسم <code>&lt;div&gt;</code> للأقسام

<!-- أوامر لوحة المفاتيح -->
اضغط <kbd>Ctrl</kbd> + <kbd>S</kbd> للحفظ

3. تنسيق الأكواد المميزة

أمثلة على التمييز:

console.log("هذا النص مميز");
console.log("هذا النص في كتلة مميزة");
console.log("هذا النص باللون الأحمر");
console.log("نص مع ملاحظة قبلية");

4. أكواد متعددة بعلامات تبويب

<div class="example">
  <p>مثال HTML</p>
</div>

.example {
  color: blue;
  padding: 10px;
}

document.querySelector('.example')
  .addEventListener('click', function() {
    alert('تم النقر!');
  });

<div class='pre tabs'>
  <input id='tab1' type='radio' name='codeTabs' checked/>
  <input id='tab2' type='radio' name='codeTabs'/>
  
  <div>
    <label for='tab1' data-text='HTML'></label>
    <label for='tab2' data-text='CSS'></label>
  </div>

  <pre class='preC1-1'><code>كود HTML هنا</code></pre>
  <pre class='preC1-2'><code>كود CSS هنا</code></pre>
</div>

نصيحة: عند عرض الأكواد الطويلة، استخدم خاصية data-source لتحديد مصدر الملف مثل: data-source='src/js/main.js'

1. حدد نوع العرض المناسب (خطوات/كود/أكواد متعددة)
2. انسخ الكود المناسب من الأمثلة
3. استبدل المحتوى النموذجي بمحتواك
4. استخدم < و > بدلاً من < و > للأكواد
5. أضف الفئات الإضافية حسب الحاجة للتنسيق

هذه الأدوات تساعد في عرض المحتوى التقني والتعليمات البرمجية بطريقة واضحة ومنظمة، مما يسهل على القراء فهمها وتطبيقها.

العناصر القابلة للطي في قالب Plus UI

يقدم القالب عدة عناصر تفاعلية تسمح بإخفاء وإظهار المحتوى حسب رغبة المستخدم:

1. أداة الإخفاء (Spoiler)

مثال عملي:

إضغط هنا لرؤية الحل

هذا هو المحتوى المخفي الذي سيظهر عند النقر على العنوان أعلاه. يمكنك وضع أي محتوى هنا سواء كان نصاً، صوراً أو حتى أكواد.

مثال: 2 + 2 = 4

<details class='sp'>
  <summary data-show='النص عند الفتح' data-hide='النص عند الإغلاق'>العنوان الأساسي</summary>
  <div>
    <p>المحتوى المخفي هنا</p>
  </div>
</details>

ملاحظة: تستخدم هذه الأداة لعرض محتوى اختياري أو تجنب المفسدات (Spoilers) في المقالات.

2. عناصر الأكورديون

أكورديون عادي:

كيف أقوم بتثبيت القالب؟

1. قم بتحميل ملف القالب
2. إذهب إلى لوحة تحكم المدونة
3. إختر "تثبيت قالب جديد"
4. إرفع الملف واضغط حفظ

أكورديون بديل:

هل يدعم القالب اللغة العربية؟

نعم، القالب يدعم اللغة العربية بشكل كامل ويتوافق مع اتجاه النص من اليمين لليسار (RTL).

مجموعة أكورديون:

السؤال الأول

إجابة السؤال الأول هنا...

السؤال الثاني

إجابة السؤال الثاني هنا...

السؤال الثالث

إجابة السؤال الثالث هنا...

<!-- أكورديون عادي -->
<details class='ac'>
  <summary>عنوان السؤال</summary>
  <div>
    <p>إجابة السؤال</p>
  </div>
</details>

<!-- أكورديون بديل -->
<details class='ac alt'>
  <summary>عنوان السؤال</summary>
  <div>
    <p>إجابة السؤال</p>
  </div>
</details>

<!-- مجموعة أكورديون -->
<div class='showH'>
  <details class='ac'>
    <summary>السؤال 1</summary>
    <div>إجابة 1</div>
  </details>
  <details class='ac'>
    <summary>السؤال 2</summary>
    <div>إجابة 2</div>
  </details>
</div>

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

1. حدد نوع العنصر المناسب (Spoiler للأجزاء المخفية، أكورديون للأسئلة)
2. انسخ الكود المناسب
3. استبدل العناوين والمحتوى بالنص الخاص بك
4. للمجموعات، أضف عدة عناصر details داخل div.showH
5. استخدم class='alt' لعرض نمط بديل للأكورديون

هذه العناصر التفاعلية تساعد في تنظيم المحتوى الطويل وتحسين تجربة المستخدم من خلال السماح له بالتحكم في المحتوى الذي يريد رؤيته.

مكونات متقدمة في قالب Plus UI

1. الأسئلة الشائعة المميزة (FAQ Schema)

كيف يمكنني تثبيت القالب؟

يمكنك تثبيت القالب من خلال لوحة تحكم بلوجر عن طريق تحميل ملف القالب ثم تطبيقه على مدونتك.

هل القالب متجاوب مع الجوال؟

نعم، القالب مصمم ليعمل بشكل مثالي على جميع أحجام الشاشات والأجهزة.

<div class='showH' itemscope itemtype='https://schema.org/FAQPage'>
  <details class='ac' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>السؤال هنا</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>الإجابة هنا</p>
    </div>
  </details>
</div>

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

2. جدول المحتويات

جدول المحتويات

• المقدمة
• الميزات الرئيسية
• الأسئلة الشائعة

<details class='sp toc' open>
  <summary data-show='إخفاء المحتويات' data-hide='إظهار المحتويات'>جدول المحتويات</summary>  
  <div class='aToc'></div>
</details>

3. منشورات ذات صلة

مقالات قد تهمك:

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

<div class='pRelate'>
  <b>مقالات قد تهمك:</b>
  <ul>
    <li><a href='رابط_المقال'>عنوان المقال</a></li>
  </ul>
</div>

4. تضمين فيديو يوتيوب

طريقة التحميل المؤجل:

طريقة التحميل الكسول:

<!-- طريقة التحميل المؤجل -->
<div class='lazyYt' data-embed='كود_الفيديو'></div>

<!-- طريقة التحميل الكسول -->
<div class='videoYt'>
  <iframe class='lazyload' data-src='https://www.youtube.com/embed/كود_الفيديو'></iframe>
</div>

نصيحة: استخدم طرق التحميل المؤجل أو الكسول لتحسين أداء الصفحة وتقليل وقت التحميل.

1. حدد المكون الذي تريد إضافته (أسئلة شائعة/جدول محتويات/مقالات ذات صلة/فيديو)
2. انسخ الكود المناسب
3. استبدل البيانات النموذجية بمحتواك
4. للفيديوهات، استبدل كود الفيديو (المجموعة الأحرف بعد v= في رابط يوتيوب)
5. للمقالات ذات الصلة، أضف 3-5 روابط لأهم المقالات المرتبطة بالموضوع

هذه المكونات المتقدمة تساعد في تحسين تجربة المستخدم وتحسين محركات البحث (SEO) لمدونتك.

أساسيات إدارة المحتوى في قالب Plus UI

1. تعيين مقتطف المنشور المخصص

مثال عملي:

عند استخدام هذا الكود في بداية المقال:

<div hidden aria-hidden='true'>هذا نص المقتطف المخصص الذي سيظهر في صفحة الأرشيف</div>
<!--more-->

النتيجة: سيتم عرض "هذا نص المقتطف المخصص..." بدلاً من النص التلقائي في صفحة الأرشيف.

هذه الميزة مفيدة عندما:

• تريد كتابة ملخص مختصر وجذاب للمقال
• لا تريد استخدام الفقرات الأولى كمقتطف
• تحتاج لتحديد وصف دقيق للمحتوى

2. تعيين صورة مصغرة مخصصة

طريقة الاستخدام:

<!--[
  <div class='separator'><img src='https://example.com/my-thumbnail.jpg'/></div>
]-->
<!--more-->

هذا الكود سيقوم بـ:

1. تعيين صورة مخصصة كصورة مصغرة
2. إخفاء الصورة عن محتوى المقال الأساسي
3. الاحتفاظ بالصورة فقط للعرض في صفحات الأرشيف

3. الجمع بين المقتطف والصورة المصغرة

الكود المتكامل:

<div hidden aria-hidden='true'>وصف مختصر للمقال</div>

<!--[
  <div class='separator'><img src='رابط_الصورة_المصغرة'/></div>
]-->

<!--more-->

هام: يجب وضع هذه الأكواد في بداية المقال قبل علامة <!--more-->

4. إضافة عنوان فرعي للرئيسي

مثال توضيحي:

<style>
  .headH::after {
    content: 'الدليل الشامل';
    font-size: 0.6em;
    color: #777;
    margin-right: 10px;
  }
</style>

النتيجة المتوقعة:

عنوان المقال الرئيسي الدليل الشامل

نصيحة: يمكنك تخصيص العنوان الفرعي باستخدام CSS إضافي مثل تغيير اللون، الحجم، أو إضافة أي تأثيرات تصميمية أخرى.

1. حدد العنصر الذي تريد إضافته (مقتفح/صورة مصغرة/عنوان فرعي)
2. انسخ الكود المناسب
3. استبدل النصوص والروابط بمحتواك
4. للعناوين الفرعية، يمكنك تعديل خصائص CSS حسب احتياجاتك
5. احفظ التغييرات واختبر النتيجة

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

الختام: الاستفادة القصوى من قالب Plus UI

✨ ملخص الميزات الرئيسية ✨

1. تنسيق النصوص:
   • فقرات عادية ومزخرفة
   • عناوين بمستويات متعددة
   • اقتباسات بتصميمات متنوعة
2. العرض المرئي:
   • صور مع تأثيرات Lightbox
   • معارض صور متعددة التنسيقات
   • مقاطع يوتيوب بتحميل ذكي
3. العناصر التفاعلية:
   • أكورديون للأسئلة الشائعة
   • أدوات إخفاء المحتوى (Spoilers)
   • أزرار وعناصر تنقل ذكية

💡 نصائح احترافية

📌

استخدم خاصية Schema Markup للأسئلة الشائعة لتحسين ظهورك في نتائج البحث

⚡

استغل ميزة التحميل المؤجل للصور والفيديوهات لتحسين سرعة الموقع

"القالب يوفر كل الأدوات التي تحتاجها، والإبداع في كيفية استخدامها هو ما يميز مدونتك!"

ابدأ باستخدام القالب الآن

لديك استفسارات؟ اتصل بدعم القالب للحصول على مساعدة فورية

وفي النهاية! يسعدنا أنك وصلت إلى نهاية هذا الدليل حول جميع أكواد ومكونات وإضافات واجهة مستخدم قالب Plus UI، والذي حرصنا فيه على تقديم شرح مفصل خطوة بخطوة. إذا وجدت المحتوى مفيدًا، فلا تبخل بمشاركته مع أصدقائك، ولا تنسَ متابعة مدونتنا لاكتشاف المزيد من الشروحات والأدوات.

تنويه! جميع المقالات والأدوات المنشورة في مدونة مود ويب محمية بموجب قانون الألفية الرقمية لحقوق النشر (DMCA). يُمنع نسخ أو إعادة نشر المحتوى دون إذن مسبق، وإلا سنتخذ الإجراءات القانونية اللازمة. حقوق النشر محفوظة © www.modweeb.com