۵ ابزار برای تست واکنش گرایی وردپرس در محیط دسکتاپ

۵ ابزار برای تست واکنش گرایی وردپرس در محیط دسکتاپReviewed by بهاره کوهستانی on Oct 18Rating: 5.05 ابزار برای تست واکنش گرایی وردپرس در محیط دسکتاپ۵ ابزار برای تست واکنش گرایی وردپرس در محیط دسکتاپ در همیار وردپرس

responsive-mode-on-website-hamyarwp

۵ ابزار برای تست واکنش گرایی وردپرس روی محیط دسکتاپ

سلام؛

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

چرا باید وبسایت خود را برای حالت موبایل واکنش گرا کنیم؟

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

در مقاله ی امروز به بررسی  ۵  ابزار قدرتمند که به شما امکان تست  پوسته های وردپرسی را بر بسترهای هوشمند می دهد، می پردازیم.

توسعه ی مرورگرها برای ایجاد محیط تست واکنش گرایی سایت

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

در مرورگر کروم ابزاری با عنوان “Device Mode”  و در مرورگر فایرفاکس با عنوان “Responsive Design View” تعبیه شده است. اگر موافق باشید اول به مرورگر کروم می پردازیم و سپس فایرفاکس را مورد بررسی قرار می دهیم.

Device Mode در مرورگر کروم

برای دسترسی به “Device mode” باید ابزار توسعه دهنده (Developer tools) را در کروم فعال کنید. برای اینکار می توانید از مسیر Menu > More Tools > Developer Tools این کار را انجام دهید یا به طور جایگزین و میانبر از کلید های Ctrl+Shift+I به طور همزمان استفاده نمایید.

developer tool hamyarwp

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

device mode hamyarwp

همانطور که ملاحظه می کنید، وبسایت مورد نظر شما در قاب کوچکی نمایش داده شده و شما می توانید آن را به اندازه ی هر دستگاهی (تلفن همراه، تبلت و…) کوچک و بزرگ نمایید.

یکی از جالب ترین و بهترین گزینه هایی که در این ابزار موجود است، انتخاب  گوشی های مورد نظر از منوی بالایی با عنوان <Select mode> می باشد. شما از این فهرست  میتوانید گوشی مورد نظر خود را انتخاب کنید تا سایت را درون قاب آن به شما نمایش دهد.( در صورتی که شما سایز و اندازه ی گوشی موبایل را نمی دانید این گزینه بهترین انتخاب است.)

mobile device hamyarwp

سایت وردپرسی خود را می توانید هم بر بستر iOS و هم بر بستر اندروید چک کنید.

همانطور که ملاحظه کردید، مرورگر کروم محیطی کاملا شبیه سازی شده از بسترهای iOS و اندروید را اختیار شما قرار می دهد. حال با هم به سراغ مرورگر فایرفاکس می رویم…

Responsive Design View در مرورگر فایرفاکس

مرورگر فایرفاکس نیز ابزاری برای تست حالت واکنش پذیری سایت وردپرس روی تلفن های همراه و تبلت  دارد اما عملکرد آن مثل کروم آزادانه نیست و امکاناتش محدودتر است و نمیتوان گفت رقیبی برای کروم است. اما به هر حال محیطی استاندارد را برای تست سایت وردپرس ایجاد خواهد کرد.
در فایرفاکس با رفتن به مسیر Developer > Responsive Design View می توانید به محیط توسعه دهنده وارد شوید.

developer responsive fire hamyarwp

همچنین می توانید با باز کردن محیط “Inspect Element” بر روی آیکون “Responsive design view” کلیک کنید. حال سایت در صفحه ای با قاب گوشی موبایل باز می شود که مشاهده خواهید کرد.

responsive mode hamyarwp

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

description hamyarwp

تست واکنش گرایی سایت  با کمک گوگل

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

mobile google test hamyarwp

ورود به وبسایت Mobile-Freindly Test

responsinator

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

responsinator hamyarwp

ورود به وبسایت responsinator 

quirktools

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

quirktools hamyarwp

ورود به وبسایت quirktools

جمع بندی!

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

موفق باشید

مطالب همیار وردپرس را در کانال تلگرام همیار وردپرس دنبال کنید ♥


همیار وردپرس

استایل نویسی سریع با زبان Less-قسمت سوم+آموزش ویدیویی

استایل نویسی سریع با زبان Less-قسمت سوم+آموزش ویدیوییReviewed by بهاره کوهستانی on Oct 19Rating: 5.0قسمت سوم:استایل نویسی سریع با زبان Less+آموزش ویدیوییقسمت سوم:استایل نویسی سریع با زبان Less+آموزش ویدیویی در همیار وردپرس

less-hamyarwp

آموزش زبان Less – فسمت سوم

باسلام و خسته نباشید خدمت تمامی دوستان عزیز؛

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

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

Less-styling-hamyarwp

در این سری از ویدئوهای آموزشی، ما قصد داریم سه مبحث بسیار مهم و کاربردی این ابر زبان استایل نویسی یعنی زبان شیوه نامه Less را به شما آموزش دهیم.

در گام اول با آرگومان ها یا پارمتر های درونی میکسین (Parametric Mixin) توضیح می دهیم و دو مثال کاربردی از آن را مطرح می کنیم. مبحث بعدی ما دیدگاه ها در Less می باشد  و در بخش سوم نیز، وارد کردن فایل به درون پروژه است که شما می توانید از آن به عنوان یک کلید طلایی در طراحی استفاده کنید و به سرعت به استایل های مورد نظر خود دست پیدا کنید.
همچنین  در این قسمت مثالی از  فریم ورک بوت استرپ  را به شما نمایش می دهیم.

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

در صورت داشتن هر گونه مشکلی می توانید در بخش نظرات مطرح کنید

با تشکر

آموزش توسط محمدعلی حصاریان 

دانلود فایل های تمرینی ضمیمه شده

دانلود

دانلود ویدئوی آموزشی استایل نویسی Less-قسمت سوم

دانلود ویدیو

مطالب همیار وردپرس را در کانال تلگرام همیار وردپرس دنبال کنید ♥


همیار وردپرس

پوسته وردپرس وبلاگی mystique فارسی

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

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

دیگر امکانات

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

منبع : بیگ تم


قالب وردپرس|پوسته وردپرس|افزونه وردپرس|وردپرس فارسی

قالب شرکتی Accesspress Basic

قالب شرکتی Accesspress BasicReviewed by حسین رحیمی on Oct 20Rating: 5.0قالب شرکتی Accesspress Basicدانلود رایگان قالب شرکتی و فارسی Accesspress Basic

قالب شرکتی وردپرس - Accesspress Basic

بروزرسانی به نسخه ۲٫۰٫۸ – ۲۸ اردیبهشت ۱۳۹۴

سلام دوستان؛

در بین قالب‌های شرکتی رایگان وردپرس، برخی از قالب‌ها امکانات و ظاهر ویژه‌تری دارند. قالب شرکتی Accesspress Basic یکی از همین قالب‌هاست. وجود اسلایدری با امکان قرار دادن متن، آیکون و لینک، وجود بخش های Call to action،بخش toggle (متن های آکاردئونی)،نظرات مشتریان و … دلیل این ادعاست. این قالب از سری محبوب Accesspress است که همیشه بروزرسانی و پشتیبانی خوبی داشته و این بار هم فقط یک روز بعد از بروزرسانی جهانی قالب، تیم همیار وردپرس، بروزرسانی نسخه فارسی این قالب شرکتی را برای شما آماده کرده است.

قالب شرکتی Accesspress Basic

امکانات قالب شرکتی Accesspress Basic

  • دارای اسلایدر با امکان قرار دادن دکمه و فونت آیکون برای دکمه
  • کاملا واکنش گرا
  • دارای ابزارک‌های کاربردی و مورد نیاز یک قالب شرکتی وردپرس
  • امکان استفاده یا عدم استفاده از بخش‌های مختلف صفحه اصلی
  • امکان حذف دیدگاه‌نویسی در برگه‌ها و نوشته‌ها بصورت جداگانه
  • امکان عدم نمایش ابزارک‌های پانوشت و جایگاه آنها
  • امکان شخصی سازی بیشتر کلمات پیش‌فرض قالب
  • از سری قالب‌های Accesspress
  • دارای ابزارک toggle (متن های آکاردئونی)
  • دارای ابزارک call to action

تغییرات آخرین بروزرسانی

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

 نکات نصب

  1. برگه‌ای با نام دلخواه (مثلا نام سایت یا صفحه اصلی) ساخته و از قسمت قالب home page را انتخاب کنید. سپس از داشبورد وردپرس، قسمت تنظیمات > خواندن، این برگه را به عنوان برگه ایستا انتخاب کنید
  2. برای ایجاد اسلایدر، به نمایش > تنظمیات پوسته > تظیمات اسلایدر بروید
  3. قسمت‌های دیگر صفحه اصلی بصورت ابزارک در سایت قرار می گیرید. در بخش نمایش > ابزارک‌ها ، ستون های مختلفی دیده می شود که ابزارک‌هایی هم‌نام آنها موجود است. از این ابزارک‌ها در ستون مناسب(هم‌نام) استفاده کنید.(می‌توانید برای راحتی بیشتر از درون‌ریزی ابزارک‌ها استفاده کنید)
  4. هرجا که امکان استفاده از فونت‌آیکون بود، می توانید از این صفحه کد آیکون را دریافت و قرار دهید: fortawesome icons (برای مثال برای نمایش یک ادمک می‌توانید کد fa-user  را استفاده کنید)

درون‌ریزی دمو

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

درون ریزی محتوای دمو

دانلود راهنما

درون ریزی ابزراک های دمو

دانلود راهنما


دانلود قالب شرکتی Accesspress Basic با فونت یکان

دانلودپیش‌نمایش

دانلود قالب شرکتی Accesspress Basic با فونت عربیک نسخ (فونت استاندارد گوگل برای اندروید)

دانلوداسکرین شات

دانلود قالب شرکتی Accesspress Basicبا فونت جدید میرزا

دانلوداسکرین شات

مطالب همیار وردپرس را در کانال تلگرام همیار وردپرس دنبال کنید ♥


همیار وردپرس

تفاوت دامنه و هاست و تاثیر سرعت سرور چیست؟

تفاوت بین دامنه و هاست (سرور) چیست؟

برای افرادی که تازه کار هستند تفاوت بین نام دامنه و هاست گیج‌کننده است. برای بیان ساده نام دامنه شبیه آدرس خانه شماست و تعریف هاست به بیان ساده فضای خانه است که شما اثاثیه در آن می‌گذارید. بنابراین نام دامنه شما نام سایت یا URL شماست که می‌توان توسط ثبت نام دامنه خریداری کرد. هنگامی‌که یک بازدیدکننده سایت وارد نام دامنه شما بر روی مرورگر می‌شود، دامنه سپس به IP آدرس سرور ترجمه شده و سپس سرور فایل‌های سایت شما را می‌فرستند. بنابراین دامنه نامی است که هر وبسایت برای تشخیص و قابل دسترسی بودن نسبت به سایر وبسایت‌ها به خود می‌گیرد مانند http://www.web24.ir. هر دامنه با توجه به نوع فعالیت دارای پسوندهایی از جمله .com، .net، .ir و غیره می‌باشد. به عنوان مثال پسوند .com که معروفترین پسوند برای دامنه است بسیاری از سایت‌های همه‌منظوره از آن استفاده می‌کنند، پسوند .net به معنای شبکه توسط شرکتهای ارائه دهنده خدمات اینترنتی و شبکه های اطلاع رسانی به کار برده می‌شود. هنگامیکه وبسایت شما بر روی اینترنت ظاهر می‌شود فایل‌ها نیاز به آپلود بر روی سرور دارند. این فضاها توسط شرکت‌های هاستینگ بر روی سرورهایشان ایجاد شده و به مشتریان اجاره داده می‌شود. برخی از ویژگی‌هایی که در هنگام اجاره سرویس هاستینگ باید به آن توجه داشت شامل میزان فضا، نوع هاست، کشور قرار گیرنده سرور، تعداد اکانت‌های ایمیل، میزان پهنای باند و پشتیبانی از زبان‌های برنامه‌نویسی می‌باشد. بنابراین با توضیحات بالا می‌توان فهمید که هاست و دامنه به هم وابسته‌اند.
 

هاست و دامنه

نقش زمان پاسخ سرور در عملکرد سایت :

این روزها عملکرد وبسایت برای داشتن سایتی برای کسب و کار مهم است. بارگذاری (loading) آهسته وبسایت باعث می‌شود برای بازدیدکنندگان خسته کننده شود و به راحتی سایت را ترک کنند و دیگر بازنگردند. بنابراین زمان پاسخ سرور یکی از فاکتورهای حیاتی در تعیین عملکرد وبسایت و در نتیجه کسب و کار می‌باشد. در زیر برخی نکات کلیدی آورده شده است که اهمیت زمان پاسخ سرور، عوامل مؤثر بر آن و راه‌هایی برای بهبود آن را برای سایت نشان می‌دهد.

هاست - سرور


زمان پاسخ سرور سرعت سایت را تعیین می‌کند؛

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

هاستینگ - سرعت سرور


تأثیر بارگذاری آهسته وبسایت بر کسب و کار؛

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

هاست سایت


عواملی که بر زمان پاسخ سرور تأثیر می‌گذارند؛

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

لطفا صبر کنید


طراحی سایت ۲۴