49. Construyendo un Tema Completo | Field Forge - Campos personalizados, diseñados para la velocidad

Un ejemplo completo del mundo real que muestra un tema que utiliza Field Forge para todo el contenido personalizado.

Estructura del Tema

theme-starter/
  style.css
  functions.php
  header.php
  footer.php
  front-page.php
  single.php
  single-product.php
  archive-product.php
  page-builder.php
  blocks/
    hero.php
    testimonial.php
  template-parts/
    builder/
      hero.php
      text-block.php
      features.php
      cta.php
  fieldforge-json/
  inc/
    fieldforge-setup.php
    template-functions.php

functions.php

<?php
require_once get_template_directory() . '/inc/fieldforge-setup.php';

add_action( 'after_setup_theme', function() {
    add_theme_support( 'title-tag' );
    add_theme_support( 'post-thumbnails' );
    register_nav_menus( [ 'primary' => 'Primary Menu', 'footer' => 'Footer Menu' ] );
} );

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style( 'theme-style', get_stylesheet_uri(), [], '1.0.0' );
} );

add_action( 'init', function() {
    if ( ! function_exists( 'fieldforge_register_block_type' ) ) {
        return;
    }
    fieldforge_register_block_type( [
        'name'            => 'hero',
        'title'           => 'Hero Section',
        'icon'            => 'cover-image',
        'render_template' => get_template_directory() . '/blocks/hero.php',
        'enqueue_style'   => get_template_directory_uri() . '/blocks/hero.css',
        'supports'        => [ 'align' => [ 'full', 'wide' ] ],
    ] );
} );

Encabezado con Opciones

<?php // header.php ?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="site-header">
    <div class="container">
        <?php $logo = get_field( 'site_logo', 'options' );
        if ( $logo ) : ?>
            <a href="<?php echo esc_url( home_url() ); ?>" class="site-logo">
                <img src="<?php echo esc_url( $logo['url'] ); ?>"
                     alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
            </a>
        <?php endif; ?>
        <nav><?php wp_nav_menu( [ 'theme_location' => 'primary', 'container' => false ] ); ?></nav>
    </div>
</header>

Plantilla de Constructor de Páginas

<?php
/**
 * Template Name: Page Builder
 */
get_header(); ?>
<main class="page-builder">
    <?php if ( have_rows( 'page_sections' ) ) : ?>
        <?php while ( have_rows( 'page_sections' ) ) : the_row(); ?>
            <?php get_template_part( 'template-parts/builder/' . str_replace( '_', '-', get_row_layout() ) ); ?>
        <?php endwhile; ?>
    <?php else : ?>
        <div class="container"><?php the_content(); ?></div>
    <?php endif; ?>
</main>
<?php get_footer(); ?>

Optimización del Rendimiento

// Preload for secondary queries
function theme_render_related_posts() {
    $related = new WP_Query( [
        'post_type'      => 'post',
        'posts_per_page' => 4,
        'post__not_in'   => [ get_the_ID() ],
    ] );

    if ( $related->have_posts() ) {
        fieldforge_preload( wp_list_pluck( $related->posts, 'ID' ) );
        echo '<section class="related-posts"><h2>Related Posts</h2>';
        while ( $related->have_posts() ) : $related->the_post();
            echo '<article>';
            echo '<h3><a href="' . get_permalink() . '">' . get_the_title() . '</a></h3>';
            $subtitle = get_field( 'subtitle' ); // Served from cache
            if ( $subtitle ) {
                echo '<p>' . esc_html( $subtitle ) . '</p>';
            }
            echo '</article>';
        endwhile;
        echo '</section>';
        wp_reset_postdata();
    }
}

—