Byg et WooCommerce-tema fra bunden

WooCommerce er en populær e-handelsplatform, der giver dig mulighed for at oprette et godt designet og effektivt online-butikswebsted. Dette guide vil hjælpe dig med at opbygge et WooCommerce-tema fra bunden, med konkrete kodeeksempler.

Installer WooCommerce

Før du kan begynde at opbygge et WooCommerce-tema, skal du først installere WooCommerce-pluginet. For at gøre dette skal du logge ind på dit WordPress-dashboard og navigere til Plugins> Tilføj ny. Søg efter “WooCommerce” i søgefeltet, og klik på Installer nu-knappen. Når installationen er færdig, skal du klikke på Aktiver-knappen.

Opret et tema

Efter installation af WooCommerce skal du oprette et tema, som WooCommerce skal bruge til at vise dine sider. For at oprette et tema skal du oprette en mappe i din WordPress-installationsmappe /wp-content/themes. Giv mappen et navn, og opret derefter en ny fil kaldet style.css.

Indsæt temastil

Åbn style.css-filen i et teksteditorprogram og indsæt følgende kode:

/*
Theme Name: My WooCommerce Theme
Author: Your Name
Description: A custom WooCommerce theme
Version: 1.0
*/

Udskift derefter “My WooCommerce Theme” med navnet på dit tema, og “Your Name” med dit navn.

Indsæt temaskabelon

Opret nu en ny fil kaldet index.php og indsæt følgende kode. Dette er den grundlæggende temaskabelon:

<?php
get_header();
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

    <?php
    if ( have_posts() ) :

        if ( is_home() && ! is_front_page() ) : ?>
            <header>
                <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
            </header>

        <?php
        endif;

        /* Start the Loop */
        while ( have_posts() ) : the_post();

            /*
             * Include the Post-Format-specific template for the content.
             * If you want to override this in a child theme, then include a file
             * called content-___.php (where ___ is the Post Format name) and that will be used instead.
             */
            get_template_part( 'template-parts/content', get_post_format() );

        endwhile;

        the_posts_navigation();

    else :

        get_template_part( 'template-parts/content', 'none' );

    endif; ?>

    </main>><!-- #main -->
</div>><!-- #primary -->

<?php
get_sidebar();
get_footer();
?>

Skabelonen indeholder grundlæggende HTML-kode, der er nødvendig for at oprette et tema.

Tilføj WooCommerce-funktionalitet

Nu skal du tilføje WooCommerce-funktionalitet til dit tema. For at gøre dette skal du oprette en ny fil kaldet functions.php og indsæt følgende kode:

<?php
add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
    add_theme_support( 'woocommerce' );
}
?>

Denne kode aktiverer grundlæggende WooCommerce-funktionalitet i dit tema.

Tilføj WooCommerce-temaskabeloner

Efter at have aktiveret WooCommerce-funktionalitet skal du oprette WooCommerce-temaskabeloner. Disse skabeloner vil bestemme, hvordan dine butikssider ser ud. For at gøre dette skal du oprette en ny mappe kaldet woocommerce i din temamappe.

Opret derefter en ny fil kaldet content-product.php og indsæt følgende kode:

<?php
/**
 * The template for displaying product content in the single-product.php template
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/content-single-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.6.0
 */

defined( 'ABSPATH' ) || exit;

?>

<div id="product-<?php the_ID(); ?>" <?php wc_product_class(); ?>>

    <?php
        /**
         * Hook: woocommerce_before_single_product.
         *
         * @hooked woocommerce_output_all_notices - 10
         */
        do_action( 'woocommerce_before_single_product' );

        if ( post_password_required() ) {
            echo get_the_password_form(); // WPCS: XSS ok.
            return;
        }
    ?>

    <div class="summary entry-summary">

        <?php
            /**
             * Hook: woocommerce_single_product_summary.
             *
             * @hooked woocommerce_template_single_title - 5
             * @hooked woocommerce_template_single_rating - 10
             * @hooked woocommerce_template_single_price - 10
             * @hooked woocommerce_template_single_excerpt - 20
             * @hooked woocommerce_template_single_add_to_cart - 30
             * @hooked woocommerce_template_single_meta - 40
             * @hooked woocommerce_template_single_sharing - 50
             * @hooked WC_Structured_Data::generate_product_data() - 60
             */
            do_action( 'woocommerce_single_product_summary' );
        ?>

    </div>

    <?php
        /**
         * Hook: woocommerce_after_single_product_summary.
         *
         * @hooked woocommerce_output_product_data_tabs - 10
         * @hooked woocommerce_upsell_display - 15
         * @hooked woocommerce_output_related_products - 20
         */
        do_action( 'woocommerce_after_single_product_summary' );
    ?>
</div>

<?php do_action( 'woocommerce_after_single_product' ); ?>

Dette er den grundlæggende skabelon til produktsider. Du kan også tilføje skabeloner til produktlister, indkøbskurven og andre WooCommerce-sider.

Aktiver temaet

Når du har tilføjet alle de nødvendige kodefiler, skal du navigere til Udseende> Temaer i dit WordPress-dashboard, og aktiver dit tema. Når temaet er aktiveret, vil WooCommerce-siderne blive vist som det tema, du har oprettet.

Kodestykker