در خدمت دوستان عزیز هستیم از وب سایت آموزش برنامه نویسی سورس باران. توی این مطلب افزونه طراحی دکمه های زیبا در وردپرس – Buttons Shortcode and Widget رو براتون به اشتراک گذاشته ایم. حتماً براتون پیش اومده که در زمان مراجعه به بعضی از وب سایت ها، طراحی دکمه های مختلف توجه شما رو به خود جلب کرده و حتی باعث شده موس خود رو روی دکمه حرکت دهید تا ببینید چه اتفاقی می افتد. دقیقاً به همین خاطر است که یکی از پارامتر های مرتبط با مقوله با اهمیت طراحی رابط کاربری، طراحی دکمه های مناسب و زیباست به طوری که توجه کاربر رو جلب کنند. امروز قصد داریم افزونه ای رو به شما دوستان عزیز معرفی کنیم تا با کمک اون بتوانید به سرعت دکمه های زیبایی طراحی کنید.در واقع دکمه ها در وردپرس رو به گونه ای جدید بسازید. این افزونه میتونه تا حد قابل قبولی نیاز های شما رو برای طراحی یک دکمه ی مناسب، مرتفع کند. در ادامه مطلب این مطلب رو پیگیری نمایید.
افزونه طراحی دکمه های زیبا در وردپرس
این افزونه تا کنون بیش از ۱۰۰۰۰ نصب فعال داشته است و به شما این امکان را می دهد که شورت کد مربوط به دکمه ها در وردپرس را که طراحی کنید و در برگه یا نوشته هایتان قرار دهید. و یا دکمه را در محل مربوط به ابزارک ها درج کنید.
پس از نصب و فعال سازی افزونه وارد قسمت افزودن برگه/ نوشته می شویم و از آیکون های موجود در نوار بالایی ویرایشگر، آیکونی که در تصویر مشخص شده است را انتخاب می کنیم. با کلیک بر روی Button، کادری به صورت پاپ آپ ظاهر می شود که در آن می توانید ویژگی های دکمه ی مدنظرتان را انتخاب و ویرایش کنید. این کادر شامل گزینه های متعددی است که در ادامه شرح داده شده است.
تنظیمات افزونه Buttons Shortcode and Widget
در این کادر دو قسمت وجود دارد که همزمان با اعمال تغییرات بر روی دکمه، می توانید در قسمت دیگر تحت عنوان Preview پیش نمایش دکمه ها در وردپرس را مشاهده کنید.
Options Buttons Shortcode and Widget
Title: در این قسمت می توانید عنوان و متنی که مایل هستید بر روی دکمه درج شود را وارد کنید.
Link: در این قسمت می توانید آدرس لینکی را که با کلیک بر روی دکمه، کاربر به آن لینک هدایت می شود وارد کنید.
Open in new window: در این قسمت می توانید تعیین کنید لینکی را که در بالا وارد کردید، در یک پنجره ی جدید باز شود یا خیر.
size: در این قسمت می توانید اندازه ی دکمه را از بین گزینه های موجود انتخاب کنید که عبارتند از:
- Tiny: بسیار کوچک
- Small: کوچک
- Medium: متوسط
- Large: بزرگ
Icon Type: در این قسمت می توانید نوع آیکونی را که در کنار متن دکمه درج خواهد شد، از بین گزینه های متعدد موجود انتخاب کنید.
Icon Position: موقعیت قرار گیری آیکون که می تواند در سمت چپ یا راست عنوان دکمه قرار بگیرد.
Shape: انتخاب شکل دکمه از بین گزینه های موجود که شامل موارد زیر است:
- Square: مربعی
- Radius: گوشه های مدور
- Round: دایره ای
Color: در این قسمت می توانید رنگ پیش فرض دکمه را از بین گزینه های موجود انتخاب کنید.
پس از انجام تنظیمات بر روی Insert کلیک کنید.
نمونه شورت کد دکمه Buttons Shortcode and Widget
قرار دادن دکمه در محیط ابزارک ها
برای این کار از منوی نمایش> ابزارک ها وارد قسمت ابزارک ها می شویم و ابزارک با عنوان OTW Shortcode Widget را در سایدبار یا فوتر مد نظرمان قرار می دهیم.
در کادر زیر Button را انتخاب می کنیم و بر روی Add کلیک می کنیم تا پاپ آپ مربوط به تنظیمات دکمه ها در وردپرس نمایش داده شود.
قسمت اول تنظیمات مشابه همان چیزی است که در بالا عنوان شد. اما قسمت دوم شامل مواردی است که در ادامه توضیح داده شده اند.
Custom Options
Background Color: تعیین رنگ پس زمینه ی دکمه، دقت داشته باشید که درصورت انجام تغییر در این قسمت، این رنگ جایگزین رنگ پیش فرضی خواهد شد که در قسمت بالا انتخاب کرده بودید.
Border Color: تعیین رنگ مرز های دکمه ها در وردپرس
Title Color: تعیین رنگ عنوان دکمه
Icon URL: در صورتی که مایل هستید از آیکونی به غیر از آیکون های موجود در افزونه برای دکمه ی خود استفاده کنید، می توانید نشانی URL مربوط به آیکون دلخواهتان را در این قسمت وارد کنید.
CSS Class: در صورتی که با CSS آشنایی دارید و مایل هستید تا این المان را به صورت جداگانه استایل دهی کنید، می توانید نامی را در این قسمت وارد کنید . کلاس CSSS ای با این نام، برای استایل دهی در دسترس شما خواهد بود.
در انتها بر روی Save کلیک کنید تا تغییرات ذخیره شده و کادر پاپ آپ بسته شود. در انتها بر روی ذخیره کلیک کنید.
نتیجه به صورت زیر خواهد بود :
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- جم فايل : 405 کیلوبایت
- منبع : سورس باران
- رمز فايل : www.sourcebaran.com
- انتشار: ۹ دی ۱۳۹۵
دسته بندی موضوعات
- آموزش برنامه نویسی
- آموزش کریپتو کارنسی (ارز دیجیتال)
- آموزش متنی برنامه نویسی
- پروژه برنامه نویسی
- فروشگاه
- فیلم های آموزشی
- #F
- ++C
- 3ds max
- Ada
- ADO.NET
- Adobe Flash
- Agile
- Ajax
- AngularJS
- Anime Studio
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- assembly
- AVR
- Azure
- Bootstrap
- Cassandra
- CCNA
- CCNP
- CCSP
- ChatGPT
- Cisco
- CMD
- COBOL
- CSS
- Cython
- Django
- Dreameaver
- Elixir
- EntityFramework
- Erlang
- Flash
- Go
- Groovy
- Haskell
- Htaccess
- HTML
- IOS
- Jade
- jquery
- Kendo UI
- Linq
- Linux
- LUA
- MariaDB
- maya
- Meteor
- MongoDB
- Mono Android
- MonoGame
- Mysql
- NoSQL
- Oracle
- Orchard
- Perl
- php
- PHPMyAdmin
- R
- Rational Rose
- Ruby
- Rust
- Scala
- Scrum Master
- SFML
- SharePoint
- SignalR
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- Vue 3
- WPF
- Xml
- آردوینو
- آموزش های پروژه محور
- آیونیک
- اتوکد
- الگوریتم تقریبی
- الگوریتم نویسی و فلوچارت
- امنیت
- اندروید
- اندروید استودیو
- انیمیشن سازی
- بازی سازی با Scratch
- بک ترک
- بیسیک فور اندروید
- پایتون
- پرولوگ
- پریمیر
- جاوا
- جاوا اسکریپت
- جنگو
- جوملا
- دارت
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- ساخت اتوران
- ساختمان داده ها
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کاتلین
- کامپایلرها
- کانستراکت
- کریستال ریپورت
- کلوژر
- گوگل آنالیتیکس
- گیت
- لاراول
- مای بی بی
- مایکروسافت پروجکت
- متریال دیزاین
- متلب
- معماری کامپیوتر
- مهندسی اینترنت
- میکروتیک
- نود جی اس
- نیوک
- هوش مصنوعی
- ویبولوتین
- ویژوال استودیو
- یونیتی
- کتاب های آموزشی
- Ada
- Ajax
- Android
- ASP.NET
- ASP.NET Core
- AVR
- clips
- CNC
- COBOL
- CQRS
- Cython
- Dreamweaver
- Elixir
- Entity Framework 4.0
- Erlang
- Go
- Groovy
- Haskell
- LINQ
- Lua
- Matlab
- MFC
- Node.js
- PERL
- php
- PLC
- Prolog
- React
- Rust
- Scala
- SFML
- SharePoint
- silver light
- VHDL
- VMware
- WinJS
- Workflow
- WPF
- XHTML
- Yii Framework
- اتوکد
- اچ تی ام ال
- اسمبلی
- اکتیو ایکس
- الگوریتم و فلوچارت
- انگولار
- اوبونتو
- اوراکل
- بازی سازی
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- بک ترک
- پاسکال
- پایان نامه
- پایتون
- پرولوگ
- جاوا
- جاوا اسکریپت
- جی کوئری
- حوملا
- داده کاوی
- دلفی
- رباتیک
- روبی
- زبان ماشین
- سئو
- ساختمان داده ها
- سایر کتاب ها
- سخت افزار
- سوئیفت
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- سیستم عامل
- سیستم های خبره
- شبکه و مجازی سازی
- شبیه سازی کامپیوتر
- طراحی الگوریتم
- فتوشاپ
- فریم ورک گتنا
- کاتلین
- کالی لینوکس
- کریستال ریپورت
- گزارش کارآموزی
- گوگل
- لیسپ
- متلب
- مقاله
- مهندسی نرم افزار
- نیوک
- هوش مصنوعی
- وب مستر
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس