CardCrafter – Data-Driven Card Grids

CardCrafter – Data-Driven Card Grids

توسط

Don’t take our word for it, try CardCrafter live. Full-featured demo on a real WordPress site. No signup, no download, no risk.

CardCrafter is the #1 WordPress plugin for displaying data as beautiful card grids. Transform your WordPress posts, JSON data, and custom content into professional, responsive card layouts. No coding required.

🆕 NEW in v1.12.0: Native WordPress Posts integration! Display your blog posts, pages, or custom post types as stunning card grids with featured images, excerpts, and automatic formatting.

Perfect for:
Team Directories – Display staff members with photos and bios
Product Showcases – Feature products with images, prices, and descriptions
Portfolio Galleries – Present your work in elegant grid layouts
Blog Post Grids – Convert WordPress posts into visual card displays
Service Listings – Highlight your services with card-based layouts

Trusted by 10,000+ WordPress sites for enterprise-grade data visualization with instant setup and professional results.

Why CardCrafter?

  • 🎨 Beautiful by Default: Modern, clean card designs that look professional out of the box.
  • 📱 Fully Responsive: Cards automatically adapt to any screen size.
  • ⚡ Lightweight: Pure JavaScript, no jQuery. Fast and efficient.
  • 🔍 Interactive: Built-in search and sorting for easy data navigation.
  • 📊 Data Export: Export displayed data as CSV, JSON, or PDF for business use.
  • 🔧 Flexible Layouts: Choose between Grid, Masonry, or List view.

🚀 Key Features

  • 🧱 Gutenberg Block: Native WordPress block editor support with visual configuration.
  • 📝 WordPress Posts Grid: Transform your blog posts into beautiful card layouts with one click.
  • Instant Search & Sort: Users can filter and sort cards instantly (Client-side).
  • Multiple Layouts: Grid, Masonry, and List views to suit your content.
  • Customizable Columns: Display 2, 3, or 4 cards per row.
  • Smart Field Mapping: Automatically detects image, title, subtitle, description, and link fields.
  • Professional Data Export: Export as CSV for spreadsheets, JSON for system integration, or PDF for reports.
  • Live Admin Preview: Test your JSON sources before publishing.
  • Dark Mode Support: Cards automatically adapt to dark color schemes.

💡 Perfect For

  • Team Directories: Showcase your team members with photos and bios.
  • Product Catalogs: Display products with images, prices, and descriptions.
  • Portfolio Galleries: Present your work in an elegant grid layout.
  • Service Listings: Highlight your services with card-based layouts.
  • Testimonials: Display customer reviews in beautiful cards.

Usage

Display WordPress Posts
Display your blog posts, pages, or custom post types as beautiful cards.

[cardcrafter-data-grids post_type="post"]

Show WooCommerce Products
Display your products in a grid layout.

[cardcrafter-data-grids post_type="product"]

Team Directory (Sorted)
Display team members sorted alphabetically by title.

[cardcrafter-data-grids post_type="team" wp_query="orderby=title&order=ASC"]

News Category
Show only posts from the ‘news’ category.

[cardcrafter-data-grids post_type="post" wp_query="category_name=news&posts_per_page=6"]

Featured Products
Display products that have a ‘featured’ meta key set to ‘yes’.

[cardcrafter-data-grids post_type="product" wp_query="meta_key=featured&meta_value=yes"]

Team by Author
Show team members created by a specific author (ID 5).

[cardcrafter-data-grids post_type="team" wp_query="author=5&orderby=menu_order"]

Portfolio with Custom Fields (ACF)
Map your custom fields to card elements automatically.

[cardcrafter-data-grids post_type="portfolio" image_field="project_image" subtitle_field="client_name"]

Product with Descriptions
Use custom fields for price and features.

[cardcrafter-data-grids post_type="product" subtitle_field="price" description_field="product_features"]

Instant Demo
Automatically loads team demo data with professional banner.

[cardcrafter-data-grids]

