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

ما هو زر Ghost؟

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

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

إضافة أزرار Ghost في ووردبريس

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

أولًا ما عليك فعله هو إضافة كود CSS التالي إلى قالبك أو ورقة أنماط القالب الفرعي.

ستحتاج إلى عميل FTP للاتصال بسيرفر الويب. بعد الاتصال، انتقل إلى مجلد /wp-content/themes/your-theme/ وحدد موقع ملف style.css. افتح هذا الملف لتحريره في محرر نص، ثم الصق مقتطف الكود هذا أسفله. (تعرف على المزيد حول لصق مقتطفات الكود من الويب في ووردبريس).

.ghost-button {
  display: inline-block;
  width: 200px;
  padding: 8px;
  color: #fff;
  border: 2px solid #fff;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: background-color 0.2s ease-out,
              color 0.2s ease-out;
}
.ghost-button:hover,
.ghost-button:active {
  background-color: #fff;
  color: #000;
  transition: background-color 0.3s ease-in,
              color 0.3s ease-in;
}

احفظ تغييراتك وأعد رفع الملف إلى السيرفر.

لعرض الزر، ما عليك سوى إضافة class=”ghost-button”.

على سبيل المثال، لإضافة رابط تنزيل، أنشئ رابط التنزيل كما تفعل عادة. بعد ذلك، انتقل إلى محرر النص لعرض تنسيق HTML.

ابحث عن كود HTML لرابط التنزيل، وأضف كلاس CSS كما يلي:

<a href="http://example.com/downloads/" class="ghost-button">Download Now</a>

احفظ أو حدث منشورك ثم عاينه. سترى زر Ghost جميل بدلًا من رابط عادي.

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