설명
Rockon Owl Slider is a simple, responsive WordPress slider plugin built on Owl Carousel 2, a touch-enabled jQuery plugin.
Slides are a custom post type, so you create them the same way you create any post. Each slide uses its featured image as the background, its title and excerpt as the caption, and can carry an optional link that opens in the same tab or a new one.
Add the slider anywhere with the [ROCKON_OWL] shortcode.
Features
- Unlimited slides
- Touch and swipe enabled
- Responsive, with fluid slide heights on phones and tablets
- Responsive images with srcset, so phones do not download desktop-sized files
- Slides managed as a custom post type
- Slide image, title, description and link
- Option to open a slide link in a new tab
- Autoplay, pausing on hover and on keyboard focus
- Keyboard navigation with the left and right arrow keys
- Respects the visitor’s reduced-motion preference
- Optional maximum slider width, set in the Customizer
- Assets load only on pages that actually contain a slider
Usage
- Go to Rockon Owl Slider > Add New Slide in the admin menu.
- Give the slide a title, set a featured image, and add an excerpt for the caption.
- Optionally add a link in the Slide Link box below the editor.
- Publish, and repeat for as many slides as you need.
- Add the shortcode
[ROCKON_OWL]to any post or page.
To output the slider directly in a theme template file:
<?php echo do_shortcode( '[ROCKON_OWL]' ); ?>
스크린샷
설치
- Log in to your site’s administration panel.
- Go to Plugins > Add New.
- Search for “Rockon Owl Slider”, or upload the plugin archive.
- Click Install Now, then Activate.
- Create slides under Rockon Owl Slider, then add
[ROCKON_OWL]where you want the slider to appear.
FAQ
-
How do I add the slider to a page?
-
Add the shortcode
[ROCKON_OWL]to the page content. The lowercase form[rockon_owl]works too. -
How do I add the slider directly in a theme template?
-
Use
<?php echo do_shortcode( '[ROCKON_OWL]' ); ?>in your template file. -
In what order do the slides appear?
-
By page order first, then by date, oldest first.
-
What image size should I use?
-
Around 1920×1080 for a full-width slider. Smaller images are stretched to fill the slide and will look soft.
-
Can I change the slider width?
-
Yes. Go to Appearance > Customize > Rockon Slider Customizer and enter a maximum width in pixels, without the unit. Leave it empty for full width.
-
The slider used to appear at the top of my page instead of where I put the shortcode.
-
That was a bug and it is fixed in 2.1.0. The slider now renders exactly where the shortcode sits.
-
Does it need jQuery?
-
Yes. Owl Carousel is a jQuery plugin, and the plugin now loads jQuery for you. Earlier versions did not declare it, which is why the slider failed to start on block themes.
후기
기여자 & 개발자
변경이력
2.1.0
Security and stability release. Updating is strongly recommended.
- Security: the slide meta box saved data before running its nonce, capability and autosave checks. All checks now run first, and the handler is restricted to the slide post type instead of firing on every save across the site.
- Security: fixed a typo in the nonce field name that meant the nonce was never actually verified.
- Security: slide meta is now sanitized before being stored, and escaped before being printed in the admin.
- Security: added a sanitize callback to the Customizer width setting.
- Security: added a direct file access guard.
- Fixed: the shortcode now returns its markup instead of printing it, so the slider appears where the shortcode is rather than at the top of the page. On block themes it rendered before the doctype, which also put the browser into quirks mode.
- Fixed: jQuery is now declared as a dependency. Without it the slider did not start at all on block themes.
- Fixed: autoplay never ran. The configuration used Owl Carousel 1 option names that version 2 ignores, and the interval was 400ms rather than several seconds.
- Fixed: navigation arrows were invisible, and slide titles were forced to a fixed size and colour, by a demo stylesheet shipped as owl.theme.css. The plugin now loads the real Owl Carousel 2 theme.
- Fixed: a stray “padding: 235px” rule was applied to every element with the class “item” anywhere on the site.
- Fixed: missing wp_reset_postdata() after the slide query, which left global post data pointing at the last slide.
- Fixed: an empty “max-width: px” rule was printed into the head of every page.
- Fixed: removed a dead code block that would cause a fatal error on PHP 8 if it were reached.
- Fixed: PHP 8 undefined array key warnings on every post save.
- Changed: slides render as real img elements instead of CSS backgrounds, adding srcset, alt text and lazy loading, and improving Largest Contentful Paint.
- Changed: stylesheets and scripts load only on pages containing the slider, instead of on every page of the site.
- Changed: slides are ordered by page order, then date, oldest first.
- Changed: rewritten stylesheet with fluid heights, a readable gradient over the image, and styled arrows and dots.
- Added: keyboard navigation, ARIA labels on the controls, autoplay pause on focus, and reduced-motion support.
- Added: the lowercase [rockon_owl] shortcode as an alias.
- Added: support for more than one slider on the same page without conflicting IDs.
- Added: translation support. The text domain is now rockon-owl-slider.
- Added: rewrite rules are flushed on activation, so slide permalinks no longer 404 until permalinks are re-saved.
- Added: an uninstall routine that removes the plugin’s setting. Slides are left untouched.
2.0
- Updated to Owl Carousel 2.
- Added slide link, with an option to open in a new tab.
- Added the slider width option in the Customizer.