افزونه های وردپرس در مقابل ابزارک ها: تفاوت چیست؟

RSS

عضو شوید

:: فراموشی رمز عبور؟

عضویت سریع

به وبلاگ من خوش آمدید

براي اطلاع از آپيدت شدن وبلاگ در خبرنامه وبلاگ عضو شويد تا جديدترين مطالب به ايميل شما ارسال شود

مهدیه شارمین []

آمار مطالب

:: کل مطالب : 61
:: کل نظرات : 0

آمار کاربران

:: افراد آنلاین : 1
:: تعداد اعضا : 0

کاربران آنلاین

آمار بازدید

:: بازدید امروز : 9
:: باردید دیروز : 7
:: بازدید هفته : 16
:: بازدید ماه : 29
:: بازدید سال : 427
:: بازدید کلی : 10995

افزونه های وردپرس در مقابل ابزارک ها: تفاوت چیست؟

نوشته شده توسط : مهدیه شارمین

آخرین نسخه وردپرس (5.3) در حال حاضر بیش از 49 میلیون بار بارگیری شده است و این تعداد هر روز در حال افزایش است. وردپرس حتی یک صفحه وب دارد که نشان می دهد چقدر عالی هستند… یا همان وردپرس تعداد بارگیری در زمان واقعی را نشان می دهد .

چند بار پیشخوان بارگیری شده است

اگر به این تعداد تأثیرگذار کمی بیشتر زمینه داده شود ، این بدان معنی است که در حال حاضر ، وردپرس 35٪ از اینترنت را شامل می شود ، از جمله 14.7٪ از 100 وب سایت برتر جهان - حتی دیزنی!

وردپرس همچنین به بیش از 100 زبان در دسترس است و دارندگان مطالب را به بیش از 120 زبان منتشر می کنند. وردپرس به طور خستگی ناپذیر شبانه روزی کار می کند تا ماهانه بیش از 20 میلیارد صفحه را با بیش از 409 میلیون نفر به اشتراک بگذارد .

همه اینها فقط برای گفتن این است که وردپرس محبوب ترین پلتفرم CMS است و بسیار کاربرپسند است. وردپرس به گونه ای ساخته شده است که هم شرکت های Fortune 500 و هم پدربزرگ 70 ساله شما می توانند وب سایت کاملی را ایجاد کنند. به طور جدی ، پدربزرگ می تواند وب سایت وردپرس را به تنهایی ایجاد کند.

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

نگران نباش و امید را رها کن! این راهنما دقیقاً شامل موارد ویجت و پلاگین ها ، نحوه استفاده از آنها برای ساخت وب سایت شیرین و تفاوت این دو مورد است.

ابزارک های وردپرس چیست؟

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

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

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

وردپرس مثال اساسی زیر را در مورد شکل ظاهری ابزارک ها ارائه می دهد . اگر به تصویر زیر نگاه کنید ، یک نوار ناوبری اساسی و یک نوار کناری با "پست های من" مشاهده خواهید کرد. نوار پیمایش و "پست های من" هر دو ابزارک هستند که می توانید شخصی سازی کنید. می توانید مکان این عناصر وب سایت را حذف یا سازماندهی مجدد کنید.

وردپرس ویدجت مثال

به دو روش می توانید ابزارک های خود را مشاهده و ویرایش کنید.

1. نوار کناری "ظاهر" و "ویجت" ناوبری

اولین راهی که می توانید ابزارک های خود را ببینید کلیک کردن روی "ظاهر" در نوار کناری سمت چپ و انتخاب "ابزارک ها" است.

ابزارک های موجود را در وردپرس پیدا کنید

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

برای افزودن ویجت به صفحه خود ، می توانید بر روی ویجت کلیک کرده و محلی را که می خواهید قرار دهید انتخاب کنید و سپس "افزودن ویجت" را کلیک کنید. به محض اینکه تغییرات خود را ذخیره کردید ، وردپرس جادوی خود را انجام می دهد و ابزارک شما را در جایی قرار می دهید که آن را هدایت کرده اید تا آن را قرار دهید.

افزودن ویجت تقویم به وردپرس

همچنین می توانید بر روی ویجت کلیک کرده و آن را از سمت چپ صفحه به سمت راست صفحه بکشید. در مثال زیر ، ویجت "Calendar" را کلیک کردم و آن را در بخش "Header Right" وب سایت خود قرار دادم.

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

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

2. بر روی "Customize" در نوار پیمایش بالا کلیک کنید

روش دوم برای سفارشی کردن ابزارک های خود ، کلیک کردن روی "سفارشی کردن" در نوار پیمایش بالا است.

ابزارک ها را از طریق نوار ناوبری وردپرس سفارشی کنید

پس از کلیک روی سفارشی کردن ، وردپرس شما را به یک نوار ناوبری تمیز در سمت راست هدایت می کند. می توانید روی «ابزارک ها» کلیک کنید و وردپرس هر مکانی را در الگوی شما لیست می کند که می توانید یک ویژگی به آن اضافه کنید.

ابزارک ها را در وردپرس سفارشی کنید

