كيفية تغيير حجم صورة Gravatar في ووردبريس

هل تريد تغيير حجم صور Gravatar على موقع  ووردبريس الخاص بك؟

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

في هذه المقالة ، سنوضح لك كيفية تغيير حجم صور Gravatar في قالب  ووردبريس الخاص بك.

كيفية تغيير حجم صورة Gravatar في  ووردبريس

ما هو جرافاتار؟

Gravatar لتقف على Avatar المعترف بها عالميًا. إنها خدمة ويب تم إنشاؤها وتشغيلها بواسطة شركة Matt Mullenweg ، المؤسس المشارك لـ  ووردبريس والتي تسمى Automattic. يتيح لك إنشاء ملف تعريف وربط الصور الرمزية بعناوين بريدك الإلكتروني.

تضيف معظم سمات  ووردبريس رمز Gravatar بجوار كل تعليق مستخدم. يعرض البعض أيضًا Gravatar في مربع السيرة الذاتية للمؤلف . عندما لا يكون لدى المستخدم حساب Gravatar ، تظهر صورة Gravatar الافتراضية بدلاً من ذلك.

الغموض الافتراضي هو شخص جراتار في وورد

نظرًا لأن حجم صور Gravatar يتم تحديده من خلال المظهر الخاص بك ، فستحتاج إلى تحرير ملفات السمات الخاصة بك لتغيير هذا الإعداد على موقع  ووردبريس الخاص بك .

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

قد ترغب أيضًا في الاطلاع على دليل المبتدئين الخاص بنا حول كيفية استخدام FTP للوصول إلى ملفات  ووردبريس الخاصة بك.

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

كيفية تغيير حجم Gravatar لتعليقات  ووردبريس

كيفية عرض صور Gravatar المستديرة

كيفية تغيير حجم Gravatar لسير المؤلف

كيفية تغيير حجم Gravatar لتعليقات  ووردبريس

أول شيء عليك القيام به هو الاتصال بموقعك على الويب باستخدام برنامج FTP ثم الانتقال إلى / wp-content / theme /. ثم افتح مجلد المظهر الذي تستخدمه حاليًا.

بدلاً من ذلك ، إذا كانت شركة استضافة  ووردبريس الخاصة بك تقدم مدير الملفات ، فيمكنك تحرير هذا الملف باستخدام واجهة الويب في cPanel.

بمجرد الوصول إلى هناك ، يجب عليك فتح ملف comments.php الموجود في مجلد السمات الخاص بك. بعد ذلك ، تحتاج إلى العثور على الكود التالي:avatar_size

سيكون داخل wp_list_commentsالوظيفة.

<?php
wp_list_comments( 
    array(
        'avatar_size' => 60,
        'style'       => 'ol',
        'short_ping'  => true,
    ) 
);
?>

ما عليك سوى تغيير الحجم إلى أي أبعاد تريدها. في لقطة الشاشة أعلاه ، يمكنك تغيير 60 إلى رقم آخر. Gravatars مربع ، لذا ستكون القيمة التي تحددها هي نفسها لكل من العرض والارتفاع.

المضي قدما وحفظ التغييرات الخاصة بك. إذا كنت تستخدم FTP ، فقم بتحميل التغييرات على الخادم الخاص بك.

افتح الآن منشورًا به تعليقات لمعرفة ما إذا كانت تغييراتك نشطة. هذه هي الطريقة التي يظهر بها موقعنا التجريبي قبل وبعد زيادة حجم Gravatar من 60 إلى 70 بكسل. نحن نستخدم نسق Twenty-One الافتراضي.

معاينة تغيير حجم صورة Gravatar في التعليقات

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

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

ما عليك سوى النقر بزر الماوس الأيمن على Gravatar في متصفحك والنقر فوق فحص.

انقر بزر الماوس الأيمن على Gravatar في المستعرض الخاص بك وانقر فوق فحص

سيؤدي ذلك إلى تقسيم شاشة المتصفح إلى قسمين. في الجزء السفلي من الشاشة ، سترى HTML و CSS للصفحة.

تحتاج إلى إلقاء نظرة على ارتفاع وعرض صورة Gravatar لمعرفة ما إذا كانت تعكس القيمة التي قمت بتعيينها. عندما يبرز الرمز الذي يشير إليه الماوس في Gravatar ، يجب أن تكون قادرًا على رؤية الحجم المعروض عليه.

انظر إلى ارتفاع وعرض صورة Gravatar

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

تستخدم العديد من السمات مثل موضوع Twenty Sixteen CSS للتحكم في حجم صورة Gravatar لأحجام الشاشات المختلفة.

تحتاج إلى فتح ملف style.css في مجلد النسق الخاص بك والبحث عن الصورة الرمزية. من المحتمل أن تجد فئة CSS comment-author .avatarتحتوي على رمز مثل هذا:

.comment-author .avatar {
    height: 42px;
    position: relative;
    top: 0.25em;
    width: 42px;
}

انطلق وقم بتغيير العرض والارتفاع لمطابقة القيمة التي حددتها مسبقًا في ملف comments.php.

هذا كل شئ. لقد نجحت في تغيير حجم صورة Gravatar في تعليقات  ووردبريس الخاصة بك.

الآن قد تتساءل لماذا نبدأ بتغيير avatar_sizeملف comments.php عندما يمكنك ببساطة تجاوز حجم الصورة باستخدام CSS. هناك سببان.

أولاً ، لتجنب الصور الباهتة. إذا كنت تستخدم CSS لجعل الصورة تظهر أكبر مما هي عليه في الواقع ، فستبدو ضبابية.

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

كيفية عرض صور Gravatar المستديرة

ربما لاحظت أن صور Gravatar على WPBeginner مستديرة ، وتريد أن تفعل الشيء نفسه على موقعك الخاص. تعرض بعض السمات ، مثل Twenty-One و Astra ، جولة Gravatars افتراضيًا.

إذا كان المظهر الخاص بك يعرض Gravatars بشكل افتراضي ، فيمكنك إنشاء نفس التأثير باستخدام التعليمات البرمجية. سنستخدم خاصية border-radius في CSS3.

أول شيء عليك القيام به هو تعديل ملف style.css الخاص بالقالب الخاص بك باستخدام برنامج FTP. بدلاً من ذلك ، يمكنك إضافة CSS بالانتقال إلى المظهر »تخصيص» CSS إضافي في مسؤول  ووردبريس الخاص بك.

بعد ذلك ، تريد إضافة الكود التالي:

.avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}

أضف CSS بالانتقال إلى المظهر »تخصيص» CSS إضافية

يجب أن يعمل هذا على معظم سمات  ووردبريس. فيما يلي لقطات شاشة قبل وبعد لموقعنا التجريبي باستخدام نسق Twenty Twenty.

معاينة صورة Gravatar المستديرة

ومع ذلك ، إذا كان هذا لا يعمل على السمة الخاصة بك ، فمن المحتمل أن يكون هناك بعض المكونات الإضافية أو وظيفة السمة الخاصة بك تعبث بالفئات الافتراضية المستخدمة في Gravatar في  ووردبريس.

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

انقر بزر الماوس الأيمن على صورة Gravatar لتحديد فحص

سيؤدي ذلك إلى تقسيم شاشة المتصفح إلى قسمين. في الجزء السفلي من الشاشة ، سترى HTML و CSS للصفحة. تحتاج إلى التمرير فوق الكود حتى يتم تمييز صورة Gravatar ، ثم البحث عن فئة CSS الخاصة بالصورة.

ابحث عن فئة CSS الخاصة بـ Gravatar Image

إذا كان الفصل شيئًا غير “avatar” ، فاستخدمه بدلاً من avatar. في كود CSS أعلاه.

كيفية تغيير حجم Gravatar لسير المؤلف

تستخدم بعض سمات  ووردبريس أيضًا Gravatar للمربعات الحيوية للمؤلف. قد يتعين عليك أولاً كتابة شيء ما في حقل معلومات السيرة الذاتية لملف تعريف المستخدم. تعرف على المزيد في دليلنا حول كيفية إضافة مربع معلومات المؤلف في منشورات  ووردبريس .

يمكنك تغيير حجم Gravatar الافتراضي هنا بطريقة مشابهة جدًا لقالب التعليقات.

أولاً ، تحتاج إلى تحديد موقع ملف السمة الذي يضيف السيرة الذاتية. تحتاج إلى البحث في ملفات قالب القالب عن الكود get_avatar.

تستخدم نسق Twenty-One الافتراضية ملف جزء القالب المسمى author-bio.php. في السمات الأخرى يمكن أن يكون في ملف single.php أو ملف functions.php أو في أي مكان آخر.

هذا هو الكود الموجود في ملف author-bio.php الخاص بـ Twenty-One:

<div class="author-bio <?php echo get_option( 'show_avatars' ) ? 'show-avatars' : ''; ?>">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), '85' ); ?>

سيكون عليك فقط تغيير الرقم 85 إلى ما تريد.

في موضوعات أخرى ، قد يبدو الرمز كما يلي:

get_avatar( get_the_author_meta( 'user_email' ), 85);

بعد تغيير الحجم ، قم بتحديث الصفحة لمعرفة ما إذا تم تحديث الحجم. إذا لم يكن الأمر كذلك ، فستحتاج إلى البحث عن فئة الأفاتار في ملف style.css كما عرضناه للتعليقات ، وتحديث الحجم هناك أيضًا.

هذه هي الطريقة التي يظهر بها موقعنا التجريبي قبل وبعد تقليل حجم Gravatar من 85 إلى 60 بكسل عند استخدام قالب Twenty-One الافتراضي.

معاينة تغيير حجم صورة Gravatar في السيرة الذاتية للمؤلف

نأمل أن يساعدك هذا البرنامج التعليمي في تعلم كيفية تغيير حجم صورة Gravatar في  ووردبريس.

قد ترغب أيضًا في معرفة كيفية إنشاء عنوان بريد إلكتروني مجاني للنشاط التجاري ، أو التحقق من قائمتنا لأفضل خدمات استضافة  ووردبريس .

خدمات مميزة لآجلك

نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.

اشترك معنا لمزيد من المعرفة

إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..