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

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

الخطوة الأولى: الحصول على الأيقونات

يمكنك استخدام أيقونات متاحة مجانًا على الإنترنت أو تصميم أيقوناتك الخاصة. هناك العديد من المواقع التي تقدم حزم أيقونات مثل:

Font Awesome: مكتبة ضخمة من الأيقونات المجانية.
Flaticon: مجموعة هائلة من الأيقونات بصيغ مختلفة.

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

الخطوة الثانية: رفع الأيقونات إلى خادم موقعك

قم بتنزيل الأيقونات التي ترغب في استخدامها (على سبيل المثال: أيقونات فيسبوك وتويتر وإنستقرام).
باستخدام FTP أو مدير الملفات في لوحة تحكم الاستضافة (cPanel أو غيرها)، ارفع ملفات الأيقونات إلى مجلد داخل موقعك، مثل: wp-content/uploads/social-icons.
احتفظ بمسارات الملفات لكي تستخدمها لاحقًا في كود HTML.

الخطوة الثالثة: إضافة كود HTML لعرض الأيقونات

يمكنك عرض الأيقونات في أي مكان يناسبك في موقعك: داخل الشريط الجانبي (Sidebar)، أو التذييل (Footer)، أو حتى في الصفحة الرئيسية. فيما يلي مثال يُوضح كيفية إضافتها يدويًا:


<!-- ضع هذا الكود في أي ملف قالب أو ويدجيت نصي في ووردبريس -->
<div class="social-icons-container">
    <a href="https://facebook.com/اسم_حسابك" target="_blank">
        <img src="https://example.com/wp-content/uploads/social-icons/facebook.png" alt="Facebook Icon" />
    </a>
    <a href="https://twitter.com/اسم_حسابك" target="_blank">
        <img src="https://example.com/wp-content/uploads/social-icons/twitter.png" alt="Twitter Icon" />
    </a>
    <a href="https://instagram.com/اسم_حسابك" target="_blank">
        <img src="https://example.com/wp-content/uploads/social-icons/instagram.png" alt="Instagram Icon" />
    </a>
</div>

ملاحظات:

استبدل https://example.com/wp-content/uploads/social-icons/facebook.png بالمسار الفعلي للأيقونة التي رفعتها.
عدِّل رابط الحسابات الاجتماعية بحسب حساباتك الحقيقية.
ضع هذا الكود في المكان المناسب: على سبيل المثال، في ملف header.php أو عبر ويدجيت نص (Text) في مظهر > ودجات.

الخطوة الرابعة: تنسيق الأيقونات عبر CSS

من المحتمل أن تظهر الأيقونات بأحجام وأماكن عشوائية. هنا يأتي دور CSS في تنسيقها. يمكنك إضافة الأكواد في ملف style.css الخاص بالقالب الفرعي (Child Theme) أو في خانة CSS إضافي من لوحة التحكم (مظهر > تخصيص). مثال:


.social-icons-container {
    display: flex; /* لجعل الأيقونات بجوار بعضها بشكل أفقي */
    gap: 10px; /* مسافة بين الأيقونات */
    justify-content: center; /* لجعلها في المنتصف أفقياً */
    margin: 20px 0;
}

.social-icons-container a {
    display: inline-block;
}

.social-icons-container img {
    width: 32px; /* حجم الأيقونة */
    height: auto; /* الحفاظ على النسبة */
    transition: transform 0.2s;
}

.social-icons-container img:hover {
    transform: scale(1.1); /* تأثير تكبير عند تمرير الفأرة */
}

في هذا المثال:

display: flex; لجعل العنصر الرئيسي يستوعب الأيقونات بشكل أفقي.
gap: 10px; لإضافة مساحة فاصلة بين الأيقونات.
transition: transform 0.2s; يمنح تأثير تحريك سلس عند تمرير الفأرة.

الخطوة الخامسة: استخدام SVG بدلًا من PNG (اختياري)

إذا حصلت على أيقونات بصيغة SVG، يمكنك إدراجها مباشرة في شيفرة HTML لتستفيد من إمكانية تغيير اللون والتحجيم دون فقدان الجودة. مثال:


<a href="https://facebook.com/اسم_حسابك" target="_blank">
    <svg width="32" height="32" viewBox="0 0 512 512">
        <!-- ضع هنا كود SVG الخاص بأيقونة فيسبوك -->
    </svg>
</a>

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

الخطوة السادسة: إضافة الأيقونات عبر ويدجيت النص (Text Widget)

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

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

نصائح إضافية

استخدام Font Awesome: يمكنك تضمين خطوط الأيقونات من Font Awesome عبر تعديل ملف functions.php أو الرابط المباشر في header.php، لكن ذلك قد يُعتبر “شبه إضافة”.
حجم الأيقونات: كن حريصًا على استخدام أحجام مناسبة حتى لا تؤثر سلبًا على سرعة تحميل الموقع.
التوافق مع الشاشات الصغيرة (Responsive): تأكد من اختبار المظهر على الأجهزة المحمولة لضمان ظهور الأيقونات بشكل مناسب.
أمان الروابط الخارجية: عند استخدام target="_blank"، يمكنك إضافة rel="noopener noreferrer" لأغراض الأمان ومنع بعض الثغرات.

لماذا تحتاج إلى موقع احترافي مع إتقان؟

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

باختيارك إتقان، ستحصل على:

تصميم متقن يعبر عن هويتك: نسعى دومًا لخلق واجهة تتناغم مع علامتك التجارية.
أداء عالي: نحرص على سرعة التحميل وتجربة مستخدم سلسة في كل صفحات الموقع.
تحديثات دورية ودعم فني: نتابع موقعك بشكل مستمر، ونوفر استشارات ودعمًا لكل ما تحتاجه.

تواصل معنا الآن!

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

تواصل مع إتقان

اجعل موقعك يعكس احترافيتك ويجذب المزيد من المتابعين عبر قنوات التواصل الاجتماعي. ابدأ الآن!

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