اگر می خواهم هدر سمت راست خود را سفارشی کنم ، می توانم روی "Header Right" کلیک کرده و "Add Widget" را کلیک کنم. هنگامی که من در اینجا هستم ، می توانم هر یک از ابزارک هایی را که قبلا نصب کرده ام انتخاب کنم و سپس ویجت را به سایت خود در محل مربوطه اضافه کنم.

مطالب پیشنهادی :

نحوه ایجاد فرم پرداخت با استفاده از HTML ، CSS3 و jQuery

9 نکته برتر برای بهینه سازی تصاویر در سال 2021

افزودن ویجت به وب سایت وردپرس

وردپرس با ارائه این سه روش مختلف برای انجام آن ، افزودن ابزارک (سفارشی کردن شکل ، احساس و عملکرد) وب سایت خود را آسان می کند.

افزونه وردپرس چیست؟

اکنون که دانستید ویجت وردپرس چیست ، وقت آن است که با افزونه ها آشنا شوید. پلاگین ها نوعی نرم افزار هستند که عملکرد خاصی را برای کمک به عملکرد موثرتر وب سایت یا کمک به وب سایت شما در انجام کاری که شما می خواهید انجام می دهند.

نمونه هایی از افزونه های محبوب وردپرس عبارتند از:

دکمه های اشتراک اجتماعی
بهینه سازی SEO
آمار وب سایت
محافظت در برابر هرزنامه
اسکن امنیتی
پشتیبان گیری
فرم های تماس
گالری های تصویر
اشتراک های ایمیل
و بیشتر!

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

تفاوت پلاگین ها و ابزارک ها چیست؟

اکنون ، اینجا جایی است که مردم افزونه ها و ابزارک های وردپرس را گیج می کنند ، بنابراین اجازه دهید رکورد را تنظیم کنم. ابزارک ها همیشه پلاگین هستند. نوعی از این که چگونه همه سیب ها میوه هستند. به عبارت دیگر ، ابزارک ها نوعی کد دارند که به وب سایت شما اجازه می دهد عملکرد فیزیکی را انجام دهد که بازدیدکنندگان وب سایت شما هنگام بازدید از صفحه وب شما مشاهده می کنند.

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

یک مثال خوب از یک افزونه (میوه) که یک ابزارک (سیب) نیست ، Yoast SEO است. Yoast SEO یک افزونه back-end است که به شما امکان می دهد کلمات کلیدی مرتبط ، توضیحات متا ، تصاویر alt و سایر عناصر SEO را به پست های وبلاگ خود اضافه کنید.

در اینجا مثالی از پشت وب سایت من آورده شده است. این افزونه (Yoast SEO) به من اجازه می دهد تا یک کلمه کلیدی اضافه کنم و تجزیه و تحلیل نحوه عملکرد کلمه کلیدی من را بر اساس پست وبلاگ من ارائه می دهد. همانطور که مشاهده کردید ، من در مورد این پست خاص کارهای SEO زیادی انجام داده ام.

افزونه yoast seo تجزیه و تحلیل SEO پلاگین yoast seo

همچنین ، مخاطبان من این افزونه یا هرگونه اطلاعات مربوط به نحوه بهینه سازی پست من در چهره وب سایت خود را نخواهند دید. این افزونه صرفاً به منظور اطمینان از اینکه Google به راحتی می تواند پست من را پیدا و فهرست کند ، در قسمت پشتی وب سایت وردپرس من وجود دارد.

افزونه های دیگری که ویجت نیستند شامل جستجوگرهای اسپم نظیر Akismet ، Google Webmaster Tools و Jetpack است که به چند مورد اشاره می کند.

چگونه افزونه وردپرس را نصب می کنید؟

بهترین قسمت وردپرس نصب آسان یک افزونه است . وب سایت شما می تواند کارهای شگفت انگیزی انجام دهد (به عنوان مثال ، فید اینستاگرام خود را نشان دهید ، بازدیدکنندگان وب سایت را ردیابی کنید ، تقویم رویدادی را نمایش دهید و غیره) و تمام کاری که شما باید انجام دهید جستجوی یک افزونه و فعال سازی آن است. همچنین می توانید یک پلاگین شخص ثالث جستجو کنید ، فایل .zip را بارگیری کنید ، آن را در وردپرس بارگذاری کرده و فعال کنید. در اینجا نحوه است.

1. بر روی "Plugins" در نوار ناوبری سمت چپ کلیک کنید

اولین قدم برای اضافه کردن یک پلاگین کلیک کردن روی "پلاگین ها" در نوار پیمایش است. پلاگین ها درست در زیر بخش "ظاهر" وبلاگ شما ظاهر می شوند.

افزونه های نصب شده در داشبورد وردپرس

پس از ورود به صفحه افزونه ، می توانید افزونه های وردپرس خود را مدیریت کرده یا افزونه های جدید اضافه کنید.

2. بر روی "افزودن جدید" کلیک کنید و پلاگین را جستجو کنید

بعد ، روی "افزودن جدید" کلیک کنید.

افزونه جدید را در وردپرس اضافه کنید

وردپرس شما را به صفحه ای هدایت می کند که می توانید افزونه های وردپرس را جستجو کنید.

برای پلاگین های وردپرس جستجو کنید

3. افزونه خود را نصب و فعال یا بارگذاری کنید

