🎨 Jak stworzyć własną skórkę w WordPress krok po kroku

Tworzenie własnych motywów WordPress to umiejętność, która daje Ci pełną kontrolę nad wyglądem i funkcjonalnością Twojej strony. W tym kompleksowym przewodniku przeprowadzimy Cię przez cały proces tworzenia profesjonalnego motywu WordPress od podstaw - od struktury plików, przez style CSS, aż po zaawansowane funkcje. Niezależnie od tego, czy jesteś początkującym programistą czy doświadczonym webdeveloperem, ten poradnik pomoże Ci stworzyć unikalny motyw dopasowany do Twoich potrzeb.

⚡ Ekspresowe Podsumowanie:

  1. Struktura motywu: Prawidłowa organizacja plików to podstawa dobrego motywu WordPress.
  2. Pliki szablonów: Zrozumienie hierarchii szablonów WordPress jest kluczowe dla tworzenia własnych motywów.
  3. Style i funkcje: Pliki style.css i functions.php to serce Twojego motywu.
  4. Responsywność i zgodność: Dobry motyw musi działać na wszystkich urządzeniach i być zgodny z najnowszymi standardami.

🗺️ Spis Treści - Twoja Mapa Drogowa

📋 Przygotowanie do tworzenia motywu WordPress

Przed przystąpieniem do kodowania, potrzebna jest odpowiednia konfiguracja środowiska i zrozumienie fundamentalnych koncepcji związanych z tworzeniem motywów WordPress.

Niezbędne narzędzia i umiejętności

Aby skutecznie tworzyć motywy WordPress, potrzebujesz:

  • Lokalnego środowiska deweloperskiego (np. XAMPP, MAMP, Local by Flywheel)
  • Edytora kodu (np. Visual Studio Code, Sublime Text, PhpStorm)
  • Wiedzy z zakresu:
    • HTML
    • CSS
    • PHP (przynajmniej podstawy)
    • JavaScript (opcjonalnie, ale przydatne)
    • Zasad działania WordPress

✨ Pro Tip: Zainstaluj rozszerzenia do swojego edytora kodu, które wspierają składnię WordPress, PHP i automatyczne formatowanie. Zaoszczędzisz mnóstwo czasu!

Instalacja środowiska deweloperskiego

Oto kroki, aby skonfigurować lokalne środowisko deweloperskie:

  1. Zainstaluj pakiet lokalnego serwera (XAMPP, MAMP lub Local by Flywheel)
  2. Skonfiguruj instancję WordPress:
    • Utwórz bazę danych MySQL
    • Pobierz najnowszą wersję WordPress ze strony wordpress.org
    • Skonfiguruj WordPress wskazując na utworzoną bazę danych
  3. Przygotuj strukturę katalogów:
    • Przejdź do katalogu wp-content/themes/
    • Utwórz nowy katalog dla swojego motywu (np. moj-motyw)

Podstawowe koncepcje motywów WordPress

Przed rozpoczęciem kodowania, ważne jest zrozumienie kilku kluczowych koncepcji:

  • Hierarchia szablonów - System WordPress określa, który plik szablonu zostanie użyty do wyświetlenia każdej strony
  • Pętla WordPress - Podstawowy mechanizm wyświetlania zawartości
  • Hooki i filtry - Pozwalają na modyfikację zachowania WordPress bez zmiany kodu źródłowego
  • Funkcje motywu - Specjalne funkcje pozwalające na dodawanie funkcjonalności do motywu

🏗️ Struktura podstawowego motywu WordPress

Każdy motyw WordPress musi zawierać określone pliki i przestrzegać pewnych konwencji, aby działać poprawnie.

Minimalne wymagane pliki

Absolutne minimum do funkcjonowania motywu WordPress to dwa pliki:

  1. style.css - zawiera metadane motywu i style CSS
  2. index.php - główny szablon, używany jako ostateczne rozwiązanie, gdy nie ma innych, bardziej specyficznych szablonów

Jednak dla funkcjonalnego motywu zazwyczaj potrzebne są dodatkowe pliki:

  • functions.php - zawiera funkcje specyficzne dla motywu
  • header.php - górna część strony, zawierająca elementy takie jak nagłówek, menu, itp.
  • footer.php - dolna część strony, zazwyczaj zawierająca stopkę
  • sidebar.php - szablon paska bocznego
  • single.php - szablon dla pojedynczych postów
  • page.php - szablon dla stron statycznych
  • archive.php - szablon dla stron archiwum
  • 404.php - szablon dla błędu 404

