كيفية تصميم العلامات بسهولة في ووردبريس (مع أمثلة)

هل تريد تصميم العلامات في  ووردبريس لجعلها تبدو أكثر بروزًا؟

تساعدك العلامات على تنظيم المحتوى الخاص بك في موضوعات. إنها مثل علامات التصنيف لمنشورات مدونة  ووردبريس الخاصة بك وتساعد المستخدمين على اكتشاف المزيد من المحتوى.

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

علامات التصميم في  ووردبريس

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

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

تعرض العديد من سمات  ووردبريس الشائعة علامات في أعلى أو أسفل مشاركاتك افتراضيًا.

العلامات أدناه وظيفة في  ووردبريس

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

لإدراج سحابة علامات في منشوراتك وصفحاتك وأدوات الشريط الجانبي ، يمكنك ببساطة إضافة كتلة Tag Cloud.

كتلة سحابة العلامة

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

معاينة سحابة العلامات

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

دعنا نلقي نظرة على كيفية تصميم العلامات بسهولة في  ووردبريس.

تصميم سحابة العلامات الافتراضية في  ووردبريس

بعد إضافة كتلة Tag Cloud إلى منشور أو صفحة ، يمكنك تخصيصها عن طريق إضافة CSS مخصص .

تتضمن كتلة سحابة العلامات تلقائيًا فئات CSS الافتراضية التي تم إنشاؤها بواسطة  ووردبريس والتي يمكن استخدامها لتصميمها.

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

سحابة علامة التصميم

يمكنك البدء بإضافة كود CSS المخصص هذا كنقطة بداية.

.tag-link-position-1 { font-size:40px!important;}
.tag-link-position-2 {  font-size:35px!important;}
.tag-link-position-3 { font-size:30px!important; }
.tag-link-position-4 { font-size:35px!important; }
.tag-link-position-5 {  font-size:30px!important; }
 
 
.tag-cloud-link {
    text-decoration:none;
    background-color:#fff;
}
.tag-link-count {
    background-color: #d6d6d6;
}

كما ترى ، يمكنك استخدام .tag-link-positionالفصل لضبط النمط بناءً على موضع الروابط. العلامات التي تحتوي على مشاركات أكثر تكون أعلى في الموضع والعلامات التي تحتوي على مشاركات أقل تكون أقل.

إذا كنت ترغب في أن يكون لجميع العلامات الموجودة في كتلة سحابة العلامات الخاصة بك نفس الحجم ، فيمكنك استخدام CSS التالي بدلاً من ذلك:

.tag-cloud-link { 
font-size:16px !important;
border:1px solid #d6d6d6;
}
.tag-cloud-link {
    text-decoration:none;
    background-color:#fff;
}
.tag-link-count {
    background-color: #d6d6d6;
 
}

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

بديل نمط سحابة الوسم

تصفيف علامات المشاركة في  ووردبريس

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

يمكنك تمرير الماوس فوق العلامات والنقر بزر الماوس الأيمن لاستخدام أداة الفحص لعرض فئات CSS المستخدمة بواسطة قالب  ووردبريس الخاص بك.

استخدام أداة الفحص للعثور على فئة العلامات

بعد ذلك ، يمكنك استخدام فئات CSS هذه في CSS المخصص الخاص بك. فيما يلي نموذج التعليمات البرمجية بناءً على فئات CSS حول موضوع الاختبار الخاص بنا:

.entry-tag { 
padding: 5px 8px;
border-radius: 12px;
text-transform: lowercase;
background-color: #e91e63;
color:#fff;
}
.entry-tags a { 
color:#fff;
font-size:small;
font-weight:bold;
}

هذه هي الطريقة التي بدت بها على موقع الاختبار الخاص بنا.

علامات المشاركة على غرار

إنشاء سحابة علامات مخصصة في ووردبريس

من السهل استخدام كتلة الوسم الافتراضية السحابية ، ولكن قد يرغب بعض المستخدمين المتقدمين في تخصيصها بحيث يمكنهم الحصول على مزيد من المرونة.

تتيح لك هذه الطريقة إضافة فئات HTML و CSS الخاصة بك حول سحابة العلامات. يمكنك بعد ذلك استخدامه لتخصيص مظهر سحابة العلامات وفقًا لمتطلباتك الخاصة.

أول شيء عليك القيام به هو نسخ هذا الرمز ولصقه في ملف function.php الخاص بالقالب أو المكون الإضافي الخاص بالموقع .

function wpb_tags() { 
$wpbtags =  get_tags();
foreach ($wpbtags as $tag) { 
$string .= '<span class="tagbox"><a class="taglink" href="'. get_tag_link($tag->term_id) .'">'. $tag->name . '</a><span class="tagcount">'. $tag->count .'</span></span>' . "\n"   ;
} 
return $string;
} 
add_shortcode('wpbtags' , 'wpb_tags' );

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

[wpbtags]

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

.tagbox { 
background-color:#eee;
border: 1px solid #ccc;
margin:0px 10px 10px 0px;
line-height: 200%;
padding:2px 0 2px 2px;
  
}
.taglink  { 
padding:2px;
}
  
.tagbox a, .tagbox a:visited, .tagbox a:active { 
text-decoration:none;
}
  
.tagcount { 
background-color:green;
color:white;
position: relative;
padding:2px;
}

لا تتردد في تعديل CSS لتلبية احتياجاتك. هكذا بدا الأمر على موقعنا التجريبي:

سحابة علامة مخصصة

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

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

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

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

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