هر قالب یه سری ساختار خاص خودشو داره. قالب ها میان هر بخش از سایت رو به چدین فایل تقسیم بندی می کنن و داخلش کدهاشو قرار میدن و به صورت شاخه ای کدنویسی می کنن.
برای قالب ریهاب باید فایل product-image.php که در مسیر زیر هست رو ویرایش کنید:
woocommerce\single-product
داخل این فایل کدی به صورت زیر هست:
<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: <?php echo ''.$opacityinit;?>; transition: opacity .25s ease-in-out;">
<figure class="woocommerce-product-gallery__wrapper">
<?php
if ( $post_thumbnail_id ) {
$html = wc_get_gallery_image_html( $post_thumbnail_id, true );
} else {
$html = '<div class="woocommerce-product-gallery__image--placeholder">';
$html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src('woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'rehub-theme' ) );
$html .= '</div>';
}
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped
?>
<?php do_action( 'woocommerce_product_thumbnails' ); ?>
</figure>
<?php do_action( 'rehub_360_product_image' ); ?>
</div>
حالا ما داخل این کد که مربوط به تصویر محصول هست، کد زمینه دلخواه رو به صورت شرطی به انتهاش، قبل از بسته شدن div اضافه می کنیم. یک div جدید هم تعریف می کنیم برای استایل دهی بهتر. مثال:
<?php if( get_field('custom_title') ): ?>
<div class="betalkacf">
<?php the_field('custom_title'); ?>
</div>
<?php endif;?>
توی کد بالا یه دستور شرطی برای زمینه دلخواه custom_title نوشتم. شما اون نامک انگلیسی زمینه دلخواه رو بجای هر دوتا وارد می کنید. عملکردشم اینطوریه که اگه مقداری برای اون زمینه دلخواه وارد نشده باشه، کلا خروجی نمیده و اون div خودمون رو هم مخفی می کنه.
در نتیجه کد ما اینطوریه:
<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: <?php echo ''.$opacityinit;?>; transition: opacity .25s ease-in-out;">
<figure class="woocommerce-product-gallery__wrapper">
<?php
if ( $post_thumbnail_id ) {
$html = wc_get_gallery_image_html( $post_thumbnail_id, true );
} else {
$html = '<div class="woocommerce-product-gallery__image--placeholder">';
$html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src('woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'rehub-theme' ) );
$html .= '</div>';
}
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped
?>
<?php do_action( 'woocommerce_product_thumbnails' ); ?>
</figure>
<?php do_action( 'rehub_360_product_image' ); ?>
<?php if( get_field('custom_title') ): ?>
<div class="betalkacf">
<?php the_field('custom_title'); ?>
</div>
<?php endif;?>
</div>
