سهولة تحويل الكلمات إلى روابط مع SmartLink في منشوراتك

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

ما هو هذا السكربت؟

هذا السكربت هو برنامج نصي مكتوب بلغة JavaScript يُستخدم لتحسين تجربة المستخدم على مواقع الويب من خلال تحويل الكلمات المفتاحية (Keywords) إلى روابط تشعبية (Hyperlinks) تلقائياً. يعتمد السكربت على فئة تسمى SmartLink، والتي تتيح إضافة كلمات مفتاحية محددة وربطها بعناوين URL معينة. عند تحميل الصفحة، يبحث السكربت عن هذه الكلمات المفتاحية داخل محتوى الصفحة ويحولها إلى روابط قابلة للنقر.

  <script type='text/javascript'>
class SmartLink {
    constructor() {
        this.keywordHref = new Object();
    }

    add(keyword, href) {
        if (!keyword.startsWith(" ")) {
            keyword = " " + keyword;
        }
        this.keywordHref[keyword] = href;
    }

    createAnchor() {
        const objs = document.getElementsByTagName("div");
        for (let i = 0; i < objs.length; i++) {
            const obj = objs[i];
            if (obj.className.includes("post-body")) {
                let content = obj.innerHTML;
                for (const keyword in this.keywordHref) {
                    const href = this.keywordHref[keyword];
                    const regex = new RegExp(keyword, "gi");
                    const newstr = content.replace(regex, `<a href='${href}'>${keyword}</a>`);
                    obj.innerHTML = newstr;
                    content = newstr;
                }
            }
        }
    }

    startScript() {
        const onLoad = window.onload;
        window.onload = function () {
            if (onLoad) {
                onLoad();
            }
            setTimeout(() => f.createAnchor(), 100);
        };
    }
}

const f = new SmartLink();
f.add("SEO", "http://www.InfoMaterialAPK.com/");
f.startScript();
</script>

كيف يعمل السكربت؟

تهيئة الكائن SmartLink:

• يتم إنشاء كائن من الفئة SmartLink، والذي يحتوي على دالة add() لإضافة الكلمات المفتاحية والروابط المرتبطة بها.
• يتم تخزين هذه الكلمات والروابط في كائن keywordHref.

إضافة الكلمات المفتاحية:

• باستخدام الدالة add()، يتم إدخال كلمة مفتاحية (مثل "SEO") وربطها بعنوان URL (مثل http://www.InfoMaterialAPK.com/).
• يتم التأكد من أن الكلمة المفتاحية تبدأ بمسافة لتجنب التداخل مع كلمات أخرى.

تحويل الكلمات إلى روابط:

• عند تحميل الصفحة، يتم تنفيذ الدالة createAnchor()، والتي تبحث عن جميع العناصر <div> ذات الكلاس post-body.
• يتم استبدال الكلمات المفتاحية بروابط تشعبية باستخدام تعبيرات منتظمة (RegExp) للبحث عن الكلمات بشكل غير حساس لحالة الأحرف.

بدء التشغيل التلقائي:

• يتم تنفيذ السكربت تلقائياً بعد تحميل الصفحة باستخدام الدالة startScript().
• يتم تأخير التنفيذ قليلاً (100 مللي ثانية) لضمان تحميل المحتوى بالكامل.

ما أهمية هذا السكربت؟

• تحسين تجربة المستخدم: يسهل على المستخدمين الوصول إلى معلومات إضافية أو صفحات ذات صلة بالنقر على الكلمات المفتاحية.
• تحسين محركات البحث (SEO): يمكن استخدام السكربت لإنشاء روابط داخلية (Internal Links) تعزز من تحسين محركات البحث.
• توفير الوقت والجهد: بدلاً من إضافة الروابط يدوياً، يمكن للسكربت القيام بذلك تلقائياً في جميع أجزاء الموقع.
• التخصيص والمرونة: يمكن إضافة أي عدد من الكلمات المفتاحية والروابط بسهولة باستخدام الدالة add().

استخدامات السكربت:

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

مثال عملي:

لنفترض أن لديك موقعاً إلكترونياً يتحدث عن التسويق الرقمي، وأضفت الكلمة المفتاحية "SEO" مع الرابط http://www.InfoMaterialAPK.com/. عند تحميل الصفحة، سيقوم السكربت بالبحث عن جميع تكرارات كلمة "SEO" داخل العناصر ذات الكلاس post-body وتحويلها إلى رابط يشير إلى الموقع المحدد.

مزايا السكربت:

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

عيوب أو تحديات محتملة:

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

خاتمة:

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

شرح الكود:

1. الفئة SmartLink:

   تم تحويل الكود إلى فئة (class) ليكون أكثر تنظيماً وحداثة.

   constructor(): يتم تهيئة الكائن keywordHref ككائن فارغ لتخزين الكلمات المفتاحية والروابط المرتبطة بها.

2. دالة add(keyword, href):

   تضيف كلمة مفتاحية وربطها برابط معين.

   إذا لم تبدأ الكلمة المفتاحية بمسافة، يتم إضافة مسافة في البداية لضمان عدم تداخل الكلمات عند البحث.

3. دالة createAnchor():

   تقوم بالبحث عن جميع العناصر <div> في الصفحة.

   إذا كان العنصر يحتوي على الكلاس post-body، يتم البحث عن الكلمات المفتاحية داخل محتوى العنصر واستبدالها بروابط.

   يتم استخدام RegExp للبحث عن الكلمات المفتاحية بشكل غير حساس لحالة الأحرف (gi).

4. دالة startScript():

   تضمن تنفيذ الدالة createAnchor() بعد تحميل الصفحة.

   يتم الاحتفاظ بأي دوال أخرى مرتبطة بحدث window.onload وتنفيذها قبل تنفيذ createAnchor().

إنشاء كائن f من الفئة SmartLink:

يتم إضافة كلمة مفتاحية "SEO" مع الرابط المرتبط بها.

يتم بدء البرنامج النصي باستخدام startScript().

التحديثات التي تم إجراؤها:

• تحويل الكود إلى فئة (class) ليكون أكثر تنظيماً وحداثة.
• استخدام const و let بدلاً من var لتجنب مشاكل نطاق المتغيرات.
• استخدام startsWith() بدلاً من substr() للتحقق من بداية الكلمة المفتاحية.
• استخدام includes() بدلاً من indexOf() للتحقق من وجود الكلاس post-body.
• استخدام RegExp للبحث عن الكلمات المفتاحية بشكل غير حساس لحالة الأحرف.
• تحسين استخدام setTimeout باستخدام دالة سهمية (arrow function) لتجنب استخدام النصوص البرمجية كسلاسل نصية.

ملاحظة:

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

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