User:Tagtheworld/WordPress:
Jump to navigation
Jump to search
- 📋 **Komplette Wiki-Seite mit korrekten Tags**
Hier ist dein gesamter Inhalt, fertig formatiert für die Wiki-Seite:
```mediawiki
Mini-Catalog System Architecture
System Overview
┌─────────────────────────────────────────────────────────┐
│ MINI-CATALOG SYSTEM ARCHITECTURE │
└─────────────────────────────────────────────────────────┘
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ DATA SOURCE │───▶│ STRUCTURE │───▶│ PRESENTATION │
│ (Source Data) │ │ (WordPress) │ │ (FacetWP) │
├─────────────────┤ ├─────────────────┤ ├─────────────────┤
│ Public Data │ │ Custom Post Type│ │ Listing Builder │
│ Source │ │ "Catalog Items" │ │ Card Template │
├─────────────────┤ ├─────────────────┤ ├─────────────────┤
│ SELECT ONLY: │ │ ACF Pro Fields: │ │ • Card Design │
│ ✓ Item Title │ │ • Title │ │ • Grid Layout │
│ ✓ Country │ │ • Country │ │ • Filters │
│ ✓ Category │ │ • Website │ │ • Search │
│ ✓ Technologies │ │ • Type │ └─────────────────┘
│ ✓ Sector │ │ • Technologies │ │
│ ✓ Website │ │ • Sector │ ▼
│ ✗ No Personal │ │ • Description │ ┌─────────────────┐
│ Data │ └─────────────────┘ │ FINAL OUTPUT │
└─────────────────┘ │ │ Mini-Catalog │
│ │ │ Cards │
▼ ▼ └─────────────────┘
┌─────────────────────────────────────────────────────────┐
│ GDPR SAFE ZONE │
│ ✓ No personal data stored │
│ ✓ Only institutional information │
│ ✓ Public data only │
│ ✓ Legal notice on website │
└─────────────────────────────────────────────────────────┘
Card Design Options
Option 1: Minimal Option 2: With Icons Option 3: Compact ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ Item Name │ │ 📄 Item Name │ │ Item Name │ │ │ │ │ │ ┌─────────────┐ │ │ Type: Value │ │ Type: ● Value │ │ │ Type/Country│ │ │ Country: Value │ │ Country: 🇪🇺 DE │ │ └─────────────┘ │ │ │ │ Tech: ☁️ Cloud │ │ │ │ [Details] │ │ [Details] │ │ [→] │ └─────────────────┘ └─────────────────┘ └─────────────────┘
Step-by-Step Card Building
SCHRITT 1: Outer Card ┌─────────────────────────────────┐ │ Padding: 20px │ │ Border: 1px solid #e5e5e5 │ │ Border-Radius: 8px │ │ Background: #ffffff │ └─────────────────────────────────┘ SCHRITT 2: Title ┌─────────────────────────────────┐ │ 🔗 Title (clickable) │ │ Font: Large, Bold │ │ Margin-bottom: 10px │ └─────────────────────────────────┘ SCHRITT 3: Meta Area ┌─────────────────────────────────┐ │ Type: Example │ │ Technologies: Cloud, AI │ ← Font: Small │ Sector: Health │ ← Color: #666 └─────────────────────────────────┘ SCHRITT 4: Button ┌─────────────────────────────────┐ │ [ View Details ] │ ← Border-Radius: 6px └─────────────────────────────────┘
Conditional Field Display
Without condition check: With condition check: ┌─────────────────┐ ┌─────────────────┐ │ Hub XYZ │ │ Hub XYZ │ │ Type: │ ← empty! │ Technologies: │ │ Technologies: │ │ Cloud, AI │ │ Cloud, AI │ │ Sector: Health │ │ Sector: Health │ └─────────────────┘ │ Website: │ ← empty! └─────────────────┘
Pagination Setup
FacetWP Settings: ┌─────────────────────────────────────┐ │ ☑ Enable pager │ │ │ │ Results per page: 12 │ └─────────────────────────────────────┘ Frontend Result: ┌─────────────────────────────────────┐ │ Page 1 of 25 (total 300 items) │ │ │ │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │Card1│ │Card2│ │Card3│ │Card4│ │ │ └─────┘ └─────┘ └─────┘ └─────┘ │ │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │Card5│ │Card6│ │Card7│ │Card8│ │ │ └─────┘ └─────┘ └─────┘ └─────┘ │ │ │ │ ◀ 1 2 3 4 5 ... 25 ▶ │ └─────────────────────────────────────┘
CSS Code
/* Grid Layout */
.facetwp-template {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
align-items: stretch;
}
/* Card Styling */
.catalog-card {
display: flex;
flex-direction: column;
height: 100%;
padding: 20px;
border: 1px solid #e5e5e5;
border-radius: 8px;
background: #ffffff;
transition: all 0.3s ease;
}
.catalog-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
/* Button always at bottom */
.catalog-card .button {
margin-top: auto;
}
/* Responsive behavior */
@media (max-width: 768px) {
.facetwp-template {
gap: 16px;
}
}
Responsive Behavior
Desktop (3 columns): Tablet (2 columns): Mobile (1 column): ┌───┬───┬───┐ ┌───┬───┐ ┌─────────┐ │ C │ C │ C │ │ C │ C │ │ C │ ├───┼───┼───┤ ├───┼───┤ ├─────────┤ │ C │ C │ C │ │ C │ C │ │ C │ ├───┼───┼───┤ ├───┼───┤ ├─────────┤ │ C │ C │ C │ │ C │ C │ │ C │ └───┴───┴───┘ └───┴───┘ └─────────┘
Implementation Checklist
- [ ] Enable "Show if not empty" for all ACF fields
- [ ] Set pagination to 12-24 items per page
- [ ] Implement equal height cards with CSS
- [ ] Test cards with varying amounts of data
- [ ] Verify mobile responsiveness
- [ ] Ensure keyboard navigation works
- [ ] Monitor performance with 300+ items
```
` | Für Code |
` Tags verwenden: ```mediawiki <pre> Deine ASCII-Grafik hier
```
`-Tags für alle ASCII-Zeichnungen, damit sie im Wiki perfekt dargestellt werden: --- <pre> =============================================================================== BUILDING A FILTERABLE MINI-CATALOG WITH WORDPRESS, ACF PRO & FACETWP ===============================================================================
A step-by-step guide for technically interested users
Purpose of This Page
This tutorial demonstrates how to create a searchable mini-catalog using WordPress, CPT-UI, ACF Pro, and FacetWP – ideal for:
- Maker Spaces
- Open Data projects
- Community directories
The guide assumes basic WordPress knowledge.
Required Tools
| Tool | Purpose | Link |
|---|---|---|
| WordPress | Base CMS | https://wordpress.org |
| CPT-UI | Create Custom Post Types | https://wordpress.org/plugins/custom-post-type-ui |
| ACF Pro | Custom data fields | https://www.advancedcustomfields.com/pro |
| FacetWP | Real-time filtering | https://facetwp.com |
Step 1: Create a Custom Post Type
A Custom Post Type is a content type separate from "Posts" and "Pages".
CPT-UI → "Add New" ┌─────────────────────────────┐ │ Post Type Slug: catalog_item│ │ Plural Label: Catalog Items │ │ Singular Label: Catalog Item│ │ ☑ Public │ │ ☑ Has Archive │ │ ☑ Supports: Title, Editor, │ │ Thumbnail │ └─────────────────────────────┘
Step 2: Create Taxonomies for Filtering
Taxonomies are tagging systems – used here for filtering.
Taxonomy "Type" (type) ┌─────────────────────────────┐ │ Values: │ │ • Candidate │ │ • Full Member │ │ • Partner │ └─────────────────────────────┘ Taxonomy "Technologies" (technologies) ┌─────────────────────────────┐ │ Values: │ │ • Artificial Intelligence │ │ • Cloud Computing │ │ • Cybersecurity │ │ • Internet of Things │ └─────────────────────────────┘
Step 3: Add ACF Fields for Additional Data
With ACF Pro, you define custom input fields for each entry.
ACF → Field Group "Catalog Data" ┌─────────────────────────────┐ │ Field Name: short_description│ │ Type: Textarea │ │ Label: Short Description │ ├─────────────────────────────┤ │ Field Name: location │ │ Type: Text │ │ Label: Location/City │ ├─────────────────────────────┤ │ Field Name: website │ │ Type: URL │ │ Label: Website │ └─────────────────────────────┘
Step 4: Create Facets (Filters) in FacetWP
Each taxonomy gets its own filter.
FacetWP → Facets → Add New ┌─────────────────────────────┐ │ FACET 1: Type Filter │ │ Label: Type │ │ Name: type_facet │ │ Type: Checkboxes │ │ Source: Taxonomy → type │ ├─────────────────────────────┤ │ FACET 2: Technologies Filter│ │ Label: Technologies │ │ Name: technologies_facet │ │ Type: Checkboxes │ │ Source: Taxonomy → techn. │ └─────────────────────────────┘
Reset Facet (optional):
Label: Reset Filters Name: reset Type: Reset
Step 5: Listing Builder – The Card Layout
Here you define what a single entry looks like.
FacetWP → Listings → Add New ┌─────────────────────────────────────┐ │ Name: catalog_listing │ │ Post Type: catalog_item │ │ Per Page: 12 │ └─────────────────────────────────────┘ ROW (outer card) └─ COLUMN (100%) ├─ Featured Image ├─ Post Title (linked) ├─ META AREA (conditional display) │ ├─ [IF type] Type: [type] [/IF] │ ├─ [IF technologies] Technologies: [tech] [/IF] │ └─ [IF sectors] Sector: [sector] [/IF] └─ Button "View Details" (linked)
Important: Enable "Show if not empty" for every field – this prevents empty lines.
Without "Show if not empty" With the rule ┌─────────────────────────────┐ ┌─────────────────────────────┐ │ Hub A │ │ Hub A │ │ Type: │ │ Technologies: Cloud │ │ Technologies: Cloud │ │ [View Hub] │ │ Sector: │ └─────────────────────────────┘ │ [View Hub] │ └─────────────────────────────┘
Step 6: CSS for Card Design
The following CSS transforms raw data into beautiful cards.
/* Grid container */
.facetwp-template {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
margin-top: 30px;
}
/* Individual card */
.catalog-card {
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 20px;
background: #fff;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
height: 100%;
}
.catalog-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}
/* Image */
.catalog-card .featured-image img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 8px 8px 0 0;
margin-bottom: 15px;
}
/* Title */
.catalog-card .post-title {
font-size: 1.4rem;
font-weight: 600;
margin: 0 0 15px 0;
}
.catalog-card .post-title a {
color: #222;
text-decoration: none;
}
.catalog-card .post-title a:hover {
color: #0073aa;
}
/* Meta fields */
.catalog-card .card-meta {
font-size: 0.9rem;
color: #555;
line-height: 1.6;
margin: 10px 0;
flex-grow: 1;
}
.catalog-card .card-meta p {
margin: 5px 0;
}
.catalog-card .card-meta strong {
color: #333;
font-weight: 600;
min-width: 90px;
display: inline-block;
}
/* Button */
.catalog-card .button {
background: #0073aa;
color: white;
padding: 10px 20px;
border-radius: 6px;
text-decoration: none;
font-weight: 500;
display: inline-block;
border: none;
cursor: pointer;
margin-top: 15px;
align-self: flex-start;
transition: background 0.2s;
}
.catalog-card .button:hover {
background: #005a87;
}
Step 7: Bring Everything Together on One Page
Insert these shortcodes into a WordPress page:
[facetwp facet="type_facet"] [facetwp facet="technologies_facet"] [facetwp facet="reset"] [facetwp template="catalog_listing"] [facetwp counts] [facetwp pager]
Final Result
┌─────────────────────────────────────┐ │ [Type▼] [Technologies▼] [Reset] │ ├─────────────────────────────────────┤ │ 12 of 45 results │ ├─────────────────────────────────────┤ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │ │ Card 1 │ │ Card 2 │ │ Card 3 │ │ │ │ Image │ │ Image │ │ Image │ │ │ │ Title A │ │ Title B │ │ Title C │ │ │ │ Type... │ │ Type... │ │ Type... │ │ │ │[Details]│ │[Details]│ │[Details]│ │ │ └─────────┘ └─────────┘ └─────────┘ │ ├─────────────────────────────────────┤ │ ◀ 1 2 3 4 5 ... 8 ▶ │ └─────────────────────────────────────┘
Performance Tips
| Tip | Reason |
|---|---|
| Use pagination | Never load 300+ entries at once |
| Conditional display | Show only filled fields – saves space |
| Optimize images | Max 200-300KB, consistent sizing |
| Enable caching | Page cache for better speed |
System Architecture Overview
┌───────────────────────────────────────────────────────────┐
│ THE FULL SYSTEM – WHO DOES WHAT? │
├───────────────────────────────────────────────────────────┤
│ │
│ LAYER 1: DATA (Your Content) │
│ ├─ CPT-UI: The container ("Catalog Items") │
│ ├─ Taxonomies: The drawers ("Type", "Technologies") │
│ └─ ACF Pro: Individual fields │
│ │
│ LAYER 2: FACETWP (The Search Engine) │
│ ├─ Facets: The filters (checkboxes, dropdowns) │
│ └─ Listing: The layout for ONE result │
│ │
│ LAYER 3: CSS (The Design – YOUR part) │
│ ├─ .facetwp-template → The grid │
│ ├─ .catalog-card → The individual card │
│ └─ Hover effects, shadows, rounded corners │
│ │
│ RESULT: Your filterable mini-catalog │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ Card 1 │ │ Card 2 │ │
│ │ with DATA from │ │ with DATA from │ │
│ │ Entry A │ │ Entry B │ │
│ └─────────────────┘ └─────────────────┘ │
└───────────────────────────────────────────────────────────┘
Further Resources
About This Guide
This page was created to help users get started with filterable catalogs in WordPress. The technique is especially useful for community projects requiring clear presentation of large datasets.
Discussion
Suggestions or improvements? Use the discussion page or edit this entry directly.
---
Diese Version ist **perfekt für MediaWiki** formatiert:
- ✅ Alle ASCII-Zeichnungen in `
`-Tags
- ✅ Tabellen mit `{| class="wikitable"` für Werkzeuge und Tipps
- ✅ Saubere Überschriften-Struktur
- ✅ Externe Links in MediaWiki-Syntax
Ergänzung; Ein Klick auf eine Karte führt zum einzelnen Eintrag (Detailseite) des jeweiligen Hubs. Das ist das normale Verhalten von WordPress und genau das, was man für einen Katalog haben möchte.
+------------------------------------------------------------------------------+
| DAS GROSSE GANZE: BACKEND & FRONTEND |
+------------------------------------------------------------------------------+
┌───────────────────────────────────────────────────────────────────────────┐
│ BACKEND (DEINE VERWALTUNG) │
│ ======================== │
│ │
│ WordPress Admin → "EDIH Hubs" (Liste aller Einträge) │
│ https://www.my_site.com/wp-admin/edit.php?post_type=edih │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ Eintrag: Hub 2 (ID: 39) | Bearbeiten | Ansehen │ │
│ │ Eintrag: Hub 3 (ID: 40) | Bearbeiten | Ansehen ← ⭐ DU KLICKST │ │
│ │ Eintrag: Candidate Hub (ID: 41) | Bearbeiten | Ansehen │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ ↓ │
│ ⬇️ Klick auf "Bearbeiten" öffnet: │
│ ↓ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ Eintrag bearbeiten: Hub 3 │ │
│ │ https://www.my_site.com/wp-admin/post.php?post=40&action=edit │ │
│ │ │ │
│ │ Titel: Hub 3 │ │
│ │ Beitragsbild: [Bild] │ │
│ │ Taxonomien: Typ: my type, Services: my service, ... │ │
│ │ ACF-Felder: Technologies: my tech, Sector: my sector │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
└───────────────────────────────────────────────────────────────────────────┘
│
│ (Daten werden gespeichert)
▼
┌───────────────────────────────────────────────────────────────────────────┐
│ DATENBANK (WORDPRESS) │
│ ===================== │
│ │
│ Tabelle: wp_posts │
│ ┌────────┬─────────────┬─────────────────────────────────────────────┐ │
│ │ ID (PK)│ post_title │ post_type │ ...weitere Spalten... │ │
│ ├────────┼─────────────┼─────────────┼───────────────────────────────┤ │
│ │ 39 │ Hub 2 │ edih │ ... │ │
│ │ 40 │ Hub 3 │ edih │ ... │ │
│ │ 41 │ Candiate Hub│ edih │ ... │ │
│ └────────┴─────────────┴─────────────┴───────────────────────────────┘ │
│ │
│ Tabelle: wp_term_relationships (verbindet Posts mit Taxonomien) │
│ Tabelle: wp_postmeta (für ACF-Felder) │
└───────────────────────────────────────────────────────────────────────────┘
│
│ (Daten werden abgerufen)
▼
┌───────────────────────────────────────────────────────────────────────────┐
│ FRONTEND (DEINE WEBSITE) │
│ ======================== │
│ │
│ ⭐ KATALOG-SEITE (ALLE HUBS) │
│ https://www.my_site.com/?page_id=41 │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ +-------------------------+-------------------------+ │ │
│ │ | COLUMN 1 | COLUMN 2 | │ │
│ │ | | | │ │
│ │ | HUB 2 | HUB 3 | │ │
│ │ | Type: my type | Type: Candidate | │ │
│ │ | my service | Cybersecurity | │ │
│ │ | Technologies: my tech | Technologies: Cloud | │ │
│ │ | Sector: my sector | Sector: Health | │ │
│ │ | | | │ │
│ │ | [VIEW HUB] ← ⭐ KLICK | [VIEW HUB] | │ │
│ │ | | | │ │
│ │ +-------------------------+-------------------------+ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ ↓ │
│ ⬇️ Klick auf "VIEW HUB" bei Hub 3 führt zu: │
│ ↓ │
│ ⭐ DETAILSEITE (EINZELNER HUB) │
│ https://www.my_site.com/?edih=hub-3 │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ [GROSSES BILD] │ │
│ │ │ │
│ │ # Hub 3 │ │
│ │ │ │
│ │ Typ: Candidate │ │
│ │ Cybersecurity │ │
│ │ Technologies: Cloud │ │
│ │ Sector: Health │ │
│ │ Kurzbeschreibung: ... │ │
│ │ Website: ... │ │
│ │ Kontakt: ... │ │
│ │ │ │
│ │ [ZURÜCK ZUM KATALOG] │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
└───────────────────────────────────────────────────────────────────────────┘
die Logik dahinter:
┌───────────────────────────────────────────────────────────────────────────┐
│ WAS PASSIERT, WENN DU AUF "VIEW HUB" KLICKST? │
├───────────────────────────────────────────────────────────────────────────┤
│ │
│ 1. DU SIEHST: Eine hübsche Karte mit Bild, Titel und Infos │
│ │
│ 2. DU KLICKST: Auf den Button "VIEW HUB" (oder den Titel) │
│ │
│ 3. FACETWP + WORDPRESS: │
│ → Der Link führt zu: https://www.my_site.com/?edih=hub-3 │
│ → WordPress erkennt: "Aha, der Parameter 'edih' ist hub-3" │
│ → WordPress sucht in der Datenbank: "Gibt es einen Post mit │
│ dem Titel 'hub-3' oder einem passenden Slug?" │
│ │
│ 4. DATENBANK ANTWORTET: "Ja, das ist Post ID 40 vom Typ 'edih'" │
│ │
│ 5. WORDPRESS ZEIGT: Die Detailseite (Single-Template) für diesen Post │
│ → Das Template heißt in der Regel single-edih.php │
│ → Es zeigt ALLE Daten dieses einen Eintrags │
│ │
│ 6. ERGEBNIS: Du siehst die Vollansicht von Hub 3 │
└───────────────────────────────────────────────────────────────────────────┘
┌───────────────────────────────────────────────────────────────────────────┐ │ JEDER EINTRAG HAT ZWEI "GESICHTER" │ ├───────────────────────────────────────────────────────────────────────────┤ │ │ │ EINTRAG: HUB 3 (ID: 40) │ │ │ │ GESICHT 1: DIE KARTE (im Katalog) │ │ ┌─────────────────────────────────┐ │ │ │ +-------------------------+ │ │ │ │ | [BILD] | │ │ │ │ | HUB 3 | │ │ │ │ | Type: Candidate | │ ← NUR AUSGEWÄHLTE DATEN │ │ │ | Cybersecurity | │ (was im Listing-Builder │ │ │ | Technologies: Cloud | │ definiert wurde) │ │ │ | Sector: Health | │ │ │ │ | [VIEW HUB] | │ │ │ │ +-------------------------+ │ │ │ └─────────────────────────────────┘ │ │ │ │ ↓ Klick führt zu │ │ │ │ GESICHT 2: DIE DETAILSEITE │ │ ┌─────────────────────────────────┐ │ │ │ [GROSSES BILD] │ │ │ │ # Hub 3 │ │ │ │ Typ: Candidate │ │ │ │ Cybersecurity │ │ │ │ Technologies: Cloud │ ← ALLE DATEN │ │ │ Sector: Health │ (was im Eintrag gespeichert │ │ │ Kurzbeschreibung: ... │ ist) │ │ │ Website: ... │ │ │ │ Kontakt: ... │ │ │ │ Karte: ... │ │ │ │ [ZURÜCK ZUM KATALOG] │ │ │ └─────────────────────────────────┘ │ └───────────────────────────────────────────────────────────────────────────┘
Zusammengefasst:
| Begriff | Bedeutung | Beispiel |
|---|---|---|
| Backend | Deine Verwaltung im WordPress-Admin | edit.php?post_type=edih
|
| Eintrag | Ein einzelner Hub mit allen Daten | Hub 3 (ID 40) |
| Katalog-Seite | Übersicht aller Hubs als Karten | /?page_id=41
|
| Card | Die kompakte Darstellung EINES Eintrags im Katalog | Das Kästchen mit Bild, Titel, paar Infos |
| Detailseite | Die volle Ansicht EINES Eintrags | /?edih=hub-3
|
| Permalink | Die eindeutige URL eines Eintrags | Wird aus dem Titel generiert |
Du hast also eine Quelle (Backend) und zwei Darstellungsformen (Karte + Detailseite). Genau so soll ein Katalog funktionieren Einfach kopieren, auf deiner Wiki-Seite einfügen und speichern!
Du möchtest Daten aus dem öffentlichen Katalog als Grundlage für deinen eigenen Mini-Katalog nutzen.
+------------------------------------------------------------------------------+ | DATEN-QUELLEN & DEIN MINI-KATALOG | +------------------------------------------------------------------------------+ ┌───────────────────────────────────────────────────────────────────────────┐ │ SCHRITT 1: DATEN QUELLEN │ │ ======================== │ │ │ │ 🌍 ÖFFENTLICHE DATEN (z.B. EU-Katalog) │ │ Quelle: https://the-Source/... │ │ │ │ Ein Eintrag (z.B. "ADis") enthält: │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ • Titel: Accelerated Ditalisation of SMEs... │ │ │ │ • Beschreibung: The European way for the Digital decade... │ │ │ │ • Land: Bulgaria │ │ │ │ • Stadt: Gabrovo │ │ │ │ • Kontakt: my-name, E-Mail, Telefon │ │ │ │ • Website: ... (oft vorhanden) │ │ │ │ • Spezialisierung: Mechatronics, Informatics, ICT, AI │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ └───────────────────────────────────────────────────────────────────────────┘ │ ▼ ┌───────────────────────────────────────────────────────────────────────────┐ │ SCHRITT 2: DATENÜBERNAHME (IN DEIN SYSTEM) │ │ ========================================== │ │ │ │ Du hast zwei Wege: │ │ │ │ A) MANUELL (für den Anfang, 30-50 Hubs) │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ WordPress Admin → "my_hubs- the Hubs" → "Neu anlegen" │ │ │ │ https://www.my_site.com/wp-admin/post-new.php?post_type=edih │ │ │ │ │ │ │ │ [Titel] → Accelerated Digitalisation of SMEs... │ │ │ │ [Bild] → Logo oder Foto hochladen │ │ │ │ [Taxonomien]→ Typ: Candidate? Full Member? │ │ │ │ → Technologien: AI, Mechatronics │ │ │ │ → Sektoren: ... │ │ │ │ [ACF-Felder]→ Kurzbeschreibung (aus EU-Beschreibung) │ │ │ │ → Ort: Gabrovo, Bulgarien │ │ │ │ → Website: ... │ │ │ │ → Kontakt-E-Mail: ny@rc.com │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ B) AUTOMATISIERT (für Fortgeschrittene) │ │ • CSV-Import mit WP All Import oder ähnlichen Tools │ │ • Daten aus EU-Katalog in Excel/CSV strukturieren │ │ • Taxonomien und Felder per Mapping zuordnen │ └───────────────────────────────────────────────────────────────────────────┘ │ ▼ ┌───────────────────────────────────────────────────────────────────────────┐ │ SCHRITT 3: DEINE DATENBANK (WORDPRESS) │ │ ====================================== │ │ │ │ Nach dem Anlegen siehst du die Einträge in der Übersicht: │ │ https://www.d-hubs.com/wp-admin/edit.php?post_type=edih │ │ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ EDIH Hubs (3) │ │ │ │ ┌───────────────────────────────────────────────────────────────┐ │ │ │ │ │ Titel | Typ | Technologien │ │ │ │ │ ├───────────────────────────────────────────────────────────────┤ │ │ │ │ │ ADi4SMEs | Candidate | AI, Mechatronics │ │ │ ← NEU │ │ │ Hub 2 | my type | my tech │ │ │ │ │ │ Hub 3 | Candidate | Cloud │ │ │ │ │ │ Candidate Hub | Candidate | Cybersecurity │ │ │ │ │ └───────────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ └───────────────────────────────────────────────────────────────────────────┘ │ ▼ ┌───────────────────────────────────────────────────────────────────────────┐ │ SCHRITT 4: DEINE KATALOG-SEITE WÄCHST │ │ ===================================== │ │ │ │ Nach und nach füllt sich dein Katalog: │ │ │ │ JETZT (3 Hubs): | BALD (z.B. 15 Hubs): │ │ ┌─────────────────────────────────────┐ | ┌─────────────────────────┐ │ │ │ ┌───┐ ┌───┐ ┌───┐ │ | │ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │ │ │ │ │ C │ │ C │ │ C │ │ | │ │ C │ │ C │ │ C │ │ C │ │ │ │ │ └───┘ └───┘ └───┘ │ | │ └───┘ └───┘ └───┘ └───┘ │ │ │ │ │ | │ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │ │ │ │ │ | │ │ C │ │ C │ │ C │ │ C │ │ │ │ │ │ | │ └───┘ └───┘ └───┘ └───┘ │ │ │ │ │ | │ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │ │ │ │ │ | │ │ C │ │ C │ │ C │ │ C │ │ │ │ │ │ | │ └───┘ └───┘ └───┘ └───┘ │ │ │ └─────────────────────────────────────┘ | └─────────────────────────┘ │ │ | │ │ Noch leer... | Füllt sich mit Leben! │ └───────────────────────────────────────────────────────────────────────────┘ 🚀
nochmals ganz konkret beantwortet:
1. Kannst du Daten aus dem Katalog übernehmen?
Ja, genau das ist der Plan. Du bist sozusagen der "Kurator" deines eigenen Mini-Katalogs. Du suchst dir relevante Hubs aus (z.B. die 30-50 wichtigsten für dein Publikum) und übernimmst deren Daten in dein System.
2. Wie kommen die Daten in deine Datenbank?
Du hast im Wesentlichen drei Wege:
- Manuell: Für den Anfang ideal. Du legst jeden Hub einzeln im Admin-Bereich an (
post-new.php?post_type=edih). Das gibt dir die Kontrolle, nur die wirklich relevanten Daten zu übernehmen. - Per CSV-Import: Sobald es mehr werden (30-50+), ist ein Import-Tool (wie "WP All Import") effizienter. Du sammelst die Daten in einer Excel-Tabelle und importierst sie in einem Rutsch.
- Per API (fortgeschritten): Falls der Katalog eine Programmierschnittstelle (API) anbietet, könntest du die Daten sogar automatisiert abrufen.
3. Wird deine Katalog-Seite dann voller?
Ja, genau! Deine Vorstellung mit den 9 Karten links und 6 rechts ist perfekt. Mit jedem Hub, den du anlegst, wächst dein Katalog. Das Grid-Layout (dein CSS) sorgt automatisch dafür, dass die neuen Karten sauber als weitere Spalten oder Zeilen dargestellt werden. Aus deinen aktuellen 3 Karten werden dann 6, 9, 12 und mehr.
📝 Dein nächster Schritt (wenn du möchtest):
- Wähle 3-5 Hubs aus dem EU-Katalog aus, die du als nächstes aufnehmen möchtest (z.B. "AD_bla_bla_i4SMEs", "Agrihub Sweden", "AI MAGISTER").
- Lege sie manuell in deinem WordPress-Admin an (d-h
ubs→Neu anlegen). - Fülle die Felder – übernimm die Beschreibung, ordne die passenden Taxonomien zu (du musst vielleicht neue Technologien wie "Mechatronics" in deinen Taxonomien anlegen).
- Beobachte, wie deine Katalog-Seite mit jedem neuen Eintrag wächst und sich die Filter mit neuen Begriffen füllen.
Du hast das System jetzt wirklich gut verstanden! Der Weg von der öffentlichen Datenquelle über deine eigene, kuratierte Datenbank hin zu einer wachsenden, filterbaren Katalog-Seite ist genau der richtige.
Du hast also eine Quelle (Backend) und zwei Darstellungsformen
------------------------------------------------------------------------------+
| VOM EU-KATALOG ZU DEINER KARTE |
+------------------------------------------------------------------------------+
┌───────────────────────────────────────────────────────────────────────────┐
│ SCHRITT 1: DATEN-QUELLE (EU-KATALOG) │
│ ===================================== │
│ │
│ 🌍 Quelle: https://european-pudding-innovation-clubs.ec.europa.eu/... │
│ │
│ Du findest einen Hub, z.B. "AGbliblablubA DIH" aus Spanien: │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ • Titel: AGORA DIH │ │
│ │ • Land: Spanien │ │
│ │ • Beschreibung: ... │ │
│ │ • Technologies: ... │ │
│ │ • Sectors: ... │ │
│ │ • Kontakt: Carlos Miras Marin │ │
│ │ • E-Mail: carlos.zogge@imfo_zogge.es │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
└───────────────────────────────────────────────────────────────────────────┘
│
▼
┌───────────────────────────────────────────────────────────────────────────┐
│ SCHRITT 2: MANUELLE EINGABE (DEIN WORDPRESS) │
│ ============================================= │
│ │
│ Du gehst zu: https://www.mystie.com/wp-admin/post-new.php?post_type=edih│
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ NEUEN EINTRAG ANLEGEN: │ │
│ │ │ │
│ │ Titel: AGORA DIH (aus EU-Katalog) │ │
│ │ Beitragsbild: Logo suchen/hochladen │ │
│ │ │ │
│ │ TAXONOMIEN (Filter): │ │
│ │ ☑ Typ: Candidate (oder was passend ist) │ │
│ │ ☑ Technologien: [hier die passenden auswählen] │ │
│ │ ☑ Sektoren: [hier die passenden auswählen] │ │
│ │ ☑ Services: [hier die passenden auswählen] │ │
│ │ │ │
│ │ ACF-FELDER: │ │
│ │ Kurzbeschreibung: [Text aus EU-Katalog] │ │
│ │ Ort: Murcia, Spanien │ │
│ │ Website: https://www.agbla_bla.es (Beispiel) │ │
│ │ Kontakt-E-Mail: carlos_zogge_@bla_bla.zogge.es │ │
│ │ │ │
│ │ [VERÖFFENTLICHEN] │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
└───────────────────────────────────────────────────────────────────────────┘
│
▼
┌───────────────────────────────────────────────────────────────────────────┐
│ SCHRITT 3: DEINE DATENBANK WÄCHST │
│ ================================= │
│ │
│ Nach einigen Einträgen siehst du in der Übersicht: │
│ https://www.my_site.com/wp-admin/edit.php?post_type=edih │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ EDIH Hubs (jetzt 4 Einträge) │ │
│ │ ┌───────────────────────────────────────────────────────────────┐ │ │
│ │ │ Titel | Typ | Land (via ACF) │ │ │
│ │ ├───────────────────────────────────────────────────────────────┤ │ │
│ │ │ AGORA DIH | Candidate | Spanien │ │ │ ← NEU
│ │ │ Hub 2 | my type | (noch kein Land) │ │ │
│ │ │ Hub 3 | Candidate | (noch kein Land) │ │ │
│ │ │ Candidate Hub | Candidate | (noch kein Land) │ │ │
│ │ └───────────────────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
└───────────────────────────────────────────────────────────────────────────┘
│
▼
┌───────────────────────────────────────────────────────────────────────────┐
│ SCHRITT 4: DEINE KATALOG-SEITE (FRONTEND) │
│ =========================================== │
│ │
│ https://www.my_Site.com/?page_id=41 │
│ │
│ Die neuen Karten erscheinen automatisch: │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │
│ │ │ AGORA DIH │ │ Hub 2 │ │ Hub 3 │ │ │
│ │ │ Spanien │ │ Type: ... │ │ Type: ... │ │ │
│ │ │ Technologies│ │ ... │ │ ... │ │ │
│ │ │ [VIEW HUB] │ │ [VIEW HUB] │ │ [VIEW HUB] │ │ │
│ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │
│ │ ┌─────────────┐ │ │
│ │ │ Candidate │ │ │
│ │ │ Hub │ │ │
│ │ │ ... │ │ │
│ │ │ [VIEW HUB] │ │ │
│ │ └─────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
└───────────────────────────────────────────────────────────────────────────┘
│
▼
┌───────────────────────────────────────────────────────────────────────────┐
│ SCHRITT 5: FILTERN FUNKTIONIERT! │
│ ================================= │
│ │
│ Wenn ein Nutzer im Filter "Spanien" auswählt: │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ FILTER: │ │
│ │ ☑ Spanien (1) │ │
│ │ ☐ Bulgarien (1) │ │
│ │ ☐ Schweden (1) │ │
│ │ │ │
│ │ ERGEBNIS: │ │
│ │ ┌─────────────┐ │ │
│ │ │ AGORA DIH │ ← NUR dieser Hub wird angezeigt! │ │
│ │ │ Spanien │ │ │
│ │ │ [VIEW HUB] │ │ │
│ │ └─────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
└───────────────────────────────────────────────────────────────────────────┘
│
▼
┌───────────────────────────────────────────────────────────────────────────┐
│ SCHRITT 6: KLICK AUF DIE KARTE FÜHRT ZUR DETAILSEITE │
│ ==================================================== │
│ │
│ Klick auf "VIEW HUB" bei AGObla_blaRA DIH führt zu: │
│ https://www.d-hubs.com/?edih=agorabla_bla-dih (Beispiel) │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ [GROSSES BILD] │ │
│ │ # AGORA DIH │ │
│ │ │ │
│ │ Typ: Candidate │ │
│ │ Land: Spanien │ │
│ │ Ort: Murcia │ │
│ │ Technologies: ... (alle ausgewählten) │ │
│ │ Sektoren: ... │ │
│ │ Services: ... │ │
│ │ │ │
│ │ Kurzbeschreibung: [Der vollständige Text aus dem EU-Katalog] │ │
│ │ │ │
│ │ Kontakt: Carlos Diegos
│ │ E-Mail: bla_bla@info.d4decarm.es │ │
│ │ Website: https://www.bla_bla.es │ │
│ │ │ │
│ │ [ZURÜCK ZUM KATALOG] │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
└───────────────────────────────────────────────────────────────────────────┘.
Genau so soll ein Katalog funktionieren Einfach kopieren,
er hat das einfach auf die page 41 gepackt! hier her: https://www.mypage_.com/wp-admin/edit.php?post_type=page Vertical card exer hat das einfach auf die page 41 gepackt! hier her: https://www.mypage_.com/wp-admin/edit.php?post_type=page Vertical card example Shortcode [facetwp facet="services"] Shortcode [facetwp facet="reset"] Shortcode [facetwp template="edih_listing_vertical"] Shortcode [facetwp facet="pagination"]
Deine Erkenntnisse Punkt für Punkt bestätigt:
| Deine Aussage | Richtig? | Erklärung |
|---|---|---|
| "Ich übernehme Daten aus dem EU-Katalog und pflege sie manuell ein" | ✅ Ja! | Das ist der klassische "Kurator"-Ansatz. Du entscheidest, welche Hubs relevant sind. |
| "Bei jedem 'Neu anlegen' entsteht automatisch eine neue Card" | ✅ Ja! | FacetWP zeigt automatisch alle vorhandenen Einträge als Cards an. |
"Die URLs folgen dem Muster ?edih=hub-name"
|
✅ Ja! | WordPress generiert aus dem Titel einen eindeutigen "Slug" für die URL. |
| "Die Karten sind aktuell noch nicht richtig gefüllt" | ✅ Ja! | Du hast erst Testdaten. Mit echten Daten werden sie lebendig. |
| "Wenn ich alle Daten pflege, zeigen die Detailseiten den vollen Content" | ✅ Ja! | Die Detailseite (single-edih.php) zeigt alle Felder eines Eintrags.
|
| "Mit einem 'Land'-Feld kann ich nach Spanien filtern" | ✅ Ja! | Dafür musst du "Land" als Taxonomy oder ACF-Feld anlegen und in den Facets verwenden. |
| "Gefilterte Ergebnisse zeigen nur die passenden Hubs" | ✅ Ja! | Das ist der ganze Sinn von FacetWP! |
🎯 Dein konkreter nächster Schritt für "AGORA DIH":
- Gehe zu:
https://www.my_site.com/wp-admin/post-new.php?post_type=edih - Titel: "Abla_bla_bla DIH"
- Taxonomien (Filter):
- Typ: "Candidate" (falls zutreffend)
- Technologien: Wähle die passenden aus der EU-Seite
- Sektoren: Wähle die passenden aus
- ACF-Felder:
- Land: "Spanien" (du brauchst wahrscheinlich ein ACF-Feld "Land")
- Ort: "Murcia"
- Kurzbeschreibung: Fasse die EU-Beschreibung zusammen
- Website: Suche die echte Website (nicht EU-Seite)
- Kontakt-E-Mail: carlosbla_bla@ibli_bla_blub.es
- Beitragsbild: Logo von AGbla_bla_DIH suchen und hochladen
- Veröffentlichen
Schon hast du deinen ersten echten Hub im Katalog! 🇪🇸
Du hast das System jetzt wirklich verstanden – herzlichen Glückwunsch! 🎉 Der Rest ist Fleißarbeit beim Befüllen.