كيفية تحويل وسوم ووردبريس إلى أزرار باستخدام Elementor

كيفية تحويل علامات التصنيف إلى أزرار باستخدام ووردبريس (Elementor)

تعتبر علامات التصنيف من العناصر المهمة في تنظيم المحتوى على مواقع ووردبريس. تساعد على تصنيف المقالات وتسهيل البحث عنها. ولكن، هل يمكن تحويل هذه العلامات لتبدو كأزرار باستخدام Elementor؟ في هذا المقال، سنستعرض طريقة تحقيق ذلك خطوة بخطوة.

إضافة كود لتفعيل الأزرار

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

function break_tags_shortcode() {
    $tags = get_tags();
    $html = '<div class="break-tags">';
    foreach ( $tags as $tag ) {
        $tag_link = get_tag_link( $tag->term_id );
        $html .= "<a href='{$tag_link}' class='tag'>{$tag->name}</a>";
    }
    $html .= '</div>';
    return $html;
}
add_shortcode('the_break_tag_shortcode', 'break_tags_shortcode');

النقطة الأساسية هنا هي استخدام دالة get_tags() لجلب جميع العلامات، ثم يتم بناء الشيفرة HTML اللازمة لإنشاء الأزرار.

استخدام ال shortcode في Elementor

بعد إضافة الكود، يمكنك استخدام الـ shortcode من خلال إضافة عنصر الـ shortcode داخل صفحة أو مقالة باستخدام Elementor. فقط قم بإدخال الكود التالي:

[the_break_tag_shortcode]

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

تخصيص الأزرار بواسطة CSS

يمكنك إضافة أنماط CSS المخصصة التالية للحصول على مظهر جذاب لأزرار علامات التصنيف:

.break-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* ضبط الفراغ بين الأزرار */
}
.break-tags .tag {
    background-color: #e0f0ff; /* لون خلفية الأزرار */
    color: #333; /* لون النص */
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
}
.break-tags .tag:hover {
    background-color: #b0d0ff; /* لون الخلفية عند التمرير فوقها */
}

بهذه الأنماط، ستبدو علامات التصنيف كأزرار جميلة تجذب انتباه الزوار.

الخلاصة

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

بفضل هذه العملية، يمكنك الآن جعل علامات التصنيف تظهر بشكل أكثر تفاعلية، مما يسهل على الزوار التعامل معها. هل سبق لك تجربة هذه الطريقة في موقعك؟ إذا كانت لديك أي أسئلة أو تجارب مشابهة، فلا تتردد في مشاركتها.