Πώς να δημιουργήσετε ένα προσαρμοσμένο μπλοκ θέμα WordPress με το theme.json: Ένας οδηγός βήμα προς βήμα

Σύνοψη

Η δημιουργία ενός προσαρμοσμένου μπλοκ θέματος WordPress με Πλήρη Επεξεργασία Ιστότοπου (Full Site Editing - FSE) μπορεί να είναι αποθαρρυντική, αλλά το theme.json απλοποιεί τη διαδικασία. Αυτός ο οδηγός σας καθοδηγεί στη δημιουργία ενός ελάχιστου μπλοκ θέματος, στον ορισμό παγκόσμιων στυλ όπως χρώματα και τυπογραφία στο theme.json, και στη δημιουργία προσαρμοσμένων προτύπων χρησιμοποιώντας σήμανση μπλοκ. Θα μάθετε να προσθέτετε μοτίβα μπλοκ και παραλλαγές στυλ, επιτρέποντας έναν πλήρως σχεδιάσιμο ιστότοπο χωρίς αρχεία προτύπων PHP. Θα καλύψουμε κοινά λάθη, όπως η ανάμειξη κλασικών και μπλοκ λειτουργιών, και θα δείξουμε πώς να δοκιμάσετε το θέμα σας. Στο τέλος, θα έχετε ένα σύγχρονο, επεκτάσιμο μπλοκ θέμα έτοιμο για παραγωγή. Αυτή η προσέγγιση αξιοποιεί τις τελευταίες δυνατότητες του WordPress για ταχύτερη, πιο οπτική ανάπτυξη.

Εισαγωγή

Η Πλήρης Επεξεργασία Ιστότοπου (FSE) έχει φέρει επανάσταση στην ανάπτυξη θεμάτων WordPress, επιτρέποντάς σας να σχεδιάσετε οπτικά κάθε μέρος του ιστότοπού σας. Αλλά πολλοί προγραμματιστές εξακολουθούν να βασίζονται σε κλασικά θέματα ή δυσκολεύονται να δημιουργήσουν μπλοκ θέματα από την αρχή. Το κλειδί για να ξεκλειδώσετε τη δύναμη του FSE είναι το theme.json—ένα αρχείο διαμόρφωσης που ελέγχει παγκόσμια στυλ, ρυθμίσεις και πρότυπα. Αυτό το άρθρο παρέχει έναν πρακτικό, βήμα προς βήμα οδηγό για τη δημιουργία ενός προσαρμοσμένου μπλοκ θέματος χρησιμοποιώντας το theme.json. Θα μάθετε να ρυθμίζετε τη δομή φακέλων, να ορίζετε χρωματικές παλέτες και προεπιλογές τυπογραφίας, να δημιουργείτε προσαρμοσμένα πρότυπα με σήμανση μπλοκ και να προσθέτετε παραλλαγές στυλ. Στο τέλος, θα έχετε ένα μπλοκ θέμα έτοιμο για παραγωγή που είναι εύκολο να συντηρηθεί και να επεκταθεί. Ας βουτήξουμε και ας απομυθοποιήσουμε την ανάπτυξη FSE.

Για μια ευρύτερη ματιά στο πώς το FSE διαμορφώνει το μέλλον του σχεδιασμού WordPress, δείτε Gutenberg FSE: Το μέλλον του σχεδιασμού WordPress το 2026.

1. Ρύθμιση ενός Ελάχιστου Μπλοκ Θέματος

Ένα μπλοκ θέμα απαιτεί τουλάχιστον δύο αρχεία: style.css και index.html. Ας τα δημιουργήσουμε.

Δομή Φακέλων

Δημιουργήστε έναν φάκελο με όνομα my-block-theme στον κατάλογο wp-content/themes/. Μέσα, τοποθετήστε:

• style.css
• index.html
• (προαιρετικά) theme.json

style.css

Ακόμα κι αν τα μπλοκ θέματα βασίζονται λιγότερο σε CSS, το style.css εξακολουθεί να είναι απαραίτητο για την αναγνώριση του θέματος:

/*
Theme Name: My Block Theme
Theme URI: https://example.com
Author: Your Name
Description: A custom block theme built with theme.json.
Version: 1.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: my-block-theme
*/

Η γραμμή Requires at least: 5.9 διασφαλίζει ότι το θέμα λειτουργεί με τη λειτουργία FSE.

index.html

Αυτό είναι το εναλλακτικό πρότυπό σας. Πρέπει να ξεκινά με σήμανση μπλοκ. Δημιουργήστε μια απλή διάταξη:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
    <!-- wp:post-title /-->
    <!-- wp:post-content /-->
</div>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Αυτό χρησιμοποιεί σύνταξη μπλοκ για να συμπεριλάβει τμήματα προτύπων κεφαλίδας και υποσέλιδου και εμφανίζει τον τίτλο και το περιεχόμενο της ανάρτησης.

