آموزش اضافه کردن فونت دلخواه به وردپرس

چگونگی اضافه کردن فونت های سفارشی به قالب وردپرس

برای اضافه کردن فونت به قالب وردپرس در ابتدا باید آن فونت را در ۳ و یا ۴ فرمت داشته باشید. در این مطلب به عنوان نمونه فونت Iran-sans مثال زده می‌شود. فونت‌های شما باید در سه فرمت متفاوت یعنی ttf، eot و woff و در برخی موارد svgz باشد. اما نگران نباشید می‌توانید فونت مورد نظر خود را با همان فرمت رایج یعنی ttf دانلود کرده و با استفاده از سایت های مختلف آن را به فرمت های دیگر تبدیل کنید.

برای تبدیل فونت ttf به فرمت eot از آدرس https://everythingfonts.com/ttf-to-eot و برای تبدیل فونت ttf به فرمت woff از آدرسhttps://everythingfonts.com/ttf-to-woff استفاده کنید.

اضافه کردن فونت به قالب وردپرس

برای اینکار ابتدا قالب وردپرسی مورد نظر خود را دریافت و نصب نمایید. یک پوشه با نام fonts در داخل پوسته ایجاد کرده و در صورتی که چنین فایلی از قبل وجود داشت این کار را انجام ندهید. سپس فونت مورد نظر خود را با همان فرمت های گفته شده در بالا در این پوشه آپلود کنید. برای مثال Iran-sans.ttf ، Iran-sans.woff ، Iran-sans.eot را در این پوشه آپلود کنید.

اکنون نوبت به استایل نویسی برای این فونت ها در فایل style.css پوسته است که ما در پایین این کد را آماده سازی کردیم می توانید استفاده کنید و ان را در داخل فایل استایل پوسته خود قرار دهید.

 

بعد از قرار دادن کد فوق در فایل نام برده نوبت به تغییر تمامی font-family قالب است که می توانید این کلمه را جستجو و فونت را Iran-sans تغییر دهید.

مثال: اگر font-family یک بخش و تگ المان نوشته شده باشد font-family: Arial یعنی فونت این تگ یا المان Arial می باشد اینجاست که باید تغییر یابد به font-family:Iran-sans

به همین راحتی فونت سایت و قالب خود را تغییر خواهید داد حال با رفتن به صفحه ی سایت و زدن دکمه Ctrl+f۵ تغییرات را مشاهده خواهید کرد.

تغییر فونت قالب حرفه ای وردپرس

در برخی از موارد که قالب در بخش پنل تنظیماتی خود بخشی برای استایل سفارشی دارد که می‌توانید برای سایت و پوسته‌ی خود استایل‌های سفارشی بنویسد و تغییراتی را از آنجا اعمال کنید.

روش دیگری که در اینجا وجود دارد نوشتن استایل سفارشی تغییر فونت قالب است.اگر دوست دارید فایل style.css را برای تغییر فونت دست کاری نکنید می توانید از روش زیر استفاده کنید.

۱) فونت ها را در سه فرمت یا چهار فرمت در پوشه fonts آپلود کنید.

۲) کد زیر را در فایل style.css قالب خود قرار دهید.

اکنون نیازی نیست تمامی font-family داخل استایل و یا rtl را سرچ و Iran-sans را جایگزین کنید؛ کافیست کد زیر را کپی و در بخش استایل سفارشی که در پنل تنظیماتی قالب قرار دارد Paste کنید.

توجه: اگر این بخش یعنی استایل سفارشی در پنل تنظیماتی پوسته شما وجود نداشت می توایند در داخل فایل style.css قرار دهید.

فریم ورک لاراول (Laravel)

یکی از کاربر پسندترین فریم ورک های رایگان که این روزها طرفداران زیادی پیدا کرده است ، قریم ورک لاراول( Laravel )است. فریم ورک لاراول توسط Taylor Otwell توسعه پیدا کرده است . این فریم‌ورک PHP بسیار قدرتمند , کد باز و رایگان است .

در توسعه‌ی لاراول بسیاری مفاهیم و روش‌های موجود در دیگر فریم‌ورک‌ها و زبان‌های برنامه‌نویسی گردآوری شده‌اند. لاراول مجموعه‌ای یکپارچه از بهترین روش‌ها و ابزارها در یک بسته است.
ویژگی‌های بسیاری در لاراول وجود دارند که آن را به انتخاب اول توسعه‌دهندگان برای طراحی سایت و به طور خاص طراحی سایت با php تبدیل کرده‌اند.
لاراول امکان توسعه برنامه های تحت وب را آسان و سریع کرده است و با کدنویسی زیبا و خلاقانه ای که دارد بسیار انعطاف پذیر است. در این فریم ورک می توان عملکرد بسیاری از بخش ها را بدون نیاز به تغییر در کدهای اصلی تغییر داد.
هنگام ایجاد یک اپلیکیشن برای کدهای تکراری برنامه نویسی، راه حل و short code های مناسب ارائه می دهد.
Laravel نقاط قوتی که در دیگر فریم ورک های php وجود دارد را بکار برده است تا باعث ایجاد لذت هرچه بیشتر کدنویسی و انعطاف پذیری شود. به طور مثال این فریم ورک از بسیاری از کتابخانه های فریم ورک سیمفونی نیز بهره می برد.
روند رشد این فریم ورک در سال های اخیر بسیار سریع بوده است و اکنون جزء یکی از محبوب ترین فریم ورک های زبان پی اچ پی می باشد.
به روز رسانی لاراول با صرف کمترین زمان و انرژی با استفاده از ابزار Composer انجام می شود و می توانید در برنامه های خود از آخرین نسخه کتابخانه های این فریم ورک استفاده کنید.

سرعت لاراول
سرعت لاراول از دو جهت قابل بررسی است. زاویه نخست، سرعت عملکرد سیستم است که با استفاده از انواع روش‌ها مانند، بارگزاری دیرهنگام( Lazy Loading )، سیستم Cache، استفاده از Memcached، استفاده از Redis و ابزارهای دیگر، تا حد امکان افزایش یافته است.
زاویه دوم سرعت، سرعت توسعه است. لاراول بسیار توسعه‌پذیر و قابل استفاده‌ی مجدد است. امکان ایجاد بسته‌هایی با عملکردهای جزئی و استفاده از آن‌ها در نرم‌افزارهای دیگر سبب می‌شود سرعت توسعه در نرم‌افزارها و سایت‌های طراحی شده با لاراول بسیار بالا باشد.

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

 Eloquent – پایگاه داده
مهم‌ترین ویژگی لاراول ORM اختصاصی آن به نام Eloquent است. انعطاف، کارایی و قدرت Eloquent را به ندرت می‌توان در ابزارهای دیگر یافت.
Eloquent کار کردن با اطلاعات را به گونه‌ای آسان می‌کند که باور آن گاهی دشوار به نظر می‌رسد. کدهای نوشته شده با Eloquent شباهت بسیار زیادی با زبان انسان دارند و حتی اگر تا کنون با این شیوه کد ننوشته باشید، معنی کدها را به خوبی متوجه خواهید شد.
برنامه‌نویسی Eloquent بر پایه‌ی سیستم PDO طرح‌ریزی شده است و بنابراین علاوه بر امکاناتی که این سیستم در اختیار برنامه‌نویسان قرار می‌دهد، امکان استفاده از دستورات PDO نیز فراهم است.
Eloquent امکان ذخیره و بازیابی اطلاعات در پایگاه داده‌های مختلف از جمله MySQL، Postgres، و SQL Server را فراهم می‌کند.

Blade – تمپلیت انجین
لاراول حاوی یک Template Engine اختصاصی به نام Blade است. اگرچه این تمپلیت انجین در مقایسه با ابزارهایی مانند Twig از امکانات کمتری برخوردار است، با این حال تمامی نیازهای معمول را برطرف می‌کند و در دستیابی به امنیت کافی در ایجاد خروجی به برنامه‌نویسان یاری می‌رساند.

Routing – مسیردهی
سیستم مسیردهی(‌ Routing ) در لاراول نیز به صورت اختصاصی توسعه یافته است. این سیستم امکانات بسیاری را در اختیار توسعه‌دهنده قرار می‌دهد. استفاده از پیشوندها و پسوندها، کنترلرها، فیلترها، توابع درون خطی و بسیاری امکانات دیگر کار کردن با مسیرها را ساده و کارآمد می‌کنند.
در نگارش آخر لاراول، امکان Cache کردن مسیرها برای افزایش چند ده برابری سرعت عملکرد در این بخش امکان‌پذیر شده است.