Tworzenie struktury katalogów

Dobrze zorganizowana struktura katalogów to podstawa utrzymywalnego motywu:

moj-motyw/
├── css/              # Pliki CSS
├── js/               # Pliki JavaScript
├── images/           # Obrazy używane w motywie
├── inc/              # Pliki z funkcjami PHP
├── template-parts/   # Wielokrotnie używane fragmenty szablonów
├── languages/        # Pliki tłumaczeń
├── style.css         # Główny plik CSS z metadanymi motywu
├── functions.php     # Główny plik funkcji
├── index.php         # Główny szablon
├── header.php
├── footer.php
├── sidebar.php
├── single.php
├── page.php
├── archive.php
└── 404.php

✨ Pro Tip: Trzymaj się zasady DRY (Don't Repeat Yourself) - umieszczaj powtarzające się fragmenty kodu w katalogu template-parts/ i dołączaj je za pomocą funkcji get_template_part().

Konfiguracja pliku style.css

Plik style.css musi zawierać blok komentarzy z metadanymi motywu:

/*
Theme Name: Mój Motyw
Theme URI: https://przyklad.pl/moj-motyw/
Author: Twoje Imię
Author URI: https://przyklad.pl/
Description: Krótki opis motywu, który pojawi się w panelu administracyjnym.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: moj-motyw
Tags: responsive, custom-menu, custom-logo, featured-images
*/

/* Tutaj zaczynają się właściwe style CSS */

Te metadane są niezbędne, aby WordPress rozpoznał Twój motyw.

🧩 Tworzenie podstawowych szablonów

Po skonfigurowaniu struktury motywu, czas na tworzenie podstawowych szablonów, które będą wyświetlać zawartość strony.

Tworzenie pliku index.php

Plik index.php jest najważniejszym szablonem w motywie WordPress. Służy jako "ostatnia deska ratunku", gdy WordPress nie może znaleźć bardziej specyficznego szablonu dla danej strony.

Oto prosty przykład pliku index.php:

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <header class="entry-header">
                    <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
                </header>

                <div class="entry-content">
                    <?php the_content(); ?>
                </div>
            </article>
            <?php
        endwhile;

        the_posts_navigation();
    else :
        ?>
        <article class="no-results">
            <header class="entry-header">
                <h1 class="entry-title">Nie znaleziono treści</h1>
            </header>
            <div class="entry-content">
                <p>Niestety, nie znaleziono treści spełniających podane kryteria.</p>
            </div>
        </article>
        <?php
    endif;
    ?>
</main>

<?php
get_sidebar();
get_footer();

Tworzenie plików header.php i footer.php

Pliki header.php i footer.php zawierają elementy, które powtarzają się na każdej stronie.

header.php:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
    <header id="masthead" class="site-header">
        <div class="site-branding">
            <?php
            if ( has_custom_logo() ) :
                the_custom_logo();
            else :
                ?>
                <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                <?php
                $description = get_bloginfo( 'description', 'display' );
                if ( $description ) :
                    ?>
                    <p class="site-description"><?php echo $description; ?></p>
                <?php endif; ?>
            <?php endif; ?>
        </div><!-- .site-branding -->

        <nav id="site-navigation" class="main-navigation">
            <?php
            wp_nav_menu(
                array(
                    'theme_location' => 'menu-1',
                    'menu_id'        => 'primary-menu',
                )
            );
            ?>
        </nav><!-- #site-navigation -->
    </header><!-- #masthead -->

footer.php:

    <footer id="colophon" class="site-footer">
        <div class="site-info">
            <?php
            printf(
                esc_html__( '© %1$s %2$s', 'moj-motyw' ),
                date( 'Y' ),
                get_bloginfo( 'name' )
            );
            ?>
        </div><!-- .site-info -->
    </footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>

</body>
</html>

Uwaga: Funkcje wp_head() i wp_footer() są absolutnie niezbędne - wielu wtyczek i funkcji WordPress polega na tych hookach do dodawania skryptów, stylów i innych elementów.

Tworzenie szablonów dla różnych typów treści

WordPress używa różnych szablonów dla różnych typów treści. Oto najpopularniejsze z nich:

single.php - dla pojedynczych postów

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
        ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <header class="entry-header">
                <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
                <div class="entry-meta">
                    <?php
                    printf(
                        esc_html__( 'Opublikowano %s', 'moj-motyw' ),
                        '<time datetime="' . esc_attr( get_the_date( 'c' ) ) . '">' . esc_html( get_the_date() ) . '</time>'
                    );
                    ?>
                </div><!-- .entry-meta -->
            </header><!-- .entry-header -->

            <?php if ( has_post_thumbnail() ) : ?>
                <div class="post-thumbnail">
                    <?php the_post_thumbnail(); ?>
                </div><!-- .post-thumbnail -->
            <?php endif; ?>

            <div class="entry-content">
                <?php the_content(); ?>
            </div><!-- .entry-content -->

            <footer class="entry-footer">
                <?php
                // Wyświetl kategorie, tagi, itp.
                $categories = get_the_category_list( esc_html__( ', ', 'moj-motyw' ) );
                if ( $categories ) {
                    printf( '<span class="cat-links">' . esc_html__( 'Kategorie: %1$s', 'moj-motyw' ) . '</span>', $categories );
                }

                $tags = get_the_tag_list( '', esc_html_x( ', ', 'list item separator', 'moj-motyw' ) );
                if ( $tags ) {
                    printf( '<span class="tags-links">' . esc_html__( 'Tagi: %1$s', 'moj-motyw' ) . '</span>', $tags );
                }
                ?>
            </footer><!-- .entry-footer -->
        </article><!-- #post-<?php the_ID(); ?> -->

        <?php
        // Jeśli komentarze są włączone i jest co najmniej 1 komentarz, ładuj szablon komentarzy.
        if ( comments_open() || get_comments_number() ) :
            comments_template();
        endif;
    endwhile; // Koniec pętli.
    ?>
</main><!-- #main -->

<?php
get_sidebar();
get_footer();

page.php - dla stron statycznych

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
        ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <header class="entry-header">
                <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
            </header><!-- .entry-header -->

            <?php if ( has_post_thumbnail() ) : ?>
                <div class="post-thumbnail">
                    <?php the_post_thumbnail(); ?>
                </div><!-- .post-thumbnail -->
            <?php endif; ?>

            <div class="entry-content">
                <?php the_content(); ?>
            </div><!-- .entry-content -->
        </article><!-- #post-<?php the_ID(); ?> -->

        <?php
        // Jeśli komentarze są włączone i jest co najmniej 1 komentarz, ładuj szablon komentarzy.
        if ( comments_open() || get_comments_number() ) :
            comments_template();
        endif;
    endwhile; // Koniec pętli.
    ?>
</main><!-- #main -->

<?php
get_sidebar();
get_footer();

✨ Pro Tip: Wiele części kodu powtarza się w różnych szablonach. Rozważ wyodrębnienie ich do katalogu template-parts/ i dołączanie za pomocą get_template_part().

🛠️ Konfiguracja functions.php

Plik functions.php jest sercem funkcjonalności motywu WordPress. To miejsce, gdzie definiujesz specyficzne dla motywu funkcje, hooki i filtry.

Podstawowa struktura functions.php

<?php
/**
 * Funkcje i definicje dla mojego motywu
 */

if ( ! defined( 'MOJ_MOTYW_VERSION' ) ) {
    // Pamiętaj, aby zaktualizować tę wartość przy każdej większej zmianie w motywie
    define( 'MOJ_MOTYW_VERSION', '1.0.0' );
}

/**
 * Konfiguracja motywu i rejestracja wsparcia dla różnych funkcji WordPress.
 */
function moj_motyw_setup() {
    /*
     * Włączenie wsparcia dla tłumaczeń.
     */
    load_theme_textdomain( 'moj-motyw', get_template_directory() . '/languages' );

    /*
     * Domyślne wsparcie dla funkcji WordPress
     */
    add_theme_support( 'automatic-feed-links' );
    add_theme_support( 'title-tag' );
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'html5', array(
        'search-form',
        'comment-form',
        'comment-list',
        'gallery',
        'caption',
        'style',
        'script',
    ) );
    add_theme_support( 'customize-selective-refresh-widgets' );
    add_theme_support( 'custom-logo', array(
        'height'      => 250,
        'width'       => 250,
        'flex-width'  => true,
        'flex-height' => true,
    ) );

    /*
     * Rejestracja menu
     */
    register_nav_menus(
        array(
            'menu-1' => esc_html__( 'Menu główne', 'moj-motyw' ),
            'footer-menu' => esc_html__( 'Menu w stopce', 'moj-motyw' ),
        )
    );
}
add_action( 'after_setup_theme', 'moj_motyw_setup' );

