Crear un tema WordPress personalitzat utilitzant Tailwind CSS 3

Crear un tema WordPress personalitzat utilitzant Tailwind CSS 3 implica alguns passos clau des de la configuració inicial fins a la integració de Tailwind CSS en el teu tema. Aquí tens un resum dels passos necessaris:


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

  1. Navega al directori de temes del teu WordPress:

  3. cd wp-content/themes/
  4. Crea un nou directori per al teu tema:

  6. mkdir my-tailwind-theme
cd my-tailwind-theme
  7. Crea els fitxers necessaris:

  9. touch index.php style.css functions.php
  10. Afegeix la informació del tema a style.css:

  12. /*
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


9. Veure el Tema

Activa el teu tema des del tauler d'administració de WordPress i visualitza'l al navegador.

Resum Final

  1. Configura l'entorn de desenvolupament.
  2. Crea l'estructura del tema.
  3. Configura Tailwind CSS.
  4. Compila Tailwind CSS.
  5. Enqueja el CSS en WordPress.
  6. Crea plantilles de tema.
  7. Desenvolupa el tema utilitzant Tailwind CSS.
  8. Activa i visualitza el teu tema.

Aquest procés t'ajudarà a crear un tema de WordPress utilitzant Tailwind CSS 3, proporcionant-te una base sòlida per a personalitzacions addicionals.

Anterior crear una taula PowerGrid Tots els posts Següent GitHub Copilot