طراحی سایت | برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

طراحی سایت | برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

۴۰ مطلب در شهریور ۱۳۹۸ ثبت شده است

۱۵شهریور

خصوصی کردن پست ها در وردپرس

این کار را با افزونه های وردپرس مانند مثال افزونه Private only و سایر افزونه های دیگر می توان این کار را انجام داد اما با این آموزش دیگر نیاز به نصب افزونه های وقت تلف کن نیست 😀 وردپرس خود به تنهایی این قابلیت را برای شما فراهم کرده است تا بتوانید نوشته هایی که دوست ندارید آشکار شود را به صورت خصوصی و  رمز دار منتشر کنید که با این کار ها دیگر راهی برای دیدن مطلب شخصی شما در سایت شما وجود ندارد و برای این کار فقط کافیست تا از قسمت نوشته ها > افزودن نوشته کلیک کنید و در قسمت کادر انتشار بر روی گزینه نمایانی: عمومی بر روی گزینه ویرایش آن کلیک کرده و تنظیمات آن را انتخاب کنیم.

آموزش کار با این قسمت :

تصویر زیر موارد انتشار مطلب را نمایش می دهد که باید بر روی ویرایش که در کنار عمومی است کلیک کنید :

برای خصوصی کردن باید بر روی نمایانی کلیک کنید

بعد از کلیک بر روی عمومی 3 گزینه مانند گزینه های زیر نمایان می شود :

تنظیمات عمومی

در تنظیمات نمایانی :

  1. عمومی :اگر مطلب شما در حالت عمومی باشد مانند مطلب دیگر در سایت شما قرار می گیرد و قابل دیدن است
  2. رمزدار   :اگر در صورتی رمز دار باشد که خود رمز آن را وارد می کنید و بعد با پخش آن رمز در دسترس کاربران قرار می گیرد و اگر رمز اشتباه وارد کنند پیغام خطا می دهد.
  3. خصوصی : اگر مطلب شما در حالت خصوصی باشد فقط خودتان می توانید به آن دسترسی داشته باشید و دیگر کاربران نمی توانند آن را ببنند.

منبع: میهن ورد پرس

 

شهربانو دوستی
۱۴شهریور

پخش آنلاین موزیک در وردپرس

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

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

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

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

[audio src=“source.mp3”]

لینک دانلود موزیک را به جای source.mp3 قرار دهید.

با کد بالا وردپرس پلیر زیبا و html5 خود را در تمامی مرورگر ها به بهترین شکل ممکن برای کاربران سایت شما نمایش می دهد. یک پلیر قوی و زیبا بدون نیاز به نصب افزونه های پلیر موزیک 🙂

موفق باشید.

https://mihanwp.com/audio/

شهربانو دوستی
۱۴شهریور

زمینه های دلخواه در وردپرس

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

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

جان خودم اگه گرفته باشید چی میگم ? خب اگه هنوزم متوجه نشده باشید توی ادامه کاملا متوجه میشید منظورم رو

آموزش استفاده از زمینه های دلخواه در وردپرس:

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

<?php echo get_post_meta($post->ID, 'لینک دانلود',true); ?>

خب توی کد بالا جایی که نوشتم لینک دانلود یعنی زمینه دلخواهی به نام لینک دانلود مقدارش هر چی بود رو برامون نمایش بده

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

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

custom-fields-1

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

custom-fields-2

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

custom-fields-3

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

custom-fields-4

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

خب اگر تمامی کارهای بالا رو درست انجام داده باشید نتیجه به شکل زیر خواهد بود:

http://dl.expres.ir

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

<a href="<?php echo get_post_meta($post->ID, 'لینک دانلود',true); ?>">دانلود با لینک مستقیم</a>

که نتیجه بصورت زیر خواهد بود:

دانلود با لینک مستقیم

همچنین شما می توانید ضمینه های دلخواه را شرطی کنید. تا در صورتی که وجود نداشتند نمایش داده نشوند.

موفق باشید.

منبع:https://mihanwp.com/custom-fields/

شهربانو دوستی
۱۳شهریور

ویرایش دسته جمعی نوشته ها در وردپرس

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

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

ویرایش دسته جمعی نوشته ها در وردپرس

حالا از منوی کشویی کار های دسته جمعی ویرایش رو انتخاب و اجرا رو کلیک کنید تا پنجره ای مثل شکل زیر براتون نمایش داده بشه:

ویرایش دسته جمعی نوشته ها در وردپرس

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

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

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

نمایشگر ویدیو

منبع میهن وردپرس

 

شهربانو دوستی
۱۳شهریور

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

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

آموزش آپدیت وردپرس بصورت دستی

برای آپدیت وردپرس بصورت دستی ابتدا آخرین نسخه وردپرس رو از صفحه وردپرس چیست دانلود بفرمایید.

آپدیت وردپرس بصورت دستی

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

آپدیت وردپرس

وارد پوشه wp content شده و پوشه های plugins و themes رو حذف کنید.

آموزش آپدیت وردپرس

به پوشه wordpress بازگشته و تمامی فایل ها را زیپ کنید.

مشکل آپدیت وردپرس

فایل زیپ را در پوشه روت هاست خودتان آپلود و اکسترکت کنید ( منظور از پوشه root همان public_html هست ) تا جایگزین فایل های قبلی وردپرس شود.

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

به وردپرس نسخه جدید خوش اومدید!

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

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

برای حذف این خطا کافی هست به پوشه روت سایتتون رفته و فایل .maintenance را حذف کنید. همین 😀

موفق باشید

منبع: میهن وردپرس

 

شهربانو دوستی
۱۲شهریور

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

 هر آن چیزی که شما درباره سی اس اس می دانید اشتباه است

 

ما در این مقاله قصد داریم درباره تیبل ها در سی اس اس صحبت کنیم، همان طور که ممکن است شما نیز بدانید بیشتر مرورگرها امروزه از تیبل های سی اس اس پشتیبانی می کنند، برخی از مهم ترین ویژگی های تیبل ها در سی اس اس مواردی همچون "display: table,"، "display: table-row,"، "display: table-cell," و ... هستند.

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

نسخه IE 8

اکنون که نسخه IE8 در حال منتشر شدن است، ممکن است استفاده از تیبل های سی اس اس به جای CSS floats بیشتر شود که استفاده از آن ها در مرورگرهای مختلف سخت است و یا حتی ممکن است به جای تیبل های HTML بیایند که با این که استفاده کردن از آن ها راحت است ولی برای کارهای بزرگ نمی توان از آن ها استفاده کرد. با این حال ما برای افرادی که از نسخه IE7 و یا نسخه های قبل تر از آن استفاده می کنند چه کاری می توانیم انجام دهیم؟ همه چیز درباره سال 2001 است، درباره IE7 و Netscape 4 و یک چیز بزرگ که ما از قبل می دانیم این است که مردم درباره این موضوع که تصمیم بگیرند از چه مرورگری استفاده کنند خیلی احساس خوشایندی ندارند. آن ها در واقع علاقه مند هستند که ویژگی های جدید را با مرورگری که در حال حاضر استفاده می کنند تطبیق دهند.

 سی اس اس


سازگاری با تیبل های سی اس اس توسط Andrew و Yank

Andrew و Yank یک مورد متقاعد کننده را برای این موقعیت ساختند که می تواند با تیبل های سی اس اس سازگار باشد و البته با نسخه های قدیمی تر IE نیز سازگار هستند که این کار از طریق conditional include CSS صورت می گیرد. آن ها مثال هایی کوتاه  و واضح را فراهم کرده اند به شما نشان می دهد چگونه می توانید آن را حداقل برای برخی از موارد مرتبط رایج انجام دهید. نکته اصلی در این جا این است که اقتباس کردن به تیبل های سی اس اس یک راه خوب برای پیشرفت است. نکته اساسی دوم این است که از تیبل های استاندارد سی اس اس استفاده کنید و همینطور conditional include CSS را برای IE7 و IE6 اضافه کنید، این کار باعث می شود تا نیاز کمتری به کدهای زیاد و همینطور تست کردن اپلیکیشن های خود داشته باشید و باعث شود که اپلیکیشن هایتان در هفت مرورگر مختلفی که وجود دارد اجرا کنید.

 سی اس اس


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

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

 سی اس اس


تمامی افراد با نظر Andrew و Yank موافق نیستند

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

 سی اس اس


جمع بندی

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

 

 

برنامه نویسان

 

شهربانو دوستی
۱۲شهریور

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

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

*با این روش تنظیمات اعمال شده روی قالب ها و افزونه ها به هیچ عنوان از دست نمی روند.

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