/**
 * Rejestracja obszarów widgetów.
 */
function moj_motyw_widgets_init() {
    register_sidebar(
        array(
            'name'          => esc_html__( 'Pasek boczny', 'moj-motyw' ),
            'id'            => 'sidebar-1',
            'description'   => esc_html__( 'Dodaj widgety tutaj.', 'moj-motyw' ),
            'before_widget' => '<section id="%1$s" class="widget %2$s">',
            'after_widget'  => '</section>',
            'before_title'  => '<h2 class="widget-title">',
            'after_title'   => '</h2>',
        )
    );
}
add_action( 'widgets_init', 'moj_motyw_widgets_init' );

/**
 * Dołączanie stylów i skryptów.
 */
function moj_motyw_scripts() {
    wp_enqueue_style( 'moj-motyw-style', get_stylesheet_uri(), array(), MOJ_MOTYW_VERSION );
    wp_enqueue_script( 'moj-motyw-navigation', get_template_directory_uri() . '/js/navigation.js', array(), MOJ_MOTYW_VERSION, true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'moj_motyw_scripts' );

/**
 * Implementacja Custom Header.
 */
require get_template_directory() . '/inc/custom-header.php';

/**
 * Funkcje pomocnicze dla szablonów.
 */
require get_template_directory() . '/inc/template-functions.php';

/**
 * Funkcje dla szablonów typu.
 */
require get_template_directory() . '/inc/template-tags.php';

Dodawanie wsparcia dla funkcji WordPress

Twój motyw powinien obsługiwać standardowe funkcje WordPress:

function moj_motyw_setup() {
    // Dodaj wsparcie dla różnych funkcji WordPress
    add_theme_support( 'automatic-feed-links' );
    add_theme_support( 'title-tag' );
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'html5', array(
        'search-form',
        'comment-form',
        'comment-list',
        'gallery',
        'caption',
    ) );
    add_theme_support( 'customize-selective-refresh-widgets' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'custom-header' );
    add_theme_support( 'custom-background' );
    add_theme_support( 'responsive-embeds' );
    add_theme_support( 'align-wide' );
    add_theme_support( 'editor-styles' );
}

