working on parcours renovateur
This commit is contained in:
parent
e33448f943
commit
73014daa08
51
resources/css/pages/single-parcours.css
Normal file
51
resources/css/pages/single-parcours.css
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
.homegrade-page--parcours {
|
||||||
|
aside {
|
||||||
|
@apply py-4;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
@apply text-4xl font-bold;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
@apply text-3xl font-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parcours-steps {
|
||||||
|
@apply flex flex-col gap-y-6;
|
||||||
|
}
|
||||||
|
.parcours-other-steps-suggestion {
|
||||||
|
@apply bg-white !p-6 !pr-16 rounded-3xl shadowed flex items-center gap-4;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
&:hover {
|
||||||
|
@apply translate-x-4 !bg-white !rounded-3xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-icon {
|
||||||
|
@apply w-12 h-12 relative;
|
||||||
|
}
|
||||||
|
span::after {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
content: ' ';
|
||||||
|
@apply inline-block absolute w-3 h-3 right-6 top-1/2 -translate-y-1/2 filter-secondary;
|
||||||
|
background-image: url('../resources/img/graphic-assets/chevron_right.svg');
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.parcours-steps {
|
||||||
|
@apply sticky top-0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-steps-index {
|
||||||
|
@apply !static;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-steps-index {
|
||||||
|
@apply chapter_index;
|
||||||
|
|
||||||
|
.chapter_index__title {
|
||||||
|
@apply my-0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,7 +1,14 @@
|
||||||
.parcours-steps-container {
|
.parcours-steps-container {
|
||||||
@apply md:grid grid-cols-3 gap-12;
|
@apply md:grid grid-cols-3 gap-12 pt-8 pb-24;
|
||||||
|
|
||||||
/* .step-container {
|
.card {
|
||||||
@apply bg-gray p-6 rounded-lg;
|
h2 {
|
||||||
} */
|
@apply !my-4;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-icon {
|
||||||
|
@apply w-12 h-12 relative;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,33 +1,111 @@
|
||||||
<?php
|
<?php
|
||||||
get_header();
|
$chapters = new WP_Query(array(
|
||||||
|
'post_type' => 'parcours',
|
||||||
|
'posts_per_page' => -1,
|
||||||
|
'orderby' => 'menu_order',
|
||||||
|
'order' => 'ASC',
|
||||||
|
'status' => 'publish',
|
||||||
|
'post_parent' => get_queried_object_id(),
|
||||||
|
));
|
||||||
|
|
||||||
|
|
||||||
|
$otherSteps = new WP_Query(array(
|
||||||
|
'post_type' => 'parcours',
|
||||||
|
'posts_per_page' => -1,
|
||||||
|
'orderby' => 'menu_order',
|
||||||
|
'order' => 'ASC',
|
||||||
|
'status' => 'publish',
|
||||||
|
'post_parent' => 0,
|
||||||
|
'post__not_in' => array(get_queried_object_id())
|
||||||
|
));
|
||||||
|
|
||||||
?>
|
?>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<nav class=" breadcrumbs_navigation" aria-label="<?php echo __("Vous êtes ici", "homegrade-theme__texte-fonctionnel") ?>">
|
||||||
|
<?php
|
||||||
|
$archiveParcours = get_page_by_template('template-parcours-renovateur.php')[0];
|
||||||
|
|
||||||
|
?>
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
<a href="<?php echo home_url() ?>" title="<?php echo __("Accueil", "homegrade-theme__texte-fonctionnel") ?>">
|
||||||
|
<img src="<?php echo get_template_directory_uri() . "/resources/img/pictogrammes/icon_house_dark.svg" ?>" alt="">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="<?php echo get_post_permalink($archiveParcours) ?>"><?php echo $archiveParcours->post_title ?></a></li>
|
||||||
|
<li><a href="<?php echo the_permalink() ?>" aria-current="location" aria-disabled="true"><?php echo get_queried_object()->post_title ?></a></li>
|
||||||
|
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
|
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
|
||||||
<article class="container my-8 mx-auto entry-content single-editor-content <?php echo $thematiqueColorSlug ? "entry-content--" . $thematiqueColorSlug : "" ?>">
|
<?php
|
||||||
<h1>parent</h1>
|
$pageIcon = get_field('page_icon', $archiveParcours->ID);
|
||||||
<!-- CHAPTER INDEX -->
|
get_template_part("template-components/heading-box--parcours", null, array(
|
||||||
<aside class="chapter_index">
|
"pageIcon" => $pageIcon,
|
||||||
<?php if ($chapterBlockIndex) : ?>
|
"subtitle" => __("Parcours rénovateur", "homegrade-theme__texte-fonctionnel"),
|
||||||
<div class="chapter_index__titling">
|
"title" => get_the_title(),
|
||||||
<div class="icon">
|
"icon" => $pageIcon,
|
||||||
<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/icon-feather-menu.svg' ?>" alt="">
|
));
|
||||||
</div>
|
?>
|
||||||
<h2 class="chapter_index__title"> <?php echo __("Dans ce conseil", "homegrade-theme__texte-fonctionnel") ?> </h2>
|
|
||||||
|
<div class="parcours-content-wrapper conseils_wrapper">
|
||||||
|
<aside>
|
||||||
|
<div class="parcours-steps">
|
||||||
|
<div class="current-steps-index">
|
||||||
|
<?php if ($chapters->posts) : ?>
|
||||||
|
<div class="chapter_index__titling">
|
||||||
|
<div class="icon">
|
||||||
|
<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/icon-feather-menu.svg' ?>" alt="">
|
||||||
|
</div>
|
||||||
|
<h2 class="chapter_index__title"> <?php echo __("Dans ce parcours", "homegrade-theme__texte-fonctionnel") ?> </h2>
|
||||||
|
</div>
|
||||||
|
<ul class="chapter_index__list">
|
||||||
|
<div class="chapter_index__position-indicator"></div>
|
||||||
|
<?php foreach ($chapters->posts as $chapter) : ?>
|
||||||
|
<?php
|
||||||
|
$shortTitle = get_field('short_title', $chapter->ID);
|
||||||
|
?>
|
||||||
|
<li class="chapter_index__link"><a href="#<?php echo $chapter->post_name ?>"><?php echo $chapter->post_title ?></a></li>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</ul>
|
||||||
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
<ul class="chapter_index__list">
|
|
||||||
<div class="chapter_index__position-indicator"></div>
|
<?php foreach ($otherSteps->posts as $otherStep) : ?>
|
||||||
<?php foreach ($chapterBlockIndex as $chapter) : ?>
|
<a class="parcours-other-steps-suggestion" href="<?php echo get_the_permalink($otherStep->ID) ?>">
|
||||||
<li class="chapter_index__link"><a href="<?php echo $chapter['anchor'] ?>"><?php echo $chapter['title'] ?></a></li>
|
<?php
|
||||||
<?php endforeach; ?>
|
|
||||||
</ul>
|
$stepIcon = get_field('step_icon', $otherStep->ID);
|
||||||
<?php endif; ?>
|
?>
|
||||||
|
<?php if ($stepIcon) : ?>
|
||||||
|
<img class="step-icon" src="<?php echo $stepIcon['url'] ?>" alt="">
|
||||||
|
<?php endif; ?>
|
||||||
|
<span><?php echo $otherStep->post_title ?></span>
|
||||||
|
</a>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
<?php the_content() ?>
|
|
||||||
</article>
|
|
||||||
|
<article class="container my-8 mx-auto entry-content single-editor-content">
|
||||||
|
<?php foreach ($chapters->posts as $chapter) : ?>
|
||||||
|
<?php if ($chapter->post_content) : ?>
|
||||||
|
<div id="<?php echo $chapter->post_name ?>" class="parcours-chapter-container">
|
||||||
|
<h2><?php echo $chapter->post_title ?></h2>
|
||||||
|
|
||||||
|
<img src="" alt="">
|
||||||
|
<?php echo $chapter->post_content ?>
|
||||||
|
<a href="<?php echo get_post_permalink($chapter->ID) ?>">Voir la single <?php echo $chapter->post_title ?></a>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
<?php endwhile; ?>
|
<?php endwhile; ?>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<?php
|
|
||||||
get_footer();
|
|
||||||
|
|
@ -1,9 +1,16 @@
|
||||||
<?php
|
<?php get_header(); ?>
|
||||||
$isParentPage = get_queried_object()->post_parent === 0;
|
|
||||||
|
|
||||||
|
<div class="homegrade-page-container homegrade-page--parcours">
|
||||||
|
|
||||||
if ($isParentPage) {
|
<?php
|
||||||
get_template_part('single-parcours-parent');
|
|
||||||
} else {
|
$isParentPage = get_queried_object()->post_parent === 0;
|
||||||
get_template_part('single-parcours-child');
|
if ($isParentPage) {
|
||||||
}
|
get_template_part('single-parcours-parent');
|
||||||
|
} else {
|
||||||
|
get_template_part('single-parcours-child');
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php get_footer();
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,5 @@
|
||||||
<?php /* Template Name: Parcours rénovateur */ ?>
|
<?php /* Template Name: Parcours rénovateur */
|
||||||
<?php get_header(); ?>
|
get_header();
|
||||||
<?php
|
|
||||||
$currentThematique = get_the_terms(get_the_ID(), 'thematiques')[0];
|
|
||||||
$mainThematique = getMainThematique($currentThematique);
|
|
||||||
$thematiqueColorSlug = $mainThematique->slug;
|
|
||||||
|
|
||||||
|
|
||||||
$parcoursSteps = new WP_Query(array(
|
$parcoursSteps = new WP_Query(array(
|
||||||
'post_type' => 'parcours',
|
'post_type' => 'parcours',
|
||||||
|
|
@ -17,7 +12,7 @@ $parcoursSteps = new WP_Query(array(
|
||||||
|
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<div class="homegrade-page-container <?php echo $thematiqueColorSlug ? "homegrade-page-container--" . $thematiqueColorSlug : "" ?>">
|
<div class="homegrade-page-container homegrade-page-container--parcours-renovateur-index">
|
||||||
|
|
||||||
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
|
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
|
||||||
|
|
||||||
|
|
@ -47,13 +42,23 @@ $parcoursSteps = new WP_Query(array(
|
||||||
</ol>
|
</ol>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
$page_icon = get_field('page_icon', get_queried_object());
|
||||||
|
$pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
|
||||||
|
|
||||||
|
get_template_part("template-components/heading-box", null, array(
|
||||||
|
"pageIcon" => $pageIcon,
|
||||||
|
"title" => get_the_title(),
|
||||||
|
"description" => __("Toutes les étapes à connaître pour rénover votre logement.", "homegrade-theme__texte-fonctionnel"),
|
||||||
|
|
||||||
|
));
|
||||||
|
?>
|
||||||
|
|
||||||
|
|
||||||
<h1><?php echo get_the_title() ?></h1>
|
|
||||||
<p><?php echo __("Toutes les étapes pour rénover votre logement ", "homegrade-theme__texte-fonctionnel") ?></p>
|
|
||||||
<section class="parcours-steps-container">
|
<section class="parcours-steps-container">
|
||||||
|
|
||||||
<?php foreach ($parcoursSteps->posts as $parcoursStep) : ?>
|
<?php foreach ($parcoursSteps->posts as $parcoursStep) : ?>
|
||||||
<div class="step-container card">
|
<div class="parcours-steps-container__step card">
|
||||||
<?php
|
<?php
|
||||||
$childrenStepPosts = get_posts(array(
|
$childrenStepPosts = get_posts(array(
|
||||||
'post_type' => 'parcours',
|
'post_type' => 'parcours',
|
||||||
|
|
@ -62,17 +67,25 @@ $parcoursSteps = new WP_Query(array(
|
||||||
'order' => 'menu_order',
|
'order' => 'menu_order',
|
||||||
'post_parent' => $parcoursStep->ID,
|
'post_parent' => $parcoursStep->ID,
|
||||||
));
|
));
|
||||||
|
|
||||||
|
|
||||||
|
$stepIcon = get_field('step_icon', $parcoursStep->ID);
|
||||||
?>
|
?>
|
||||||
<h2><a href="<?php echo get_post_permalink($parcoursStep->ID) ?>"><?php echo $parcoursStep->post_title ?></a>
|
<img class="step-icon" src="<?php echo $stepIcon['url'] ?>" alt="">
|
||||||
</h2>
|
<h2><?php echo $parcoursStep->post_title ?></h2>
|
||||||
|
<p><?php echo $parcoursStep->post_excerpt ?> </p>
|
||||||
|
|
||||||
<?php foreach ($childrenStepPosts as $childPost) : ?>
|
<?php foreach ($childrenStepPosts as $childPost) : ?>
|
||||||
<p>
|
|
||||||
<a href="<?php echo get_post_permalink($childPost->ID) ?>">
|
|
||||||
<?php echo $childPost->post_title ?>
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
|
|
||||||
|
<a class="cta cta--en-savoir-plus " href="<?php echo get_permalink($parcoursStep->ID) ?>">
|
||||||
|
<?php echo __("En savoir plus ", "homegrade-theme__texte-fonctionnel") ?>
|
||||||
|
<div class="cta_arrow_button">
|
||||||
|
<img src='<?php echo get_template_directory_uri() ?>/resources/img/graphic-assets/arrow-right-circle.svg' alt=''>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user