Code direkt in template File
PHP
<?php
// At the beginning of product-template.php
// Simple fields
$product_price = get_field('product_price');
$product_sku = get_field('product_sku');
$product_features = get_field('product_features');
// Group field
$product_specs = get_field('product_specs'); // Group field
$specs_dimensions = $product_specs['dimensions'];
$specs_weight = $product_specs['weight'];
$specs_material = $product_specs['material'];
// Repeater field
$product_gallery = get_field('product_gallery'); // Repeater field
?>
<div class="product">
<h2><?php echo esc_html(get_the_title()); ?></h2>
<div class="price"><?php echo esc_html($product_price); ?></div>
<div class="sku">SKU: <?php echo esc_html($product_sku); ?></div>
<?php if($product_features): ?>
<div class="features">
<?php echo wp_kses($product_features, ['p' => [], 'h1' => []]); ?>
</div>
<?php endif; ?>
<?php if($product_specs): ?>
<div class="specifications">
<h3>Product Specifications</h3>
<ul>
<?php if($specs_dimensions): ?>
<li>Dimensions: <?php echo esc_html($specs_dimensions); ?></li>
<?php endif; ?>
<?php if($specs_weight): ?>
<li>Weight: <?php echo esc_html($specs_weight); ?></li>
<?php endif; ?>
<?php if($specs_material): ?>
<li>Material: <?php echo esc_html($specs_material); ?></li>
<?php endif; ?>
</ul>
</div>
<?php endif; ?>
<?php if($product_gallery): ?>
<div class="gallery">
<h3>Product Gallery</h3>
<div class="gallery-grid">
<?php foreach($product_gallery as $gallery_item): ?>
<?php
$image = $gallery_item['image'];
$caption = $gallery_item['caption'];
?>
<div class="gallery-item">
<?php if($image): ?>
<img src="<?php echo esc_url($image['url']); ?>"
alt="<?php echo esc_attr($image['alt']); ?>">
<?php endif; ?>
<?php if($caption): ?>
<p class="caption"><?php echo esc_html($caption); ?></p>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
</div>Code als einfachen Shortcode ohne $atts herausgeben
PHP
<?php
/**
* Create a product display shortcode
*/
function product_display_shortcode() {
// Start output buffering to capture HTML
ob_start();
// Simple fields
$product_price = get_field('product_price');
$product_sku = get_field('product_sku');
$product_features = get_field('product_features');
// Group field
$product_specs = get_field('product_specs'); // Group field
$specs_dimensions = isset($product_specs['dimensions']) ? $product_specs['dimensions'] : '';
$specs_weight = isset($product_specs['weight']) ? $product_specs['weight'] : '';
$specs_material = isset($product_specs['material']) ? $product_specs['material'] : '';
// Repeater field
$product_gallery = get_field('product_gallery'); // Repeater field
?>
<div class="product">
<h2><?php echo esc_html(get_the_title()); ?></h2>
<div class="price"><?php echo esc_html($product_price); ?></div>
<div class="sku">SKU: <?php echo esc_html($product_sku); ?></div>
<?php if($product_features): ?>
<div class="features">
<?php echo wp_kses($product_features, ['p' => [], 'h1' => []]); ?>
</div>
<?php endif; ?>
<?php if($product_specs): ?>
<div class="specifications">
<h3>Product Specifications</h3>
<ul>
<?php if($specs_dimensions): ?>
<li>Dimensions: <?php echo esc_html($specs_dimensions); ?></li>
<?php endif; ?>
<?php if($specs_weight): ?>
<li>Weight: <?php echo esc_html($specs_weight); ?></li>
<?php endif; ?>
<?php if($specs_material): ?>
<li>Material: <?php echo esc_html($specs_material); ?></li>
<?php endif; ?>
</ul>
</div>
<?php endif; ?>
<?php if($product_gallery): ?>
<div class="gallery">
<h3>Product Gallery</h3>
<div class="gallery-grid">
<?php foreach($product_gallery as $gallery_item): ?>
<?php
$image = $gallery_item['image'];
$caption = $gallery_item['caption'];
?>
<div class="gallery-item">
<?php if($image): ?>
<img src="<?php echo esc_url($image['url']); ?>"
alt="<?php echo esc_attr($image['alt']); ?>">
<?php endif; ?>
<?php if($caption): ?>
<p class="caption"><?php echo esc_html($caption); ?></p>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
</div>
<?php
// Get the buffered content
$output = ob_get_clean();
// Return the output
return $output;
}
// Register the shortcode
add_shortcode('product_display', 'product_display_shortcode');Code als Shortcode mit $atts herausgeben
PHP
function product_display_shortcode($atts) {
// Parse attributes with defaults
$atts = shortcode_atts(
array(
'show_price' => 'yes', // Show/hide price
'show_gallery' => 'yes', // Show/hide gallery
'show_specs' => 'yes', // Show/hide specifications
'layout' => 'standard', // Layout style (standard, compact, full)
'gallery_columns' => '3', // Number of gallery columns
'title_tag' => 'h2', // HTML tag for the title
'css_class' => '', // Additional CSS class
'show_features' => 'yes', // Show/hide features section
'max_gallery_items' => '', // Limit number of gallery items
'button_text' => 'Buy Now', // Custom button text
'show_button' => 'yes' // Show/hide buy button
),
$atts,
'product_display'
);
// Start output buffering
ob_start();
// Get fields...
// Use attributes in your template
$show_price = ($atts['show_price'] === 'yes');
$show_gallery = ($atts['show_gallery'] === 'yes');
$show_specs = ($atts['show_specs'] === 'yes');
$show_features = ($atts['show_features'] === 'yes');
$show_button = ($atts['show_button'] === 'yes');
$layout_class = 'product-layout-' . esc_attr($atts['layout']);
$css_class = esc_attr($atts['css_class']);
$title_tag = tag_escape($atts['title_tag']);
$gallery_columns = absint($atts['gallery_columns']);
$max_gallery_items = !empty($atts['max_gallery_items']) ? absint($atts['max_gallery_items']) : null;
$button_text = esc_html($atts['button_text']);
// Your HTML with conditions based on attributes
?>
<div class="product <?php echo $layout_class; ?> <?php echo $css_class; ?>">
<<?php echo $title_tag; ?>><?php echo esc_html(get_the_title()); ?></<?php echo $title_tag; ?>>
<?php if($show_price && $product_price): ?>
<div class="price"><?php echo esc_html($product_price); ?></div>
<?php endif; ?>
<?php if($show_specs && $product_specs): ?>
<!-- Specs section here -->
<?php endif; ?>
<?php if($show_features && $product_features): ?>
<!-- Features section here -->
<?php endif; ?>
<?php
if($show_gallery && $product_gallery):
// If max items is set, limit the gallery
if($max_gallery_items) {
$product_gallery = array_slice($product_gallery, 0, $max_gallery_items);
}
?>
<div class="gallery gallery-columns-<?php echo $gallery_columns; ?>">
<!-- Gallery items here -->
</div>
<?php endif; ?>
<?php if($show_button): ?>
<a href="#" class="button product-button"><?php echo $button_text; ?></a>
<?php endif; ?>
</div>
<?php
return ob_get_clean();
}
// Register the shortcode with WordPress
add_shortcode('product_display', 'product_display_shortcode');