feat: one breadcrumb, same place and style on every inner page
- Plugin: vc_breadcrumb_trail()/vc_breadcrumb_html(); tours, region, city and tag pages show Home / (Region) / Page in the banner instead of the generic 'Tour & Travel' label; the tour page uses the same helper - Theme: blog list shows Home / Blog; blog post title, breadcrumb and meta move into the banner like the other pages - Shared style: title's colour (white in photo banners, black on About), softer links, current page bold and shortened if long - also on phones - Plugin 1.9.6, theme 1.0.16 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -62,13 +62,6 @@ body.hoho-fullwidth{overflow-x:hidden;}
|
||||
/* A page's own Featured Image banner is shown as-is: no brand-teal tint. */
|
||||
.hoho-page.hoho-page .hero--has-thumb .hero__media::after{display:none;}
|
||||
|
||||
/* Blog post header: real titles are long — use the full width (the design's
|
||||
28rem cap wrapped them to four lines) with the meta underneath, and a
|
||||
normal gap before the article instead of the design's ~100px. */
|
||||
.hoho-page.hoho-page .post__head{flex-direction:column;align-items:flex-start;gap:var(--sp-2);margin-block-end:0;}
|
||||
.hoho-page.hoho-page .post__title{max-width:none;}
|
||||
.hoho-page.hoho-page .post__head + .post__body{margin-block-start:calc(var(--sp-5) - clamp(3rem, 2rem + 3vw, 6.25rem));}
|
||||
|
||||
/* Article headings by level (imported posts use h2–h6). */
|
||||
.hoho-page.hoho-page .hoho-prose h2{margin:var(--sp-4) 0 0;font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem);font-weight:700;line-height:1.25;}
|
||||
.hoho-page.hoho-page .hoho-prose h3{margin:var(--sp-3) 0 0;font-size:1.25rem;font-weight:700;line-height:1.3;}
|
||||
@@ -82,3 +75,22 @@ body.hoho-fullwidth{overflow-x:hidden;}
|
||||
|
||||
/* Embedded maps/videos: full width, sensible height. */
|
||||
.hoho-page.hoho-page .hoho-prose iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:var(--r-card);}
|
||||
|
||||
/* Breadcrumb — same rules as the plugin pages (VC_Display::astra_overrides):
|
||||
first thing above the page title, in the title's colour; links softer,
|
||||
current page bold and shortened if long. */
|
||||
.hoho-page.hoho-page .crumbs{color:inherit;}
|
||||
.hoho-page.hoho-page .crumbs__list{color:inherit;font-size:.8125rem;font-weight:500;}
|
||||
.hoho-page.hoho-page .crumbs__list a{opacity:.75;}
|
||||
.hoho-page.hoho-page .crumbs__list a:hover{opacity:1;}
|
||||
.hoho-page.hoho-page .crumbs__list [aria-current]{max-width:min(40ch,60vw);overflow:hidden;font-weight:700;text-overflow:ellipsis;white-space:nowrap;}
|
||||
/* the design paints .hero--page breadcrumbs black; follow the title instead */
|
||||
.hoho-page.hoho-page .hero .crumbs,.hoho-page.hoho-page .hero .crumbs__list{color:var(--c-white);}
|
||||
.hoho-page.hoho-page .hero--about .crumbs,.hoho-page.hoho-page .hero--about .crumbs__list{color:var(--c-black);}
|
||||
.hoho-page.hoho-page .hero__content>.crumbs{margin-block-end:calc(var(--sp-1) * -1);}
|
||||
|
||||
/* Blog post: title, breadcrumb and meta sit in the banner like every page. */
|
||||
.hoho-page.hoho-page .hero--post .hero__title{max-width:none;font-size:clamp(1.75rem,1.2rem + 2vw,3rem);line-height:1.15;}
|
||||
.hoho-page.hoho-page .hero--post .tmeta{order:3;color:var(--c-white);}
|
||||
.hoho-page.hoho-page .hero--post .tmeta__rule{background:rgba(255,255,255,.4);}
|
||||
.hoho-page.hoho-page .hero--post .hero__content{gap:var(--sp-3);}
|
||||
|
||||
@@ -23,10 +23,10 @@ add_action( 'wp_enqueue_scripts', function () {
|
||||
if ( wp_style_is( 'astra-theme-css', 'registered' ) ) {
|
||||
$deps[] = 'astra-theme-css';
|
||||
}
|
||||
wp_enqueue_style( 'hoho-chrome', get_stylesheet_directory_uri() . '/assets/chrome.css', $deps, '1.0.15' );
|
||||
wp_enqueue_style( 'hoho-chrome', get_stylesheet_directory_uri() . '/assets/chrome.css', $deps, '1.0.16' );
|
||||
|
||||
// Header interactions: burger, submenu, sticky, back-to-top, search toggle.
|
||||
wp_enqueue_script( 'hoho-chrome', get_stylesheet_directory_uri() . '/assets/chrome.js', array(), '1.0.15', true );
|
||||
wp_enqueue_script( 'hoho-chrome', get_stylesheet_directory_uri() . '/assets/chrome.js', array(), '1.0.16', true );
|
||||
|
||||
wp_add_inline_style(
|
||||
'hoho-chrome',
|
||||
|
||||
@@ -64,6 +64,35 @@ function hoho_banner_url( $fallback ) {
|
||||
return $url ? $url : hoho_asset( 'img/' . $fallback . '.webp' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Breadcrumb in the same markup as the plugin's vc_breadcrumb_html(), so
|
||||
* every page shares one style. $trail: list of [label, url]; Home is added.
|
||||
*/
|
||||
function hoho_breadcrumb_html( array $trail, $current ) {
|
||||
$trail = array_merge( array( array( __( 'Home', 'hoponhopoff' ), home_url( '/' ) ) ), $trail );
|
||||
$out = '<nav class="crumbs" aria-label="' . esc_attr__( 'Breadcrumb', 'hoponhopoff' ) . '"><ol class="crumbs__list">';
|
||||
foreach ( $trail as $item ) {
|
||||
$out .= '<li><a href="' . esc_url( $item[1] ) . '">' . esc_html( $item[0] ) . '</a></li>';
|
||||
}
|
||||
return $out . '<li aria-current="page">' . esc_html( $current ) . '</li></ol></nav>';
|
||||
}
|
||||
|
||||
/**
|
||||
* URL of the blog list (the Posts page, else a page slugged blogs/blog).
|
||||
*/
|
||||
function hoho_blog_url() {
|
||||
if ( get_option( 'page_for_posts' ) ) {
|
||||
return get_permalink( get_option( 'page_for_posts' ) );
|
||||
}
|
||||
foreach ( hoho_page_slugs()['blog'] as $slug ) {
|
||||
$page = get_page_by_path( $slug );
|
||||
if ( $page ) {
|
||||
return get_permalink( $page );
|
||||
}
|
||||
}
|
||||
return home_url( '/blogs/' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Social profile links (footer + contact page). Override with the
|
||||
* `hoho_socials` filter.
|
||||
|
||||
@@ -5,7 +5,7 @@ Description: Astra child theme that replaces the Astra header and footer with th
|
||||
Author: Amir Bagheri
|
||||
Author URI: https://ravisite.com
|
||||
Template: astra
|
||||
Version: 1.0.15
|
||||
Version: 1.0.16
|
||||
Text Domain: hoponhopoff
|
||||
*/
|
||||
|
||||
|
||||
@@ -45,7 +45,7 @@ for ( $n = 1; $n <= $hoho_max; $n++ ) {
|
||||
</div>
|
||||
|
||||
<div class="container hero__content">
|
||||
<p class="pill hero__eyebrow"><?php echo esc_html__( 'Tour & Travel Articles', 'hoponhopoff' ); ?></p>
|
||||
<?php echo hoho_breadcrumb_html( array(), __( 'Blog', 'hoponhopoff' ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
||||
<h1 class="hero__title"><?php echo esc_html__( 'HOHO Weblog', 'hoponhopoff' ); ?></h1>
|
||||
|
||||
<form class="filters filters--blog" id="filters" method="get" action="<?php echo esc_url( $hoho_base ); ?>" role="search">
|
||||
|
||||
@@ -38,7 +38,7 @@ if ( count( $hoho_related ) < 4 ) {
|
||||
)
|
||||
);
|
||||
}
|
||||
$hoho_blog_url = get_option( 'page_for_posts' ) ? get_permalink( get_option( 'page_for_posts' ) ) : home_url( '/blogs/' );
|
||||
$hoho_blog_url = hoho_blog_url();
|
||||
|
||||
/**
|
||||
* One review card in the design's markup.
|
||||
@@ -63,6 +63,23 @@ $hoho_review = function ( $comment, $classes ) use ( $hoho_post_id ) {
|
||||
<section class="hero hero--post">
|
||||
<div class="hero__media">
|
||||
<img class="hero__img" src="<?php echo esc_url( hoho_post_image_url( $hoho_post_id, 'full' ) ); ?>" alt="" fetchpriority="high" />
|
||||
<div class="hero__scrim" aria-hidden="true"></div>
|
||||
</div>
|
||||
<div class="container hero__content">
|
||||
<?php echo hoho_breadcrumb_html( array( array( __( 'Blog', 'hoponhopoff' ), hoho_blog_url() ) ), get_the_title() ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
||||
<h1 class="hero__title post__title"><?php the_title(); ?></h1>
|
||||
<div class="tmeta">
|
||||
<?php if ( $hoho_cats ) : ?>
|
||||
<span class="tmeta__item"><?php echo hoho_icon( 'location', 'tmeta__icon' ); // phpcs:ignore ?><?php echo esc_html( $hoho_cats[0]->name ); ?></span>
|
||||
<span class="tmeta__rule" aria-hidden="true"></span>
|
||||
<?php endif; ?>
|
||||
<span class="tmeta__item"><?php echo hoho_icon( 'calendar', 'tmeta__icon' ); // phpcs:ignore ?><?php echo esc_html( get_the_date() ); ?></span>
|
||||
<span class="tmeta__rule" aria-hidden="true"></span>
|
||||
<span class="tmeta__item"><?php echo hoho_icon( 'person', 'tmeta__icon' ); // phpcs:ignore ?><?php
|
||||
/* translators: %s: author name. */
|
||||
echo esc_html( sprintf( __( 'from %s', 'hoponhopoff' ), get_the_author() ) );
|
||||
?></span>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
if ( function_exists( 'vc_ring_badge' ) ) {
|
||||
@@ -74,22 +91,6 @@ $hoho_review = function ( $comment, $classes ) use ( $hoho_post_id ) {
|
||||
<article class="section post" id="post">
|
||||
<div class="container">
|
||||
<div class="post__inner">
|
||||
<header class="tour-head post__head">
|
||||
<h1 class="post__title"><?php the_title(); ?></h1>
|
||||
<div class="tmeta">
|
||||
<?php if ( $hoho_cats ) : ?>
|
||||
<span class="tmeta__item"><?php echo hoho_icon( 'location', 'tmeta__icon' ); // phpcs:ignore ?><?php echo esc_html( $hoho_cats[0]->name ); ?></span>
|
||||
<span class="tmeta__rule" aria-hidden="true"></span>
|
||||
<?php endif; ?>
|
||||
<span class="tmeta__item"><?php echo hoho_icon( 'calendar', 'tmeta__icon' ); // phpcs:ignore ?><?php echo esc_html( get_the_date() ); ?></span>
|
||||
<span class="tmeta__rule" aria-hidden="true"></span>
|
||||
<span class="tmeta__item"><?php echo hoho_icon( 'person', 'tmeta__icon' ); // phpcs:ignore ?><?php
|
||||
/* translators: %s: author name. */
|
||||
echo esc_html( sprintf( __( 'from %s', 'hoponhopoff' ), get_the_author() ) );
|
||||
?></span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="post__body">
|
||||
<div class="hoho-prose">
|
||||
<?php the_content(); ?>
|
||||
|
||||
Reference in New Issue
Block a user