Προσοχή: Τα μπλοκ θέματα δεν πρέπει να περιέχουν αρχεία προτύπων PHP όπως header.php ή footer.php. Η ανάμειξη κλασικών και μπλοκ προτύπων θα σπάσει το FSE.

Ενεργοποίηση του Θέματος

Ανεβάστε τον φάκελο μέσω FTP ή εγκατάσταση zip και ενεργοποιήστε τον. Θα πρέπει να δείτε έναν κενό ιστότοπο με την ελάχιστη δομή σας. Στη συνέχεια, θα το στυλίσουμε με το theme.json.

2. Κατακτώντας το theme.json: Παγκόσμια Στυλ & Ρυθμίσεις

Το theme.json συγκεντρώνει όλους τους ελέγχους σχεδιασμού. Βρίσκεται στη ρίζα του φακέλου του θέματός σας. Ας δημιουργήσουμε ένα με ρυθμίσεις χρωμάτων και τυπογραφίας.

Βασική Δομή

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "slug": "primary",
                    "color": "#007cba",
                    "name": "Primary"
                },
                {
                    "slug": "secondary",
                    "color": "#005a87",
                    "name": "Secondary"
                },
                {
                    "slug": "background",
                    "color": "#ffffff",
                    "name": "Background"
                }
            ],
            "gradients": []
        },
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
                    "slug": "system",
                    "name": "System"
                },
                {
                    "fontFamily": "'Georgia', serif",
                    "slug": "serif",
                    "name": "Serif"
                }
            ],
            "fontSizes": [
                {
                    "slug": "small",
                    "size": "14px",
                    "name": "Small"
                },
                {
                    "slug": "medium",
                    "size": "18px",
                    "name": "Medium"
                },
                {
                    "slug": "large",
                    "size": "24px",
                    "name": "Large"
                }
            ]
        },
        "spacing": {
            "padding": true,
            "margin": true,
            "units": ["px", "em", "rem"]
        }
    },
    "styles": {
        "color": {
            "background": "var(--wp--preset--color--background)",
            "text": "var(--wp--preset--color--primary)"
        },
        "typography": {
            "fontFamily": "var(--wp--preset--font-family--system)",
            "fontSize": "var(--wp--preset--font-size--medium)"
        }
    }
}

Αυτό ορίζει μια χρωματική παλέτα, οικογένειες γραμματοσειρών, μεγέθη γραμματοσειρών και παγκόσμια στυλ. Οι συναρτήσεις var() αναφέρονται σε προσαρμοσμένες ιδιότητες CSS που δημιουργούνται αυτόματα από το WordPress. Οι χρήστες μπορούν στη συνέχεια να τις αλλάξουν στον Επεξεργαστή Ιστότοπου.

Συμβουλή: Χρησιμοποιήστε προσαρμοσμένες ιδιότητες CSS για συνέπεια. Αποφύγετε τη σκληρή κωδικοποίηση τιμών σε αρχεία CSS. Αφήστε το theme.json να είναι η μοναδική πηγή αλήθειας.

3. Δημιουργώντας Προσαρμοσμένα Πρότυπα

