Crear un tema WordPress personalitzat utilitzant Tailwind CSS 3

Categoria: framework | Publicat el 17 Jan, 2025

1. Configurar l'Entorn de Desenvolupament

Instal·lar Node.js i npm

Assegura't de tenir Node.js i npm instal·lats al teu sistema.

2. Crear l'Estructura del Tema

Navega al directori de temes del teu WordPress:
```
cd wp-content/themes/
```
Crea un nou directori per al teu tema:

mkdir my-tailwind-theme
cd my-tailwind-theme

Crea els fitxers necessaris:
```
touch index.php style.css functions.php
```
Afegeix la informació del tema a style.css:

/*
Theme Name: My Tailwind Theme
Theme URI: http://example.com/my-tailwind-theme
Author: Your Name
Author URI: http://example.com
Description: A custom WordPress theme using Tailwind CSS.
Version: 1.0
*/

3. Configurar Tailwind CSS

Inicialitzar npm

npm init -y

Instal·lar Tailwind CSS

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init

Això crearà un fitxer tailwind.config.js.

Configurar Tailwind CSS

Obre tailwind.config.js i configura el camí dels teus fitxers de plantilla:

module.exports = {
  content: [
    './*.php',
    './**/*.php',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Public code references from 5 repositories

Crea un fitxer postcss.config.js amb el següent contingut:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

4. Crear els Fitxers CSS

Crea un fitxer src/styles.css amb el següent contingut:

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Compilar Tailwind CSS

Afegeix els scripts de compilació al package.json:

"scripts": {
  "build": "tailwindcss -i ./src/styles.css -o ./style.css --minify",
  "watch": "tailwindcss -i ./src/styles.css -o ./style.css --watch"
}

Compila Tailwind CSS:

npm run build

6. Enquejar el CSS en WordPress

Obre functions.php i afegeix el següent codi per enquejar el CSS generat:

function my_tailwind_theme_enqueue_styles() {
    wp_enqueue_style('tailwindcss', get_template_directory_uri() . '/style.css', array(), '1.0');
}
add_action('wp_enqueue_scripts', 'my_tailwind_theme_enqueue_styles');

7. Crear Plantilles de Tema

Crea les plantilles necessàries com header.php, footer.php, etc. Per exemple, header.php podria ser:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="bg-blue-500 text-white p-4">
    <h1><?php bloginfo('name'); ?></h1>
    <p><?php bloginfo('description'); ?></p>
</header>

8. Desenvolupar el Tema

Comença a desenvolupar el teu tema utilitzant les utilitats de Tailwind CSS. Per exemple, en el teu index.php:

<?php get_header(); ?>
<main class="container mx-auto p-4">
    <?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            ?>
            <article class="mb-4">
                <h2 class="text-xl font-bold"><?php the_title(); ?></h2>
                <div><?php the_content(); ?></div>
            </article>
            <?php
        endwhile;
    else :
        echo '<p>No posts found</p>';
    endif;
    ?>
</main>
<?php get_footer(); ?>

Public code references from 5 repositories