هنگامی که افزونه وردپرس را که می خواهید استفاده کنید پیدا کردید ، می توانید "اکنون نصب شود" را فشار دهید یا می توانید افزونه را بارگذاری کنید. در اینجا تفاوت وجود دارد.

"Install Now" برای افزونه هایی است که از قبل در کتابخانه وردپرس وجود دارد. تمام کاری که شما باید انجام دهید اینست که پلاگین را از طریق جستجو پیدا کنید ، روی "اکنون نصب شود" ، "فعال سازی" را کلیک کنید و دستورالعمل ها را دنبال کنید. پس از انجام این کار ، افزونه جدید وردپرس شما در کتابخانه پلاگین شخصی شما ظاهر می شود.

همچنین می توانید افزونه ای را از وب سایت شخص ثالث بارگیری کرده و فایل .zip را بارگیری کنید. سپس ، "بارگذاری پلاگین" را فشار دهید و پرونده را انتخاب کنید ، نصب کنید و فعال کنید.

افزونه های وردپرس را اضافه یا بارگذاری کنید

می توانید این فرایند را برای هر افزونه ای که می خواهید در وب سایت خود دنبال کنید.

با ابزارک ها و پلاگین های وردپرس شروع کنید

وردپرس یکی از بهترین سیستم عامل های وب سایت در بازار است. ابزارک ها و افزونه ها این امکان را برای هر کسی فراهم می کند که بتواند بدون دانستن چیزی درباره برنامه نویسی ، وب سایتی را طراحی کند.

اکنون که تفاوت بین ابزارک ها و پلاگین ها را دانستید ، وقت آن است که وب سایت خود را فعال و راه اندازی کنید. HostGator میزبانی مقرون به صرفه و نصب یک کلیک با وردپرس را فراهم می کند. این بدان معنی است که می توانید وب سایت خود را امروز فعال و راه اندازی کنید!

:: برچسب‌ها: طراحی سایت , سئو , افزونه ,
:: بازدید از این مطلب : 175

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : شنبه 23 اسفند 1399 | نظرات ()

نحوه ایجاد فرم پرداخت با استفاده از HTML ، CSS3 و jQuery

نوشته شده توسط : مهدیه شارمین

سلام بر همه! در این آموزش ، ما می خواهیم با استفاده از HTML ، CSS3 و کمی jQuery یک فرم خرید پرداخت ایجاد کنیم . ما قصد داریم از Google Fonts برای این آموزش ، به ویژه Montserrat استفاده کنیم.

HTML

اولین کاری که باید انجام دهیم ایجاد ساختار HTML است.

برای بسته بندی همه چیز به ظرفی نیاز داریم ، نام آن را "صفحه پرداخت" می گذاریم. در داخل ما دو بخش اصلی خواهیم داشت ، بدنه و پاورقی.

بدن

نوار پیشرفت مرحله
دو روش پرداخت
برخی از فیلدهای ورودی

پاورقی

دو دکمه

این کد مربوط به صفحه پرداخت است:

<div class="checkout-panel">
  <div class="panel-body">
    <h2 class="title">Checkouth2>
 
    <div class="progress-bar">
      <div class="step active">div>
      <div class="step active">div>
      <div class="step">div>
      <div class="step">div>
    div>
 
    <div class="payment-method">
      <label for="card" class="method card">
        <div class="card-logos">
          <img src="img/visa_logo.png"/>
          <img src="img/mastercard_logo.png"/>
        div>
 
        <div class="radio-input">
          <input id="card" type="radio" name="payment">
          Pay £340.00 with credit card
        div>
      label>
 
      <label for="paypal" class="method paypal">
        <img src="img/paypal_logo.png"/>
        <div class="radio-input">
          <input id="paypal" type="radio" name="payment">
          Pay £340.00 with PayPal
        div>
      label>
    div>
 
    <div class="input-fields">
      <div class="column-1">
        <label for="cardholder">Cardholder's Namelabel>
        <input type="text" id="cardholder" />
 
        <div class="small-inputs">
          <div>
            <label for="date">Valid thrulabel>
            <input type="text" id="date" placeholder="MM / YY" />
          div>
 
          <div>
            <label for="verification">CVV / CVC *label>
            <input type="password" id="verification"/>
          div>
        div>
 
      div>
      <div class="column-2">
        <label for="cardnumber">Card Numberlabel>
        <input type="password" id="cardnumber"/>
 
        <span class="info">* CVV or CVC is the card security code, unique three digits number on the back of your card separate from its number.span>
      div>
    div>
  div>
 
  <div class="panel-footer">
    <button class="btn back-btn">Backbutton>
    <button class="btn next-btn">Next Stepbutton>
  div>
div>

CSS

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

* {
  box-sizing: border-box;
}
 
html,
body {
  font-family: 'Montserrat', sans-serif;
  display: flex;
  width: 100%;
  height: 100%;
  background: #f4f4f4;
  justify-content: center;
  align-items: center;
}

اکنون ، بیایید. panel checkout خود را سبک کنیم و آن را به 940 × 766 پیکسل تبدیل کنیم. سبک را به آن اضافه کنید و ما خوب هستیم:

.checkout-panel {
  display: flex;
  flex-direction: column;
  width: 940px;
  height: 766px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2);
}

سرد! حالا بیایید جلوتر برویم و بدن و عناصر داخل آن را سبک کنیم. ابتدا pad را به بدنه اضافه کرده و عنوان را سبک کنید:

.panel-body {
  padding: 45px 80px 0;
  flex: 1;
}
 
.title {
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 40px;
  color: #2e2e2e;
}

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

مطالب پیشنهادی :

9 نکته برتر برای بهینه سازی تصاویر در سال 2021

چند اشتباه رایج در طراحی سایت

.progress-bar {
  display: flex;
  margin-bottom: 50px;
  justify-content: space-between;
}
 
.step {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: block;
  width: 25px;
  height: 25px;
  margin-bottom: 30px;
  border: 4px solid #fff;
  border-radius: 50%;
  background-color: #efefef;
}
 
.step:after {
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 22px;
  width: 225px;
  height: 6px;
  content: '';
  background-color: #efefef;
}
 
.step:before {
  color: #2e2e2e;
  position: absolute;
  top: 40px;
}
 
.step:last-child:after {
  content: none;
}
 
.step.active {
  background-color: #f62f5e;
}
.step.active:after {
  background-color: #f62f5e;
}
.step.active:before {
  color: #f62f5e;
}
.step.active + .step {
  background-color: #f62f5e;
}
.step.active + .step:before {
  color: #f62f5e;
}
 
.step:nth-child(1):before {
  content: 'Delivery';
}
.step:nth-child(2):before {
  right: -40px;
  content: 'Confirmation';
}
.step:nth-child(3):before {
  right: -30px;
  content: 'Payment';
}
.step:nth-child(4):before {
  right: 0;
  content: 'Finish';
}

به قدرت عناصر شبه و نحوه استفاده از آن برای ایجاد نوار پیشرفت توجه کنید.

عنصر بعدی روش .payment است. ما دو روش پرداخت داریم ، یکی برای کارت های اعتباری و دیگری برای PayPal. فضا را به دو ستون تقسیم کرده و با استفاده از flexbox تراز کنید.

.payment-method {
  display: flex;
  margin-bottom: 60px;
  justify-content: space-between;
}
 
.method {
  display: flex;
  flex-direction: column;
  width: 382px;
  height: 122px;
  padding-top: 20px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 2px;
  background-color: rgb(249, 249, 249);
  justify-content: center;
  align-items: center;
}
 
.card-logos {
  display: flex;
  width: 150px;
  justify-content: space-between;
  align-items: center;
}
 
.radio-input {
  margin-top: 20px;
}
 
input[type='radio'] {
  display: inline-block;
}

عالی! اکنون ما بخشی با چندین فیلد ورودی با اطلاعات مربوط به کارتها داریم. می توانیم رنگ حاشیه را در: تغییر دهیم و برای هر برچسب ورودی یک نماد اضافه کنیم.

.input-fields {
  display: flex;
  justify-content: space-between;
}
 
.input-fields label {
  display: block;
  margin-bottom: 10px;
  color: #b4b4b4;
}
 
.info {
  font-size: 12px;
  font-weight: 300;
  display: block;
  margin-top: 50px;
  opacity: .5;
  color: #2e2e2e;
}
 
div[class*='column'] {
  width: 382px;
}
 
input[type='text'],
input[type='password'] {
  font-size: 16px;
  width: 100%;
  height: 50px;
  padding-right: 40px;
  padding-left: 16px;
  color: rgba(46, 46, 46, .8);
  border: 1px solid rgb(225, 225, 225);
  border-radius: 4px;
  outline: none;
}
 
input[type='text']:focus,
input[type='password']:focus {
  border-color: rgb(119, 219, 119);
}
 
#date { background: url(img/icons_calendar_black.png) no-repeat 95%; }
#cardholder { background: url(img/icons_person_black.png) no-repeat 95%; }
#cardnumber { background: url(img/icons_card_black.png) no-repeat 95%; }
#verification { background: url(img/icons_lock_black.png) no-repeat 95%; }
 
.small-inputs {
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
}
 
.small-inputs div {
  width: 182px;
}

ما تقریباً تمام شدیم آخرین موردی که ما باید به آن سبک دهیم ، پنل پانویس است. در اینجا دو دکمه داریم .back-btn و .next-btn. با استفاده از flexbox آنها را به درستی تراز کنید.

.panel-footer {
  display: flex;
  width: 100%;
  height: 96px;
  padding: 0 80px;
  background-color: rgb(239, 239, 239);
  justify-content: space-between;
  align-items: center;
}

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

.btn {
  font-size: 16px;
  width: 163px;
  height: 48px;
  cursor: pointer;
  transition: all .2s ease-in-out;
  letter-spacing: 1px;
  border: none;
  border-radius: 23px;
}
 
.back-btn {
  color: #f62f5e;
  background: #fff;
}
 
.next-btn {
  color: #fff;
  background: #f62f5e;
}
 
.btn:focus {
  outline: none;
}
 
.btn:hover {
  transform: scale(1.1);
}

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

ابتدا مطمئن شوید که jQuery را در آن گنجانده اید و سپس یک کلاس به نام blue-border اضافه کنید.

