كيفية إضافة أزرار CSS Ghost في قالب ووردبريس الخاص بك

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

إنشاء أزرار شبح باستخدام CSS

ما هو زر الشبح؟

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

مثال على زر خفي بجوار زر عادي

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

إضافة أزرار الأشباح في ووردبريس

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

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

ستحتاج إلى عميل FTP للاتصال بخادم الويب الخاص بك. بمجرد الاتصال ، انتقل إلى / wp-content / theme / Your-Theme / folder وحدد موقع ملف 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>

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

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

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

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

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

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