Pirajki iPad Scroll Mockup

开发者	pirajki
更新时间	2026年8月8日 01:54
PHP版本:	7.4 及以上
WordPress版本:	7.0
版权:	GPLv2 or later
版权网址:	版权信息

下载

1.0.0

详情介绍:

Pirajki iPad Scroll Mockup adds a single shortcode, [pirajki_ipad_scroll], that renders a device mockup with a screenshot inside its screen. Hover over the frame and scroll the mouse wheel to scroll the screenshot inside the screen; move the pointer away and the page scrolls normally again. You can place as many frames as you like on the same page — each one scrolls independently. It's a lightweight way to showcase a website, app, or product screenshot inside a device frame without a page builder add-on or external animation library. Features

One shortcode — [pirajki_ipad_scroll], no blocks or builder required
Hover-to-scroll — the screenshot only scrolls inside the frame while the mouse is over it; the page scrolls normally the rest of the time
Multiple frames per page — each shortcode instance scrolls independently, so you can place several on one page
Built-in default frame — ships with an iPad frame so [pirajki_ipad_scroll screenshot="456"] works out of the box
Any device frame — swap in any transparent-background device PNG (iPad, phone, laptop, browser chrome, etc.), not just iPads
Media Library or direct URL — pass an attachment ID or a full image URL for both the frame and the screenshot
Pure vanilla JavaScript — no jQuery or external dependencies
No settings page, no database options — the plugin only enqueues its assets on pages where the shortcode is actually used

Shortcode Usage Basic usage — only a screenshot is required, the plugin ships with a default iPad frame: [pirajki_ipad_scroll screenshot="456"] Using your own frame and Media Library attachment IDs: [pirajki_ipad_scroll frame="123" screenshot="456"] Or with direct image URLs: [pirajki_ipad_scroll frame="https://example.com/ipad-frame.png" screenshot="https://example.com/homepage-shot.jpg"] Shortcode Attributes

frame — (optional) Attachment ID or URL of the device frame image (should have a transparent screen area). Defaults to the iPad frame bundled with the plugin.
screenshot — (required) Attachment ID or URL of the screenshot to scroll inside the screen
frame_alt — alt text for the frame image (default: "Device frame")
shot_alt — alt text for the screenshot image (default: "Homepage preview")

The shortcode renders only the device frame with the scrollable screenshot inside it — no heading, background, or padding around it, so it drops cleanly into any layout.

安装:

Upload the pirajki-ipad-scroll folder to /wp-content/plugins/, or install directly through the WordPress Plugins screen
Activate through 'Plugins' in WordPress Admin
Add the [pirajki_ipad_scroll frame="..." screenshot="..."] shortcode to any page or post, using either Media Library attachment IDs or image URLs

升级注意事项:

1.0.0 Initial release.

常见问题:

Does this only work with iPad mockups?

No. Any device frame image with a transparent screen area works — phone, laptop, browser window, tablet, and so on. The name reflects the original use case, but the shortcode accepts any frame image.

Where do I get a device frame image?

Upload your own PNG with a transparent screen cut-out to the Media Library (or use a direct URL to one), then pass its attachment ID or URL as the frame attribute.

Why isn't anything showing on the page?

The screenshot attribute is required. If it's missing or can't be resolved to an image, logged-in editors will see an inline notice on the page explaining what's missing; the shortcode simply renders nothing for visitors.

Do I have to supply my own device frame?

No — the plugin ships with a default iPad frame, so [pirajki_ipad_scroll screenshot="456"] works on its own. Pass your own frame attribute (attachment ID or URL) if you'd rather use a different device or a custom frame image.

Does this add any settings pages or database options?

No. The plugin has no admin settings screen and stores nothing in the database — it only registers a shortcode and enqueues its CSS/JS on pages where that shortcode is used.

Does the page scroll when I scroll over the mockup?

No. While the mouse is over the frame, scrolling moves the screenshot inside the screen instead of the page. Move the pointer off the frame and the page scrolls normally again.

Can I add more than one on the same page?

Yes. Use the shortcode as many times as you like — each instance scrolls independently of the others.

更新日志: