پرش به مطلب اصلی

ساخت اپ خبری و محتوایی با وردپرس

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

پیش‌نیازها​

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

صفحه‌هایی که می‌سازیم​

صفحه اصلی
├── لیست آخرین نوشته‌ها  → الگوی «کارت نوشته»
└── لیست دسته‌ها          → الگوی «کارت دسته»

صفحه «جزئیات نوشته»
└── لیست دیدگاه‌ها        → الگوی «ردیف دیدگاه»

صفحه «نوشته‌های دسته»
صفحه «جست‌وجو»

سه صفحه «کارت نوشته»، «کارت دسته» و «ردیف دیدگاه» صفحه‌های الگو هستند و در منوی اپ قرار نمی‌گیرند.

گام ۱: صفحه الگوی کارت نوشته​

  1. صفحه جدیدی بسازید و نام آن را «کارت نوشته» بگذارید.
  2. اگر می‌خواهید سریع شروع کنید، از منوی افزودن ویجت مسیر وردپرس ← محتوا و ناوبری ← بلوک آماده کارت نوشته را انتخاب کنید و سپس آن را ویرایش کنید. برای ساخت دستی، مراحل زیر را دنبال کنید.
  3. یک گروه عمودی اضافه کنید و برای آن حاشیه، گوشه گرد و فاصله داخلی بگذارید تا شبیه کارت شود.
  4. داخل گروه یک ویجت عکس با نشانی پویا {{sys.inPage.post.image.url}} بگذارید.
  5. یک ویجت متن با مقدار {{sys.inPage.post.title}} اضافه کنید.
  6. دو ویجت متن دیگر برای {{sys.inPage.post.date}} و {{sys.inPage.post.excerpt}} اضافه کنید.

این ویجت‌ها داده نوشته ردیف جاری را از متغیرهای sys.inPage.post.* می‌خوانند.

گام ۲: باز کردن جزئیات نوشته​

  1. صفحه‌ای به نام «جزئیات نوشته» بسازید.
  2. در آن ویجت‌های معمولی عکس و متن را به مسیرهای تصویر، عنوان، تاریخ، نویسنده و محتوای sys.inPage.post.* متصل کنید.
  3. به صفحه «کارت نوشته» برگردید و روی گروه کارت، رویداد کلیک را با عملکرد باز کردن نوشته وردپرسی تنظیم کنید:
    • استفاده از نوشته فعلی را روشن کنید.
    • صفحه قالب نوشته را روی «جزئیات نوشته» بگذارید.

گام ۳: فهرست آخرین نوشته‌ها​

  1. صفحه اصلی اپ را باز کنید.
  2. یک لیست پویا اضافه کنید.
  3. در بخش منبع داده، نوع منبع را WordPress انتخاب کنید.
  4. نوع داده را روی «نوشته‌های WordPress» بگذارید.
  5. در فیلترها و Query بنویسید:
{ "orderby": "date", "order": "desc" }
  1. صفحه الگو برای آیتم‌ها را روی «کارت نوشته» بگذارید.
  2. چیدمان را عمودی و «بارگذاری تدریجی» را روشن کنید تا با اسکرول، مطالب بیشتری بیاید.
  3. برای حالت خالی و خطا، دو صفحه ساده با پیام مناسب بسازید و در همان تنظیمات معرفی کنید.

گام ۴: فهرست دسته‌ها​

  1. صفحه‌ای به نام «کارت دسته» بسازید و بلوک کارت دسته را داخل آن بگذارید؛ یا ویجت‌های عکس و متن را به sys.inPage.category.image.url، sys.inPage.category.title و sys.inPage.category.raw.count متصل کنید.
  2. در صفحه اصلی، یک لیست پویای دیگر اضافه کنید با نوع داده «دسته‌های نوشته» و همین صفحه الگو.
  3. چیدمان را افقی بگذارید تا نواری از دسته‌ها بالای مطالب دیده شود.
  4. فیلتر پیشنهادی برای حذف دسته‌های خالی:
{ "hide_empty": true, "orderby": "count", "order": "desc" }

