الصفحة الرئيسية » وورد » ووردبرس] الأمثل سرعة مع الرموز الاجتماعية تقاسم مخصص

    ووردبرس] الأمثل سرعة مع الرموز الاجتماعية تقاسم مخصص

    قد تبدو هذه مهمة سهلة ، لكن إضافة أزرار المشاركة الاجتماعية الجيدة إلى موقع WordPress يمكن أن يكون مشكلة. عندما أقول إن حسن التصرف يعني بسيطة ، وخفيفة الوزن ، وصديقة للموارد ، وسريعة - معظم إضافات المشاركة الاجتماعية ليست هناك هكذا. أنها تميل إلى تناول موارد مثل مجنون ، و لماذا يريد أي شخص زيادة وقت تحميل البرنامج المساعد بنسبة 25-35 ٪ فقط لعرض بعض الرموز على موقعهم?

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

    الخطوة 1: إنشاء أزرار المشاركة الاجتماعية

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

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

    في هذه الشاشة (أدناه) ، ستجد خيارين: لا جافا سكريبت و "جافا سكريبت". علامة جافا سكريبت, حيث أنه سيمكن المتصفح من اكتشاف عنوان URL ديناميكيًا ، وبالتالي سيتمكن زوارك من مشاركة كل منشور على حدة وليس فقط عنوان URL للصفحة الرئيسية.

    أخيرًا ، ألق نظرة على المعاينة المباشرة ، وقم بتنزيل مجموعة الأيقونات المختارة ، وانتزاع الشفرة التي أنشأتها.

    الخطوة 2: إنشاء سمة تابعة

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

    يمكنك بسهولة إنشاء سمة تابعة لـ WP بمساعدة البرنامج التعليمي الخاص بنا ، أو يمكنك اتباع الخطوات الواردة في مقالة WP Codex هذه. إذا كان لديك بالفعل واحدة ، يمكنك القفز إلى الخطوة 3.

    يتعلق موضوع الطفل بالموضوع الذي تستخدمه حاليًا - بطريقة مشابهة إلى حد ما كما يتعلق بالطفل بوالديه. هذا يرث كل شيء (الأسلوب والوظائف) من السمة الأم ولكن يمكنك إضافة وظائف إضافية لذلك.

    في حالتنا ، ستكون الوظيفة الإضافية هي أزرار المشاركة الاجتماعية المخصصة.

    الخطوة 3: إنشاء دالة مخصصة تعرض الرموز

    سنضيف وظيفة مخصصة إلى ملف function.php الخاص بالموضوع الفرعي.

    بمساعدة هذه الوظيفة ، ستتمكن من إضافة الرموز الاجتماعية أينما تريد على موقعك باستخدام ربط الإجراء المخصص. إذا لم يكن لدى السمة التابعة لك ملف function.php بعد ، فقم بإنشاء ملف نصي فارغ في مجلد جذر السمة التابعة لوالدتك مع وظائف الاسم ، وقم بتغيير امتداده إلى .php.

    أدخل سطر التعليمات البرمجية التالي في هذا الملف الفارغ:

     

    عندما الخاص بك functions.php تم إعداد الملف ، أضف مقتطف الشفرة التالي إليه:

     / * * إضافة رموز المشاركة الاجتماعية المخصصة * / function add_social_sharing () ؟> 

    شارك هذا المنشور

    أخيرا احذف سطر تعليق HTML من مقتطف الشفرة أعلاه و استبدلها برمز HTML قمت بإنشائه في الخطوة 1 باستخدام منشئ أزرار المشاركة الاجتماعية.

    الخطوة 4: نسخ ملف القالب المناسب إلى مجلد السمة التابع

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

    لتحديد المكان الصحيح للأزرار الاجتماعية نحتاج إلى العثور على ملف القالب ذلك يحتوي على الوظيفة التي تقوم بتحميل محتوى المنشورات الفردية.

    دعنا نفتح محرر السمات في لوحة تحكم مشرف WordPress تحت المظهر> محرر. في الركن الأيمن العلوي ستجد قائمة منسدلة حيث يمكنك تحديد المظهر الرئيسي. أسفل القائمة المنسدلة ، يمكنك رؤية جميع ملفات القوالب التي يحتوي عليها السمة الرئيسية. انتقل لأسفل حتى تجد قالب مشاركة واحد (يسمى single.php) وفتحه.

    إذا كان الموضوع الرئيسي يستخدم get_template_part () الفسفور الابيض وظيفة في single.php ملف يعني أنه يستخدم ملف قالب إضافي لتحميل محتوى المنشور المفرد.

    أولا عليك أن تعرف أي واحد هو هذا. اسم ملف القالب الإضافي هو المعلمة الأولى لل get_template_part () وظيفة.

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

    get_template_part ('المحتوى' ، get_post_format ()) ؛

    المعلمة الأولى هي 'يحتوى' مما يعني أننا نبحث عن ملف القالب يسمى content.php. تحتاج إلى نسخ هذا الملف من مجلد جذر السمة الأصل إلى مجلد جذر السمة الفرعية لتعديله.

    الخطوة 5: إضافة ربط الإجراء إلى ملف القالب الأيمن

    أنشأنا وظيفة تسمى add_social_sharing () في الخطوة 3 ، وقمنا بإرفاقها بخطاف إجراء مخصص يسمى custom_social_share. الآن سيتعين علينا إضافة هذا الخطاف إلى الموقع حيث نريد تنفيذ الوظيفة.

    إليك مقتطف الشفرة الذي ستحتاج إلى إدراجه في المكان الصحيح:

    بعد ذلك ، دعونا نجد المكان الصحيح.

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

    تحقق ما إذا كان هناك wp_link_pages () وظيفة مباشرة بعد المحتوى() وظيفة. إذا كان موجودًا ، فإن مقتطف الشفرة أعلاه يأتي بعد ذلك ؛ وإلا فإنه يتبع المحتوى() وظيفة.

    الخطوة 6: أضف كود CSS إلى السمة الفرعية

    افتح ال style.css ملف السمة التابعة لك إما في محرر الكود أو في محرر السمة في لوحة تحكم مسؤول WordPress ، انسخ كود CSS الذي أنشأته في الخطوة 1 ، الصقه في نهاية الملف ، واحفظه.

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

     ul.share-buttons li a border: 0؛  ul.share-buttons li img display: inline؛  

    الخطوة 7: تحميل مجموعة أيقونة وسائل التواصل الاجتماعي على الخادم

    قم بتحميل أيقونة الوسائط الاجتماعية المختارة التي قمت بتنزيلها في الخطوة 1 إلى مجلد السمات التابع لك. قم بتوصيل الخادم الخاص بك عبر FTP ، قم بإنشاء مجلد جديد يسمى صور داخل جذر مجلد السمة التابعة (/ wp-content / theme / your-child-theme / images) وتحميل الأيقونة المحددة هنا.

    نحن اسم المجلد صور لأن هذا هو الاسم الافتراضي لمجلد الصور الذي يستخدمه Simple Sharing Buttons Generator.

    الخطوة 8: التحقق من مسار ملفات الرموز

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

    يعطي مسار ملف الصورة تلميحًا للمتصفح حول موقعه على الخادم. دعونا التحقق من مسارات الصورة داخل functions.php ملف للموضوع الطفل. افتح الملف في محرر الكود الخاص بك ، وانتقل إلى add_social_sharing () تعمل حيث تحتاج إلى التحقق من كود HTML الذي قمت بإنشائه باستخدام Generator Sharing Buttons Generator.

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

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

    يبدو مسار الصورة النسبي الذي يضيفه المولد مثل هذا:

    دعنا نغير SRC سمة كل رمز إلى المسار المطلق مما يعني أنه سيتضمن عنوان URL الكامل للملف.

    سيبدو مسار URL أعلاه كما يلي:

    الخطوة 9: تحميل الملفات المعدلة وتنشيط السمة التابعة

    قم بتوصيل خادمك عبر FTP وتحميل جميع الملفات التي أنشأناها في هذا البرنامج التعليمي والتي لم تقم بتحميلها بعد: functions.php, ال style.css, وملف القالب المناسب (في هذا البرنامج التعليمي إما single.php أو ال content.php).

    أخيرًا ، قم بتنشيط السمة الفرعية في لوحة تحكم مسؤول WP ضمن المظهر> ثيمات قائمة طعام.

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

    استنتاج

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

    فقط أضف الكود الذي استخدمناه في الخطوة 5 إلى المكان الذي تريد عرض الأزرار فيه:

    سيكون عليك أيضًا العثور على ملف القالب الصحيح إذا كنت تريد وضع الرموز في مكان آخر. يتم التحكم في الصفحات المفردة بواسطة ملف قالب يسمى page.php, بينما يتم تحميل مرفقات الوسائط مثل الصور بواسطة attachment.php.

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

    • تحميل المصدر