Ananyoo Accessible Portfolio – Case Studies & Project Gallery
| 开发者 | anblik |
|---|---|
| 更新时间 | 2026年8月3日 01:13 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.0 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
Ananyoo Accessible Portfolio adds a Portfolio post type built the accessibility-first way: real content in the database, semantic markup, and nothing that traps a keyboard or confuses a screen reader — no lightboxes, no hover-only interactions, no page-builder lock-in.
Developed by Shivaji Mitra (M/S. Anblik).
Live demo: Try the accessible portfolio demo »
Why this plugin?
Most portfolio plugins look impressive and then fail the people who matter: isotope filtering that keyboards cannot reach, lightboxes that trap focus, hover-only overlays that touch and screen-reader users never discover. This plugin makes the accessible result the default — a portfolio added by a non-expert is still usable by keyboard and screen-reader visitors, on the smallest phone, in high-contrast mode.
Key features
- Portfolio post type — title, editor for the case study, excerpt (used as the short description on listing cards) and featured image.
- Categories and tags — hierarchical portfolio categories plus flat portfolio tags, both available to blocks and the REST API.
- Project details — client name, completed date, project URL and tools used, shown as a styled, accessible project-details card on single case studies. It works on any theme out of the box; a block theme can instead place the Portfolio details block for the full image-and-card layout.
- Two blocks and a shortcode, one renderer — the Accessible Portfolio block (and the [accessible_portfolio] shortcode) build the listing in grid, list or carousel layout with 1–4 columns, item count, category/tag filtering and per-field toggles; the Portfolio details block builds the single case-study page.
- Visitor filter, pagination and view switch — optionally add an accessible category-filter dropdown, page navigation, and a Grid/List view toggle to the listing. All are built into the plugin and work on any theme — no page builder, and (for the view switch) progressive-enhancement JavaScript that never leaves a dead control.
- Design controls with a live contrast check — set the card corner radius, an optional image overlay, and the card, text and tag-pill colours. As you choose colours the editor shows a live WCAG AA pass/fail badge, so an unreadable combination is caught before you publish. A width (alignment) control lets the grid span the content column, the wide zone or full width.
- Accessible carousel option — the carousel layout is powered by the free Ananyoo Accessible Carousel plugin: real button controls, screen-reader announcements, no autoplay, reduced-motion safe. Without it, a grid is shown instead.
- Lean front end — semantic list markup, real headings at a configurable level, external links announced to screen readers, and no motion. The only script is the optional Grid/List view switch, and it is progressive enhancement — hidden until it is operable, so it never traps or breaks anything.
- Configurable archive — change the listing slug, or switch the automatic archive off and use your own page (a theme template or the plugin's block) at that address.
- Your content is safe — everything is ordinary WordPress content: it survives theme switches, works with any block theme, and is never deleted on uninstall unless you deliberately turn that on.
- Plugin home & documentation
- Live demo
- More accessibility plugins from Ananyoo — further WordPress accessibility plugins are in active development.
- Support forum
安装:
- Upload and activate the plugin.
- A Portfolio menu appears in wp-admin: add items with a title, the case study in the editor, a short description in the Excerpt field, a featured image, categories, tags, and the project details (client, date, URL, tools).
- Your listing lives at /portfolio/ (change the slug under Portfolio > Settings). If links 404 after changing the slug, visit Settings > Permalinks once.
屏幕截图:
常见问题:
Why is the post type slug "portfolio" and not prefixed?
Interoperability, chosen deliberately: the unprefixed slug is the long-standing convention shared by established portfolio plugins, so content created with them is recognised when you switch to this plugin, and block themes can provide standard archive-portfolio and single-portfolio templates. All code identifiers (functions, options, meta keys) use the anap_ prefix.
How do I use the shortcode?
Paste [accessible_portfolio] into any post, page or widget for a 3-column grid of your newest items. Options: layout (grid, list, carousel), columns (1-4), count (1-24), category and tag (slugs), heading_level (2-4); the yes/no field switches show_title, show_image, show_excerpt, show_category, show_tags, show_client, show_date, show_tools, show_url; a description limit via excerpt_unit (words/characters) and excerpt_limit; the visitor controls show_filter, paginate and show_view_switch; inherit_query for archive templates; and design options card_radius, card_bg, card_text, tag_bg, tag_text, show_overlay, overlay_color and overlay_opacity. Example: [accessible_portfolio layout="list" count="4" category="healthcare" show_client="yes" show_date="yes"]. The Accessible Portfolio block offers the same options with a live preview, plus the width (alignment) control and the live WCAG contrast check for colours. The full attribute table is on the plugin's About page in your dashboard.
What do I need for the carousel layout?
The free Ananyoo Accessible Carousel plugin, by the same author: https://wordpress.org/plugins/ananyoo-accessible-carousel/ — install and activate it, and layout="carousel" comes alive (no autoplay, real button controls, screen-reader announcements, reduced-motion safe). Without it, the shortcode safely shows a grid instead, and editors see a private reminder on the page.
Does it work with any theme?
Yes — that is a core goal. On any theme, listings render from the block or shortcode (with the optional filter, pagination, view switch, width and colour controls), and single case studies automatically show the styled, accessible project-details card. Nothing depends on a particular theme. The Ariade theme goes one step further by placing these same plugin blocks in its portfolio templates, so the layout is identical whether it comes from the theme or from a block you drop in yourself.
Will uninstalling delete my portfolio items?
Not by default — your content is kept forever. If you want a clean removal, tick Delete all data on uninstall under Portfolio > Settings first; then deleting the plugin also removes every portfolio item, the portfolio categories and tags, and the plugin settings (media files are never deleted).
更新日志:
1.6.0
- New: custom-field types — each custom field can be Text, Link (URL) or Date. A URL renders as an accessible external link and a date is shown with your site's date format and a machine-readable element.
- New: rename any built-in field on the front end (for example "Client name" → "Organisation") from Portfolio → Settings, with the default kept as a placeholder.
- New: Confidential project toggle on each item — hides the client name and the live-site link in one click (for NDA or private clients); per-item Show/Hide still overrides it.
- New: order control for custom fields (lower numbers show first).
- New: privacy-aware JSON-LD (schema.org CreativeWork) on single case studies for richer SEO — any field hidden by the site setting, a per-item override or the Confidential flag is left out of the structured data too, so a private client name never leaks.
- New: optional clean-up that removes a custom field's saved values from all items when you delete the field.
- Developer: bundled translation template (/languages/*.pot), Text Domain loading, and a WP-CLI helper (
wp anap info,wp anap fields). - Accessibility: every new control uses native inputs, labelled selects and fieldset/legend grouping; still no new front-end JavaScript.
- Housekeeping: display name tidied to "…Case Studies & Project Gallery" (slug unchanged), and the code passes Plugin Check with no errors or warnings (translator comments, input sanitising and translation loading all cleaned up).
- New: show/hide control for every project field (Client name, Completed date, Tools used, Live site, Tags and Category). Set a site-wide default in Portfolio → Settings ("Show fields"), and override it on any single item in the new "Field visibility on this project" box (Default / Show / Hide) — handy when a client prefers their name stays private.
- New: Custom fields. Add your own detail fields (for example Budget, Duration or Role) in Portfolio → Settings, then fill their value on each portfolio item; they render in the accessible details card and respect the same show/hide controls. Up to 12 fields.
- The global "Show fields" setting also applies to the listing grid/cards and the automatic single-view details, so a hidden field stays hidden everywhere unless an item overrides it.
- Accessibility: all new controls use native checkboxes, labelled selects and fieldset/legend grouping; no new front-end JavaScript.
- Mobile filter overflow fixed. A native will not shrink below its longest option, so pairing it with the Apply button pushed the row (and the view-switch) off the right edge at 320px. The select and Apply now each take a full-width row, with the Grid/List view-switch on its own row beneath — verified to fit at 320px with no horizontal overflow.
- Mobile view-switch keeps its labels. With the two-row mobile layout there is room, so the Grid / List buttons now show their text (icon + label) exactly like desktop, instead of collapsing to icon-only squares.
- Mobile filter layout redesigned. Instead of squeezing the category select, Apply button and grid/list view-switch onto one cramped line, the controls now stack cleanly on phones: the label on top, the select + Apply on their own comfortable row, and the view-switch on a tidy row beneath (right-aligned). Replaces the 1.4.25 single-line approach.
- Mobile filter row fix — the category now uses flex:1 1 0 (was flex:1 1 auto) inside .anap-filter-controls, so at <=600px it actually shrinks to the available space instead of staying as wide as its longest option. The select, Apply button and view-switch now sit on one line at 320px without overflowing.
- New "Cards" layout: a dynamic editorial card scroller for the block and the [accessible_portfolio] shortcode (layout="cards"), rendered with the free Ananyoo Accessible Carousel plugin's scroller markup. Shows several cards per view with the image contained on top and the title, description and "View case study" button below — keeping square/logo images sharp instead of stretched. New per_view (1–6) and gap (0–80) options; falls back to a grid when the Carousel plugin is inactive.
- Mobile toolbar refinement: the category filter and the icon-only Grid/List switch now stay on a single row (the row no longer wraps the switch onto its own line); the filter shrinks to fit instead.
- Mobile toolbar is now more compact: on narrow screens the Grid/List view switch shows icon-only buttons (the text label stays in the accessible name for screen readers, and each button keeps a 44px touch target), so the category filter and the view switch fit neatly on one row instead of stacking.
- Mobile fix: on narrow screens the listing toolbar now stacks cleanly — the category filter and the Grid/List view switch align to the left instead of the switch floating off to the right on its own line.
- Accessibility fix: listing card titles now default to heading level 2 (was 3). On an archive or a page where the listing sits directly under the page's H1, the old default produced an H1 -> H3 jump, which fails WCAG 2.2 "headings must not skip a level" (axe/Lighthouse). Titles now read H1 -> H2 out of the box. The heading_level control (2-4) still lets you raise it when the block is nested under an existing H2.
- Accessibility fix: the small category label on listing cards used a light grey that measured 3.72:1 on white — below the WCAG 2.2 AA minimum of 4.5:1 for normal text. Darkened the default to a muted slate that measures 5.47:1, so the default listing passes AA out of the box. Themes that set --anap-card-muted are unaffected.
- Detail-page call-to-action now honours the Card button text and link set in Portfolio > Settings (the new block and the any-theme fallback both use them; a value set on the block still overrides). Also refreshed the dashboard About page and the plugin description to cover the filter, pagination, view switch, width, card-design colour controls with the WCAG contrast check, and the single-page details block.
- Full theme independence for the detail page. On any theme, single case studies now automatically show the same polished, accessible project-details card that the block renders (icons, client, date, tools, live-site link, tags and CTA) — appended after the content, styled by the plugin, with no theme support required. The card builder is now shared between the block and this fallback, so both look identical. Themes that place the "Portfolio details" block themselves (such as Ariade) continue to use it and this fallback stays out of the way.
- The single "Portfolio details" block now leaves a clear gap beneath itself, so the description that follows is no longer cramped against the featured image.
- New "Portfolio details (single)" block that renders the whole case-study detail layout — featured image plus an accessible project-details card — from the plugin, so the single page no longer depends on the theme. Controls: image position (left / right / stacked) and width, card heading, per-field toggles (client, completed date, tools, live site, category, tags), a configurable call-to-action button, optional accessible previous/next project links, corner radius, and card background/text colours with the same live WCAG AA contrast badge. It shows the current case study on single portfolio pages; place it in a single-portfolio template.
- The colour-contrast result in the Card design panel is now a prominent badge instead of a faint line: a green "Passes WCAG AA" chip with a tick, or a red "Fails WCAG AA — needs 4.5:1" alert with a warning icon. The failing state also carries role="alert" so screen-reader users are told immediately, making it much harder to miss and reducing the chance of shipping a non-compliant colour pair.
- New "Card design" panel in the block: image overlay (on/off, colour and strength), corner radius (0 = square, up to fully rounded), and colour pickers for the card background, card text and tag pills. Accessibility first — as you choose card and tag colours, the editor shows the live WCAG contrast ratio with a clear Passes / Fails AA badge, so an unreadable combination is caught before you save. A custom text colour drives every text element on the card, so the contrast you check is the contrast visitors get. All colours are validated server-side; the front end changes only through safe CSS variables. New shortcode attributes: card_radius, card_bg, card_text, show_overlay, overlay_color, overlay_opacity, tag_bg, tag_text.
- Tag badges on grid cards now sit inset from the image corner with a soft shadow, instead of touching the top and right edges. Purely a spacing/style refinement.
- New: optional Grid/List view switch that visitors can use to change the layout on the front end — now part of the plugin itself, so it no longer depends on the theme. Accessibility first: two real buttons in a labelled group, each with aria-pressed reflecting the current view, full keyboard operation and visible focus. It is progressive enhancement — the buttons are delivered hidden and only revealed once the small script runs, so there are never dead controls without JavaScript, and the chosen layout (default Grid) always renders. No browser storage is used; the choice applies to the current view. New shortcode attribute: show_view_switch.
- Fixed the list layout stretching to a very tall row when a portfolio item's featured image is a tall screenshot. The list thumbnail is now a fixed-size panel with the image cropped to fit (object-fit: cover), so rows stay compact and even regardless of image dimensions or the active theme's image rules. Grid layout is unchanged.
- New: "Use current archive query" mode. When the block is placed inside a portfolio archive or category/tag template, it now shows that archive's own items and uses the theme's normal page navigation, instead of running its own query. This lets a single block power both page embeds and archive templates, so a theme no longer needs its own portfolio loop. In this mode the category dropdown navigates to the real category archive; on a normal page the block keeps its self-contained in-place filter and pagination. New shortcode attribute: inherit_query.
- New: width control for the block. The Accessible Portfolio block now supports the standard WordPress alignment toolbar — default (content width), Wide and Full — so the grid or list can span the content column, the wide zone, or the full viewport on any theme. No custom CSS needed.
- The portfolio grid and list are now fully self-contained and no longer need any theme support for filtering or paging. Two new options make the embed stand on its own on any theme:
- New: "Category filter dropdown" — an accessible, no-JavaScript GET form that lets visitors filter the wall by portfolio category. The selection is sanitised and works on any page.
- New: "Pagination" — built-in, accessible page links. When enabled, "Number of items" becomes items-per-page and the remaining items are split across pages, preserving any active category filter.
- New: "Title" show/hide toggle, so the item title can be turned off per placement.
- New: description length control — trim the short description by a set number of Words or Characters (0 = no limit), selectable in the block and via the shortcode (excerpt_unit, excerpt_limit).
- Cards refreshed to a cleaner, more professional look: edge-to-edge imagery, softer card and hover lift, calmer category line, and a tidy 3-line description clamp.
- All new shortcode attributes: show_title, excerpt_unit, excerpt_limit, show_filter, paginate.
- Fixed the portfolio block rendering unstyled in the block editor. The editor preview is drawn by ServerSideRender, which runs the block render callback over the REST API. The wp_enqueue_style call inside that callback was therefore enqueueing into a request that returns only a string of HTML, so the editor page never linked assets/embed.css. Without it the one rule that builds the card grid was missing and the block collapsed into a plain vertical list of links, even though the front end looked correct. The stylesheet is now enqueued on enqueue_block_assets as well, which fires in the editor, so the preview matches the front end. Front-end loading is unchanged and still happens only on pages where the block or the shortcode actually renders.
- Directory page brought up to the Ananyoo family standard: developer credit, live demo link, Why this plugin, Links and Privacy sections. Plugin URI now points to the dedicated plugin home page.
- Admin notices from WordPress and other plugins now appear above the plugin settings header instead of inside it (wp-header-end marker added).
- Live demo link on the About page updated.
- The portfolio post type and both taxonomies now register only when no other plugin has already registered them (post_type_exists / taxonomy_exists guards), making the documented interoperability behaviour explicit and conflict-safe.
- Renamed to Ananyoo Accessible Portfolio – Case Studies & Project Showcase, putting the Ananyoo brand first for a distinctive name.
- Admin screen styles moved from an inline style tag to assets/admin.css, enqueued with wp_enqueue_style on the plugin settings page only.
- New setting: Use my own page instead of the automatic archive. Switches off the built-in listing so a page you create can own the archive slug (e.g. a /portfolio/ page using a theme template or the Accessible Portfolio block), while single items keep their addresses under the same slug (/portfolio/my-project/).
- New: opt-in Delete all data on uninstall setting (off by default, clearly warned). When enabled, uninstalling removes all portfolio items, portfolio categories and tags, and plugin options; media files are never touched. The default remains: your content is never deleted.
- Documentation: full shortcode and block reference on the About page (attribute table, copy-paste examples) and in the readme FAQ, including the link to the free Ananyoo Accessible Carousel plugin required for the carousel layout.
- When the carousel layout is requested without the Carousel plugin, editors now see a private note on the page explaining what to install (visitors see only the grid fallback).
- New: carousel layout for the block and shortcode, powered by the Ananyoo Accessible Carousel plugin when it is active (W3C-pattern carousel: real button controls, polite live region, no autoplay, keyboard safe, honours prefers-reduced-motion). Each slide shows the featured image with the title, short description and a View case study link over a solid contrast box. Falls back to the grid layout when the Carousel plugin is absent.
- New: Accessible Portfolio block (with live preview and inspector controls) and the [accessible_portfolio] shortcode, sharing one server renderer. Layouts: grid (1-4 columns) and list. Filtering by portfolio category and tag slugs. Field selection: image, short description, categories, tags badge, client, completed date, tools and project URL (announced as external). Semantic list markup, headings at a configurable level, zero front-end scripts.
- Admin redesign matching the Ananyoo plugin family: blue masthead with logo and version pill, Settings and About tabs.
- New About page: credit and documentation links, an honest accessibility statement (what the plugin guarantees by construction, and what the theme is responsible for), theme-integration notes, and versioning information.
- Added a Settings link on the Plugins list row, opening the Accessible Portfolio settings screen directly.
- Renamed to Accessible Portfolio – Case Studies & Project Showcase (slug unchanged); the admin menu now reads Accessible Portfolio, matching the Ananyoo plugin family.
- Branded settings screen (Ananyoo header) and two new options: the project-card button text and link, editable from the dashboard and used by supporting themes such as Ariade. Defaults: Start your audit, linking to /contact/.
- Initial release: portfolio post type, categories, tags, project-details metabox, settings page, accessible details output.