Includes front-page, strain archive/single templates, header/footer, functions.php with custom post types, and base styles.
224 lines
9.4 KiB
PHP
224 lines
9.4 KiB
PHP
<?php
|
|
/**
|
|
* Single Strain Template
|
|
* Displays individual strain details: THC%, CBD%, type, effects, and product image.
|
|
*
|
|
* @package Weedops
|
|
*/
|
|
|
|
get_header(); ?>
|
|
|
|
<main id="main" class="weedops-main">
|
|
<?php while ( have_posts() ) : the_post(); ?>
|
|
|
|
<article id="strain-<?php the_ID(); ?>" <?php post_class( 'strain-single' ); ?>>
|
|
|
|
<div class="strain-hero">
|
|
<div class="strain-hero__image">
|
|
<?php if ( has_post_thumbnail() ) : ?>
|
|
<?php the_post_thumbnail( 'large', [ 'class' => 'strain-hero__img' ] ); ?>
|
|
<?php else : ?>
|
|
<div class="strain-hero__placeholder">
|
|
<div class="strain-hero__placeholder-inner">
|
|
<span class="strain-hero__placeholder-icon">🌿</span>
|
|
<span class="strain-hero__placeholder-text">Product Image Coming Soon</span>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<div class="strain-hero__info">
|
|
<div class="strain-badge strain-badge--<?php echo esc_attr( get_post_meta( get_the_ID(), '_strain_type', true ) ); ?>">
|
|
<?php
|
|
$strain_type = get_post_meta( get_the_ID(), '_strain_type', true );
|
|
echo esc_html( ucfirst( $strain_type ? $strain_type : 'Unknown' ) );
|
|
?>
|
|
</div>
|
|
|
|
<h1 class="strain-title"><?php the_title(); ?></h1>
|
|
|
|
<div class="strain-potency">
|
|
<?php
|
|
$thc = get_post_meta( get_the_ID(), '_strain_thc', true );
|
|
$cbd = get_post_meta( get_the_ID(), '_strain_cbd', true );
|
|
?>
|
|
|
|
<?php if ( $thc !== '' ) : ?>
|
|
<div class="potency-card potency-card--thc">
|
|
<span class="potency-card__label">THC</span>
|
|
<span class="potency-card__value"><?php echo esc_html( $thc ); ?>%</span>
|
|
<div class="potency-bar">
|
|
<div class="potency-bar__fill potency-bar__fill--thc" style="width: <?php echo esc_attr( min( floatval( $thc ), 35 ) / 35 * 100 ); ?>%"></div>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if ( $cbd !== '' ) : ?>
|
|
<div class="potency-card potency-card--cbd">
|
|
<span class="potency-card__label">CBD</span>
|
|
<span class="potency-card__value"><?php echo esc_html( $cbd ); ?>%</span>
|
|
<div class="potency-bar">
|
|
<div class="potency-bar__fill potency-bar__fill--cbd" style="width: <?php echo esc_attr( min( floatval( $cbd ), 25 ) / 25 * 100 ); ?>%"></div>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<?php
|
|
$effects_raw = get_post_meta( get_the_ID(), '_strain_effects', true );
|
|
$effects = array_filter( array_map( 'trim', explode( ',', $effects_raw ) ) );
|
|
if ( ! empty( $effects ) ) :
|
|
?>
|
|
<div class="strain-effects">
|
|
<h3 class="strain-effects__heading">Effects</h3>
|
|
<div class="strain-effects__tags">
|
|
<?php foreach ( $effects as $effect ) : ?>
|
|
<span class="effect-tag"><?php echo esc_html( $effect ); ?></span>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<?php if ( get_the_content() ) : ?>
|
|
<div class="strain-description">
|
|
<h2 class="strain-description__heading">About This Strain</h2>
|
|
<div class="strain-description__content">
|
|
<?php the_content(); ?>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="strain-compliance-notice">
|
|
<p>⚠️ For use only by adults 21+. Keep out of reach of children. This product has not been evaluated by the FDA.</p>
|
|
</div>
|
|
|
|
<nav class="strain-nav">
|
|
<?php
|
|
$prev = get_previous_post();
|
|
$next = get_next_post();
|
|
if ( $prev ) :
|
|
?>
|
|
<a href="<?php echo esc_url( get_permalink( $prev ) ); ?>" class="strain-nav__link strain-nav__link--prev">
|
|
← <?php echo esc_html( get_the_title( $prev ) ); ?>
|
|
</a>
|
|
<?php endif; ?>
|
|
<a href="<?php echo esc_url( get_post_type_archive_link( 'strain' ) ); ?>" class="strain-nav__link strain-nav__link--archive">
|
|
All Strains
|
|
</a>
|
|
<?php if ( $next ) : ?>
|
|
<a href="<?php echo esc_url( get_permalink( $next ) ); ?>" class="strain-nav__link strain-nav__link--next">
|
|
<?php echo esc_html( get_the_title( $next ) ); ?> →
|
|
</a>
|
|
<?php endif; ?>
|
|
</nav>
|
|
|
|
</article>
|
|
|
|
<?php endwhile; ?>
|
|
</main>
|
|
|
|
<style>
|
|
/* ── Single Strain Styles ─────────────────────────────── */
|
|
.strain-single { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }
|
|
|
|
.strain-hero {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 3rem;
|
|
align-items: start;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.strain-hero { grid-template-columns: 1fr; gap: 1.5rem; }
|
|
}
|
|
|
|
/* Image / Placeholder */
|
|
.strain-hero__img { width: 100%; border-radius: 12px; object-fit: cover; aspect-ratio: 4/3; }
|
|
.strain-hero__placeholder {
|
|
width: 100%; aspect-ratio: 4/3;
|
|
background: linear-gradient(135deg, #1a3a1a 0%, #2d5a2d 100%);
|
|
border-radius: 12px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
border: 2px dashed #4a8c4a;
|
|
}
|
|
.strain-hero__placeholder-inner { text-align: center; color: #8ec88e; }
|
|
.strain-hero__placeholder-icon { font-size: 3rem; display: block; margin-bottom: .5rem; }
|
|
.strain-hero__placeholder-text { font-size: .9rem; letter-spacing: .05em; }
|
|
|
|
/* Badge */
|
|
.strain-badge {
|
|
display: inline-block;
|
|
padding: .3rem .9rem;
|
|
border-radius: 999px;
|
|
font-size: .75rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: .08em;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.strain-badge--indica { background: #4a148c; color: #e1bee7; }
|
|
.strain-badge--sativa { background: #e65100; color: #ffe0b2; }
|
|
.strain-badge--hybrid { background: #1b5e20; color: #c8e6c9; }
|
|
|
|
/* Title */
|
|
.strain-title { font-size: 2.5rem; font-weight: 800; margin: 0 0 1.5rem; color: #1a3a1a; line-height: 1.2; }
|
|
|
|
/* Potency */
|
|
.strain-potency { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
|
|
.potency-card {
|
|
flex: 1; min-width: 120px;
|
|
background: #f4f9f4;
|
|
border-radius: 10px;
|
|
padding: 1rem;
|
|
border-left: 4px solid;
|
|
}
|
|
.potency-card--thc { border-color: #388e3c; }
|
|
.potency-card--cbd { border-color: #0288d1; }
|
|
.potency-card__label { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #666; }
|
|
.potency-card__value { display: block; font-size: 2rem; font-weight: 800; color: #1a3a1a; line-height: 1.1; margin-bottom: .4rem; }
|
|
.potency-bar { height: 6px; background: #ddd; border-radius: 3px; overflow: hidden; }
|
|
.potency-bar__fill--thc { height: 100%; background: #388e3c; border-radius: 3px; transition: width .4s ease; }
|
|
.potency-bar__fill--cbd { height: 100%; background: #0288d1; border-radius: 3px; transition: width .4s ease; }
|
|
|
|
/* Effects */
|
|
.strain-effects__heading { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #555; margin-bottom: .6rem; }
|
|
.strain-effects__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
|
|
.effect-tag {
|
|
background: #e8f5e9; color: #2e7d32;
|
|
border: 1px solid #a5d6a7;
|
|
border-radius: 999px;
|
|
padding: .25rem .8rem;
|
|
font-size: .85rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Description */
|
|
.strain-description { background: #f9fafb; border-radius: 12px; padding: 2rem; margin-bottom: 2rem; }
|
|
.strain-description__heading { font-size: 1.3rem; font-weight: 700; color: #1a3a1a; margin-top: 0; }
|
|
|
|
/* Compliance */
|
|
.strain-compliance-notice {
|
|
background: #fff8e1; border-left: 4px solid #fbc02d;
|
|
border-radius: 6px; padding: .8rem 1.2rem;
|
|
font-size: .8rem; color: #5d4037;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.strain-compliance-notice p { margin: 0; }
|
|
|
|
/* Nav */
|
|
.strain-nav { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid #e0e0e0; }
|
|
.strain-nav__link {
|
|
color: #2e7d32; font-weight: 600; text-decoration: none;
|
|
padding: .5rem 1rem; border-radius: 6px;
|
|
border: 1px solid #a5d6a7;
|
|
transition: background .2s;
|
|
}
|
|
.strain-nav__link:hover { background: #e8f5e9; }
|
|
.strain-nav__link--archive { background: #2e7d32; color: #fff; border-color: #2e7d32; }
|
|
.strain-nav__link--archive:hover { background: #1b5e20; }
|
|
</style>
|
|
|
|
<?php get_footer(); ?>
|