SmartUpWorld Post Slider
| 开发者 | smartupworld |
|---|---|
| 更新时间 | 2026年10月8日 03:16 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
- One shortcode —
[suwps_post_slider]— works in posts, pages, widgets and PHP templates - Full-image cards with category badge, author, date and a Read More button
- Every part can be switched on or off: category, author, date, Read More button, arrows, dots, autoplay and pause button
- Settings page: show/hide each part, set the time per slide, pick the button colours, set your own Read More label
- Shortcode attributes override the settings for a single slider
- Responsive — 1, 2 or 3 cards depending on the space the slider has, not just the screen size
- Filter by category, show specific posts by ID, or skip the post being viewed
- Uses the primary category from Rank Math or Yoast SEO when one is set
- Works with any theme: the slider's styles are scoped to its own class names
- Works with WebP and lazy-load plugins such as Imagify, EWWW and ShortPixel, including their
<picture>tags - Right-to-left languages supported
- A pause/play button whenever slides move on their own (WCAG 2.2.2)
- Slides stop moving while the mouse is over them, as soon as a keyboard user enters the slider, and for good once a visitor uses the arrows, dots or swipes
- For visitors who have asked their device to reduce motion, slides switch instantly instead of gliding
- Keyboard users can tab through every card; the focused card always slides into view, with a clear focus outline
- Labelled buttons, slide positions announced to screen readers, 24px minimum click targets
- Default colours meet the AA contrast ratios, including text over photos
- No jQuery. The carousel uses Embla Carousel: about 10 KB of JavaScript (gzipped) in total, where Owl Carousel needed 11 KB plus jQuery
- CSS and JavaScript load only on pages that use the shortcode; scripts are deferred
- No layout shift while the page loads: cards are laid out with CSS before the script runs
- Images lazy-load with responsive sizes, and the next cards preload just before they slide in
- Autoplay only runs while the slider is visible on screen
- Add
priority="true"when the slider is at the top of a page, so its first image loads first
[suwps_post_slider]
With a header:
[suwps_post_slider eyebrow="From The Blog" title="Latest Insights" subtitle="Practical guides on website care, speed and security."]
For single post templates (skip current, no arrows):
[suwps_post_slider title="Related Articles" count="6" skip="current" nav="false" underline="false"]
Your own button text and colour:
[suwps_post_slider readmore_text="Lees meer" accent="#2c6e49"]
In a PHP template:
<?php echo do_shortcode( '[suwps_post_slider]' ); ?>
The Post Slider admin page lists every attribute with copy-ready examples. Full documentation: smartupworld.com/smartupworld-post-slider/
Third-party library
The carousel is powered by Embla Carousel 8.6.0 by David Jerleke, released under the MIT License. The bundled file assets/js/embla-carousel.umd.js is the unmodified build from the official npm package; the human-readable source is at github.com/davidjerleke/embla-carousel. Its license is included as assets/js/embla-carousel-LICENSE.txt.
安装:
- Upload the
smartupworld-post-sliderfolder to/wp-content/plugins/, or install it from Plugins → Add New. - Activate the plugin through the Plugins menu in WordPress.
- Paste
[suwps_post_slider]into any post, page, or widget. - Visit Post Slider in your WordPress admin menu to choose what the cards show, set colours, and see every shortcode option.
屏幕截图:
常见问题:
What shortcode do I use?
Use [suwps_post_slider] anywhere in your site. The admin Post Slider → Shortcode Guide tab lists every attribute with copy-ready examples.
How do I hide the date, author or category?
Untick them under Post Slider → Settings to hide them on every slider, or use date="false", author="false" or cat="false" on a single slider.
How do I change the colours?
Go to Post Slider → Settings → Button colours. For one slider only, use the accent attribute, for example accent="#2c6e49".
How do I change the "Read More" text?
Type your own label under Post Slider → Settings, or use readmore_text="Lees meer" on a single slider. Left empty, the label is translated automatically when a translation for your language is available.
Can I filter by category?
Yes. Use category="your-category-slug" or category="14" (numeric ID). Example: [suwps_post_slider category="tech" count="6"]
How do I show specific posts?
Use the ids attribute with comma-separated post IDs: [suwps_post_slider ids="12,45,67"]. The posts appear in that order. This overrides count and category.
Does it work on single post templates?
Yes. Add skip="current" to leave out the post being viewed, ideal for a "Related Articles" section.
Does it conflict with my theme's slider?
No. The plugin does not load Owl Carousel or jQuery and uses its own suwps- class names, so sliders from your theme or other plugins are not affected.
Can I turn autoplay off?
Yes: untick Autoplay in the settings, or use autoplay="false". With autoplay off, the pause button is not shown.
Can I make the slides change faster or slower?
Yes. Set Time per slide under Post Slider → Settings, from 2 to 15 seconds (4 by default). For one slider only, use the delay attribute in seconds, for example delay="6".
Why is there a pause button?
Content that moves on its own needs a way to stop it (WCAG 2.2.2). You can hide it under Post Slider → Settings, but your slider will then no longer meet that accessibility requirement while autoplay is on.
Where is the documentation?
Full documentation is at smartupworld.com/smartupworld-post-slider/. The admin Post Slider page also contains all attributes and copy-ready shortcode examples.
更新日志:
- New default design: full-image cards with category badge, author, date and a frosted Read More button.
- New Settings tab: show or hide the category, author, date, Read More button, arrows, dots, autoplay and pause button; set the time per slide; pick the button colours; set the Read More label.
- New shortcode attributes: cat, author, date, readmore, readmore_text, autoplay, pause, delay, loop, accent and priority.
- Replaced Owl Carousel, which is no longer maintained and needs jQuery, with Embla Carousel 8.6. No jQuery, less JavaScript.
- Accessibility: pause/play button, slides stop on interaction and keyboard focus, focused cards slide into view, visible focus outlines, 24px click targets, contrast-safe default colours, no sliding animation with reduced motion.
- Performance: no layout shift while loading, deferred scripts, responsive image sizes, preloading of the next cards, autoplay only while visible, and a priority option for sliders at the top of a page.
- The card category uses the Rank Math or Yoast SEO primary category when set, and skips "Uncategorized".
- Changed:
layoutnow defaults to "fullwidth", which fills the area the shortcode is placed in. Uselayout="contained"for the previous centred 1200px width. - Changed: CSS classes now use the
suwps-prefix. Custom CSS written for the oldsuw-classes needs updating. - Fixed: the FAQ wrongly said WordPress would remove a duplicate Owl Carousel loaded by a theme.
- Renamed the shortcode tag to [suwps_post_slider] for a unique, conflict-free prefix.
- Moved admin page CSS and JavaScript into properly enqueued files.
- Renamed the "exclude" attribute to "skip".
- Initial release.
- Bundled Owl Carousel 2.3.4 — no CDN dependency.
- Shortcode attributes: eyebrow, title, subtitle, underline, count, category, ids, exclude, layout, nav, dots.
- ARIA accessibility improvements — labelled nav buttons and dots.
- LCP-safe eager loading on first slide image.
- Admin documentation page with copy-ready examples and SmartUpWorld branding.