نمایشگر ویدیو

 

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

حالا وارد بخش فایل منیجر هاست خودتان شوید. وارد پوشه wp-content شوید.

اگر می خواهید قالب را آپدیت کنید، وارد پوشه themes و اگر می خواهید افزونه آپدیت کنید وارد پوشه plugins شوید.

پس از ورود به پوشه مورد نظر ، پوشه قبلی قالب یا افزونه را (مثلا: xmarket) حذف کنید و فایل زیپ تکی قالب یا فایل زیپ افزونه را آپلود و اکسترکت کنید تا جایگزین پوشه قبلی شود.

قالب یا افزونه شما با موفقیت آپدیت شد!

موفق باشید

شهربانو دوستی
۰۹شهریور
یک دهه از اولین انتشار Node JS می‌گذرد و جایگاه خود را بین منابع open source تضمین کرده است. Node JS توسط هر کسی از مایکروسافت گرفته تا PayPal و Netflix مورد استفاده قرار می‌گیرد، لیست سازمان‌های بزرگی که در سال‌های اخیر که Node JS را پیاده‌سازی کرده‌اند به اندازه قابل توجهی رشد کرده است، و با اطمینان می‌توان گفت که حتی در آینده با سرعت مشابه‌ای رشد خواهد کرد. 

 

ممکن است بدانید که Node JS یک JavaScript runtime است که بر روی موتور جاوااسکریپت V8 کروم ساخته شده است که از یک مدل I/O بدون انسداد و رویداد محور برای دستیابی به بهره‌وری در حین سبک وزن بودن استفاده می‌کند. اما Node JS در چه مواردی استفاده می‌شود؟ آیا حوزه‌ای وجود دارد که Node JS بهترین راه‌حل برای آن باشد؟

طراحی شده برای ساخت برنامه‌های شبکه مقیاس‌پذیر

چندین ویژگی وجود دارد که باعث می‌شود Node JS به خصوص برای ساخت برنامه‌های شبکه‌ای مقیاس‌پذیر واقعا مناسب باشد:

V8: در ابتدا برای گوگل کروم ساخته شده است، V8 یک موتور جاوااسکریپت منبع باز است که توسط پروژه Chromium برای مرورگرهای وب Chromium و گوگل کروم توسعه یافته است. قبل از اجرای جاوااسکریپت آن را مستقیما با کد دستگاه بومی (native) کامپایل می‌کند و به آن امکان می‌دهد عملکرد فوق‌العاده‌ای را در زمان اجرا به دست آورد.

غیرهمزمان (Asynchronous): وقتی از وب سرور PHP درخواست می‌شود تا فایلی را باز کند و محتوای آن را برگرداند، تا زمانی که محتوا را برگرداند نمی‌تواند درخواست‌های دیگر را مدیریت کند. برخلاف PHP، Node JS ناهمزمان است، بنابراین درخواست‌ها می‌توانند بدون وابستگی به یکدیگر مدیریت شوند، که توان عملیاتی و عملکرد را بهبود می‌بخشد. این الگوی طراحی به عنوان اجرای کد بدون انسداد شناخته می‌شود.

Single-threaded: با استفاده از مدل حلقه رویداد تک نخی یا همان single threaded، Node JS می‌تواند چندین کلاینت همزمان را بدون ایجاد threadهای متعدد مدیریت کند. این امر هزینه عملکردی در جابه‌جایی بین threadها را کاهش می‌دهد و از خطاهای ناشی از هماهنگ‌سازی نادرست بین threadها، که می‌تواند عیب‌یابی را بسیار سخت کند، جلوگیری می‌کند.

API یکپارچه: از آنجا که Node JS الگوهای محبوب سمت سرور را پذیرفته است، می‌تواند به راحتی با مرورگر یا پایگاه داده‌ای که JSON را برای توسعه یکپارچه جاوااسکریپت پشتیبانی می‌کند ترکیب شود.

جریان داده‌ها (Data stream): برنامه‌های Node JS به لطف ماژول Stream، که یک رابط انتزاعی برای کار با داده‌های جریانی است که ساخت اشیایی که رابط جریان را پیاده‌سازی می‌کنند را آسان می‌سازد، هرگز هیچ داده‌ای را بافر نمی‌کنند. این امر به توسعه‌دهندگان Node JS این قدرت را می‌دهد تا کد را سازگار سازند و زمان اجرای جاوااسکریپت را به خصوص برای ساخت برنامه‌های شبکه‌ای مقیاس‌پذیر مناسب می‌سازد.

