آموزش جامع Wordpress Rest API و Nuxt Js

حدود یک سال پیش مقاله ای منتشر کردم که اینجا می تونید ببینید.

توی این پست میخوام آموزش جامع تری بنویسم که چطور می تونین از Wordpress به عنوان بک اند در پروژه های Nuxt Js خودتون استفاده کنین. اگر درخواست ها بیشتر باشه قسمت دوم هم انتشار میدم در غیر این صورت فقط قسمت اول که همین پست هست رو توضیح میدم و بقیه ماجرا رو به خودتون میسپرم. البته در سایت خودمون هم بزودی آموزش جامع تری خواهم گذاشت که هنوز سایت تکمیل نیست و لینکش رو نمیذارم.

اول به 2 تا سوال که ممکنه داشته باشین جواب میدم:

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

جواب : اگه Rest API و استفاده ازش بی معنا بود که تولید نمیشد و وردپرس هیچ وقت ازش استفاده نمیکرد! با استفاده از این قابلیت دیگه شما نگران هک شدن سایت نیستین و عملا نیاز به افزونه های زیادی ندارید و برای همه پروژه ها قابل پیاده سازی هست و سرعت خوبی هم داره.

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

جواب : برای همه پروژه ها با هر تکنولوژی که از Rest API پشتیبانی میکنه می تونین استفاده کنین. مثل: React, Vue, Nuxt, Next, Ruby, Ruby On Rails, Python و... و حتی اپلیکیشن Android و iOS

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

اول از همه وردپرس خام رو دانلود میکنیم و روی لوکال هاست خودمون حالا استفاده از Xampp و Wamp و ... زیاد مهم نیست البته من خودم از Ampps استفاده میکنم. بعد از نصب که حالا احتمالا بلدین نصبش رو من فرض میگیرم که بلدین و نصب کردین و تمام ?

برید داخل فولدر themes و هرچی هست پاک کنین اصلا بهشون نیاز نداریم، بعد برید داخل plugins اونجا هم یه فایل hello هست که من همیشه میبینمش Shift + Delete میکنم هرجا ببینمش ?

برگردید داخل فولدر themes یه فولدر به هر اسمی که میخواین انتخاب کنین بسازید. 3 تا فایل باید بسازید، index.php, style.css, functions.php این سه تا رو ایجاد کنین.

ما نیاز داریم هرکی ادرسی که برای بک اند هست حالا میتونه داخل هاستی که میخوایم فرانت اند رو داشته باشیم باشه یا هرجا اینم مهم نیست که البته پیشنهاد میکنم هم بک اند هم فرانت هردو یک جا باشن و بک اند داخل یه دایرکتوری دیگه ذخیره بشه یعنی همین فایل های وردپرستون. فرض بگیرید اسم سایتتون sample هست و اگه یه ساب دامنه ایجاد بشه به اسم : backend.sample.com چقدر زیباس!!!

هر کی آدرس رو وارد کرد بره به آدرسی که فرانت اونجاس یعنی sample.com خب توی فایل index.php کدهای زیر رو قرار بدید:

خب با کد بالا همین کارو انجام دادیم و آدرس backend.sample.com رو به فرانت sample.com ریدایرکت کردیم.

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

/*
Theme Name: Sample < اسم سایتتون

Author: اسم خودتون

Author URI: لینک سایتتون

Description: توضیح کوتاه راجب سایت

Version: 1.0 < هر ورژنی که هست
*/

خب این اطلاعات مربوط به تمتون میشه که یه رکن اساسی هست و همه تم ها باید داشته باشن.

حالا مهم ترین بخش کدهایی هست که باید در فایل functions.php وارد بشن.

function allow_origin() {

	header( &quotAccess-Control-Allow-Origin: *&quot );

}

add_action('init','allow_origin');

/* اجازه به وردپرس برای استفاده از تصویر شاخص */
add_theme_support( 'post-thumbnails' );

تیکه کد اول که کامنت ننوشتم براش برای مشکل احتمالی CORS هست اگه نمیدونین چیه برید اینجا کامل بخونین.

خب کار با تم تموم شد به همین راحتی و اصلا هم کار پیچیده ای نبود.

چند تا افزونه یا Plugins هست که به نظرم حتما باید نصب کنین و اینم بگم ما داریم از Rest API استفاده میکنیم یعنی اصلا مهم نیست حتی اگه از افزونه های نال شده سالم استفاده کنید. من برای چند تا پروژه اینکارو کردم مشکلی پیش نیومد البته گفتم باید سالم باشه مخرب باشه میره میزنه دیتابیس رو داغون میکنه بد میشه.

افزونه Advanced Custom Fields

خب حتما میدونین که این افزونه برامون پست های سفارشی ایجاد میکنه و در صورت نیاز نصب کنین و اگر خواستین این پست های سفارشی رو توی Rest API هم داشته باشین:

افزونه ACF to REST API

هم نصب کنین که میاد و پست های سفارشی ایجاد شده رو در خروجی Json که ایجاد میشه بهمون میده

افزونه Classic Editor

این افزونه هم میاد یه ادیتور کلاسیک شبیه به Microsoft Word ایجاد میکنه که همه میشناسن

افزونه REST API Featured Image

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

افزونه WP REST Cache

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

افزونه JWT Authentication for WP-API

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

افزونه WP REST User

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

افزونه Custom Post Type UI

خب برای پست تایپ سفازشی نیاز پیدا می کنین به این افزونه و پیشنهاد من استفاده از این افزونه هست فایل functions.php رو برای نوشتن دستی کدهای مربوط به پست تایپ سفارشی کثیف نکنین بذارید سبک باقی بمونه.

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

تا اینجا یاد گرفتیم یه تمپلیت اختصاصی برای بک اندمون ایجاد کنیم و در قسمت دوم میریم سراغ Nuxt Js اگه بلد هستین همراه بشین چون درس Nuxt رو نمیتونم ایجا بدم جاش نیست. حداقل اینه که Vue رو بلد باشین خود Nuxt پیچیدگی نداره خیلی راحته.

آدرس این پست رو برای دوستاتون هم به اشتراک بذارین ( اگه دوس داشتین ) و حتما کامنت بذارین ببینم چند نفر تشنه یادگیری هستین که قسمت دوم هم انرژی داشته باشم بنویسم براتون.

شاد باشین