Storyino

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

توضیحات

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

رابط کاربری فارسی (RTL) است. CSS، جاوااسکریپت و فونت وزیرمتن از داخل خود پلاگین بارگذاری می‌شوند و هیچ چیزی از CDN لود نمی‌شود.

امکانات

• دسته‌بندی استوری با تصویر دایره و شورت‌کد اختصاصی
• شورت‌کد [storyino] برای همه دسته‌ها و [storyino cat="slug"] برای یک دسته
• انتخاب تصویر و ویدیو از کتابخانه رسانه وردپرس
• لینک مقصد جداگانه برای هر آیتم (دکمه پایین استوری)
• مرتب‌سازی دسته‌ها و آیتم‌ها با کشیدن و رها کردن
• پیش‌نمایش فریم ویدیو در پنل ادمین
• بستن خودکار پلیر بعد از آخرین استوری
• پیش‌بارگذاری استوری بعدی
• فونت عنوان دایره و دکمه لینک: پیش‌فرض فونت قالب، اختیاری وزیرمتن محلی
• نمایش یا مخفی کردن عنوان زیر دایره
• رنگ عنوان استوری: مشکی یا سفید
• سه اندازه دایره: کوچک، متوسط و بزرگ
• فلش قبلی و بعدی وقتی دایره‌ها از عرض صفحه بیشتر شوند
• ظاهر تخت دایره‌ها، بدون سایه
• بدون وابستگی به CDN برای استایل، اسکریپت و فونت

شورت‌کدها

[storyino]

لیست افقی همه دسته‌ها را مثل استوری اینستاگرام نشان می‌دهد.

[storyino cat="products"]

فقط همان دسته را نشان می‌دهد.

[storyino ids="12,18,25"]

فقط فایل‌های رسانه مشخص‌شده را پخش می‌کند.

پارامترهای اختیاری: label (عنوان دایره)، speed (شبیه‌سازی سرعت دانلود بر حسب KB/s؛ صفر یعنی سرعت واقعی)، duration (مدت نمایش هر عکس به میلی‌ثانیه).

کد منبع

این افزونه تحت مجوز GPLv2 یا بالاتر منتشر شده است.

کد منبع خوانا (غیر فشرده) داخل افزونه موجود است:

• جاوااسکریپت: src/js/storyino.js و src/js/storyino-admin.js
• CSS: src/css/storyino.css و src/css/storyino-admin.css
• نسخه خوانا کنار فایل‌های فشرده: assets/js/storyino.js، assets/js/storyino-admin.js و assets/css/storyino.css

مخزن عمومی: https://github.com/Amirrezaheydari81/storyino

برای ساخت مجدد فایل‌های فشرده:

npm install
npm run build

ابزارهای بیلد (فقط devDependencies، روی سایت بارگذاری نمی‌شوند): esbuild، PostCSS، Tailwind CSS و clean-css. جزئیات در package.json و build.js.

منابع شخص ثالث

• فونت وزیرمتن (مجوز SIL Open Font)، فایل assets/fonts/Vazirmatn-Medium.woff2: https://github.com/rastikerdar/vazirmatn
• jQuery و jQuery UI Sortable: هسته وردپرس
• Tailwind CSS (مجوز MIT): فقط در زمان بیلد برای استایل ادمین استفاده می‌شود

نصب

1. پوشه storyino را در مسیر /wp-content/plugins/ آپلود کنید.
2. افزونه را از صفحه افزونه‌ها فعال کنید.
3. از منوی Storyino در پیشخوان وارد تنظیمات شوید.
4. یک دسته بسازید، تصویر دایره بگذارید و تصویر/ویدیو اضافه کنید.
5. شورت‌کد [storyino] را در برگه، نوشته یا ویجت Shortcode قرار دهید.

سوالات متداول

کد جاوااسکریپت غیر فشرده کجاست؟

در پوشه src/js/. همچنین نسخه خوانا در assets/js/storyino.js و assets/js/storyino-admin.js موجود است. فایل‌های فشرده پسوند .min.js دارند. کد کامل در گیت‌هاب هم هست: https://github.com/Amirrezaheydari81/storyino

آیا افزونه اسکریپت یا استایلی از CDN بارگذاری می‌کند؟

خیر. استایل‌ها، اسکریپت‌ها و فونت وزیرمتن همگی فایل‌های محلی داخل پوشه assets/ هستند.

چرا ویدیو بی‌صداست؟

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

دایره‌های استوری دیده نمی‌شوند

بررسی کنید: افزونه فعال است؟ شورت‌کد در محتوا قرار دارد؟ دسته ذخیره شده و حداقل یک تصویر یا ویدیو دارد؟ قالب تابع wp_footer() را صدا می‌زند؟

فلش‌های قبلی و بعدی کی ظاهر می‌شوند؟

وقتی تعداد دایره‌ها از عرض صفحه بیشتر شود، فلش‌های ناوبری به‌صورت خودکار ظاهر می‌شوند.

اسکرین‌شات‌ها

1. تنظیمات دسته‌بندی در داشبورد ادمین.
2. دایره‌های استوری در سایت.
3. پلیر تمام‌صفحه استوری.

تغییرات

1.1.12

• فلش قبلی و بعدی برای جابه‌جایی بین دایره‌ها وقتی از عرض صفحه بیشتر شوند.
• رفع مشکل اسکرول افقی با قالب‌ها و صفحه‌سازها.

1.1.9

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

1.1.8

• گزینه نمایش یا مخفی کردن عنوان دسته زیر دایره.
• گزینه رنگ عنوان: مشکی یا سفید.

1.1.7

• فایل readme.txt و سورس خوانا کنار فایل‌های فشرده برای بازبینی مخزن وردپرس.
• ثبت اسکریپت‌ها با wp_enqueue_scripts.

1.1.6

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

1.0.1

• فشرده‌سازی فایل‌ها و لینک مقصد برای هر آیتم.

1.0.0

• اولین نسخه.

اطلاعیه ارتقا

1.1.12

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

1.1.9

اندازه دایره قابل تنظیم و ظاهر تخت بدون سایه.

1.1.8

نمایش/مخفی عنوان و انتخاب رنگ مشکی یا سفید.

1.1.7

فایل readme.txt و سورس خوانا برای مخزن وردپرس.