گام ۵: صفحه نوشته‌های یک دسته​

  1. صفحه‌ای به نام «نوشته‌های دسته» بسازید.
  2. در آن یک لیست پویا با نوع داده «نوشته‌های WordPress» و این فیلتر بگذارید:
{ "categories": "{{blog.filter.categories}}", "orderby": "date", "order": "desc" }
  1. صفحه الگو را «کارت نوشته» انتخاب کنید.
  2. در صفحه «کارت دسته»، روی کلیک این دو عملکرد را به‌ترتیب در یک عملکرد چندگانه بگذارید:

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

هشدار

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

گام ۶: جست‌وجو​

  1. صفحه‌ای به نام «جست‌وجو» بسازید.
  2. یک فیلد متن فرم اضافه کنید و مقدارش را در متغیر search.query بریزید.
  3. یک دکمه «جست‌وجو» بگذارید که صفحه «نتیجه جست‌وجو» را باز می‌کند.
  4. در صفحه «نتیجه جست‌وجو» یک لیست پویا با این فیلتر بگذارید:
{ "search": "{{search.query}}", "orderby": "relevance" }
  1. صفحه الگو را «کارت نوشته» انتخاب کنید.
  2. برای حالت بدون نتیجه، صفحه خالی با پیام «چیزی پیدا نشد» بسازید.

گام ۷: دیدگاه‌ها​

نمایش دیدگاه‌ها​

  1. صفحه‌ای به نام «ردیف دیدگاه» بسازید و بلوک ردیف دیدگاه را داخل آن بگذارید؛ برای ساخت دستی، ویجت‌های معمولی را به داده دیدگاه جاری در sys.inPage.comment.* متصل کنید.
  2. در صفحه «جزئیات نوشته»، پایین محتوا یک لیست پویا اضافه کنید:
    • نوع داده: «دیدگاه‌های نوشته»
    • فیلتر:
{ "post": "{{sys.inPage.post.id}}", "orderby": "date", "order": "asc" }
  • صفحه الگو: «ردیف دیدگاه»
  1. کل این بخش را با شرط وضعیت نظردهی در حالت «وجود نظر» نمایش دهید تا وقتی دیدگاهی نیست، عنوان خالی دیده نشود.

ثبت دیدگاه​

ثبت دیدگاه به افزونه اختصاصی و ورود کاربر نیاز دارد.

  1. در صفحه «جزئیات نوشته»، بلوک آماده فرم آماده دیدگاه و امتیاز را اضافه کنید.
  2. کل فرم را با شرط ورود کاربر به حساب وردپرس نمایش دهید و در حالت مخالف، دکمه «برای ثبت دیدگاه وارد شوید» بگذارید.
  3. فرم به‌طور پیش‌فرض متن را در review.content می‌گذارد و عملکرد ارسال دیدگاه یا امتیاز را اجرا می‌کند.
  4. با شرط مقدار متغیر روی sys.inPage.feedback.submitting دکمه ارسال را در حین ارسال غیرفعال کنید و با sys.inPage.feedback.success پیام تشکر را نشان دهید.

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

بهبودهای پیشنهادی​

  • نوشته‌های ویژه: یک لیست افقی بالای صفحه اصلی با فیلتر { "sticky": true }.
  • برچسب‌ها: همان الگوی دسته‌ها را با نوع داده «برچسب‌های نوشته» و متغیر blog.filter.tags تکرار کنید.
  • برگه‌های ثابت: برای «درباره ما» و «تماس با ما» از نوع داده «برگه‌های WordPress» و عملکرد باز کردن نوشته با نوع محتوای «برگه» استفاده کنید.
  • حالت آفلاین: با شرط عدم برقراری ارتباط با سایت وردپرسی یک پیام و دکمه تلاش مجدد در صفحه اصلی بگذارید.

اشتباه‌های رایج​

  • استفاده از sys.inPage.post.* در صفحه‌ای که آیتم جاری ندارد؛ نتیجه، ویجت خالی است.
  • فراموش کردن مقداردهی متغیر قبل از باز کردن صفحه فهرست فیلترشده.
  • انتظار مرتب‌سازی کل داده از بخش «پردازش داده» لیست؛ این بخش فقط روی همان صفحه‌ای که آمده کار می‌کند. مرتب‌سازی را با orderby به سرور بسپارید.
  • استفاده از تصاویر بهینه‌نشده سایت که سرعت اپ را پایین می‌آورد.

مطالب مرتبط​