Gutenberg Block (Recommended)
1. Add the “CardCrafter” block to any post/page
2. Configure your data source in the sidebar settings
3. Choose layout, columns, and interactive features
4. Preview updates live in the editor

Load from JSON URL
Load data from an external JSON source.

[cardcrafter-data-grids source="https://example.com/team.json"]

Masonry Layout
Display cards in a Pinterest-style masonry layout.

[cardcrafter-data-grids source="https://example.com/products.json" layout="masonry" columns="4"]

Shortcode Attributes

  • source (optional) – URL of your JSON data. Omit for instant demo mode.
  • post_type (NEW!) – WordPress post type to display (post, page, product, etc.)
  • wp_query (NEW!) – Custom WordPress query parameters (category=news&author=5)
  • posts_per_page (NEW!) – Number of WordPress posts to display (default: 12)
  • layout – “grid”, “masonry”, or “list” (default: grid)
  • columns – 2, 3, or 4 (default: 3)
  • items_per_page – 6, 12, 24, 50, or 100 (default: 12)
  • image_field – JSON field for image (default: image)
  • title_field – JSON field for title (default: title)
  • subtitle_field – JSON field for subtitle (default: subtitle)
  • description_field – JSON field for description (default: description)
  • link_field – JSON field for link (default: link)

Option 1: WordPress Admin (Recommended)
1. Go to Plugins Add New in your WordPress admin
2. Search for “CardCrafter Data Grids”
3. Click Install Now and then Activate

Option 2: Manual Installation
1. Download the plugin from WordPress.org
2. Upload the cardcrafter-data-grids folder to /wp-content/plugins/
3. Activate through Plugins Installed Plugins

Quick Start:
Zero-Config Demo: Use [cardcrafter-data-grids] to see instant results
Block Editor: Add the “CardCrafter” block to any post/page
Classic Editor: Use shortcode [cardcrafter-data-grids source="your-json-url"]
Admin Demo: Go to CardCrafter menu to test with demo data

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

How do I display my WordPress posts as cards?

Use [cardcrafter-data-grids post_type="post"] to display your blog posts, or [cardcrafter-data-grids post_type="product"] for WooCommerce products. All WordPress post types are supported with automatic featured images, excerpts, and permalinks.

How do I use ACF fields in my cards?

CardCrafter automatically detects all ACF fields. Use field names in shortcode parameters: [cardcrafter-data-grids post_type="team" subtitle_field="job_title" description_field="bio"]. Works with text fields, images, numbers, and all ACF field types.

Can I filter posts by category or author?

Yes! Use wp_query parameter: [cardcrafter-data-grids post_type="post" wp_query="category_name=news"] for categories, or [cardcrafter-data-grids post_type="post" wp_query="author=5"] for specific authors. Supports all WordPress query parameters.

How do I see CardCrafter in action immediately?

Simply use [cardcrafter-data-grids] anywhere on your site. No configuration required! CardCrafter will automatically display professional team demo data with a clear call-to-action to try your own data.

What JSON format does CardCrafter expect?

CardCrafter works with arrays of objects. Each object should have fields like image, title, subtitle, description, and link. You can customize field names using shortcode attributes.

Can I customize the card design?

Yes! CardCrafter uses CSS variables that you can override in your theme’s custom CSS. All cards have clear class names for styling.

Does this work with any API?

CardCrafter works with any publicly accessible JSON endpoint. The API must allow CORS requests from your domain.

×
نظری برای این آیتم موجود نیست.
0 0 رای ها
امتیازدهی
اشتراک در
اطلاع از
0 نظرات
قدیمی‌ترین
تازه‌ترین بیشترین رأی
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها
هیچ نسخه‌ای برای این آیتم موجود نیست.
بدون امتیاز

قیمت:

رایگان

نگارش

آخرین انتشار

18 اردیبهشت 1405

آخرین بروزرسانی

1 ماه پیش

نصب های فعال

10+

نگارش وردپرس

وردپرس 6.0+

تست شده از نسخه

وردپرس 6.7.5

نگارش PHP

PHP 7.4+

تگ ها

نسخه ها

0 نسخه