Com Crear un Tema Personalitzat a WordPress

Crear un tema personalitzat a WordPress pot semblar intimidant al principi, però amb una bona estructura i coneixement bàsic de programació web, és un procés satisfactori que et permet tenir un control total sobre l’aparença i funcionalitats del teu lloc web. En aquest article, et guiarem pas a pas per crear el teu primer tema personalitzat.

1. Què és un tema de WordPress?

Un tema de WordPress és una col·lecció de fitxers que defineixen el disseny, l’estructura i el comportament del teu lloc web. Aquests fitxers inclouen codi HTML, CSS, PHP i JavaScript. Un tema personalitzat et permet adaptar l’estètica del teu lloc a les teves necessitats, sense dependre de plantilles predefinides.

2. Preparació abans de començar

Abans de començar, assegura’t que tens tot el necessari:

WordPress instal·lat localment: Pots utilitzar eines com XAMPP, MAMP o Local by Flywheel.
Un editor de codi: Recomanem Visual Studio Code.
Coneixements bàsics de HTML, CSS i PHP.

Un cop tinguis el teu entorn preparat, accedeix al directori de temes de WordPress:
/wp-content/themes/.

3. Crear l’estructura del tema

Crea una carpeta amb el nom del teu tema, per exemple, minimal-theme. Dins d’aquesta carpeta, necessitaràs almenys aquests dos fitxers inicials:

style.css: Defineix l’estil del tema i inclou metadades del tema.
index.php: El fitxer principal que WordPress utilitza per mostrar contingut.

Exemple del fitxer style.css

/*
Theme Name: Minimal Theme
Theme URI: http://example.com
Author: El teu nom
Author URI: http://example.com
Description: Un tema minimalista per WordPress.
Version: 1.0
*/

Aquestes metadades ajuden WordPress a identificar el teu tema.

Exemple del fitxer index.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title(); ?></title>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header>
        <h1><?php bloginfo('name'); ?></h1>
        <p><?php bloginfo('description'); ?></p>
    </header>
    <main>
        <h2>Benvingut al meu tema personalitzat!</h2>
    </main>
    <?php wp_footer(); ?>
</body>
</html>

Aquest fitxer mostra una estructura HTML bàsica amb funcions integrades de WordPress com wp_head() i wp_footer().

4. Afegir funcionalitats bàsiques

WordPress ofereix diverses funcions que pots utilitzar per enriquir el teu tema.

Afegir suport per a títols automàtics

Al fitxer functions.php, afegeix:

<?php
// Suport per als títols automàtics
add_theme_support('title-tag');
?>

Registrar un menú de navegació

Per habilitar un menú personalitzat:

<?php
// Registre del menú de navegació
function minimal_register_menus() {
    register_nav_menus(array(
        'primary_menu' => __('Primary Menu', 'minimal-theme'),
    ));
}
add_action('after_setup_theme', 'minimal_register_menus');
?>

Després, pots mostrar el menú al header.php:

<?php
wp_nav_menu(array(
    'theme_location' => 'primary_menu',
    'container' => '',
    'menu_class' => 'menu-class',
));
?>

5. Estructura bàsica dels fitxers del tema

Un tema complet sovint conté aquests fitxers:

header.php: Conté l’encapçalament del lloc.
footer.php: Conté el peu de pàgina.
single.php: Mostra els detalls d’un post individual.
page.php: Mostra les pàgines estàtiques.
archive.php: Mostra una llista de posts (categories, etiquetes, etc.).
404.php: Pàgina d’error per contingut no trobat.

Incloure header i footer al tema

Utilitza aquestes funcions a index.php o altres fitxers:

<?php get_header(); ?>
<!-- Contingut -->
<?php get_footer(); ?>

6. Estilitzar el tema amb CSS i Tailwind CSS

Pots incloure els teus propis estils CSS a style.css o utilitzar frameworks com Tailwind CSS.

Exemple: Integrar Tailwind CSS

Afegeix aquest script al header.php:

<script src="https://cdn.tailwindcss.com"></script>

Després, utilitza classes Tailwind per estilitzar els elements:

<header class="bg-gray-800 text-white p-4">
    <h1 class="text-2xl font-bold"><?php bloginfo('name'); ?></h1>
</header>

7. Mostrar posts al tema

Per mostrar els posts del blog, utilitza el bucle de WordPress al index.php o home.php:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <article>
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <p><?php the_excerpt(); ?></p>
    </article>
<?php endwhile; else : ?>
    <p>No hi ha contingut per mostrar.</p>
<?php endif; ?>

8. Personalització amb widgets

Afegeix suport per widgets al teu tema amb aquest codi al functions.php:

<?php
function minimal_widgets_init() {
    register_sidebar(array(
        'name' => __('Sidebar Principal', 'minimal-theme'),
        'id' => 'main-sidebar',
        'before_widget' => '<div class="widget">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));
}
add_action('widgets_init', 'minimal_widgets_init');
?>

Després, mostra els widgets al teu tema:

<?php if (is_active_sidebar('main-sidebar')) : ?>
    <aside>
        <?php dynamic_sidebar('main-sidebar'); ?>
    </aside>
<?php endif; ?>

9. Finalitzar i activar el tema

Un cop complet, activa el teu tema:

Ves a Aparença > Temes al panell d’administració de WordPress.
Troba el teu tema i fes clic a Activa.

10. Consells finals

Prova i depura: Assegura’t que el tema funcioni correctament en navegadors diferents i sigui responsiu.
Segueix les bones pràctiques: Organitza els fitxers i escriu codi net i comentat.
Explora i aprèn més: WordPress té molta documentació i una comunitat activa per ajudar-te a millorar els teus coneixements.

Amb aquest procés, hauràs creat un tema funcional i personalitzat que pots adaptar a qualsevol projecte. La pràctica és clau per perfeccionar les teves habilitats!

Com Crear un Tema Personalitzat a WordPress