• صفحه اصلی
  • نرم افزارها
    • اسکچاپ
      • دانلود اسکچاپ
      • رندر گرفتن در اسکچاپ
    • اتوکد
      • مقالات آموزشی اتوکد
      • دانلود اتوکد
    • راینو
    • 3دی‌مکس
      • آموزش انیمیشن سازی در 3d max
    • فتوشاپ
    • مایا
  • دکوراسیون
  • محصولات
    • ابزارها
    • آموزش ها
  • تماس با ما
  • درباره ما
  • صفحه اصلی
  • نرم افزارها
    • اسکچاپ
      • دانلود اسکچاپ
      • رندر گرفتن در اسکچاپ
    • اتوکد
      • مقالات آموزشی اتوکد
      • دانلود اتوکد
    • راینو
    • 3دی‌مکس
      • آموزش انیمیشن سازی در 3d max
    • فتوشاپ
    • مایا
  • دکوراسیون
  • محصولات
    • ابزارها
    • آموزش ها
  • تماس با ما
  • درباره ما
پنل کاربری

ساختن دکمه در سایدبار یا فوتر در وردپرس

شهریور 10, 1395
ارسال شده توسط سجاد ابوالحسنی
آموزش وردپرس
428 بازدید

ساختن دکمه در سایدبار یا فوتر در وردپرس

احتمالاً برای شما هم پیش اومده که دنبال ساختن دکمه در سایدبار یا فوتر در وردپرس بوده باشید و براتون سخت بوده که چطور این کار رو انجام بدید. خوب ! اینبار میخواهیم با هم همین نکته کوچیک اما کاربردی رو پیش ببریم.

خوب طبق معمول اول باید وارد پنل مدیریت وردپرس بشید و از اونجا هم ” نمایش >> ابزارک ”  را کلیک کنید:

خوب اینجا بستگی داره که قالبتون از چند ساید بار و فوتر پشتیبانی می کنه. دقت کنید که بعضی قالب ها ممکن هست که ساید بار یا فوتر نداشته باشند، پس با توجه به قالبی که روی سایتتون کار گذاشتید مراحل زیر را انجام بدهید:

  1. از بخش ابزارک های در دسترس ، گزینه “متن” را انتخاب کنید و از منوی باز شده ساید بار یا فوتری که مد نظرتون هست رو انتخاب کنید و سپس دکمه افزودن ابزارک را کلیک کنید(توجه کنید که شما می توانید با درَگ کردن و کشیدن هر یک از  ابزارک ها به ساید بار یا فوتر مد نظرتون ، آن ابزارک را در آن بخش قرار دهید):

       2. همانطور که مشاهده می کنید آن ابزارک به بخش فوتر یا ساید بار اضافه می شود، حال باید کد زیر را در بخشی که می خواهید قرار دهید:

 متن دکمه

ساختن دکمه در سایدبار یا فوتر در وردپرس

خوب حالا به شرح هر بخش می پردازیم:

< a href=”#”>: تگ a برای لینک کردن نوشته شما به کار می رود و به جای # شما باید آدرس لینک مد نظرتون که می خواهید بعد از فشردن دکمه به آن صفحه باز شود را وارد کنید.

style: از این دستور برای استایل دهی درونی استفاده می کنیم. یعنی به دکمه شکل و ظاهر می دهیم.

border:2px solid #000; : از این دستور در style برای معرفی یک قاب برای دکمه استفاده می کنیم. عدد 2 در اینجا میزان ضخامت خط دور دکمه می باشد و solid هم به منظور استفاده از خط صاف دور دکمه و بخش آخر هم رنگ می باشد که شما باید کد رنگ مد نظرتونو  برای قاب دکمه وارد کنید.

border-radius:5px : این دستور برای ایجاد منحنی به جای خط های تیز در گوشه های دکمه استفاده می شود که می توانید مقدار آن را به دلخواه تغییر دهید.

padding:5px : از این دستور برای ایجاد فاصله بین نوشته و قاب دور دکمه استفاده می کنیم.

background:#6BDC69 : این دستور برای تعیین رنگ دکمه است.

color:#fff :  و در آخر این دستور برای رنگ نوشته دکمه است که باید کد رنگ مد نظرتونو وارد کنید.

خوب تا اینجا ما تونستیم یک ظاهر برای دکمه خود ایجاد کنیم:

اما مشکلی که وجود داره اینه که با بردن موس روی دکمه اتفاقی نمیفته و مشخص نمی کنه که یک دکمه وجود دارد. برای حل این مشکل دو راه حل وجود دارد:

  1. تعریف یک کلاس برای دکمه مورد نظر و تعیین hover برای تغییر رنگ دکمه هنگامی که موس روی آن می رود. (این بخش در آینده آموزش داده می شود)
  2. استفاده از دستور onMouseOver

خوب برای این کار شما باید این دستور را بعد از href=”yoursite” قرار بدهید:

onMouseOver="this.style.backgroundColor='#0e420d'"
onMouseOut="this.style.backgroundColor='#6BDC69'" 