سرویس‌های لاراول
لاراول به عنوان یک فریم‌ورک قدرتمند php ابزارها یا سرویس‌های متعددی در اختیار برنامه‌نویسان و طراحان سایت قرار می‌دهد. فهرست این سرویس‌ها را برای آخرین نگارش این فریم‌ورک در ادامه مشاهده می‌کنید:

  1. Authentication – تایید هویت
  2. Authorization – دسترسی‌های کاربران
  3. Artisan Console – کنسول آرتیزان
  4. Billing – پرداخت و صورتحساب
  5. Cache – کش
  6. Collections – مجموعه‌ها
  7. Elixir – مکانیزاسیون
  8. Encryption – کدگذاری و رمزگزاری
  9. Errors & Logging – مدیریت خطاها و لاگ
  10. Events – رویدادها
  11. Package Development – توسعه‌ی بسته‌ها یا ماژول‌ها
  12. Filesystem / Cloud Storage – سیستم فایل – سیستم ابری
  13. Hashing – سیستم هش
  14. Helpers – ابزارهای کمکی
  15. Localization – سایت‌های دو زبانه و چند زبانه
  16. Mail – ایمیل
  17. Pagination – صفحه بندی
  18. Queues – صف‌ها
  19. Redis – ردیس
  20. Session – مدیریت و رمزگزاری سشن
  21. SSH Tasks – دسترسی آسان به SSH
  22. Task Scheduling – اجرای زمانبندی شده‌ی دستورات
  23. Testing – آزمون
  24. Validation – ارزیابی

Composer – کامپوزر
لاراول برای مدیریت نیازمندی‌ها از Composer استفاده می‌کند. به‌روزرسانی فریم‌ورک هم با استفاده از همین ابزار صورت می‌پذیرد. به این معنی که با صرف کمترین انرژی، همیشه می‌توانید از آخرین نگارش کتابخانه‌ها و فریم‌ورک لاراول در پروژه بهره‌برداری نمود.

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

پیکربندی تنظیمات ووکامرس – قسمت دوم

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

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

در عکس زیر بخش های همگانی را در قسمت پیکربندی می بینید :

 

۱٫ قسمت همگانی :

واحد وزن : که می توانید وزن واحد محصول خود را در این قسمت معرفی کنید برای مثال کیلوگرم و یا گرم و یا پوند و …. قرار دهید.

واحد اندازه گیری :واحد اندازه گیری که می توانید واحد اندازه گیری عرضی و یا ارتفاع محصول خود را در این قسمت قرار دهید .

منظور از نقد و بررسی ها چیست ؟

امتیاز های محصول خود چهار مجموعه دارد که با فعال کردن هر یک از آن ها اتفاقی می افتد :

فعال کردن امتیاز در دیدگاه‌ها : که با فعال کردن این قسمت مشاهده کننده های محصول شما می توانند با ارسال نظر به محصول شما امتیار دهند.

برای ارسال دیدگاه می بایست رای دهید : با فعال کردن این موضوع برای ارسال نظر باید به محصول سایت رای داده شود.

نمایش برچسب «مالک تاییدشده» برای دیدگاه‌های مشتری : با این قسمت می توانید اگرکه یک شخصی محصولی خریداری کرده است که که توسط مالکیت سایت تایید شده است در سایت در کنار نظر این مشتری نمایش داده می شود.

اجازه به ارسال نقد و بررسی (دیدگاه) تنها برای مالکین تایید شده (خریدار ها): با فعال کردن این تنها کاربرانی که محصولی خریداری کرده باشند قادر به ارسال نظر هستند.

۲٫ قسمت نمایش

 

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

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

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

  • مرتب‌سازی پیش‌فرض محصولات : می توانید محصولات را مرتب سازی کنید یعنی این که محصولات را در چه محدوده ای نمایش دهد به فرض مثال محدوده بر اساس تعداد فروش یا قیمت و ….

روش افزودن به سبد خرید :

به دو صورت است :

۱-انتقال به صفحه پرداخت پس از افزودن به سبد خرید : با فعال کردن این گزینه بعد از کلیک کردن بر روی افزودن به سبد خرید به صورت خودکار خریدار به صفحه پرداخت نهایی می برد تا محصول خریداری کند.

۲-فعال کردن ایجکس «افزودن به سبد خرید» در صفحهات بایگانی : با فعال کردن این مورد دکمه “افزودن به سبد خرید ” در تمام صفحه ها فعال می شود.