.blue-border {
  border: 1px solid rgb(110, 178, 251);
}

سرد! اکنون در پرونده JavaScript ، کد زیر را اضافه کنید:

$(document).ready(function() {
 
  $('.method').on('click', function() {
    $('.method').removeClass('blue-border');
    $(this).addClass('blue-border');
  });
 
})

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

.warning {
  border-color: #f62f5e;
}

و اعتبارسنجی JS در پرونده JS ما:

var $cardInput = $('.input-fields input');
 
$('.next-btn').on('click', function(e) {
 
  $cardInput.removeClass('warning');
 
  $cardInput.each(function() {    
     var $this = $(this);
     if (!$this.val()) {
       $this.addClass('warning');
     }
  })
});

عالی! آموزش به پایان رسیده است! نگاهی به نسخه ی نمایشی بیندازید و نظر خود را به من اطلاع دهید.

:: برچسب‌ها: طراحی سایت , سئو , html , فرم پرداخت ,
:: بازدید از این مطلب : 143

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : یک شنبه 17 اسفند 1399 | نظرات ()

9 نکته برتر برای بهینه سازی تصاویر در سال 2021

نوشته شده توسط : مهدیه شارمین

"نیاز به سرعت" این روزها یک مورد اساسی در لیست سطل هر وب سایت است. چرا که نه؟ سرعت افزایش یافته مستقیماً مسئول تبدیل ترافیک به مشتریانی است که به آنها پرداخت می کنند.

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

بهینه سازی تصویر چیست؟

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

سرعت بارگیری صفحه
رتبه بندی سئو
نرخ تبدیل؛
تعامل کاربر
تجربه ی کاربر؛
زمان بارگیری منابع.

با این وجود ، در صورت رعایت برخی نکات مدرن ، می توان روند بهینه سازی تصویر را برای کارایی بهتر تسریع کرد. ImageEngine ، با سالها تجربه در صنعت بهینه سازی تصویر ، برخی از نکاتی را که می تواند به مشاغل سال 2021 و بعد کمک کند ، انتخاب کرده است.

نکاتی برای بهینه سازی کامل تصویر در سال 2021

در این مقاله ، پنج نکته برتر برای بهینه سازی تصاویر برای کمک به شما در به حداکثر رساندن فرصت های شغلی شرح داده شده است. تمام نکات موجود با تحقیقات جامع و سالها تجربه در صنعت بهینه سازی تصویر پشتیبانی می شود.

قالب درست است

انتخاب قالب تصویر مناسب در فرآیند بهینه سازی اهمیت زیادی دارد زیرا هر قالب برای تأمین نیازهای خاص در نظر گرفته شده است.

JPEG: بهترین حالت برای تصاویر ثابت ، تصاویر دنیای واقعی و رنگ آمیزی پیچیده.
PNG: بهترین برای تصاویر وب مانند آرم و تصاویر مسطح.
GIF: بهترین حالت برای تصاویر با وضوح پایین ، گرافیک متحرک ، آیکون های کوچک و تصاویر ساده - با این حال توصیه نمی شود با فرمت GIF همراه باشید بلکه به جای آن از mp4 یا وب استفاده کنید
TIFF: بهترین حالت برای چاپ گرافیک با کیفیت بالا و اندازه بزرگ.
WebP: یک قالب تصویری مدرن است که با حفظ کیفیت عالی فشرده سازی برتر را ارائه می دهد.
انتخاب قالب مناسب باعث کاهش پهنای باند برای بهبود سرعت بارگیری صفحه وب می شود. با این حال ، یک قالب جدید به این باشگاه پیوسته است: AVIF ، که تمام ویژگی های خوب قالب های تصویر بالا را پوشش می دهد و با حفظ نسبت فشرده سازی عالی ، حتی از WebP نیز پیشی می گیرد. AVIF در مقایسه با فرمت JPEG تقریباً 50٪ پس انداز دارد.

ارائه تصاویر در قالب های نسل بعدی مانند WebP و AVIF این روزها روال مرسوم است.

برای فشرده سازی تصویر بروید

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

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

هرگز از CDN عبور نکنید

بهینه سازی تصویر و CDN های تصویر منطبق در بهشت است. تصاویر وب سایت نه تنها نیاز به بهینه سازی دارند بلکه باید سریع و به راحتی تحویل داده شوند. یک تصویر بهینه شده اگر نتواند سریع منتقل شود فایده ای ندارد. CDN تصویری (شبکه تحویل محتوا) این نیاز را برطرف می کند. با کاهش فاصله بین بازدید کنندگان آنلاین و سرورها ، تحویل سریع تصاویر بهینه شده را امکان پذیر می کند.

CDN تصویر جهانی همچنین مزایای دیگری مانند:

امکان دسترسی سریع جهانی از طریق شتاب ابر
تقسیم بندی مخاطب (بر اساس نمای دستگاه) آسان می شود.
با حذف نیاز به سرمایه گذاری در ارائه دهنده های جداگانه سرور در مناطق مختلف جهان ، در هزینه های بسیاری صرفه جویی می شود.
برای دستیابی به کاهش هزینه تحویل ، بار سرور را پایین می کشد.
ظرفیت ذخیره سازی امن.
تصویر CDN با دقت مهندسی شده از ImageEngine با ویژگی های منحصر به فرد خود که در زیر ذکر شده است ، خود را از بقیه متمایز می کند:

تصاویر بهینه سازی شده اند تا 30٪ سریعتر از CDN های دیگر در بازار ارائه شوند.
ادغام و پیکربندی ImageEngine CDN آسان است.
تصاویر به طور خودکار با توجه به اندازه ویوپورت کاربر به قالب مربوطه بهینه می شوند.
تصاویر را می توان در قالب های نسل بعدی مانند AVIF و WebP تحویل داد.
تصاویر تحویل شده همزمان (بدون در نظر گرفتن قالب) از اندازه و کیفیت فوق العاده ای برخوردار هستند.
شبکه گسترده CDN ImageEngine از محافظت از HTTP ، HTTP / 2 ، WAF و DDoS پشتیبانی می کند.

مطالب پیشنهادی :

چند اشتباه رایج در طراحی سایت

برای داشتن یک وب سایت از کجا باید شروع کنم؟

راه اندازی مرورگر مرورگر

هشدار "Leverage Browser Caching" هنگامی که در این قانون قانون ذخیره سازی وجود ندارد ، در ابزار Google PageSpeed Insights نمایش داده می شود

مکان یا زمان انقضا خیلی کم تنظیم شده است. به زبان ساده ، هشدار پیشنهادی برای بهبود سرعت وب سایت است.

حافظه پنهان مرورگر به مرورگر بازدید کننده دستور می دهد برخی از فایلهای خاص را به جای بارگیری مکرر در سیستم محلی بازدید کننده ذخیره کند. به عنوان مثال ، یک بازدید کننده در اولین بازدید باید تصویر آرم یک وب سایت را بارگیری کند. با این حال ، پس از هر بازدید بعدی ، چنین بازدید کننده ای پرونده آرم را از حافظه پنهان محلی وب سایت بارگیری می کند ، به شرط اینکه حافظه پنهان مرورگر فعال باشد. نتیجه؟ بارگیری سریعتر زیرا بازدید کننده دیگر نیازی به دریافت مستقیم همه چیز از سرور وب سایت ندارد. حافظه پنهان مرورگر می تواند برای تصاویر و انواع مختلفی از پرونده ها مانند منابع آماری و داده های شی مورد استفاده قرار گیرد.

روش های زیادی برای استفاده از حافظه پنهان مرورگر وجود دارد اما به سادگی افزودن خطوط کد زیر به پرونده .htaccess موثرترین روش است:

ذخیره مرورگر تصاویر را برای یک بازه زمانی مشخص برای دسترسی آسان و سریع ذخیره می کند. برای این منظور می توان یک جدول زمانی سفارشی یا استانداردهای صنعت را دنبال کرد. جدول زمانی در قطعه کد فوق به اشتراک گذاشته شده یک ساله است.

فایل htaccess را می توان با کمک یک برنامه FTP برای اتصال به پوشه ریشه سرور وب سایت پیدا کرد.

غیرفعال کردن اتصال به اینترنت

Hotlinking به معنای این است که شخصی یا کسب و کار URL تصویری را که متعلق به وب سایت دیگری است ، کپی کرده و در وب سایت خود جاسازی کند. این منجر به نمایش تصویر می شود گویی که یک محتوای متعلق به خود باشد. Hotlinking همسایه همسایه نقض حق چاپ است ، اما علی رغم این واقعیت ، این روش گسترده است. در بسیاری از موارد ، لینک مستقیم غیر عمدی است ، اما می تواند هزینه ای برای صاحب اصلی تصویر داشته باشد. در صورت تخلیه منابع سرور ، حتی می تواند بر عملکرد وب سایت تأثیر بگذارد.

برای اتصالات ناپایدار بهینه شوید

اگر یک وب سایت محتوای زیادی و تصاویر غنی برای ارائه دارد ، اما بخشی از کاربرانی که از وب سایت بازدید می کنند ، اتصال اینترنتی قابل اعتمادی ندارند ، پس این بخش از بازدیدکنندگان تبدیل نمی شوند. این وضعیت با فرصت های شغلی گمشده تفاوتی ندارد. همه بازدید کنندگان وب سایت به امکانات اینترنتی سریع و قابل اعتماد دسترسی ندارند. بنابراین ، بهینه سازی محتوای تصویر برای اتصالات لکه دار توصیه می شود.

یکی از روش های قابل اعتماد برای بهینه سازی تصاویر برای اتصالات کند ، فشرده سازی مناسب تصاویر در زمان واقعی است. با این حال ، حتی قبل از فشرده سازی تصاویر ، تعیین سرعت شبکه کاربرانی که از صفحه بازدید می کنند و سپس دسته بندی آنها در سطلها بر اساس انواع اتصال مانند 4G ، 3G ، 2G یا 2G کند مهم است.

اما ImageEngine کل روند فشرده سازی را ساده می کند. این تصاویر مستقیماً از URL ، با قالب ، بعد و کیفیت مناسب واکشی و بهینه سازی می شود و سپس از طریق تصویر جهانی CDN چنین تصاویری را در جلوی وب سایت ارائه می دهد.