در بخش اول کد رنگ مد نظرتون وقتی که موس بر روی دکمه می رود را انتخاب کنید و در بخش دوم کد رنگ وقتی موس از روی آن برداشته می شود که حتماً باید رنگ اصلی دکمه باشد که در بخش اول و در استایل تعریف کردیم(در اینجا یعنی همان کد #6BDC69 )

همانطور که می بینید با بردن ماوس بر روی دکمه رنگ اون تغییر می کنه و حالا ما دارای دکمه ای زیبا هستیم. ساختن دکمه در سایدبار یا فوتر در وردپرس مطمئناً راه های دیگری هم داره ولی خوب این یکی از راه هاست که می تونه کمکتون کنه. منتظر نظرات و پیشنهاداتتون هستیم!

اشتراک گذاری:

مطالب زیر را حتما مطالعه کنید

پایگاه داده در وردپرس
رفع خطای برقرای اتصال پایگاه داده در وردپرس
فوتر وردپرس
ایجاد فوتر وردپرس با visual composer و سایر سازندگان صفحه
امنیت
اموزش کامل امنیت در سایت وردپرس
تیتر
ابزاری که کمک می‌کند تا تیتر هایی برای افزایش کلیک‌ها بسازید
پلاگین وردپرس
چگونه آپدیت پلاگین وردپرس را غیرفعال کنیم؟
گوتنبرگ وردپرس
مهاجرت به ویرایشگر گوتنبرگ وردپرس (Gutenberg): ویرایشگر جدید وردپرس
قدیمی تر سطح سازی سریع نقشه ی اتوکدی در اسکچاپ
جدیدتر انتقال جدول از اتوکد به اکسل

2 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • مرتضی گفت:
    بهمن 18, 1395 در 7:01 ب.ظ

    عزیز جان مرسی بابت آموزش ای خوبت مخصوصا همین آموزش ولی داداش ما این کشو از کجا برداریم کپی کنیم واسه سایتمون از توی عکس اونم با اون کیفیت که نمیشه چیزی دید 🙁

    پاسخ
    • طراح شید گفت:
      بهمن 19, 1395 در 2:20 ق.ظ

      مرتضی عزیز، بابت مشکل پیش آمده معذرت میخواهیم. عکس ها به زودی اصلاح می شوند. کد مورد نظر خدمت شما:

      a style=”border: 2px solid #000; padding: 5px; background: #6BDC69; color: #fff;” href=”#”> متن دکمه

      فقط به دلیل اینکه کد برای شما کار کند، باید بدین شکل شروع شود:

      پاسخ

دیدگاهتان را بنویسید لغو پاسخ

آموزش اتوکد برای شروع
استخدام اتوکد
آخرین مطالب
  • باز کردن درب ضد سرقت با سنجاق | 2 روش آسان و تست شده
  • لذت قدم زدن کنار آب با کفپوش دور استخر چوب پلاست | مدآوری
  • حفاظ پنجره مدرن یا حفاظ پنجره کلاسیک | مشاهده محصولات
  • چسب ممبران؛ راهکاری موثر برای نصب کابینت‌های ممبران
  • کاربرد چوب روسی در معماری و دکوراسیون داخلی | چرا بسیاری از طراحان از چوب روسی استفاده می‌کنند؟
  • روف گاردن اوا سنتر: تجربه ای متفاوت از فضای سبز شهری
  • صفر تا صد تفاوت سبک مدرن و مینیمال که باید بدانید
  • پارچه های روپوش پزشکی و پرستاری کدامند؟
دسته‌ها
  • آبجکت های تری دی مکس
  • آموزش اتوکد دو بعدی
  • آموزش اتوکد سه بعدی
  • آموزش اسکچاپ
  • آموزش اسکیس
  • آموزش تری دی مکس
  • آموزش رویت
  • آموزش فتوشاپ
  • آموزش وردپرس
  • ابزار نقاشی
  • اتوکد
  • اسکچاپ
  • اکسل
  • اینفوگرافی
  • پروژه معماری
  • پلاگین های اسکچاپ
  • پلاگین های رویت
  • پلاگین های وردپرس
  • تری دی مکس
  • تکنیک نقاشی
  • جی آی اس
  • دکوراسیون
  • دکوراسیون اتاق خواب
  • دکوراسیون منزل
  • راینو
  • رپورتاژ
  • رندر اسکچاپ
  • رندر در تری دی مکس
  • رندرگیری در رویت
  • رنگ در دکوراسیون
  • رویت
  • سایر
  • طراحی چهره
  • طراحی دکوراسیون
  • طراحی رزومه
  • طراحی شهری
  • طرح تفصیلی
  • فتوشاپ
  • قالب های وردپرس
  • کامپوننت های اسکچاپ
  • گرافیک
  • لوگو
  • لومیون
  • مایا
  • متریال های اسکچاپ
  • معماری
  • نقاشی
  • هنر
  • وردپرس
برچسب‌ها
آموزش دستورات اتوکد دستورات اتوکد سه بعدی دستور اتوکد سه بعدی شهر شهرسازی طراحی طراحی پلان معماری طرح تفصیلی تهران مدل سازی معماری داخلی نرم افزار

پشتیبانی از ساعت ۹ تا ۱۶ | شماره تماس: ۲۸۴۲۶۲۰۲-۰۲۱

تماس با ما

طراح‌شید پلتفرم تخصصی انجام پروژه اتوکد، معماری، عمران، طراحی، پلان و مقطع و… است که پروژه‌های شما را در کمترین زمان ممکن و بر اساس آخرین استانداردهای طراحی انجام می‌دهد.

 

لینک‌ها

انجام پروژه اتوکد

تولید محتوا

مقالات

تماس با ما

درباره ما

ارتباط با ما

آدرس: خیابان ابن سینا، روبروی پمپ بنزین، پلاک ۸۸

۰۲۱-۲۸۴۲۶۲۰۲

۰۹۱۲۰۶۷۸۹۶۲