اکنون به قسمت نگاره های محصول رسیدیم :

تصاویر فهرست : با این قسمت می توانیم اندازه عکس تصاویر بندانگشتی را وارد کنیم برای مثال ۳۰۰px در ۳۰۰px قرار دهیم .

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

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

گالری نگاره محصول : با فعال کردن این قسمت یک لایت باکس از محصولات شما در سایت قرار می گیرد

ووکامرس چیست؟ ساخت فروشگاه اینترنتی با وردپرس

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

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

ووکامرس چیست؟

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

ووکامرس تا این لحظه با حدود بیش از ۴۷ میلیون دانلود توانسته ۲۸ درصد از فروشگاه های آنلاین را راه اندازی کند!

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

درگاه پرداخت ووکامرس

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

کنترل کردن فروشگاه اینترنتی

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

افزونه های ووکامرس

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

ارائه نمودار کامل فروش

ووکامرس به شما نمودار کامل فروش ها ، در آمد ها و فعالیت های فروشگاه شما را ارائه می کند.

 

نصب اتوماتیک فروشگاه اینترنتی

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

راه‌اندازی فروشگاه اینترنتی: طراحی فروشگاه اینترنتی با ووکامرس

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

طراحی فروشگاه اینترنتی با ووکامرس

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

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

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

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

ووکامرس یک افزونه کاملا رایگان است. یعنی دقیقا از مادر خود یعنی وردپرس تبعیت کرده و رایگان در اختیار افراد قرار می‌گیرد.

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

با ووکامرس چه محصولات یا خدماتی را می‌توان به فروش رساند؟

موارد زیادی مانند:

  • فروش محصولات دیجیتالی مثل نرم‌افزار، کتاب الکترونیکی و…
  • محصولات فیزیکی
  • خدمات (ارائه خدمات هاست و دامنه)
  • سیستم رزرواسیون
  • سیستم همکاری در فروش
  • و…

به راحتی می‌توانید در طراحی فروشگاه اینترنتی با ووکامرس به سود خوبی برسید و هر نوع محصولی که دارید را به راحتی به فروش برسانید.

چگونه با ووکامرس یک فروشگاه اینترنتی راه‌اندازی کنیم؟

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

قدم ۱: انتخاب نام دامنه و سرویس هاست

چه بخواهید یک فروشگاه اینترنتی راه‌اندازی کنید چه یک سایت معمولی باید دو فاکتور انتخاب و ثبت دامنه و انتخاب یک سرویس هاست را حتما در نظر بگیرید. بهتر است از یک سرویس هاست قدرتمند که ترجیحا هاست وردپرس باشد استفاده کنید. همچنین در انتخاب نام دامنه دقت کافی داشته باشید. این نام قرار است از حالا تا همیشه به عنوان اسم وبسایتتان ثبت شود!

قدم ۲: نصب وردپرس (کاملا رایگان)

پس از خرید هاست و ثبت دامنه باید منتظر بمانید طی ۲۴ الی ۴۸ ساعت تنظیم شوند. سپس وردپرس را دریافت کرده و آن را نصب و راه‌اندازی کنید. (می‌توانید از آموزش نصب و راه‌اندازی وردپرس کمک بگیرید.) نصب آن بسیار ساده است و فقط به ۵ دقیقه زمان نیازمند هستید.

قدم ۳: نصب ووکامرس (کاملا رایگان)

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

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

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

قدم ۴: افزودن اولین محصول

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

قدم ۵: انتخاب قالب مناسب برای فروشگاه اینترنتی (کاملا رایگان)

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

تفاوت قالب ووکامرس با قالب معمولی

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

اگر می‌خواهید خودتان قالب ووکامرسی مدنظر خود را طراحی کنید باید اصولی را در طراحی فروشگاه اینترنتی با ووکامرس در نظر بگیرید:

  • طرح شما باید کاملا واضح باشد که نه شما را نه مشتریان را گیج کند.
  • بخشی برای محتوای محصولات و محتوای بلاگ باید در نظر بگیرید.
  • حتما به فکر ساخت یک سایدبار باشید. این سایدبار می‌تواند امکان دسترسی‌های سریع را برای مشتریان فراهم کند.
  • کاملا واکنش‌گرا و موبایل دوست باشد. کاربران موبایلی خود را فراموش نکنید!
  • از فهرست ساده و مشخصی استفاده کنید.
