refining and developping faq
This commit is contained in:
parent
5c1748482d
commit
6616c511da
|
|
@ -1,4 +1,5 @@
|
||||||
<?php
|
<?php
|
||||||
|
$theme_namespace = 'homegrade-theme__texte-fonctionnel';
|
||||||
function getThematiqueFamilySlug($thematique_slug)
|
function getThematiqueFamilySlug($thematique_slug)
|
||||||
{
|
{
|
||||||
if (!$thematique_slug) {
|
if (!$thematique_slug) {
|
||||||
|
|
|
||||||
|
|
@ -72,3 +72,4 @@
|
||||||
@import './pages/template-archive-conseils.css';
|
@import './pages/template-archive-conseils.css';
|
||||||
@import './pages/template-archive-questions.css';
|
@import './pages/template-archive-questions.css';
|
||||||
@import './pages/single-conseils.css';
|
@import './pages/single-conseils.css';
|
||||||
|
@import './pages/questions-thematiques-(faq).css';
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,28 @@ body {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
summary {
|
|
||||||
margin: 10px;
|
details {
|
||||||
/* display: inline-block; */
|
@apply bg-white shadowed rounded-2xl mb-4 px-8 py-6;
|
||||||
|
summary {
|
||||||
|
@apply font-bold list-none flex justify-between items-center cursor-pointer;
|
||||||
|
.open-close-icon {
|
||||||
|
transition: transform 0.3s ease-in-out;
|
||||||
|
transform: translate(0, 0%);
|
||||||
|
display: flex;
|
||||||
|
border: 2px solid black;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
height: 26px;
|
||||||
|
width: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
@apply mt-4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
details[open] summary .open-close-icon {
|
||||||
|
transform: translate(0, 0%) rotate(180deg);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
49
resources/css/pages/questions-thematiques-(faq).css
Normal file
49
resources/css/pages/questions-thematiques-(faq).css
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
.post-question-page {
|
||||||
|
ul.checkboxes {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
padding-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.checkboxes li {
|
||||||
|
list-style: none;
|
||||||
|
margin: 1px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
[role='checkbox'] {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 4px 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
[role='checkbox']::before {
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
left: -4px;
|
||||||
|
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' style='forced-color-adjust: auto;'%3E%3Crect x='2' y='2' height='13' width='13' rx='2' stroke='currentcolor' stroke-width='1' fill-opacity='0' /%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
[role='checkbox'][aria-checked='true']::before {
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' style='forced-color-adjust: auto;'%3E%3Crect x='2' y='2' height='13' width='13' rx='2' stroke='currentcolor' stroke-width='1' fill-opacity='0' /%3E%3Cpolyline points='4,8 7,12 12,5' fill='none' stroke='currentcolor' stroke-width='2' /%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
[role='checkbox']:focus,
|
||||||
|
[role='checkbox']:hover {
|
||||||
|
padding: 2px 6px;
|
||||||
|
border: 2px solid #005a9c;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #def;
|
||||||
|
}
|
||||||
|
|
||||||
|
[role='checkbox']:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__accordeons-container {
|
||||||
|
@apply max-w-screen-lg mx-auto px-4 py-12;
|
||||||
|
}
|
||||||
|
}
|
||||||
3
resources/img/graphic-assets/chevron_down.svg
Normal file
3
resources/img/graphic-assets/chevron_down.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="11.668" height="7.885" viewBox="0 0 11.668 7.885">
|
||||||
|
<path id="Tracé_3614" data-name="Tracé 3614" d="M0,8.855,5.478,4.427,0,0" transform="translate(10.261 1.406) rotate(90)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 322 B |
|
|
@ -1,42 +1,36 @@
|
||||||
<?php get_header();
|
<?php
|
||||||
|
|
||||||
$thematique = get_queried_object();
|
/************/
|
||||||
$thematique_generale = get_queried_object()->parent ? get_term(get_queried_object()->parent, 'thematiques') : get_term(get_queried_object(), 'thematiques');
|
/* PAGE FAQ */
|
||||||
$thematiqueColorSlug = getThematiqueFamilySlug($thematique_generale->slug);
|
/************/
|
||||||
|
?>
|
||||||
|
<?php get_header(); ?>
|
||||||
|
|
||||||
|
|
||||||
$current_children_thematique = get_queried_object()->parent != 0 ? get_queried_object() : null;
|
<?php
|
||||||
|
$currentThematique = get_queried_object();
|
||||||
|
$mainThematique = getMainThematique($currentThematique);
|
||||||
$args = array(
|
$thematiqueColorSlug = getThematiqueFamilySlug($mainThematique->slug);
|
||||||
'posts_per_page' => 1,
|
$sousThematiques = get_terms(array(
|
||||||
'post_type' => 'conseils',
|
'child_of' => $mainThematique->term_id,
|
||||||
'tax_query' => array(
|
'taxonomy' => 'thematiques',
|
||||||
array(
|
'hide_empty' => true,
|
||||||
'slug' => 'locations',
|
));
|
||||||
'taxonomy' => 'thematiques',
|
|
||||||
'field' => 'slug',
|
|
||||||
'terms' => get_queried_object()->slug,
|
|
||||||
// 'include_children' => false,
|
|
||||||
)
|
|
||||||
)
|
|
||||||
);
|
|
||||||
$query_current_thematique_posts = new WP_Query($args);
|
|
||||||
$thematique_related_page = $query_current_thematique_posts->posts[0];
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
$archiveQuestions = get_page_by_template('template-archive-questions.php')[0];
|
|
||||||
?>
|
?>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<nav class="breadcrumbs_navigation" aria-label="breadcrumbs">
|
<nav class="breadcrumbs_navigation" aria-label="breadcrumbs">
|
||||||
|
<?php
|
||||||
|
$current_children_thematique = get_queried_object()->parent != 0 ? get_queried_object() : null;
|
||||||
|
$archiveQuestions = get_page_by_template('template-archive-questions.php')[0];
|
||||||
|
?>
|
||||||
<ol>
|
<ol>
|
||||||
<li><a href="<?php echo home_url() ?>">Home</a></li>
|
<li><a href="<?php echo home_url() ?>">Home</a></li>
|
||||||
<li><a href="<?php echo get_post_permalink($archiveQuestions) ?>"><?php echo $archiveQuestions->post_title ?></a></li>
|
<li><a href="<?php echo get_post_permalink($archiveQuestions) ?>"><?php echo $archiveQuestions->post_title ?></a></li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="<?php echo get_term_link($thematique_generale) ?>" aria-current='location'><?php echo $thematique_generale->name ?></a>
|
<a href="<?php echo get_term_link($mainThematique) ?>" aria-current='location'><?php echo $mainThematique->name ?></a>
|
||||||
</li>
|
</li>
|
||||||
<?php if ($current_children_thematique) : ?>
|
<?php if ($current_children_thematique) : ?>
|
||||||
<li>
|
<li>
|
||||||
|
|
@ -47,24 +41,7 @@ $archiveQuestions = get_page_by_template('template-archive-questions.php')[0];
|
||||||
</ol>
|
</ol>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="list_filters">
|
<div class="post-question-page <?php echo $thematiqueColorSlug ? "post-question-page--" . $mainThematique->slug : "" ?>"">
|
||||||
<?php if ($thematique->parent) : ?>
|
|
||||||
<?php
|
|
||||||
$sousThematiques = get_terms(array(
|
|
||||||
'child_of' => $thematique_generale->term_id,
|
|
||||||
'taxonomy' => 'thematiques',
|
|
||||||
'hide_empty' => true,
|
|
||||||
));
|
|
||||||
|
|
||||||
?>
|
|
||||||
<?php foreach ($sousThematiques as $sousThematique) : ?>
|
|
||||||
<button data-filter="<?php echo $sousThematique->slug ?>"><?php echo $sousThematique->name ?></button>
|
|
||||||
<?php endforeach; ?>
|
|
||||||
<?php endif; ?>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<?php get_template_part(
|
<?php get_template_part(
|
||||||
'template-components/posts-components/chapter-header',
|
'template-components/posts-components/chapter-header',
|
||||||
|
|
@ -72,52 +49,71 @@ $archiveQuestions = get_page_by_template('template-archive-questions.php')[0];
|
||||||
array(
|
array(
|
||||||
'ID' => get_queried_object_id(),
|
'ID' => get_queried_object_id(),
|
||||||
'title' => __("Les questions les plus fréquentes sur ", "homegrade-theme__texte-fonctionnel__faq-archive-questions") . get_queried_object()->name,
|
'title' => __("Les questions les plus fréquentes sur ", "homegrade-theme__texte-fonctionnel__faq-archive-questions") . get_queried_object()->name,
|
||||||
'sub-title' => $thematique->name,
|
'sub-title' => $currentThematique->name,
|
||||||
'thematique' => $thematique,
|
'thematique' => $currentThematique,
|
||||||
'thematique_generale' => $thematique_generale,
|
'thematique_generale' => $mainThematique,
|
||||||
'thematiqueColorSlug' => $thematiqueColorSlug,
|
'thematiqueColorSlug' => $thematiqueColorSlug,
|
||||||
)
|
)
|
||||||
|
|
||||||
); ?>
|
); ?>
|
||||||
|
<section class=" post-question-page__accordeons-container ">
|
||||||
|
<?php if ($mainThematique && $sousThematiques) : ?>
|
||||||
|
<div class=" thematiques_filters">
|
||||||
|
<h3><?php echo __("Filtrer par catégories", $theme_namespace) ?></h3>
|
||||||
|
|
||||||
<div class="post-question-page-container <?php echo $thematiqueColorSlug ? "post-question-page--" . $thematiqueColorSlug : "" ?>"">
|
|
||||||
<?php
|
|
||||||
|
|
||||||
$query_args = array(
|
<ul class="thematiques_filters__list">
|
||||||
'post_type' => 'questions',
|
<?php foreach ($sousThematiques as $sousThematique) : ?>
|
||||||
'posts_per_page' => -1,
|
<li data-filter="<?php echo $sousThematique->slug ?>">
|
||||||
'tax_query' => array(
|
<input type="checkbox" title="<?php echo $sousThematique->name ?>" name="veggy01" id="veggy01" />
|
||||||
array(
|
<label for="veggy01"><?php echo $sousThematique->name ?></label></p>
|
||||||
'taxonomy' => 'thematiques',
|
|
||||||
'field' => 'term_id',
|
|
||||||
'terms' => $thematique_generale->term_id,
|
|
||||||
|
|
||||||
)
|
<!-- <div role="checkbox" aria-checked="false" tabindex="0"><?php echo $sousThematique->name ?></div> -->
|
||||||
)
|
</li>
|
||||||
);
|
<?php endforeach; ?>
|
||||||
$questions = new WP_Query($query_args);
|
</ul>
|
||||||
|
</div>
|
||||||
?>
|
|
||||||
|
|
||||||
<?php if ($questions->have_posts()) : while ($questions->have_posts()) : $questions->the_post(); ?>
|
|
||||||
|
|
||||||
<details class=" question">
|
|
||||||
<summary>
|
|
||||||
<?php the_title(); ?>
|
|
||||||
<!-- <h2><?php the_title(); ?></h2> -->
|
|
||||||
</summary>
|
|
||||||
<div class="content">
|
|
||||||
<?php the_content(); ?>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<?php endwhile ?>
|
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
</div>
|
<?php
|
||||||
|
$query_args = array(
|
||||||
|
'post_type' => 'questions',
|
||||||
|
'posts_per_page' => -1,
|
||||||
|
'tax_query' => array(
|
||||||
|
array(
|
||||||
|
'taxonomy' => 'thematiques',
|
||||||
|
'field' => 'term_id',
|
||||||
|
'terms' => $mainThematique->term_id,
|
||||||
|
)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
$relatedTaxQuestions = new WP_Query($query_args);
|
||||||
|
|
||||||
|
|
||||||
|
?>
|
||||||
|
<h2 aria-live=" polite"><?php echo __("Nombre de résultats", 'homegrade-theme__texte-fonctionnel') . " : " . count($relatedTaxQuestions->posts) ?></h2>
|
||||||
|
<?php if ($relatedTaxQuestions->have_posts()) : while ($relatedTaxQuestions->have_posts()) : $relatedTaxQuestions->the_post(); ?>
|
||||||
|
|
||||||
|
<details class=" question">
|
||||||
|
<summary>
|
||||||
|
<?php the_title(); ?>
|
||||||
|
<div class="open-close-icon">
|
||||||
|
<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/chevron_down.svg' ?>" class="open-close-cta" alt="" />
|
||||||
|
</div>
|
||||||
|
</summary>
|
||||||
|
<div class="content entry-content">
|
||||||
|
<?php the_content(); ?>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<?php endwhile ?>
|
||||||
|
<?php endif; ?>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
get_footer();
|
get_footer();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user