Τα μπλοκ πρότυπα είναι αρχεία HTML με σήμανση μπλοκ. Ακολουθούν μια ιεραρχία παρόμοια με τα κλασικά αρχεία προτύπων. Για παράδειγμα, δημιουργήστε το single.html για μεμονωμένες αναρτήσεις:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-title {"level":1} /-->
    <!-- wp:post-featured-image /-->
    <!-- wp:post-content /-->
    <!-- wp:post-navigation-link {"type":"previous"} /-->
    <!-- wp:post-navigation-link {"type":"next"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Ομοίως, δημιουργήστε page.html, archive.html, κ.λπ. Μπορείτε επίσης να δημιουργήσετε προσαρμοσμένα πρότυπα προσθέτοντας ένα μπλοκ wp:post-template μέσα σε έναν βρόχο ερωτήματος.

Για προηγμένη προσαρμογή, σκεφτείτε τη δημιουργία προσαρμοσμένων μπλοκ. Μάθετε πώς στο Πέρα από τα βασικά μπλοκ: Δημιουργώντας προσαρμοσμένα μπλοκ Gutenberg για βελτιωμένη λειτουργικότητα WordPress.

Τμήματα Προτύπων

Δημιουργήστε έναν φάκελο parts/ για επαναχρησιμοποιήσιμα τμήματα. Για παράδειγμα, header.html:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<header class="wp-block-group">
    <!-- wp:site-logo /-->
    <!-- wp:navigation {"themeLocation":"primary"} /-->
</header>
<!-- /wp:group -->

Και footer.html:

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">&copy; 2025 My Site</p>
<!-- /wp:paragraph -->

4. Προσθήκη Μοτίβων Μπλοκ και Παραλλαγών Στυλ

Τα μοτίβα μπλοκ είναι προ-σχεδιασμένες διατάξεις. Ορίστε τα σε έναν φάκελο patterns/. Δημιουργήστε patterns/hero.php:

<?php
/**
 * Title: Hero
 * Slug: my-block-theme/hero
 * Categories: hero
 */
?>
<!-- wp:cover {"overlayColor":"primary","minHeight":50,"align":"full"} -->
<div class="wp-block-cover alignfull" style="min-height:50vh">
    <span aria-hidden="true" class="wp-block-cover__background has-primary-background-color"></span>
    <div class="wp-block-cover__inner-container">
        <!-- wp:heading {"textAlign":"center","level":1,"style":{"color":{"text":"#ffffff"}}} -->
        <h1 class="has-text-align-center has-text-color" style="color:#ffffff">Καλώς ορίσατε</h1>
        <!-- /wp:heading -->
        <!-- wp:paragraph {"align":"center","textColor":"white"} -->
        <p class="has-text-align-center has-white-color">Αυτή είναι μια προσαρμοσμένη ενότητα ήρωα</p>
        <!-- /wp:paragraph -->
    </div>
</div>
<!-- /wp:cover -->

Οι παραλλαγές στυλ επιτρέπουν στους χρήστες να αλλάζουν ολόκληρη την εμφάνιση. Δημιουργήστε styles/default.json και styles/dark.json που παρακάμπτουν τις ρυθμίσεις θέματος.

5. Προειδοποιήσεις και Βέλτιστες Πρακτικές

• Απόδοση: Το theme.json αποθηκεύεται στην προσωρινή μνήμη. Καθαρίστε την προσωρινή μνήμη μετά από αλλαγές. Χρησιμοποιήστε το hook wp_register_theme_json αν χρειαστεί.
• Συμβατότητα προς τα πίσω: Τα μπλοκ θέματα λειτουργούν μόνο από το WordPress 5.9. Αν ο ιστότοπός σας πρέπει να υποστηρίζει παλαιότερες εκδόσεις, σκεφτείτε μια υβριδική προσέγγιση αλλά αποφύγετε την ανάμειξη αρχείων προτύπων.
• Θέματα παιδιών: Τα μπλοκ θέματα μπορούν να χρησιμοποιηθούν ως γονικά θέματα για κλασικά θέματα παιδιών, αλλά όχι το αντίστροφο. Χρησιμοποιήστε το template στο style.css για να δηλώσετε ένα γονικό μπλοκ θέμα.
• Διεθνοποίηση: Χρησιμοποιήστε τη συνάρτηση __() μέσα σε τμήματα προτύπων PHP για μεταφράσιμες συμβολοσειρές. Στη σήμανση μπλοκ, καθορίστε το πεδίο κειμένου μέσω του χαρακτηριστικού textDomain.

Για περισσότερα σχετικά με τις βέλτιστες πρακτικές ανάπτυξης plugins, δείτε Δημιουργώντας ισχυρά plugins WordPress: Ένας πρακτικός οδηγός βέλτιστων πρακτικών.

Συμπέρασμα

Η δημιουργία ενός προσαρμοσμένου μπλοκ θέματος με το theme.json σας δίνει τη δυνατότητα να δημιουργήσετε έναν πλήρως σχεδιάσιμο ιστότοπο χωρίς να αγγίξετε PHP. Ακολουθώντας αυτόν τον οδηγό, ρυθμίσατε ένα ελάχιστο θέμα, ορίσατε παγκόσμια στυλ, δημιουργήσατε προσαρμοσμένα πρότυπα και προσθέσατε μοτίβα. Θυμηθείτε να δοκιμάσετε διεξοδικά, ειδικά για οριακές περιπτώσεις όπως αρχειοθέτηση σελίδων ή προσαρμοσμένους τύπους αναρτήσεων. Καθώς το WordPress εξελίσσεται, τα μπλοκ θέματα θα γίνουν το πρότυπο. Αρχίστε να αξιοποιείτε το FSE σήμερα για να βελτιστοποιήσετε τη ροή εργασίας σας και να προσφέρετε στους πελάτες απαράμιλλη ευελιξία.

Αν θέλετε να επιταχύνετε ακόμα περισσότερο τη δημιουργία θέματος, σκεφτείτε να χρησιμοποιήσετε ένα εργαλείο που δημιουργεί ένα πλήρες site από μια περιγραφή. Για παράδειγμα, μπορείτε να περιγράψετε την επιθυμητή διάταξή σας και να έχετε ένα έτοιμο προς χρήση μπλοκ θέμα σε λίγα λεπτά.

Έτοιμοι να ζωντανέψετε το μπλοκ θέμα σας; Με μια περιγραφή απλού κειμένου, μπορείτε να δημιουργήσετε μια πλήρως λειτουργική σελίδα προορισμού ή ιστότοπο—χωρίς κώδικα.