برگه فروشگاه اینترنتی

در طراحی فروشگاه اینترنتی با ووکامرس باید حتما برگه مربوط به فروشگاه را در نظر گرفت. در واقع این برگه جایی است که تمامی محصولات شما در آن لیست می‌شود و در آدرس http://yoursite.com/shop یافت می‌شود. این صفحه را در بخش برگه‌ها در پیشخوان وردپرس می‌توان ویرایش کرد.

قدم ۶: توسعه فروشگاه ووکامرسی

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

برچسب ها: 

رفع خطا Optimize images در Gtmetrix و وردپرس در ۱۰ دقیقه

در این مقاله قصد داریم تا آموزش چگونگی رفع خطا Optimize images در نتایج وب سایت Gtmetrix را برای شما کاربران عزیز ارسال کنیم ، اگر شما در حال بررسی تست سرعت سایت خود هستید ، احتمالا با رنگ قرمز یا زرد خطا Optimize images را دریافت کرده اید ، در ادامه به شما توضیح خواهیم داد که علت این خطا چیست و چه تغییراتی باید در وب سایت خود اعمال کنید ؟

علت ایجاد خطا Optimize images در Gtmetrix :

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

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

چگونه تصاویر سایت خود را بهینه کنیم ؟

چند روش برای بهینه سازی تصاویر وجود دارد که هر کدام تاثیر خاص خود را در حجم تصویر شما دارند.

در مرحله اول شما یک قالب یا فرمت مناسب برای تصاویر خود انتخاب کنید ، در اغلب موارد فرمت PNG مناسب خواهد بود ، اگر قرار است یک تصویر عکاسی آپلود کنید فرمت JPEG یک انتخاب بهتر است. فرمت های TIFF و BMP معمولا سنگین هستند و برای وب سایت مناسب نمی باشند.

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

پس از انتخاب قالب و تغییر سایز عکس شما می توانید حجم عکس را توسط ابزار های فشرده سازی بدون افت کیفیت تا ۹۸% کاهش دهید ، وب سایت های زیادی می توانند این خدمات را به صورت رایگان در اختیار شما قرار دهند ، برای مثال وب سایت Tinypng می تواند عملیات کاهش حجم تصاویر png و jpg شما را بدون افت کیفیت انجام دهد.

همچنین شما می توانید از افزونه وردپرس TINYPNG و یا EWWW Image Optimizer برای کاهش خودکار تصاویر وردپرسی خود استفاده نمایید.

امیدواریم مقاله رفع خطا Optimize images برای شما مفید بوده باشد ، منتظر نظرات شما هستیم …

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

در این مقاله قصد داریم تا افزونه tinypng که بسیار کاربردی است را به شما دوستان عزیز آموزش بدهیم ، کار افزونه tinypng فشرده سازی خودکار تصاویر png و jpg در هنگام آپلود است ، این افزونه می تواند بیش از ۷۰% از حجم تصاویر شما بدون افت کیفیت کم کند ، در واقع در هنگام آپلود تصاویر ، وردپرس شما خودکار توسط api به tinypng متصل شده و حجم تصاویر شما کم می شود ، همچنین این افزونه می تواند کار فشرده سازی تصاویر از قبل آپلود شده در وردپرس شما نیز انجام بدهد.

کم حجم کردن عکس ها و افزایش سرعت سایت توسط افزونه tinypng :

برای دانلود این افزونه از این لینک آن را دانلود کنید و در هاست خود آن را نصب نمایید ، پس از نصب آن در وردپرس ، شما باید کلید api خود را در آن وارد نمایید ، به سایت tinypng وارد شوید و روی گزینه Developer API کلیک کنید و سپس نام خود و ایمیل خود را دریافت کنید تا کلید api را دریافت کنید :

