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

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

في عالم الويب، تُعد تجربة المستخدم (UX) من العوامل الأساسية التي تحدد نجاح أي موقع أو مدونة. ومن بين الجوانب المهمة لتجربة المستخدم، إمكانية قراءة المحتوى بسهولة، خاصة للأشخاص الذين يعانون من ضعف في الرؤية. على الرغم من أن متصفحات الويب توفر ميزة التكبير والتصغير باستخدام اختصارات مثل CTRL + أو CTRL -، إلا أن هذه الميزة تؤثر على كافة عناصر الصفحة، وليس النص فقط.

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

لماذا نضيف أزرار تغيير حجم الخط؟

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

كيفية إضافة أزرار تغيير حجم الخط في بلوجر

الخطوة 1: إضافة مكتبة jQuery

أولاً، تحتاج إلى إضافة مكتبة jQuery إلى قالب بلوجر. يمكنك القيام بذلك عن طريق إضافة السطر التالي قبل </head> في قالب بلوجر:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    

الخطوة 2: إضافة كود JavaScript

أضف الكود التالي قبل </body> في قالب بلوجر. هذا الكود مسؤول عن تغيير حجم الخط:

</script>
    <!--إضافة كود أزرار التحكم في حجم الخط -->
<script type='text/javascript'>
//<![CDATA[
function changeFontSize(c) {
  $affectedElements.each(function() {
    var e = $(this);
    e.css("font-size", parseInt(e.css("font-size")) + c);
  });
}

var $affectedElements = $(".post-body");

$affectedElements.each(function() {
  var e = $(this);
  e.data("orig-size", e.css("font-size"));
});

$("#btn-increase").click(function() {
  changeFontSize(1);
  $(this).addClass("active");
  $("#btn-decrease, #btn-orig").removeClass("active");
});

$("#btn-decrease").click(function() {
  changeFontSize(-1);
  $(this).addClass("active");
  $("#btn-increase, #btn-orig").removeClass("active");
});

$("#btn-orig").click(function() {
  $affectedElements.each(function() {
    var e = $(this);
    e.css("font-size", e.data("orig-size"));
  });
  $(this).addClass("active");
  $("#btn-increase, #btn-decrease").removeClass("active");
});
//]]>
</script>
    

الخطوة 3: إضافة أزرار التحكم

أضف الكود التالي في المكان الذي تريد أن تظهر فيه الأزرار (مثل الشريط الجانبي أو أعلى الصفحة):

<!--إضافة كود أزرار التحكم في حجم الخط -->
                      <div id='postedit-font-btn'>
  <button class='tipr-zome' id='btn-increase'>
    <i class='fas fa-search-plus'/> <!-- أيقونة تكبير -->
  </button>
  <button class='tipr-zome' id='btn-decrease'>
    <i class='fas fa-search-minus'/> <!-- أيقونة تصغير -->
  </button>
  <button class='tipr-zome' id='btn-orig'>
    <i class='fas fa-undo'/> <!-- أيقونة إعادة الضبط -->
  </button>
</div>
    

الخطوة 4: تنسيق الأزرار باستخدام CSS

أضف الكود التالي قبل </head> لتنسيق الأزرار:

<style>
 /*إضافة كود أزرار التحكم في حجم الخط */  
  button.tipr-zome  {
    text-align: center;
    float: right;
    background: #ff2c00;
    border-radius: 10px;
    color: #FFFFFF;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 0;
    width: 55px;
    height: 28px;
    margin: 0.2em;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    transition: all 0.4scubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

button.tipr-zome:hover {
  background: #2a4d8c; /* لون مختلف عند التحويم */
  transform: scale(1.1); /* تكبير الزر قليلاً */
}

button.tipr-zome.active {
  background: #1e3a6b; /* لون مختلف عند التفعيل */
}

#postedit-font-btn {
    position: relative;
    display: inline-block;
    float: left;
    top: 43px;
}


/* تعديلات للأجهزة اللوحية */
@media (max-width: 768px) {
    #postedit-font-btn {
        top: 20px; /* تقليل المسافة العلوية */
        //float: none; /* إلغاء الطفو */
        display: block; /* تحويل العنصر إلى كتلة */
        text-align: center; /* توسيط العنصر */
        margin: 0 auto; /* توسيط العنصر أفقيًا */
    }
}

/* تعديلات للهواتف */
@media (max-width: 480px) {
    #postedit-font-btn {
        top: 20px; /* تقليل المسافة العلوية أكثر */
        font-size: 14px; /* تصغير حجم الخط */
    }
}
</style>
    

كيف يعمل الكود؟

• زيادة حجم الخط: عند النقر على الزر +، يزيد حجم الخط بمقدار 1px.
• تقليل حجم الخط: عند النقر على الزر -، ينقص حجم الخط بمقدار 1px.
• إعادة الضبط: عند النقر على زر "إعادة الضبط"، يعود حجم الخط إلى الحجم الافتراضي (16px في هذا المثال).

فوائد إضافة أزرار تغيير حجم الخط

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

خاتمة

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