اخیراً یکی از خوانندگان ما از ما درخواست آموزش ساخت چگونگی افزودن دکمه های CSS Ghost را در قالب وردپرس خود دارد. دکمه های شبح دکمه های شفاف فراخوان هستند که این روزها بسیار محبوب هستند. در این مقاله ، ما به شما نشان خواهیم داد که چگونه می توانید با استفاده از CSS و HTML بسیار کم ، به راحتی دکمه های روح CSS را در قالب وردپرس خود اضافه کنید.
دکمه شبح چیست؟ h4>
دکمه Ghost اصطلاحات طراحی وب است که برای دکمه های شفافی که در پس زمینه آنها ترکیب می شود و فقط در مرز اطراف آنها قابل مشاهده است استفاده می شود.
ایجاد نرمال دکمه های Call to Action در وردپرس بسیار آسان است. حتی می توانید پست ها و صفحات خود را بدون نوشتن CSS یا HTML. از آنجا که دکمه های شبح یک روند جدید است ، هیچ پلاگین خاصی برای ایجاد فقط دکمه ها در سبک شبح وجود ندارد.
افزودن دکمه های شبح در وردپرس h4>
همانطور که قبلاً ذکر شد ، برای افزودن دکمه های شبح به قالب وردپرس .
ابتدا باید کد CSS زیر را به صفحه سبک موضوع یا موضوع کودک خود اضافه کنید.
شما به عنوان سرویس گیرنده FTP برای اتصال به سرور وب خود. پس از اتصال ، به پوشه / wp-content / themes / Your-Theme / بروید و فایل style.css را پیدا کنید. این فایل را برای ویرایش در یک ویرایشگر متن باز کنید و سپس این قطعه کد را در پایین پرونده جای گذاری کنید. (درباره چسباندن قطعه کد از وب در وردپرس ).
.ghost-button {
نمایش: بلوک درون خطی ؛
عرض: 200 پیکسل
بالشتک: 8px؛
رنگ: #fff؛
حاشیه: 2px solid #fff؛
text-align: مرکز؛
رئوس مطالب: هیچ؛
دکوراسیون متن: هیچ؛
انتقال: پس زمینه رنگ 0.2s سهولت ،
0.2s رنگ راحت
}
.ghost-button: شناور ،
.ghost-button: فعال {
background-color: #fff؛
رنگ: # 000؛
انتقال: پس زمینه رنگ 0.3s سهولت در ،
رنگ 0.3 ثانیه آسان
}
تغییرات خود را ذخیره کرده و پرونده را دوباره به سرور بارگذاری کنید.
اکنون هر زمان که می خواهید دکمه را نشان دهید ، تمام کاری که شما باید انجام دهید این است که class = “ghost-button” را اضافه کنید.
به عنوان مثال ، اگر می خواهید پیوند بارگیری اضافه کنید ، پیوند بارگیری خود را مانند آنچه در حالت عادی انجام می دهید ایجاد کنید. بعد ، به ویرایشگر متن برای دیدن قالب بندی HTML بروید .
کد HTML لینک دانلود خود را پیدا کنید و کلاس CSS را به این صورت اضافه کنید:
پست خود را ذخیره یا به روز کنید و سپس پیش نمایش آن را انجام دهید. دکمه ارواح زیبایی را به جای پیوند ساده و قدیمی مشاهده خواهید کرد.
امیدواریم این مقاله به شما کمک کند یاد بگیرید چگونه می توانید دکمه شبح را در قالب وردپرس خود اضافه کنید. همچنین ممکن است بخواهید راهنمای ما را در نحوه افزودن دکمه ها در وردپرس بدون استفاده از کد کوتاه
اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube مشترک شوید برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .
منبع:
https://www.wpbeginner.com/wp-themes/how-to-add-css-ghost-buttons-in-your-wordpress-theme/.