next wp

Next.js starter لـ WordPress CMS Leadless

شاهد الفيديو التجريبي

هذا هو قالب بداية لإنشاء تطبيق next.js يجلب البيانات من موقع WordPress باستخدام WordPress Rest API. يتضمن القالب وظائف لجلب المنشورات والفئات والعلامات والمؤلفين والوسائط المميزة من موقع WordPress وتقديمها في تطبيق Next.js.

تم تصميم next-wp باستخدام Next.js 14 و React و TypeScript و Tailwind و Shadcn/UI و Brijr/Craft. إنه أزواج بشكل جيد مع Brijr/مكونات لتجربة تنمية سريعة. بنيت من قبل كاميرون وبريدجر في 9D8.

جدول المحتويات

• Next.js starter لـ WordPress CMS Leadless
  • جدول المحتويات
  • ملخص
  • وظائف WordPress
  • أنواع WordPress
  • مكون بطاقة النشر
    • الدعائم
    • الوظيفة
    • الاستخدام
  • مكون مرشح
    • الدعائم
    • الوظيفة
  • خريطة sitemap الديناميكية

ملخص

• lib/wordpress.ts -> وظائف لجلب WordPress CMS عبر API REST
• lib/wordpress.d.ts -> اكتب إعلانات لـ WP Rest API
• components/posts/post-card.tsx -> مكون وتصميم للمنشورات
• app/posts/filter.tsx -> مكون لمعالجة تصفية المنشورات
• /menu.config.ts -> تكوين قائمة موقع NAV لسطح المكتب والجوال
• /site.config.ts -> التكوين لـ sitemap.ts
• app/sitemap.ts -> خريطة sitemap التي تم إنشاؤها ديناميكيًا

هناك حاجة إلى متغيرين env في ملف .env.local :

WORDPRESS_URL= " https://wordpress.com "
WORDPRESS_HOSTNAME= " wordpress.com "

يمكنك العثور على مثال ملف .env.local في ملف .env.example (وفي Vercel):

وظائف WordPress

يحتوي ملف lib/wordpress.ts على عدة وظائف لجلب البيانات من موقع WordPress باستخدام واجهة برمجة تطبيقات WordPress Rest. فيما يلي نظرة عامة موجزة على كل وظيفة:

• getAllPosts(filterParams?: { author?: string; tag?: string; category?: string; }) : يجلب جميع المنشورات من موقع WordPress. اختياريا ، يمكنك تمرير معلمات التصفية لتصفية المنشورات حسب المؤلف أو العلامة أو الفئة.

• getPostById(id: number) : يجلب منشورًا واحدًا بواسطة معرفه.

• getPostBySlug(slug: string) : يجلب منشورًا واحدًا بواسطة Slug.

• getAllCategories() : يجلب جميع الفئات من موقع WordPress.

• getCategoryById(id: number) : يجلب فئة واحدة حسب معرفها.

• getCategoryBySlug(slug: string) : يجلب فئة واحدة من Slug.

• getPostsByCategory(categoryId: number) : يجلب جميع المنشورات التي تنتمي إلى فئة محددة حسب معرفها.

• getPostsByTag(tagId: number) : يجلب جميع المنشورات الموسومة بعلامة محددة بواسطة معرفها.

• getTagsByPost(postId: number) : يجلب جميع العلامات المرتبطة بنشر محدد بواسطة معرفه.

• getAllTags() : يجلب جميع العلامات من موقع WordPress.

• getTagById(id: number) : يجلب علامة واحدة بواسطة معرفها.

• getTagBySlug(slug: string) : يجلب علامة واحدة بواسطة Slug.

• getAllPages() : يجلب جميع الصفحات من موقع WordPress.

• getPageById(id: number) : يجلب صفحة واحدة حسب معرفها.

• getPageBySlug(slug: string) : يجلب صفحة واحدة بواسطة Slug.

• getAllAuthors() : يجلب جميع المؤلفين من موقع WordPress.

• getAuthorById(id: number) : يجلب مؤلفًا واحدًا حسب هويتهم.

• getAuthorBySlug(slug: string) : يجلب مؤلف واحد من قبل Slug.

• getPostsByAuthor(authorId: number) : يجلب جميع المنشورات التي كتبها مؤلف معين من خلال هويتهم.

• getPostsByAuthorSlug(authorSlug: string) : يجلب جميع المنشورات التي كتبها مؤلف معين من قبل Slug.

• getPostsByCategorySlug(categorySlug: string) : يجلب جميع المنشورات التي تنتمي إلى فئة محددة بواسطة Slug.

• getPostsByTagSlug(tagSlug: string) : يجلب جميع المنشورات الموسومة بعلامة محددة بواسطة Slug.

• getFeaturedMediaById(id: number) : يجلب الوسائط المميزة (على سبيل المثال ، صورة مميزة) حسب معرفها.

توفر هذه الوظائف طريقة مريحة للتفاعل مع واجهة برمجة تطبيقات WordPress Rest واسترداد أنواع مختلفة من البيانات من موقع WordPress الخاص بك. يمكن استخدامها في تطبيق Next.js لجلب محتوى WordPress وعرضه.

أنواع WordPress

يحتوي ملف lib/wordpress.d.ts على تعريفات نوع TypeScript لمختلف كيانات WordPress وهياكل البيانات ذات الصلة. إليك نظرة عامة على الأنواع الرئيسية:

• Post : يمثل منشور WordPress مع خصائص مثل id ، title ، content ، excerpt ، author ، categories ، tags ، وأكثر من ذلك.

• Category : يمثل فئة WordPress مع خصائص مثل id ، name ، slug ، description ، parent ، count .

• Tag : تمثل علامة WordPress مع خصائص مشابهة Category ، بما في ذلك id ، name ، slug ، description ، count .