رسیدگی به عکسهای پاسخگو

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

اگر از تصاویر مبتنی بر بردار استفاده می شود ، استفاده از قالب SVG راهی عالی برای بهینه سازی آنها برای هر نمای بدون نگرانی در مورد اندازه ها است زیرا تصاویر SVG مستقل از وضوح هستند.
استفاده از پرس و جوهای رسانه ای برای تصاویر پس زمینه یا تصاویری که از طریق CSS تولید شده اند ، بهترین راه برای نمایش تصاویر کوچکتر در دستگاه های تلفن همراه است.
برای تصاویر درون خطی می توان از تکنیک هایی مانند ویژگی srcset یا عنصر تصویر استفاده کرد.
ویژگی srcset: این ویژگی را می توان بر روی عنصر img برای تعریف تصاویر در اندازه های مختلف پیاده سازی کرد تا مرورگر بتواند بهترین گزینه را براساس ویژگی های دستگاه مانند عرض انتخاب کند.

عنصر picture: این بهترین گزینه برای استفاده در صورت نیاز به نمایش تصاویر مختلف بر اساس اندازه نمایشگر دستگاه است.

تمام گزینه های گفته شده فوق ، بسته به نوع مشاهده وب سایت ، روش های مختلفی را برای نمایش تصاویر بهینه شده به بازدید کنندگان ارائه می دهد. برای کسب اطلاعات بیشتر در مورد تصاویر پاسخگو و استفاده از عناصر تصویر یا ویژگی های srcset می توان به راهنمای تصویر پاسخگو MDN و راهنمای تصویر توسعه دهنده Google مراجعه کرد.

تصاویر پاسخگو

برای ارائه تصویر بهینه مناسب برای هر اندازه صفحه ، تصاویر باید پاسخگو باشند. این باعث افزایش تجربه کاربر و کاهش زمان بارگیری می شود. با توجه به مرورگر یا دستگاهی که تصاویر در آن مشاهده می شوند ، تصاویر در اندازه های مختلف مانند تصاویر در اندازه کامل ، تصویر کوچک یا تصاویر برجسته نمایش داده می شوند. برای ایجاد یک تصویر پاسخگو ، باید نسخه های مختلفی از تصویر داشته باشید.

مشکل این است که یک تصویر با وضوح بالا بهینه کنید که هنگام نمایش آن در دستگاه های تلفن همراه ، با جزئیات عالی به نظر برسد. جزئیات را نمی توان از دست داد ، بنابراین به جای کوچک کردن جزئیات تصویر ، برش یا کوچک کردن تصویر را برای دستگاه های تلفن همراه در نظر بگیرید.

مزایای تصاویر پاسخگو:

سرعت بارگذاری صفحه را بهبود ببخشید.
دسترسی خود را از طریق طراحی پاسخگو به گوشی های هوشمند افزایش دهید ؛
با تجربه مداوم کاربر ، نرخ تبدیل و فروش را افزایش دهید.
کاهش بار سرور و حافظه سرور.
تقویت مکالمه

:: برچسب‌ها: طراحی سایت , سئو , بهینه سازی تصاویر ,
:: بازدید از این مطلب : 138

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : شنبه 9 اسفند 1399 | نظرات ()

چند اشتباه رایج در طراحی سایت

نوشته شده توسط : مهدیه شارمین

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

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

کد نویسی و ساختار بندی سایت تأثیر بسیار زیادی بر سئو سایت یا سئو فروشگاه اینترنتی دارد. این کد نویسی اشتباه فقط مربوط به طراحان سایت نیست و حتی استفاده از cms هایی چون wordpress هم نمیتواند صحیح بودن کدنویسی سایت شما را تضمین کند. پس برای داشتن یک سایت بهتر موارد زیر را مطالعه کنید:

1- کد نویسی سنگین

کد نویسی سنگین سایت میتواند با کاهش سرعت سایت شما، بزرگترین ضربه را به سئو سایت شما وارد کند. در سئو سایت اولین عاملی که توسط گوگل سنجیده میشود، سرعت سایت است. سرعت پایین یک سایت به شدت میتواند باعث نا رضایتی کاربر از سایت بشود و همین موضوع باعث حساسیت زیاد گوگل روی این مسئله است.

نوشتن کد های css در صفحات سایت (inline css)، استفاده بیش از حد تصاویر گرافیکی، استفاده از کد های ajax و java و … باعث سنگین شدن سایت و در نتیجه کاهش سرعت آن است.
برای آنالیز سرعت سایت خود میتوانید آدرس سایت را در سایت gtmetrix قرار دهید. این ابزار آنلاین اطلاعات خوبی در زمینه کدهای سایت ، سایز عکس ها، زمان لود و سایز کل سایت به شما میدهد تا بتوانید به بهینه سازی قالب و سایت خود بپردازید.

2- واکنشگرا نبودن

مهمترین بلایی که میتونه سر سایتتون بیاد، اینه که واکنشگرا یا ریسپانسیو responsive نباشه! قبلا توی مقاله راه های افزایش بازدید سایت، اشاره کرده بودم که تقریبا ۵۲ درصد ترافیک وب در دنیا، از طریق موبایله!

