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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

۲٫ قسمت نمایش

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

 

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

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

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

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

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

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

فریم ورک لاراول (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 استفاده می‌کند. به‌روزرسانی فریم‌ورک هم با استفاده از همین ابزار صورت می‌پذیرد. به این معنی که با صرف کمترین انرژی، همیشه می‌توانید از آخرین نگارش کتابخانه‌ها و فریم‌ورک لاراول در پروژه بهره‌برداری نمود.

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

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

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

ساخت منوی متفاوت در وردپرس برای اعضای سایت

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

ساخت چندین منو در وردپرس

در وردپرس اگر قالب تان فقط یک محل برای ایجاد منو دارد، شما می توانید چندین منوی متفاوت برای همان محل ایجاد کنید. حال برای ایجاد منوی متفاوت برای اعضای سایت به بخش نمایش و فهرست ها بروید. سپس دو فهرست با عنوان logged-in و logged-out ایجاد کنید.

بعد از ساخت منوهای مورد نظر باید قطعه کد زیر را به فایل های قالب وردپرس سایت اضافه کنید. به فایل functions.php بروید و کد زیر کپی نمایید:

حال کاربرای که وارد سایت شده اند، می توانند منوی logged-in را مشاهده کنند. اما برای کاربرانی که هنوز ثبت نام نکرده اند و یا وارد سایت نشده اند، منوی متفاوتی نمایش داده می شود.
با کمک این روش می توانید دو منوی متفاوت ایجاد کنید و به راحتی این منوها را برای اعضای سایت خود شخصی سازی نمایید. در این صورت می توانید به راحتی لینک ورود و خروج از مدیریت وردپرس را به منوی سایت اضافه کنید. اما برای دوستانی که خواهان استفاده از کدهای وردپرس نمی باشند، می توانند از افزونه هایی که در این زمینه می باشد، استفاده کنند.

آموزش ایجاد جدول در وردپرس با افزونه Tablepress

خیلی وقت های شده است که شما بخواهید در سایت وردپرسی تان جدولی بکشید اما نتوانید امروز میخوام شما را با افزونه ایی کاربردی برای ایجاد جدول در وردپرس آشنا کنم نام این افزونه Tablepress است که توسط Tobias Bäthge درست شده است. شما با استفاده از این افزونه میتوانید جداول حرفه ایی در سایت وردپرسی تان بکشید.

قابلیت های افزونه Tablepress:

– پشتیبانی از زبان فارسی

– ساخت جداول بصورت حرفه ایی

– پشتیبانی از css۳

– دادن css موردعلافه به آن

– شورت کد کوتاه

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

– قرارگیری ستون های افقی و عمودی بصورت دلخواه و بی نهایت

– قرار گیری هدر رنگی و فوتر به جدول

ساخت جداول با  افزونه Tablepress

برای ساخت جداول با این افزونه ابتدا افزونه را نصب و فعال سازی کنید سپس به منو Table Press که در ستون کناری پیشخوان وردپرس هست مراجعه نموده و برروی Add Table کلیک نمائید.
سپس نام و توضیحات جدول را در بخش نخست و در زیرش اولین جعبه تعداد ستون ها را مشخص می کند و در جعبه دوم تعداد سطر ها را مشخص میکنیم و بر روی add table کلیک میکنیم.
سپس در بخش باز شده ما چندیدن اطلاعات داریم که نظیر ایدی جدول(شورت کد) می باشد که آن را باید در نوشته یا برگه های وردپرس مشخص کنیم.
در بخش های پایینی اطلاعات جدول را وارد میکنیم و در آخر بر روی save change کلیک میکنیم به همین راحتی جدول وردپرسی خود را ساختیم.

Plugin Options

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

Fronted options

این بخش مربوط به ظاهر جدول‌های ساخته شده با افزونه است. در صورت نیاز می‌توانید کدهای css اختصاصی خود را در بخش Custom CSS وارد کنید.

User Options

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

All Tables

در این قسمت می‌توانید تمامی جدول‌های ساخته شده را ببینید. اگر جدولی ایجاد نکرده‌اید، قطعا این بخش را خالی می‌بینید. برای ایجاد جدول در وردپرس کافی است بر روی Add New کلیک کنید تا تنظیمات مربوط به ایجاد جدول جدید نمایان شود.

Table Name: در این بخش باید نامی برای جدول موردنظر خود انتخاب کنید.
Description (optional): در این بخش باید توضیحات مربوط به جدول موردنظر خود انتخاب کنید.
Number of Rows: در این بخش باید تعداد  ردیف‌های موردنیاز خود را جهت ایجاد آن در جدول انتخاب کنید.
Number of Columns: در این بخش باید تعداد  ستون‌های موردنیاز خود را جهت ایجاد آن در جدول انتخاب کنید.

پس از اعمال موارد بالا بر روی Add Tables کلیک کنید تا صفحه مربوط به سایر تنظیمات جدول را مشاهده کنید.

Table ID: در این بخش می‌توانید ID جهت استفاده در شورت‌کد افزونه را استفاده کنید.

Table Manipulation

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

Avanced editor: با استفاده از این گزینه می‌توانید از ویرایشگر پیشرفته افزونه جهت درج اطلاعات جدول در وردپرس استفاده کنید.
Insert Image: با استفاده از این گزینه می‌توانید از تصاویر موردنیاز خود در جدول ایجاد شده استفاده کنید.
Insert Link: با استفاده از این گزینه می‌توانید در جدول ایجاد شده خود، به کلمه‌ای لینک بدهید.
Selected rows: با استفاده از این گزینه می‌توانید با انتخاب ردیف موردنظر خود آن را پنهان کنید و یا در صورت پنهان بودن دوباره آن را نمایش دهید. همچنین با استفاده از گزینه Duplicate می‌توانید ردیف موردنظر خود را کپی کنید.

Add row(s): با استفاده از این گزینه می‌توانید ردیفی را به جدول خود اضافه کنید.
Selected columns: با استفاده از این گزینه می‌توانید با انتخاب ستون موردنظر خود آن را پنهان کنید و یا در صورت پنهان بودن دوباره آن را نمایش دهید. همچنین با استفاده از گزینه Duplicate می‌توانید ردیف موردنظر خود را کپی کنید.
Add column(s) : با استفاده از این بخش نیز می‌توانید ستونی را جدول خود اضافه نمایید.
Table Head Row: با استفاده از این گزینه می‌تواید یک ردیف را برای اطلاعات اصلی جدول در وردپرس قرار دهید و در ردیف‌های بعدی اطلاعات مربوط به آن را نمایش دهید.

Table Foot Row: با استفاده از این گزینه نیز می‌توانید ردیف آخر را برای اطلاعات اصلی قرار دهید و اطلاعات اضافی را در سایر ردیف‌ها قرار دهید.
Row Hover Highlighting: با انتخاب این گزینه در صورتی که کاربر موس خود را بر روی یک ردیف یا ستون خاصی ببرد، آن ستون تغییر رنگ می‌دهد و به حالت Hover در می‌آید.
Print Table Name: با انتخاب این گزینه می‌توانید محلی را برای نمایش عنوان جدول در وردپرس نمایش دهید. در این بخش می‌توانید نام جدول را در پایین یا بالای افزونه نمایش دهید.
Print Table Description: در این بخش نیز می‌توانید محلی را جهت نمایش توضیحات مربوط به جدول موردنظر خود را نمایش دهید که امکان نمایش در بالا یا پایین جدول در اختیار شما قرار گرفته است.

Features of the DataTables JavaScript library

این بخش مربوط به اطلاعات javascript جدول است که می‌توانید آنها را شخصی‌سازی کنید.

Use DataTables: با استفاده از این گزینه می‌توانید قابلیت استفاده از کدهای javasctipt را در سایت خود فعال کنید.
Sorting: این حالت به شما امکان فشرده‌سازی کدهای مورد استفاده را می‌دهد که می‌توانید با استفاده از آن کدهای جاوا اسکریپت مورد استفاده در افزونه را فشرده‌سازی کنید.
Search/Filtering: با استفاده از این گزینه می‌توانید قابلیت جستجو در میان اطلاعات درج شده در جدول را در اختیار کاربران خود قرار دهید.
Pagination: با استفاده از این گزینه می‌توانید قابلیت صفحه‌بندی را در صورت زیاد بودن اطلاعات جهت نمایش در جدول به کاربر بدهید و کاربر بتوانید صفحات بعدی را انتخاب کند.

Show rows per page: با استفاده از این گزینه می‌توانید تعداد ردیف‌هایی که قرار است در جدول نمایش داده شود را تعیین کنید.
Info: با استفاده از این گزینه می‌توانید اطلاعات اضافی مربوطه را که در جدول نمایش داده می‌شود، فعال کنید.
Horizontal Scrolling: با استفاده از این ابزار می‌توانید قابلیت اسکرول شدن را در جدول ایجاد شده توسط افزونه ایجاد کنید. این ابزار زمانی کاربرد دارد که تعداد ستون‌های استفاده شده در جدول زیاد باشد و کاربر نتواند همه‌ی آنها را در یک صفحه مشاهده کنید. پیشنهاد می‌کنم این بخش را فعال کنید تا به ظاهر جدول خود نیز کمک کرده باشید.

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

آموزش دادن CSS اختصاصی به جدول

برای دادن css اختصاصی به جدولمان ابتدا بر روی add table کلیک میکنیم سپس در بخش باز شده فیلد عای مربوطه رو پرمکینیم و بر روی add table کلیک میکنیم.
در سربرگ باز شده به بخش extra classes css استایل های اختصاصی خودمان را می‌دهیم.

افزایش حجم آپلود در وردپرس

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

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

افزایش حجم آپلود در وردپرس

این مشکل زمانی آغاز می‌شود که در هنگام آپلود فایل با خطایی مواجه خواهید شد که در آن پیغام “فایل مورد نظر شما دارای اندازه بیش از حد مجاز است” روبه‌رو خواهید شد که امکان بارگزاری فایل برای شما را نخواهد داد.

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

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

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

در ادامه به بررسی روش‌های موجود می‌پردازیم.

۱- افزایش حجم آپلود در وردپرس توسط هاستینگ

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

۲- افزونه افزایش حجم آپلود وردپرس

افزونه‌ای که قصد معرفی ان را دارم با عنوان Increase Max Upload Filesize در مخزن وردپرس منتشر شده است که پس از نصب و فعال سازی آن مشابه تصویر زیر منویی با عنوان Max File size در پیشخوان وردپرس اضافه خواهد شد، با مراجعه به تنظیمات افزونه قادر خواهید بود تا حجم دلخواه خود را برای آپلود در رسانه وردپرس تعیین کنید تا در سایت اعمال شود.

۳- استفاده از کدنویسی

در این روش قادر خواهید بود تا از طریق فایل‌های php.ini, htaccess, user.ini و فایل فانکشن قالب خود میزان حجم آپلود در وردپرس را افزایش دهید که در ادامه به معرفی هر یک از آنها می‌پردازیم.

 

php.ini

این فایل به عنوان محبوب‌ترین فایل برای افزایش حجم آپلود در وردپرس شناخته شده است که بر روی سرور تنظیم می‌شود. اگر به این فایل دسترسی نداشته باشید می‌توانید یک فایل با نام php,ini ایجاد کرده و سپس کدهای زیر را در آن قرار دهید و در نهایت آن را در پوشه wp-admin قرار دهید.

user.ini

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

htaccess.

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

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

اگر باز هم موفق به افزایش حجم آپلود در وردپرس نشدید وارد روت هاست شده و کدهای زیر را در مکان مناسبی از فایل wp-config.php و یا فایل functions.php که در پوشه قالب وردپرس می‌باشد قرار دهید.

۴- استفاده از تنظیمات هاست

برای این مورد اگر از هاست لینوکس cPanel استفاده می‌کنید وارد هاست خود شده و مشابه تصویر زیر به منوی Selece PHP Version مراجعه کنید.

حال در صفحه باز شده ورژن مورد نظر برای PHP را انتخاب کرده و پس از ذخیره تنظیمات با کلیک بر روی گزینه Switch to PHP Extensions موارد مربوط به افزایش حجم آپلود در وردپرس را تغییر دهید.

در نهایت پس از ذخیره تنظیمات میزان حجم آپلود در وردپرس برای وبسایت شما تغییر خواهد کرد.

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

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

برای اضافه کردن فونت به قالب وردپرس در ابتدا باید آن فونت را در ۳ و یا ۴ فرمت داشته باشید. در این مطلب به عنوان نمونه فونت 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 قرار دهید.

آموزش فعال سازی افزونه AMP در وردپرس

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

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

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

 

فعال سازی افزونه AMP وردپرس

 

برای نصب این افزونه می توانید به قسمت پلاگین های وردپرس بروید و AMP را در مخزن وردپرس جستجو کنید و افزونه را بعد از نصب فعال سازی کنید.البته بعد از فعال سازی افزونه سایت با amp اجرا می شود ولی به صورت ابتدایی و بدون تنظیمات خاص برای این کنه نسخه بهینه سازی شده سایت را مشاهده کنید کافی است در انتهای ادرس صفحات پسوند پسوند /amp/ یا ?amp=1 را اضافه کنید یعنی آدرس صفحات بهینه شده شما :

  • آدرس عادی : http:// sitename.com/post
  • آدرس AMP : http:// sitename.com/post/amp
  • یا : http:// sitename.com/post/?amp=1

تنظیمات AMP وردپرس بسیار ساده است و به شما کمک میکند تا یک سری تغییرات در ظاهر انجام بدید.برای اینکار وارد بخش “نمایش” یا Appearance در محیط مدریت وردپرس بشید و روی AMP کلیک کنید:

شما میتوانید پس زمینه، متن هدر و رنگ هارو تغییر بدید:

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

نکات مهم در مورد  افزونه AMP وردپرس

Category , Tag ها فعلا با این افزونه پشتیبانی نمیشوند و صفحات آن به AMP تبدیل نمیشود.

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

برخی از قابلیت  های اختصاصی AMP مانند amp-analytics  و amp-ad توسط این افزونه پشتیبانی نمیشوند و باید کد آن را به صورت دستی به قالب اضافه کنید.

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

  • ورژن اصلی برای کامپیوتر
  • ورژن موبایل برای گوشی های همراه
  • ورژن AMP که بهینه شده برای موبایل است و از ورژن موبایل  سرعت بسیار بالاتری دارد.

جمع بندی کلی:

ابزار google amp یکی از قدرتمند ترین و ساده ترین افزونه های افزایش سرعت و بهینه سازی سایت در تلفن های همراه است که برای خیلی از سایت ها سود مند بوده است.

حتما بعد نصب و فعال سازی AMP وردپرس آن را در تلفن های همراه تست کنید اگر مشکلات زیادی را مشاهده کردید این افزونه را غیر فعال کنید یا از افزونه های کمکی مانند Glue for Yoast SEO & AMP استفاده کنید

آشنایی با نحوه نصب فریم ورک Accelerated Mobile Pages

فریم ورک Accelerated Mobile Pages : با توجه به گسترش استفاده از اسمارت فون ها و اینترنت موبایلی آمار استفاده از موبایل روند صعودی دارد در نتیجه سرعت بخشیدن به سرعت بارگذاری صفحات در موبایل اهمیت ویژه‌ای  دارد به همین دلیل گوگل در اوایل سال ۲۰۱۶ از ابزار جدید خود به نام AMP  رونمایی کرد که در نتایج جستجوی موبایل از این ابزار برای رتبه‌بندی سایت ها استفاده می‌کند.

فریم ورک AMP چیست؟

فریم ورک AMP یا Accelerated Mobile Page به معنی افزایش سرعت لود شدن صفحات در موبایل است. این فریم ورک به صورت متن باز و Open Source ارائه شده است تا توسط تمامی برنامه‌نویسان به راحتی قابل‌استفاده و توسعه باشد و توانایی سرعت بارگذاری صفحات سایت را بر روی اسمارت فون ها بهبود بدهند.

فریم ورک AMP  چگونه کار می کند؟

به طور کلی این فریم ورک امپ بر اساس ۳ بخش زیر اجرا می‌شود :

 

  • AMP HTML : چند دستور ساده html که به صفحات سایت شما اضافه می‌شود و اگر آشنایی با  زبان html داشته باشید قادر خواهید بود به راحتی تگ های آن را به سایت اضافه کنید. جهت آشنایی بیشتر با پیش‌نیازها و مستندات لازم برای اجرای AMP  به سایت رسمی آن مراجعه کنید.
  • AMP JS : مجموعه دستورات  جاوا که توسط سایت فراخوانی می‌شود و مدیریت منابع را بر عهده دارد که این فایل جاوا به صورت اختصاصی برای فریم ورک AMP نوشته شده است و باید دقت کنید که این فریم ورک با سایر اپلت های جاوا که به صورت شخصی کد نویسی شده‌اند همخوانی ندارد.
  • AMP CDN  : یک شبکه توزیع محتوای Content Delivery Network که صفحات AMP سایت شما را شناسایی می‌کند و با کش کردن آن‌ها و بعد از بهینه‌سازی برای نزدیک‌ترین کاربر نمایش می‌دهد.

نحوه فعال‌سازی فریم ورک AMP  بر روی سایت

 

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

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

AMP  محدودیت های هم برای قالب سایت می‌تواند به وجود آورد برای مثال در فریم ورک AMP تمامی کد های CSS باید به صورت in-line و با حجم کمتر از ۵۰ Kb باشد.برای به حداقل رساندن زمان لود فونت ها باید از افزونه amp-font  استفاده کنید.

برای بهینه‌سازی تصاویر سایت باید افزونه amp-img element استفاده نماید که طول و عرض تصاویر در آن مشخص شود.

اگر از تصاویر متحرک GIF در سایت استفاده کرده‌اید باید از افزونه amp-anim extended component استفاده کنید.

برای استفاده از ویدئوهایی که روی هاست خودتان میزبانی شده از تگ  amp-video و برای استفاده از ویدئوهای یوتیوب از افزونه اختصاصی amp-youtube باید استفاده کنید.

همچنین قابلیت استفاده از اسلاید شو تصاویر توسط amp-carousel و لایت باکس تصاویر  توسط amp-image-lightbox  و همچنین شبکه‌های اجتماعی مانند : Twitter,Instagram,Facebook,Pinterest,Vine هم با افزونه‌های اختصاصی خودشان وجود دارد.

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

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

<link rel=”amphtml” href=”http://www.example.com/blog-post/amp/”>

 

نمایش تبلیغات در صفحات بهینه‌شده با فریم ورک AMP

با افزونه اختصاصی amp-ad extended component که گوگل ارائه داده است.مدیران سایت ها می‌توانند تبلیغات شبکه‌های تبلیغاتی مختلف را در صفحات بهینه‌سازی شده نمایش دهند و هیچ‌گونه کاهش سرعتی در سرعت صفحات مشاهده نخواهد شد.

آیا  امکان استفاده از  آنالیتیکز در AMP وجود دارد ؟

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

برای فعال‌سازی آنالیتیکز در AMP  می‌توان از دو روش زیر بهره برد:

  • Amp-pixel element: یک تگ ساده برای استفاده از صفحات است که برای شمارش بازدید صفحات استفاده می‌شود و می‌توانید مقادیر دیگری را به آن اضافه کنید که اینجا قابل مشاهده است  که از نمونه‌های آن : DOCUMENT_REFERRER  و Title است.
  • Amp-Analytics Extended Component : این افزونه اختصاصی برای AMP است و اجازه می‌دهد آمار دقیق تری از سایت داشته باشید و همانند نسخه دسکتاپ سایت به همه فعالیت های کاربر دسترسی داشته باشید.