سپس از قسمت افزونه ها – > افزونه های نصب شده در قسمت افزونه tinypng خود (Compress JPEG & PNG images) روی گزینه setting کلیک کنید ، در قسمت TinyPNG API key کلید api خود را وارد کنید تا وردپرس شما به سایت tinypng متصل شود ، سایر تنظیمات را نیز به دلخواه خود انجام بدهید ، توجه داشته باشید در لینک مدیریتی که tinypng برای شما ارسال کرده است می توانید تعداد عکس های که فشرده کرده اید را مشاهده نمایید ، البته این آمار در صفحه تنظیمان این افزونه نیز قابل مشاهده است ، خدمات tinypng برای افزونه wordpress تا ۵۰۰ عکس در ماه رایگان است و پس از آن شما باید با توجه به تعداد درخواستی هزینه واریز کنید ، پس از تکمیل این ۵۰۰ عدد تا ماه بعد ، در صورت عدم پرداخت هزینه ، تصاویر فشرده نخواهند شد ، ریست این آمار هر ماه میلادی می باشد ، البته شما می توانید سایر تصاویر خود را توسط خود این سایت به صورت رایگان فشرده نمایید.

 

رفع خطا Minify CSS در Gtmetrix وردپرس در ۵ دقیقه

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

خطا Minify CSS در gtmetrix به چه معناست ؟

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

برای رفع خطا Minify CSS کافیست با ابزار ها یا افزونه های وردپرس موجود در اینترنت این موارد اضافی را حذف کنید تا حجم فایل css شما کاهش یابد. زمانی که حجم CSS کم شود هم رندر کردن CSS سریع تر می شود و هم به دلیل کاهش حجم css ، سایت شما با سرعت بیشتری در مرورگر کاربر دانلود می شود.

چگونه فایل های CSS را Minify کنیم ؟ 

اگر از سایت استاتیک استفاده می کنید :

روش اول : شما می توانید از ابزار آنلاین csscompressor استفاده نمایید ، پس از باز کردن این سایت در قسمت CSS Compressor محتوا فایل css خود را وارد نمایید و گزینه Highest (no readability, smallest size) را انتخاب کنید سپس روی Compress کلیک کنید تا فایل جدید را دانلود کنید و سپس درهاست خود آپلود نمایید.

روش دوم : در سایت Gtmetrix روی خطا Minify CSS کلیک کنید و سپس مانند تصویر زیر فایل فشرده شده CSS را دانلود نمایید :

اگر سیستم مدیریت محتوا وردپرس است : 

شما همچنین می توانید از افزونه وردپرس Better WordPress Minify استفاده نمایید ، همچنین افزونه های کش مانند WP Fastest Cache نیز امکان minify کردن CSS را دارند.

رفع خطا Make fewer HTTP requests سایت Gtmetrix وردپرس در ۵ دقیقه

اگر شما در حال مطالعه این مقاله می باشید ، احتمالا شما وب سایت خود را در سایت Gtmetrix بررسی کرده اید و با خطا Make fewer HTTP requests مواجه شده اید ، در واقع بسیار سخت است ، چنانچه شما رتبه قرمز یا زرد خطا Make fewer HTTP requests را دریافت می کنید ، سایت شما تعداد ریکوست های زیادی برای دسترسی به عکس ها ، css ها ، جاوا اسکریپت ها و … ایجاد می کند ، در این مقاله ما شما را راهنمایی خواهیم کرد تا چگونه تعداد درخواست های http را کم کنید.

 

آموزش رفع خطا Make fewer HTTP requests در وردپرس :

مشکل تعداد زیاد درخواست http مربوط به فایل های وب سایت شما می شود و هیچ ارتباطی به سرویس هاست شما ندارد ، در ادامه روش های کاهش درخواست های http را توضیح می دهیم :

۱- ترکیب کردن فایل های CSS :

یکی از روش های کاهش تعداد درخواست http استفاده از افزونه های Combine سی اس اس در وردپرس می باشد ، در واقع ممکن است قالب ها و افزونه های وردپرس شما چندین فایل css ایجاد کرده باشند ، ترکیب این css ها با هم در یک فایل css می تواند سرعت سایت شما را بسیار بیشتر کند ، چرا که اتصال کانکشن های زیاد می تواند سایت شما را کند کند. اگر شما خود قادر به ترکیب این فایل ها نمی باشید ، پیشنهاد می کنیم از افزونه autoptimize و یا jch-optimize استفاده نمایید. افزونه autoptimize بسیار محبوب تر است. در مقاله های بعدی آموزش تنظیمات این افزونه را نیز ارسال خواهیم کرد.

۲-ترکیب کردن فایل های Javascripts :