Rejestracja menu i obszarów widgetów

Rejestracja menu nawigacyjnych:

register_nav_menus(
    array(
        'primary' => esc_html__( 'Menu główne', 'moj-motyw' ),
        'footer'  => esc_html__( 'Menu w stopce', 'moj-motyw' ),
    )
);

Rejestracja obszarów widgetów:

function moj_motyw_widgets_init() {
    register_sidebar(
        array(
            'name'          => esc_html__( 'Pasek boczny', 'moj-motyw' ),
            'id'            => 'sidebar-1',
            'description'   => esc_html__( 'Dodaj widgety tutaj.', 'moj-motyw' ),
            'before_widget' => '<section id="%1$s" class="widget %2$s">',
            'after_widget'  => '</section>',
            'before_title'  => '<h2 class="widget-title">',
            'after_title'   => '</h2>',
        )
    );

    register_sidebar(
        array(
            'name'          => esc_html__( 'Stopka', 'moj-motyw' ),
            'id'            => 'footer-1',
            'description'   => esc_html__( 'Widgety w stopce.', 'moj-motyw' ),
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h3 class="widget-title">',
            'after_title'   => '</h3>',
        )
    );
}
add_action( 'widgets_init', 'moj_motyw_widgets_init' );

✨ Pro Tip: Dziel plik functions.php na mniejsze, tematyczne części i dołączaj je za pomocą require. Dzięki temu łatwiej będzie utrzymać kod.