مثالی از کارایی Node JS

Node JS ثابت کرده است که برای توسعه برنامه‌هایی که توانایی اجرای جاوااسکریپت هم در سمت کلاینت و هم در سمت سرور را دارند سودمند است. مطابق نظرسنجی انجام‌شده توسط بنیاد Node.js، مأموریت آن توانایی پذیرش گسترده آن و کمک به تسریع توسعه Node JS است، برنامه‌های وب با سهم 85% بهترین موارد استفاده را از Node JS داشته‌اند، اما همانطور که در نمونه‌های زیر می‌بینید، آن‌ها تنها محدود به برنامه‌های وب نیستند.

Node JS معمولا برای توسعه برنامه‌های زمان واقعی استفاده می‌شود، همچنین به عنوان RTA شناخته می‌شود. طبیعت ناهمزمان و رویداد محور آن، این امکان را به شما می‌دهد تا عملیات‌های سنگین ورودی و خروجی را مدیریت کنید، که این امر کار توسعه‌دهندگان Node JS را بسیار آسان‌تر می‌سازد تا سطح بالایی از عملکرد کاربران را به دست آورند. هنگام ساخت برنامه‌های چت با Node JS استفاده از کتابخانه Socket.IO رایج است، که برقراری ارتباط در زمان واقعی؛ دو طرفه و مبتنی بر رویداد را بین مرورگر و سرور فراهم می‌کند. با Socket.IO می‌توانید یک برنامه چت گروهی را با کمتر از 30 خط کد بسازید.

برنامه‌های پخش آنلاین بازی و رسانه‌ها

تبدیل شدن به یکی از بزرگ‌ترین ارائه‌دهندگان خدمات رسانه‌ای در جهان کار ساده‌ای نیست، به خصوص وقتی کار شما ارائه جریانی از محتوا به بیش از 150 میلیون کاربر در سراسر جهان است، که به همین دلیل است که Netflix در سال 2018 نیمی از API خود را به Node JS منتقل کرده است. به لطف Node JS، Netflix یک زبان مشترک برای سمت سرور و سمت مرورگر دارد و از قابلیت  I/O غیر انسدادی ناهمزمان بهره می‌برد که عملیات زمان واقعی را آسان و کارآمد می‌سازد.

برنامه‌های خط فرمان (Command-line)

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

بازی‌های مرورگر

Node JS همچنین می‌تواند در ترکیب با فناوری‌هایی مثل HTML5 و Socket.IO برای توسعه بازی مورد استفاده قرار گیرد تا بازی‌های تک‌نفره و چندنفره ساخته شود که مستقیما در مرورگر، بدون نیاز به نصب هر پلاگین دیگری کار می‌کنند. Node JS ابزارهای مختلفی را در اختیار توسعه‌دهندگان بازی قرار می‌دهد که مدیریت بازی‌های پیچیده چندنفره را آسان‌تر می‌سازد، مثل EventEmitter، که می‌تواند رویدادهای سفارشی را مدیریت کند. علاوه‌براین، Node JS به توسعه‌دهندگان اجازه می‌دهد تا کدهای زیادی را بین کلاینت و سرور به اشتراک بگذارند.

سیستم‌های توکار

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

جمع‌بندی

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

 

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

 