• Page : تمثل صفحة WordPress مع خصائص مثل id ، title ، content ، excerpt ، author ، parent ، template .

• Author : يمثل مؤلف WordPress مع خصائص مثل id ، name ، slug ، description ، avatar_urls ، meta .

• BlockType : يمثل نوع كتلة WordPress مع خصائص مثل name ، title ، description ، icon ، category ، attributes ، وأكثر من ذلك.

• EditorBlock : يمثل كتلة في محرر WordPress مع خصائص مثل id ، name ، attributes ، و innerBlocks ، و innerHTML .

• TemplatePart : يمثل جزءًا من القالب في WordPress مع خصائص مثل id ، slug ، theme ، type ، content ، title ، status .

• SearchResult : يمثل نتيجة بحث من WordPress مع خصائص مثل id title url type والنوع subtype .

• FeaturedMedia : تمثل الوسائط المميزة (على سبيل المثال ، صورة مميزة) في WordPress مع خصائص مثل id ، title ، caption ، alt_text ، media_details ، و source_url .

• FilterBarProps : يمثل الدعائم لمكون شريط المرشح مع authors الخصائص ، tags ، categories ، والقيم المحددة لكل منها.

توفر تعريفات النوع هذه السلامة والإكمال التلقائي عند العمل مع بيانات WordPress في تطبيق Next.js الخاص بك. أنها تضمن أنك تصل إلى الخصائص الصحيحة وتمرير أنواع البيانات المتوقعة عند التفاعل مع واجهة برمجة تطبيقات WordPress Rest.

مكون بطاقة النشر

يحتوي ملف components/posts/post-card.tsx على مكون PostCard ، وهو مسؤول عن تقديم بطاقة بريد واحدة في التطبيق. إليك نظرة عامة على المكون:

الدعائم

• post : كائن Post يمثل منشور WordPress ليتم تقديمه.

الوظيفة

1. يجلب المكون وسائل الإعلام المميزة والمؤلف والفئة المرتبطة بالمشاركة باستخدام وظائف getFeaturedMediaById و getAuthorById و getCategoryById من lib/wordpress.ts .

2. إنه يتنسيق تاريخ النشر باستخدام طريقة toLocaleDateString مع الخيارات المحددة.

3. يقوم المكون بإعداد رابط إلى صفحة البريد الفردية باستخدام Slug's Slug.

4. داخل الرابط ، يعرض الصورة المميزة لـ Post ، والعنوان ، والمقتطف ، والفئة ، والتاريخ.

5. يتم تقديم العنوان المنشور والمقتطف باستخدام سمة dangerouslySetInnerHTML للتعامل مع محتوى HTML.

6. يطبق المكون فئات CSS المختلفة لتصميم بطاقة البريد ، بما في ذلك تأثيرات التحويم والتحولات.

الاستخدام

لاستخدام مكون PostCard ، استيراده في الصفحة أو المكون المطلوب وتمرير كائن Post كدعم post .

مكون مرشح

يحتوي ملف components/posts/filter.tsx على مكون FilterPosts ، والذي يوفر واجهة تصفية للمنشورات القائمة على العلامات والفئات والمؤلفين. إليك نظرة عامة على المكون:

الدعائم

• authors : مجموعة من كائنات Author التي تمثل المؤلفين المتاحين للتصفية بواسطة.
• tags : مجموعة من كائنات Tag التي تمثل العلامات المتاحة للتصفية بواسطة.
• categories : مجموعة من كائنات Category التي تمثل الفئات المتاحة للتصفية بواسطة.
• selectedAuthor : سلسلة اختيارية تمثل معرف المؤلف المحدد حاليًا.
• selectedTag : سلسلة اختيارية تمثل معرف العلامة المحدد حاليًا.
• selectedCategory : سلسلة اختيارية تمثل معرف الفئة المحدد حاليًا.

الوظيفة

1. يستخدم المكون خطاف useRouter من Next.js للتعامل مع تحديثات التنقل وعنوان URL استنادًا إلى المرشحات المحددة.

2. إنه يجعل ثلاثة مكونات Select لتصفية المنشورات حسب العلامة والفئة والمؤلف. يعرض كل مكون Select الخيارات المتاحة ويسمح للمستخدم بتحديد قيمة محددة أو اختيار "الكل" لإعادة ضبط المرشح.

3. عند تغيير قيمة مرشح ، يتم استدعاء وظيفة handleFilterChange مع نوع المرشح والقيمة المحددة. يقوم بتحديث معلمات استعلام عنوان URL وفقًا لذلك وينقل إلى عنوان URL المحدث.

4. يتضمن المكون أيضًا زر "Reset Filters" ، عند النقر فوقه ، يتصل بوظيفة handleResetFilters للتنقل مرة أخرى إلى صفحة /posts دون تطبيق أي مرشحات.

5. يتم تمرير قيم المرشح المحددة كدعائم للمكون وتستخدم لتعيين القيم الأولية لمكونات Select .

6. يتم تمرير قيم المرشح المحددة كدعائم للمكون وتستخدم لتعيين القيم الأولية لمكونات Select .

7. يتم تمرير قيم المرشح المحددة كدعائم للمكون وتستخدم لتعيين القيم الأولية لمكونات Select .

خريطة الموقع الديناميكي

يتم إنشاء sitemap لـ next-wp على @/app/sitemap.ts وسيظهر مباشرة على موقعك على موقع yourdomain.com/sitemap.xml . من أجل إعداد Sitemap الخاص بك بشكل صحيح ، يرجى التأكد من تحديث site_domain في site.config.ts .

تم بناؤه بواسطة برج بريدجر وكاميرون يونغبلود في 9D8