💄 Stylizacja i wygląd motywu

Style CSS to to, co nadaje Twojemu motywu unikalny wygląd i sprawia, że wyróżnia się spośród innych.

Organizacja plików CSS

Dobrą praktyką jest podział CSS na mniejsze, tematyczne pliki:

css/
├── base.css       # Resetowanie stylów i podstawowe style
├── typography.css # Style typograficzne
├── layout.css     # Układ strony
├── navigation.css # Style menu
├── forms.css      # Style formularzy
├── comments.css   # Style komentarzy
└── responsive.css # Media queries dla responsywności

W głównym pliku style.css można następnie dołączyć te pliki lub, lepiej, załadować je przez functions.php:

function moj_motyw_styles() {
    wp_enqueue_style( 'moj-motyw-base', get_template_directory_uri() . '/css/base.css', array(), MOJ_MOTYW_VERSION );
    wp_enqueue_style( 'moj-motyw-typography', get_template_directory_uri() . '/css/typography.css', array(), MOJ_MOTYW_VERSION );
    wp_enqueue_style( 'moj-motyw-layout', get_template_directory_uri() . '/css/layout.css', array(), MOJ_MOTYW_VERSION );
    wp_enqueue_style( 'moj-motyw-navigation', get_template_directory_uri() . '/css/navigation.css', array(), MOJ_MOTYW_VERSION );
    wp_enqueue_style( 'moj-motyw-forms', get_template_directory_uri() . '/css/forms.css', array(), MOJ_MOTYW_VERSION );
    wp_enqueue_style( 'moj-motyw-comments', get_template_directory_uri() . '/css/comments.css', array(), MOJ_MOTYW_VERSION );
    wp_enqueue_style( 'moj-motyw-responsive', get_template_directory_uri() . '/css/responsive.css', array(), MOJ_MOTYW_VERSION );
}
add_action( 'wp_enqueue_scripts', 'moj_motyw_styles' );

Tworzenie responsywnego layoutu

Współczesne motywy WordPress muszą być responsywne, czyli dobrze wyglądać na wszystkich urządzeniach.

Oto przykładowy fragment CSS dla responsywnego layoutu:

/* Bazowy layout dla komputerów */
.site {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.site-content {
    display: flex;
    flex-wrap: wrap;
}

.site-main {
    flex: 0 0 70%;
    max-width: 70%;
    padding-right: 30px;
}

.site-sidebar {
    flex: 0 0 30%;
    max-width: 30%;
}

/* Media queries dla tabletów */
@media (max-width: 768px) {
    .site-main,
    .site-sidebar {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
    }

    .site-sidebar {
        margin-top: 40px;
    }
}

/* Media queries dla telefonów */
@media (max-width: 576px) {
    .site {
        padding: 0 10px;
    }
}

Używanie preprocesorów CSS

Preprocessory CSS, takie jak Sass lub Less, mogą znacznie ułatwić pracę z CSS.

Jeśli chcesz użyć Sass, musisz skonfigurować środowisko do kompilacji:

  1. Zainstaluj Node.js i npm
  2. Utwórz plik package.json w katalogu motywu
  3. Zainstaluj potrzebne paczki: npm install sass autoprefixer postcss postcss-cli --save-dev
  4. Utwórz skrypt w package.json do kompilacji Sass:
"scripts": {
    "compile:sass": "sass sass/main.scss css/style.css",
    "watch:sass": "sass --watch sass/main.scss:css/style.css"
}
  1. Uruchom kompilację: npm run compile:sass lub w trybie watch: npm run watch:sass

🔄 Zaawansowane funkcje WordPress

Współczesne motywy WordPress powinny obsługiwać zaawansowane funkcje, które sprawiają, że strony są bardziej funkcjonalne i przyjazne dla użytkowników.

Obsługa Customizer API

Customizer API pozwala użytkownikom na modyfikowanie wyglądu strony z podglądem na żywo.

function moj_motyw_customize_register( $wp_customize ) {
    // Dodaj sekcję
    $wp_customize->add_section( 'moj_motyw_colors', array(
        'title'    => __( 'Kolory motywu', 'moj-motyw' ),
        'priority' => 30,
    ) );

    // Dodaj ustawienie
    $wp_customize->add_setting( 'primary_color', array(
        'default'           => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

    // Dodaj kontrolkę
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'primary_color', array(
        'label'    => __( 'Kolor główny', 'moj-motyw' ),
        'section'  => 'moj_motyw_colors',
        'settings' => 'primary_color',
    ) ) );
}
add_action( 'customize_register', 'moj_motyw_customize_register' );

// Dodaj dynamiczne style CSS do strony
function moj_motyw_customize_css() {
    ?>
    <style type="text/css">
        a {
            color: <?php echo get_theme_mod( 'primary_color', '#0073aa' ); ?>;
        }
        .button, .btn, button {
            background-color: <?php echo get_theme_mod( 'primary_color', '#0073aa' ); ?>;
        }
    </style>
    <?php
}
add_action( 'wp_head', 'moj_motyw_customize_css' );

Dodawanie wsparcia dla Gutenberga

Blokowy edytor Gutenberg jest teraz standardem w WordPress, więc warto dodać dla niego wsparcie:

// Dodaj wsparcie dla szerokości bloku Gutenberg
add_theme_support( 'align-wide' );

// Dodaj wsparcie dla kolorów Gutenberg
add_theme_support( 'editor-color-palette', array(
    array(
        'name'  => __( 'Główny kolor', 'moj-motyw' ),
        'slug'  => 'primary',
        'color' => '#0073aa',
    ),
    array(
        'name'  => __( 'Kolor dodatkowy', 'moj-motyw' ),
        'slug'  => 'secondary',
        'color' => '#23282d',
    ),
) );

// Dodaj wsparcie dla rozmiaru czcionki w Gutenbergu
add_theme_support( 'editor-font-sizes', array(
    array(
        'name' => __( 'Mały', 'moj-motyw' ),
        'slug' => 'small',
        'size' => 12,
    ),
    array(
        'name' => __( 'Normalny', 'moj-motyw' ),
        'slug' => 'normal',
        'size' => 16,
    ),
    array(
        'name' => __( 'Duży', 'moj-motyw' ),
        'slug' => 'large',
        'size' => 24,
    ),
) );

// Dodaj style edytora Gutenberg
add_theme_support( 'editor-styles' );
add_editor_style( 'css/editor-style.css' );

Implementacja niestandardowych typów wpisów i taksonomii

Dla bardziej zaawansowanych stron możesz potrzebować niestandardowych typów wpisów i taksonomii:

// Rejestracja niestandardowego typu wpisu "Projekty"
function moj_motyw_register_post_types() {
    $labels = array(
        'name'               => _x( 'Projekty', 'post type general name', 'moj-motyw' ),
        'singular_name'      => _x( 'Projekt', 'post type singular name', 'moj-motyw' ),
        'menu_name'          => _x( 'Projekty', 'admin menu', 'moj-motyw' ),
        'name_admin_bar'     => _x( 'Projekt', 'add new on admin bar', 'moj-motyw' ),
        'add_new'            => _x( 'Dodaj nowy', 'projekt', 'moj-motyw' ),
        'add_new_item'       => __( 'Dodaj nowy projekt', 'moj-motyw' ),
        'new_item'           => __( 'Nowy projekt', 'moj-motyw' ),
        'edit_item'          => __( 'Edytuj projekt', 'moj-motyw' ),
        'view_item'          => __( 'Zobacz projekt', 'moj-motyw' ),
        'all_items'          => __( 'Wszystkie projekty', 'moj-motyw' ),
        'search_items'       => __( 'Szukaj projektów', 'moj-motyw' ),
        'parent_item_colon'  => __( 'Nadrzędny projekt:', 'moj-motyw' ),
        'not_found'          => __( 'Nie znaleziono projektów.', 'moj-motyw' ),
        'not_found_in_trash' => __( 'Nie znaleziono projektów w koszu.', 'moj-motyw' )
    );

    $args = array(
        'labels'             => $labels,
        'public'             => true,
        'publicly_queryable' => true,
        'show_ui'            => true,
        'show_in_menu'       => true,
        'query_var'          => true,
        'rewrite'            => array( 'slug' => 'projekty' ),
        'capability_type'    => 'post',
        'has_archive'        => true,
        'hierarchical'       => false,
        'menu_position'      => null,
        'supports'           => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' ),
        'show_in_rest'       => true,
    );

    register_post_type( 'projekt', $args );
}
add_action( 'init', 'moj_motyw_register_post_types' );

// Rejestracja niestandardowej taksonomii "Kategorie projektów"
function moj_motyw_register_taxonomies() {
    $labels = array(
        'name'              => _x( 'Kategorie projektów', 'taxonomy general name', 'moj-motyw' ),
        'singular_name'     => _x( 'Kategoria projektu', 'taxonomy singular name', 'moj-motyw' ),
        'search_items'      => __( 'Szukaj kategorii projektów', 'moj-motyw' ),
        'all_items'         => __( 'Wszystkie kategorie projektów', 'moj-motyw' ),
        'parent_item'       => __( 'Nadrzędna kategoria projektu', 'moj-motyw' ),
        'parent_item_colon' => __( 'Nadrzędna kategoria projektu:', 'moj-motyw' ),
        'edit_item'         => __( 'Edytuj kategorię projektu', 'moj-motyw' ),
        'update_item'       => __( 'Aktualizuj kategorię projektu', 'moj-motyw' ),
        'add_new_item'      => __( 'Dodaj nową kategorię projektu', 'moj-motyw' ),
        'new_item_name'     => __( 'Nazwa nowej kategorii projektu', 'moj-motyw' ),
        'menu_name'         => __( 'Kategorie projektów', 'moj-motyw' ),
    );

    $args = array(
        'hierarchical'      => true,
        'labels'            => $labels,
        'show_ui'           => true,
        'show_admin_column' => true,
        'query_var'         => true,
        'rewrite'           => array( 'slug' => 'kategoria-projektu' ),
        'show_in_rest'      => true,
    );

    register_taxonomy( 'kategoria-projektu', array( 'projekt' ), $args );
}
add_action( 'init', 'moj_motyw_register_taxonomies' );

👶 Tworzenie motywu potomnego (Child Theme)

Motyw potomny to idealny sposób na modyfikowanie istniejącego motywu bez ingerencji w jego kod źródłowy.

Kiedy warto użyć motywu potomnego?

Motyw potomny jest przydatny, gdy:

  • Chcesz dostosować istniejący motyw, ale nie chcesz tracić aktualizacji
  • Planujesz niewielkie zmiany w wyglądzie lub funkcjonalności
  • Uczysz się tworzenia motywów WordPress i chcesz zacząć od modyfikacji istniejącego

Struktura motywu potomnego

Minimalna struktura motywu potomnego to:

nazwa-motywu-child/
├── style.css        # Metadane motywu i style CSS
└── functions.php    # Funkcje specyficzne dla motywu potomnego

Konfiguracja style.css w motywie potomnym

/*
Theme Name: Mój Motyw Child
Theme URI: https://przyklad.pl/moj-motyw-child/
Description: Motyw potomny dla Mój Motyw
Author: Twoje Imię
Author URI: https://przyklad.pl/
Template: moj-motyw    # Nazwa katalogu motywu nadrzędnego
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: moj-motyw-child
*/

/* Tutaj dodaj niestandardowe style CSS */

Konfiguracja functions.php w motywie potomnym

<?php
/**
 * Funkcje motywu potomnego
 */

// Ładowanie stylów motywu nadrzędnego i potomnego
function moj_motyw_child_enqueue_styles() {
    $parent_style = 'moj-motyw-style'; // Identyfikator stylu motywu nadrzędnego

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'moj-motyw-child-style',
        get_stylesheet_uri(),
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'moj_motyw_child_enqueue_styles' );

// Tutaj możesz dodać dodatkowe funkcje lub nadpisać funkcje motywu nadrzędnego

✨ Pro Tip: W motywie potomnym możesz nadpisać dowolny plik szablonu z motywu nadrzędnego, tworząc plik o tej samej nazwie w motywie potomnym. WordPress automatycznie użyje wersji z motywu potomnego.

📦 Przygotowanie motywu do dystrybucji

Jeśli planujesz udostępnić swój motyw innym lub opublikować go w katalogu motywów WordPress, musisz odpowiednio go przygotować.

Lista kontrolna przed dystrybucją

Oto kluczowe rzeczy do sprawdzenia przed udostępnieniem motywu:

  • Zgodność z standardami WordPress:

    • Używaj prefixów specyficznych dla motywu dla funkcji i zmiennych
    • Stosuj kodowanie znaków UTF-8 bez BOM
    • Używaj znormalizowanych końcówek linii (LF)

  • Bezpieczeństwo:

    • Waliduj, sanityzuj i escapuj wszystkie dane wejściowe/wyjściowe
    • Używaj nonce dla formularzy
    • Sprawdzaj uprawnienia użytkowników przed wykonaniem działań

  • Dostępność:

    • Zapewnij odpowiedni kontrast kolorów
    • Używaj semantycznego HTML
    • Dodaj atrybuty ARIA gdzie to konieczne

  • Internacjonalizacja (i18n):

    • Wszystkie ciągi tekstowe powinny być przetłumaczalne
    • Użyj funkcji __(), _e(), esc_html__(), esc_html_e() itd.
    • Dodaj domenę tekstową do wszystkich funkcji tłumaczeniowych

  • Dokumentacja:

    • Dodaj komentarze do kodu
    • Utwórz plik README.md
    • Dodaj dokumentację dla użytkowników końcowych

Tworzenie plików tłumaczeń

Aby motyw był gotowy do tłumaczenia:

  1. Użyj narzędzia takiego jak Poedit lub WP-CLI do wygenerowania pliku POT
  2. Utwórz katalog languages w swoim motywie
  3. Umieść tam plik POT i ewentualne tłumaczenia (pliki PO i MO)

Przykład użycia WP-CLI do wygenerowania pliku POT:

wp i18n make-pot . languages/moj-motyw.pot --domain=moj-motyw

Walidacja motywu

Przed udostępnieniem motywu warto zwalidować go za pomocą narzędzi:

  • Theme Check Plugin - wtyczka, która sprawdza zgodność motywu z wymaganiami katalogu motywów WordPress
  • W3C Validator - sprawdza poprawność kodu HTML
  • CSS Validator - sprawdza poprawność CSS

🏁 Podsumowanie - Gotowy na Sukces?

Tworzenie własnego motywu WordPress może wydawać się złożonym zadaniem, ale krok po kroku możesz stworzyć profesjonalny i funkcjonalny motyw, który będzie idealnie odpowiadał Twoim potrzebom. W tym przewodniku omówiliśmy:

  1. Przygotowanie środowiska deweloperskiego - niezbędne narzędzia i konfigurację
  2. Strukturę motywu WordPress - organizację plików i katalogów
  3. Tworzenie podstawowych szablonów - dla różnych typów treści
  4. Konfigurację functions.php - dodawanie funkcjonalności do motywu
  5. Stylizację i responsywność - tworzenie atrakcyjnego i funkcjonalnego wyglądu
  6. Zaawansowane funkcje WordPress - Customizer API, Gutenberg, niestandardowe typy wpisów
  7. Tworzenie motywu potomnego - dla modyfikacji istniejących motywów
  8. Przygotowanie motywu do dystrybucji - najlepsze praktyki i finalne sprawdzenie

Pamiętaj, że tworzenie motywu to proces, który wymaga czasu i praktyki. Nie bój się eksperymentować i ucz się na błędach. Z każdym kolejnym projektem Twoje umiejętności będą się rozwijać, a proces stawać się bardziej intuicyjny.

🚀 Potrzebujesz profesjonalnego hostingu dla swojej strony WordPress?

Sprawdź ofertę hostingu WordPress w IQHost

Z hostingiem WordPress w IQHost zyskujesz nie tylko szybkie serwery zoptymalizowane pod WordPress, ale także automatyczne kopie zapasowe, darmowe certyfikaty SSL i profesjonalne wsparcie techniczne 24/7!

Kategorie i tagi

WordPress Tutoriale Web Development

Czy ten artykuł był pomocny?

Wróć do listy wpisów

Twoja strona WordPress działa wolno?

Sprawdź nasz hosting WordPress z ultraszybkimi dyskami NVMe i konfiguracją serwera zoptymalizowaną pod kątem wydajności. Doświadcz różnicy już dziś!

Sprawdź ofertę hostingu
30-dniowa gwarancja zwrotu pieniędzy