از طرف دیگه، شما نمیدونید کاربر ممکنه با چه وسیله‌ای به سایتتون سر بزنه: مک بوک یا موبایل سونی‌اریکسون K310! بنابراین، باید طوری سایت رو طراحی کنید که تا حد امکان، روی همه دستگاه‌ها نمایش خوبی داشته باشه.

شخصا وقتی می‌بینم یک سایت رو موبایل نمایش خوبی نداره، نسبت بهش بی‌اعتماد میشم و ازش خرید نمیکنم، هرچقدر هم برند معتبری باشه!

سایت هایی که ریسپانسیو هستن، سه نوع مختلف دارن:

در نوع اول، آدرس (URL) و کدهای HTML سایت توی هر دو نسخه موبایل و دسکتاپ یکیه و فقط از طریق کدهای استایل CSS، واکنشگرا بودن اتفاق می‌افته.
گفته میشه که این نوع طراحی، مورد علاقه موتور جستجوی گوگل هم هست و به سایت‌هایی با این ساختار، بیشتر بها میده!
نوع دوم، سایت هایی هستن که آدرس اونها در نسخه دسکتاپ و موبایل یکیه، اما ساختار HTML و CSS اونها متفاوته
نوع سوم هم اونایی هستن که برای موبایل و دسکتاپ، کلا دو تا نسخه جداگانه دارن!

اشتباهات رایج در طراحی سایت

مطالب پیشنهادی :

برای داشتن یک وب سایت از کجا باید شروع کنم؟

راهنمای کامل برای جذب مشتریان جدید با استفاده از گوگل پلاس

3- نداشتن فایوآیکن Favicon (آیکون کوچیک کنار اسم سایت در تب مرورگر)

خیلی از کاربرا (از جمله خود من!) معمولا تعداد زیادی پنجره رو توی مرورگرشون باز میکنن و یهویی، به تعداد زیادی سایت سر میزنن.

حالا فرض کنید که کاربر یه بار سایت شما رو باز کرده، و حالا توی تب‌هایی که توی مرورگرش هست، داره دنبال شما میگرده.

وقتی که Favicon نداشته باشید، کاربر خیلی سخت‌تر میتونه شما رو توی اون شلوغی پیدا کنه و حتی ممکنه قید برگشت به سایت رو بزنه.

علاوه بر این، Favicon بخشی از هویت سایت و برند شماست و نداشتن اون، جزو اشتباهات رایج در طراحی سایت محسوب میشه!

4- استفاده از قالب های آماده کرک شده

چه در وردپرس و چه در طراحی سایت اختصاصی، متأسفانه بعضی از طراحان به جای نوشتن قالب یا خرید قانونی آن، از قالب های آماده کرک شده استفاده میکنند. این قالب های کرک شده ممکن است که داخل خود دارای لینک های خارجی باشند که باعث کاهش قدرت سئو سایت شما میشود.

همینطور بعضی از هکر ها با ایجاد حفره های امنیتی در قالب ها، آن را در فضای وب پخش میکنند تا پس از بارگذاری روی یک سایت به راحتی بتوانند به آن سایت دسترسی داشته باشند. تا حدامکان بر روی انتخاب قالب خود وسواس به خرج دهید و مطمئن شوید که قالب از مارکت های قانونی فروش قالب مثل “تم فارست” یا “میهن وردپرس” خریداری شده باشد.

5- ترجمه اشتباه قالب

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

6- بی اهمیتی به سئو تکنیکال

عدم توجه به استاندار های طراحی قالب میتواند لطمه زیادی به سئو سایت شما بزند. گوگل برای ایندکس (فهرست بندی) بهتر سایت شما، استاندار هایی را وضع کرده که بی توجهی به آنها باعث کاهش سئو سایت شما میشود. قسمتی از این استاندار ها مربوط به نوشتن کدهای HTML5 است. درمورد سئو تکنیکال به طور مفصل در مقالات آموزش سئو تکنیکال صحبت کردیم.

7- نساختن صفحات ۴۰۴ مخصوص

توی یکی از مقالاتی که میخوندم، اسم صفحات ۴۰۴ رو گذاشته بودن قاتل خاموش ترافیک! (silent traffic killer)

ارور ۴۰۴، یکی از کدهای وضعیت http هست که اعلام میکنه آدرسی که کاربر توی مرورگرش وارد کرده، توی اون سایت وجود نداره!

حالا ممکنه که کاربر آدرس رو اشتباه وارد کرده باشه، یا اینکه از گوگل، وارد یه صفحه‌ای شده که شما قبلا حذفش کردید، اما هنوز توی نتایج جستجوی گوگل وجود داره!

به این ترتیب، نباید صفحات ۴۰۴ رو به حال خودشون رها کرد، چون خیلی از کاربرا، به محض مواجه شدن با این صفحه، سایتتون رو می‌بندن و کلا بیخیال شما میشن!

در این موارد، باید با توجه به سیاست‌های شرکت یا مجموعه‌تون، مخاطب رو به جاهای دیگه از سایت هدایت کنید و نذارید که از دستتون فرار کنن، چون ممکنه دیگه هیچوقت برنگردن!