پوسته ها ، افزونه ها و هسته وردپرس سایت شما ممکن است فایل های جاوا اسکریپت های زیادی تولید کرده باشند ، هر چه تعداد این فایل ها زیاد باشد سایت شما کند خواهد شد ، پیشنهاد می کنیم با combine کردن جاوا اسکریپت وردپرس خود سرعت سایت خود را بیشتر کنید ، برای انجام این کار می توانید از یکی از افزونه های autoptimize و یا jch-optimize و یا bwp-minify استفاده نمایید.

۳- به حداقل رساندن استفاده از طراحی ها و تصاویر در محتوا وب سایت :

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

۴- تولید تصاویر css sprites :

اگر قالب سایت شما یا منو ها تصاویر زیادی دارند ، شما می توانید از تکنیک css sprites استفاده کنید ، در واقع با استفاده از این تکنیک شما می توانید تمام تصاویر را در یک عکس ترکیب کنید و با استفاده از مختصات X و Y قسمت های مختلف عکس را در قالب سایت وردپرسی خود نمایش دهید ، به این ترتیب ممکن است ۲۰ درخواست عکس به ۱ عدد کاهش یابد و از آنجایی که مرورگر تنها برای یک عکس درخواست ارسال می کند ، سرعت سایت بسیار بیشتر خواهد شد. هرچند تولید css sprites تا حدودی نیاز به دانش فنی خاص خود را دارد ، اما شما می توانید از ابزار CSS Sprites Generator به راحتی عکس های خود را اسپرایت کنید و عکس ترکیب شده و مختصات css را دریافت نمایید ، همچنین در صورتی که از سیستم وردپرس استفاده می نمایید ، می توانید افزونه JCH Optimize را تست نمایید.

۵- تبدیل تصاویر به کد های Base64 :

یکی دیگر از روش های رفع خطا Make fewer HTTP requests ، تبدیل کردن تصاویر به کد های base64 می باشد ، شما می توانید تصاویری مانند لوگو خود را به یک رشته base64 تبدیل کنید ، این روش بیشتر برای عکس های با سایز کوچک توصیه می شود ، شما می توانید توسط ابزار  Base64 File Encoder تصاویر خود را به base64 تبدیل کنید و رشته کد آن را دریافت کنید.

۶-به حداقل رساندن استفاده از افزونه ها :

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

۷-محدود کردن میزان دکمه های اجتماعی :

استفاده از دکمه های اشتراک گذاری شبکه های اجتماعی ( مانند توییتر، فیس بوک، و غیره ) بسیار عالی است ، اما تعداد زیاد این دکمه ها می تواند درخواست های http تصاویر ، فایل های css و جاوا اسکریپت شما را افزایش بدهد ، بنابراین پیشنهاد می کنیم تا جایی که ممکن است این دکمه ها را کم کنید و یا تصاویر آنها را همانطور که در بالا توضیح دادیم به base64 تبدیل کنید.

رفع خطا Combine images using CSS sprites در Gtmetrix

در این مقاله قصد داریم تا در مورد رفع خطا Combine images using CSS sprites به شما کاربران عزیز آموزش بدهیم ، اگر شما کاربر عزیز در حال افزایش سرعت وب سایت خود هستید و با این خطا مواجه شده اید ، با مطالعه این مقاله می توانید با کمی تلاش این خطا را نیز رفع کنید ، تاثیر انجام این مقاله بر سرعت وب شما بسیار زیاد است و باعث می شود تعداد بسیار زیادی از درخواست های http شما کم شود ، ما قبلا در مورد کاهش تعداد درخواست HTTP در رسام هاست مقاله ارسال کردیم ، لطفا ادامه این مقاله را مطالعه نمایید.

منظور از CSS sprites چیست ؟

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

 

ما در تصویر بالا حدود ۵۰ تصویر را در یک عکس ترکیب کردیم ، با در نظر گرفتن تعداد تصاویر ترکیب شده ما بیشتر از ۴۹ درخواست از وب سایت خود کم کرده ایم ، این تعداد تاثیر بسیار زیادی در سرعت سایت دارد.

چگونگی رفع خطا Combine images using CSS sprites در وردپرس :

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

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

همچنین اگر شما تمایل دارید CSS sprites را به صورت responsive ایجاد کنید می توانید از لینک زیر استفاده نمایید :

http://responsive-css.spritegen.com/

در صورتی که سوال یا مشکلی در این مورد دارید آن را در قسمت دیدگاه های این سایت ارسال نمایید.