تاپ لرن

 

    شهربانو دوستی
    ۰۹شهریور

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

     آشنایی با برخی از مهم ترین IDE های جاوا اسکریپت

     

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


    چرا باید از IDE ها به جای ادیتورها در جاوا اسکریپت استفاده کنیم؟

    دلیل اصلی این موضوع این است که IDE ها می توانند کدهای شما را دیباگ کنند که این امکان در ادیتورها وجود ندارد، علاوه بر این IDE ها از سیستم ALM پشتیبانی می کنند، با مواردی مانند گیت، گیت هاب، Mercurial، Perforce و Subversion برای کنترل ورژن برنامه ادغام شده اند. هر چه ویرایشگرهای قابلیت های جدیدی را به خود اضافه می کنند کمتر شاهد مشاهده قابلیت های مربوط به ALM در آن ها هستیم.

     جاوا اسکریپت


    اکلیپس با ابزارهای توسعه جاوا اسکریپت در سال 2018

    در گذشته و زمانی که جاوا اسکریپت یک زبان برنامه نویسی جدید بود من از اکلیپس استفاده می کردم و با توسعه نرم افزارهای جاوا با استفاده از آن لذت می بردم، اما خیلی زود به سایر IDE های زبان برنامه نویسی جاوا مهاجرت کردم. 5 سال پیش و زمانی که من با استفاده از اکلیپس شروع به برنامه نویسی اندروید کردم من تجربه هایی خوب ولی ترسناک را از اکلیپس بدست آوردم. زمانی که من از Eclipse Luna با JSDT برای توسعه js در سال 2014 استفاده کردم این IDE دائما خطاهایی را نسبت به کدهای درست من نشان می داد.

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

    یکی از مهم ترین ویژگی های اکلیپس این است که در آن از افزونه های زیادی استفاده شده است، برای تایپ اسکریپت شما باید اقدام به نصب افزونه TypeScript 1.0.0 را بر روی این IDE نصب کنید. برای تایپ اسکریپت، انگولار و ES6 شما باید اقدام به نصب commercial Angular IDE کنید که توسط CodeMix تولید شده است. علاوه بر این برای پروژه های ری اکت به همراه فایل های JSX می توانید از IDE متن باز تایپ اسکریپت استفاده کنید. اگر شما اقدام به اضافه کردن بیش از یک افزونه به این IDE کنید باید بعد از آن تداخل هایی که میان این افزونه ها وجود دارد را نیز برطرف کنید که این کار نیازمند این است که فایل های تایپ اسکریپت را ویرایش کنید که البته این کار کار خیلی بزرگی نیست.

     جاوا اسکریپت


    نکاتی درباره تصویر بالا

    با کمی تلاش می توانید اکلیپس را مجبور کنید که با استفاده از آن اقدام به انجام پروژه های انگولار و ری اکت کنید. اگر چه اکلیپس تایپ اسکریپت و ES6 را پشتیبانی نمی کند ولی شما برای پر کردن این خلا می توانید اقدام به اضافه کردن Angular IDE و TypeScript IDE کنید.

     جاوا اسکریپت


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

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

     جاوا اسکریپت

     


    آشنایی با ActiveState Komodo IDE برای جاوا اسکریپت

     

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

    Komodo IDE برای شما امکان ویرایش، هایلایت کردن سینتکس، پیمایش در کد و دیباگ کردن را به صورت پیشرفته در js برای شما فراهم کرده است، به همین علت است که شما می توانید JSHint را در shell اجرا کنید.

    این IDE از ده ها مورد از زبان های برنامه نویسی و زبان های markup  از جمله جاوا اسکریپت پشتیبانی می کند، با پشتیبانی از زبان های برنامه نویسی و markup، قابلیت اصلاح مجدد و دیباگ کردن این IDE می تواند یک گزینه خوب برای توسعه end-to-end در زبان های متن باز برای شما باشد.

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

    این Ide امکان ویرایش ستون ها و multiple selections برای شما فراهم می کند، این امر تقریبا از لحاظ کاربردی با استفاده از قابلیت های Sublime Text و TextMate قابلیت ویرایش گروهی را برای شما فراهم می کند. حال که به چشم مقایسه به این IDE نگاه می کنیم می توان گفت که  این IDE بیش از یک Ide است چرا که Sublime Text بسیار سریع تر از سایر ابزارهای موجود در این زمینه است. زمانی که ما درباره عملکرد صحبت می کنیم سرعت این IDE در مقابل نسخه های قبلی آن بهبود پیدا کرده است و همینطور نحوه طراحی صفحه آن و همینطور بررسی سینتکس ها نیز به طور چشمگیری بهبود پیدا کرده است.

     جاوا اسکریپت


    ویژگی های این IDE

    Komodo IDE ویژگی های بسیار زیادی دارد که بسیاری از شرکت هایی که با آن رقابت دارند این ویژگی ها را دارا نیستند، یکی از این ویژگی ها HTTP Inspector در جاوا اسکریپت است که برای دیباگ کردن کال بک های Ajax کاربرد دارد، یکی دیگر از این ویژگی ها مجموعه ابزارهای RX(regular expression یا عبارت های منظم) است که می تواند روشی فوق العاده برای ساخت و تست کردن عبارت های منظم برای جاوا اسکریپت، پرل، پی اچ پی، پایتون و روبی باشد.

     جاوا اسکریپت


    چه چیزی باعث تمایز این IDE با سایر Ide ها می شود؟

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

    همکاری این چنینی در واقع جایگزینی برای کنترل کردن سورس کد نیست اما می تواند مکمل مفیدی برای آن باشد. Komodo IDE کنترل سورس کد را با استفاده از CVS، Subversion، Perforce، گیت، Mercurial و Bazaar ادغام کرده است. تنها عملکردهای پایه ای کنترل ورژن در آن ها پشتیبانی می شود. عملکردهای پیشرفته تر مانند branching باید توسط یک کلاینت کنترل کننده سورس کد دیگر انجام شوند.

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

     جاوا اسکریپت

     


    نکاتی درباره تصویر بالا

     

    Komodo IDE مزایای پیشرفته ای را در جاوا اسکریپت برای شما فراهم می کند که از جمله آنها می توان به ویرایش کدها، هایلایت کردن سینتکس و نویگیشن اشاره کرد اما با این حال این IDE امکان بررسی کدها را برای شما فراهم نکرده است و به عبارت دیگر JSHint را برای کدهای شما اجرا نمی کند. Komodo هزاران زبان برنامه نویسی و مارک آپ را پشتیبانی می کند و تاکید اصلی آن نیز بر روی زبان های پرل، پایتون، پی اچ پی، روبی، Tcl و XSLT است. علاوه بر این Komodo شامل قابلیت های دیباگ کردن، ریفکتور کردن، ادغام سازی کنترل سورس کد و یونیت تست نیز می باشد.

     جاوا اسکریپت

     


    نکات پایانی درباره Komodo یکی از بهترین IDE های جاوا اسکریپت

     

    این IDE قابلیت دیباگ کردن کدهای سمت کاربر جاوا اسکریپت را در مرورگر کروم فراهم کرده است و علاوه بر این می تواند کدهای Node.js را هم به صورت لوکال و هم به صورت ریموت دیباگ کند. علاوه بر این Komodo میتواند پرل، پایتون، پی اچ پی، روبی، tcl و Xslt را نیز دیباگ کند.

    این Ide دارای یک قابلیت DOM است که به شما اجازه می دهد تا ویوهای XML و همینطور داکیومنت های HTML را مشاهده کنید. این IDE این امکان را برای شما فراهم کرده است که بتوانید با کمک سرچ XPath درخت های ویوهای خود را نیز به راحتی مشاهده کنید.

    ماژول های code profiling و همینطور یونیت تست این Ide جاوا اسکریپت را پشتیبانی نمی کند. با این حال هم جاوا اسکریپت و هم Node.js توسط ماژول Code Intelligence این IDE پشتیبانی می شوند که قابلیت های تکمیل خودکار کدها و code browsing را برای شما فراهم می کند.

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

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

     جاوا اسکریپت


    آشنایی با  Apache NetBeans از بهترین IDE های جاوا اسکریپت ( بخش اول)

    نت بینز موفق شده است که یک پشتیبانی خوب از پروژه های جاوا اسکریپت، HTML5 و CSS3 را برای کاربران خود فراهم کند و همینطور از فریم ورک های Cordova/PhoneGap برای اپلیکیشن های موبایل بر پایه جاوا اسکریپت نیز پشتیبانی می کند. نت بینز یک IDE سریع نیست اما یکی از کامل ترین ها است و شاید مهم ترین نکته درباره این IDE این است که به صورت متن باز و رایگان در اختیار همه قرار دارد.

    ویرایشگر جاوا اسکریپت نت بینز امکاناتی همچون هایلایت کردن سینتکس، تکمیل خودکار کدها و code folding را همان طور که هر توسعه دهنده جاوا اسکریپتی انتظار دارد برای شما فراهم کرده است. ویژگی های این ویرایشگر کدهای جاوا اسکریپت همچنین برای فایل های تعبیه شده پی اچ پی، JSP و HTML نیز کار می کنند. پشتیبانی از جی کوئری در نسخه های جدیدتر کامل شده است، نسخه 8.2 نت بینز یک پشتیبانی جدید و کامل شده ای را برای Node.js، Express، Glup، Grunt، angularjs، Knockout.js، Jade، Mocha و Selenium فراهم کرده است.

     جاوا اسکریپت


    آشنایی با Apache NetBeans ( بخش دوم)

    Code analysis به محض این که شما ویرایشی در کدهای خود انجام دهید در بک گراند اجرا می شوند و هشدارهای لازم را به شما ارائه می دهند. عملیات دیباگ کردن در یک WebKit browser تعبیه شده کار می کند و در مرورگر کروم هم توسط NetBeans Connector نصب می شود. دیباگ کننده می تواند DOM، line، event و XMLHttpRequest را دیباگ کند و در کنار آن متغیرها، watches و استک مربوط به فراخوانی ها را نیز نشان بدهد. علاوه بر این پنجره لاگ ادغام سازی شده مرورگر exception های مربوط به مرورگر، ارورها و هشدارها را نشان می دهد.

    نت بینز می تواند یونیت تست را با استفاده از JsTestDriver انجام دهد، این ابزار در واقع یک فایل JAR است که می توانید آن را به صورت رایگان دانلود کنید. دیباگ کردن یونیت تست ها به صورت خودکار زمانی که شما کروم را با استفاده از NetBeans Connector به عنوان LaTest Driver در زمان تنظیم LaTest Driver در پنجره سرویس ها انتخاب می کنید فعال می شود.

     جاوا اسکریپت


    آشنایی با Apache NetBeans ( بخش سوم)

    زمانی که شما یک اپلیکیشن تحت وب را با استفاده از NetBeans Connector دیباگ می کنید و فایل های CSS را نیز ابزارهای توسعه کروم ویرایش می کنید این تغییرات توسط نت بینز ثبت شده و در داخل یک فایل CSS ذخیره می شوند. اگر چه اگر فایل های CSS شما اگر توسط استایل شیت LESS و یا SASS تولید شده باشند شما باید به صورت دستی سورس شیت های خود را به روز رسانی کنید چرا که فایل های CSS صرفا به عنوان خروجی کامپایل شده اند.

     جاوا اسکریپت


    آشنایی با Apache NetBeans برای برنامه نویسی در جاوا اسکریپت ( بخش چهارم)

    در مرورگر تعبیه شده WebKit در کروم که توسط NetBeans Connector نصب شده است شما می توانید از NetBeans network monitor برای مشاهده هدرهای مربوط به درخواست ها، پاسخ های دریافتی و فراخوانی استک ها برای ارتباطات REST استفاده کنید. برای ارتباطات WebSocket هم هدرها و هم فریم های متنی نمایش داده می شوند. به صورت کلی نت بینز یک تجربه دیباگ کردن بهتر را با استفاده از کروم به شما ارائه می دهد که شما البته می توانید آن را در فایرفاکس نیز با استفاده از Firebug در اختیار داشته باشید.

     جاوا اسکریپت


    مایکروسافت ویژوال استودیو 2017 و کاربرد آن برای اجرای و ویرایش کدهای جاوا اسکریپت

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

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

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

     جاوا اسکریپت

     


    آشنایی بیشتر با این ویرایشگر( بخش اول)

     

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

    علاوه بر جاوا اسکریپت شما می توانید با هر زبان .Net دیگری مانند سی پلاس و پلاس و پایتون نیز در این IDE کد بزنید. یکی از مهم ترین ویژگی های این IDE فوق العاده این است که شما با استفاده از آن می توانید به صورت مستقیم با بانک های اطلاعاتی خود ارتباط داشته باشید. با استفاده از این ویرایشگر شما در جاوا اسکریپت می توانید به جای این که از SQL server استفاده کنید از Management Studio استفاده کنید که بسیاری از عملیات های اضافی را برای شما انجام می دهد و کار شما را برای برنامه نویسی در جاوا اسکریپت راحت تر می کند.

     جاوا اسکریپت


    آشنایی با ویرایشگر ویژوال استودیو ( بخش دوم)

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

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

     جاوا اسکریپت

     


    توضیحاتی درباره تصویر بالا

    نسخه 2017 ویژوال استودیو یک پشتیبانی پیشرفته از Node.js را با استفاده از ES6 جاوا اسکریپت فراهم کرده است و علاوه بر جاوا اسکریپت شما می توانید از تایپ اسکریپت نیز با کمک آنالیز اسکالا استفاده کنید. علاوه بر این ویژوال استودیو می تواند ماژول های از دست رفته NPM را نیز به صورت خودکار برای شما نصب کند که می توانید در پایین و سمت چپ تصویر این موضوع را مشاهده کنید.
    نکات پایانی درباره ویژوال استودیو

    ویژوال استودیو شامل قابلیت های مختلف مانند ادیت اپلیکیشن های Node.js، IntelliSense، profiling، ادغام سازی NPM، پشتیبانی از TypeScript، دیباگ کردن به صورت محلی و همینطور دیباگ کردن به صورت ریموت بر روی ویندوز و مک و لینوکس و همینطور دیباگ کردن اپلیکیشن های تحت وب می باشد. این IDE از زبان های برنامه نویسی و مارک آپ مانند html، css، جاوا اسکریپت، تایپ اسکریپت، کافه اسکریپت و LESS پشتیبانی می کند که شما برای برنامه نویسی جاوا اسکریپت می توانید به راحتی از آن استفاده کنید.

     

     

    منبعک برنامه نویسان

     

    شهربانو دوستی
    ۰۹شهریور

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

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

    آنچه در این مطلب می‌خوانید:

    طراحی قالب وردپرس با سئو بالا

    در این مقاله قصد دارم ۱۰ نکته حیاتی در طراحی قالب وردپرس با سئو بالا را به شما معرفی کنم.

    ۱. قالب باید ریسپانسیو باشد. استثنا هم نداریم!

    در مورد ریسپانسیو بودن سایت و دلایل آن بصورت کامل توضیح دادیم. اما باید بدانید که بدون شک در سال ۲۰۱۹ ریسپانسیو بودن قالب، یک امکان خاص و شگفت انگیز نیست! تمام سایت‌ها بدون استثنا باید ریسپانسیو باشند. به دو دلیل:

    1. بیش از ۶۰ درصد بازدید کنندگان وب در حال حاضر موبایلی هستند.
    2. گوگل اهمیت خاصی برای سایت های ریسپانسیو قائل هست. سایت‌هایی که ریسپانسیو نیستند در گوگل نمایش داده نخواهند شد.

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

    ۲. قالب شما باید تست سرعت را با موفقیت پشت سر بگذارد

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

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

    می‌توانید با استفاده از سایت GTMetrix تست سرعت سایت‌تان را انجام دهید.

    ۳. محتوای قالب شما باید قابل ایندکس شدن باشد!

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

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

    در دومین کادر این تصویر عبارت Coverage دیده می‌شود که قابلیت ثبت در گوگل را مشخص می‌کند.

    وضعیت ایندکس شدن قالب سایت در گوگل
    وضعیت ایندکس شدن قالب سایت در گوگل

    به همین راحتی! وضعیت ایندکس شدن سایت شما در گوگل بررسی شد.

    ۴. قابلیت نشانه گذاری Schema فراموش نشود.

    با استفاده از Schema‌ها می‌توانید قابلیت نشانه‌گذاری را در سایتتان فعال کنید. مثلا به گوگل بگویید این محصول دارای ۶۴ رای هست که در مجموع ۴ ستاره از ۵ ستاره را توسط کاربران دریافت کرده. یا این محصول با قیمت ۶۵ دلار فروخته می‌شود.

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

    ۵. Meta Data ها را فراموش نکنید!

    متا داده‌ها یکسری داده متا هستند که در تگ head قالب شما استفاده می‌شوند. فراموش نکنید حتما از تگ title و description در هدر قالب استفاده کنید تا سئوی قالب را از دست ندهید.

    ۶. حتما از صفحه بندی نظرات و نوشته‌ها استفاده کنید

    در مقاله قبلی در مورد صفحه بندی نظرات و اهمیت آن صحبت کردیم. حتما نظرات و نوشته‌های سایتتان را با استفاده از pagination صفحه بندی کنید. فراموش نکنید از rel=next و rel=prev استفاده کنید. این موارد در آموزش نبرد صفحه اول گوگل بصورت کامل توضیح داده شده.

    ۷. جلوگیری از ایندکس شدن صفحات جستجو

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

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

    ۸. از تگ‌های Heading بصورت صحیح استفاده کنید

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

    ۹. به خریدار یا مشتری آموزش دهید

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

    ۱۰. خودتان را بروز نگه دارید

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

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

    منبع: میهن وردپرس

     

    شهربانو دوستی