updating news pages system
This commit is contained in:
parent
c4bcfc3c79
commit
fb4bdc673d
13
resources/css/pages/single-news.css
Normal file
13
resources/css/pages/single-news.css
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
body.acoustisque {
|
||||
@apply bg-slate-800;
|
||||
}
|
||||
.entry-content.single-news-editor-content {
|
||||
@apply mx-auto mt-8 px-4;
|
||||
ul li::marker,
|
||||
ol li::marker {
|
||||
@apply text-purple-500;
|
||||
}
|
||||
ul li:before {
|
||||
@apply !bg-secondary;
|
||||
}
|
||||
}
|
||||
|
|
@ -13,17 +13,16 @@ function filterNewsInit() {
|
|||
const filterNewsToolbar = document.querySelector('.filters-toolbar--archive-news');
|
||||
if (!filterNewsToolbar) return;
|
||||
|
||||
const filterButtons = filterNewsToolbar.querySelectorAll('.filter__action-button');
|
||||
const filterButtons = filterNewsToolbar.querySelectorAll('.filters-toolbar__action-button');
|
||||
if (!filterButtons) return;
|
||||
|
||||
filterButtons.forEach((button) => {
|
||||
const termId = button.getAttribute('data-term-id');
|
||||
button.addEventListener('click', hydrateNewsFeedByTypeId);
|
||||
button.addEventListener('click', (e) => filterPosts(e));
|
||||
});
|
||||
}
|
||||
|
||||
async function hydrateNewsFeedByTypeId(e) {
|
||||
const filterID = e.target.getAttribute('data-term-id');
|
||||
async function hydrateNewsFeedByTypeId(filterID) {
|
||||
let newCardsContent;
|
||||
if (filterID === 'all') {
|
||||
const response = await fetch(`/wp-json/homegrade-datas/v1/build/news`);
|
||||
|
|
@ -37,6 +36,22 @@ async function hydrateNewsFeedByTypeId(e) {
|
|||
container.innerHTML = newCardsContent;
|
||||
}
|
||||
|
||||
async function filterPosts(e) {
|
||||
const filterID =
|
||||
e.target.getAttribute('data-term-id') ??
|
||||
e.target.parentElement.getAttribute('data-term-id') ??
|
||||
null;
|
||||
console.log('filterID');
|
||||
console.log(filterID);
|
||||
const filterButtons = document.querySelectorAll('.filters-toolbar__action-button');
|
||||
|
||||
filterButtons.forEach((button) => {
|
||||
button.classList.remove('filters-toolbar__action-button--active');
|
||||
});
|
||||
await hydrateNewsFeedByTypeId(filterID);
|
||||
e.target.classList.add('filters-toolbar__action-button--active');
|
||||
}
|
||||
|
||||
export default function archiveNewsInit() {
|
||||
loadMoreNewsInit();
|
||||
filterNewsInit();
|
||||
|
|
|
|||
63
single-post.php
Normal file
63
single-post.php
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<?php
|
||||
get_header();
|
||||
$args = array(
|
||||
'meta_key' => '_wp_page_template',
|
||||
'meta_value' => "template-news.php"
|
||||
);
|
||||
$relatedPageTemplatePage = get_pages($args) ? get_pages($args)[0] : null;
|
||||
?>
|
||||
|
||||
<?php if (have_posts()) : ?>
|
||||
<?php while (have_posts()) : the_post(); ?>
|
||||
|
||||
<nav class="breadcrumbs_navigation" aria-label="breadcrumbs">
|
||||
<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_the_permalink($relatedPageTemplatePage) ?>">
|
||||
<?php echo __("News", "homegrade-theme__texte-fonctionnel") ?>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="<?php echo get_the_permalink(get_the_id()) ?>" aria-current='location'>
|
||||
<?php echo get_the_title(get_the_id()) ?>
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="post-news-page-container">
|
||||
<?php /* --------
|
||||
HEADING BOX
|
||||
---------------*/ ?>
|
||||
<?php
|
||||
get_template_part("template-components/news-heading-box", null, array(
|
||||
"news_type" => get_the_terms(get_the_ID(), 'news-type'),
|
||||
"title" => get_the_title(),
|
||||
"thumbnail" => get_the_post_thumbnail(get_the_ID(), "full", array('class' => 'news-heading-box__thumbnail')),
|
||||
"published" => get_the_date()
|
||||
|
||||
));
|
||||
?>
|
||||
<div class="entry-content single-news-editor-content">
|
||||
<?php
|
||||
the_content();
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php endwhile; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<?php
|
||||
get_footer();
|
||||
|
|
@ -10,82 +10,115 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
|
|||
|
||||
?>
|
||||
<div class="template-archives template-archives--publications">
|
||||
<?php /* --------
|
||||
BREADCRUMB
|
||||
---------------*/ ?>
|
||||
<nav class="breadcrumbs_navigation" aria-label="breadcrumbs">
|
||||
<ol>
|
||||
<li><a href="<?php echo home_url() ?>">Home</a></li>
|
||||
<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_the_permalink($relatedPageTemplatePage) ?>" aria-current='location'>
|
||||
<?php echo __("News", "homegrade-theme__texte-fonctionnel") ?>
|
||||
</a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="heading-box ">
|
||||
<img class="heading-box__page-icon" src="<?php echo $pageIcon['url'] ?>" alt="" />
|
||||
<h1 class="heading-box__title"><?php echo get_the_title(get_queried_object_id()) ?></h1>
|
||||
<p class="heading-box__description"> <?php echo __("Qu'y a-t-il de nouveau
|
||||
chez Homegrade ?", "homegrade-theme__texte-fonctionnel") ?></p>
|
||||
</div>
|
||||
|
||||
<ul class="filters-toolbar filters-toolbar--archive-news">
|
||||
<?php /* --------
|
||||
HEADING BOX
|
||||
---------------*/ ?>
|
||||
<?php
|
||||
$news_types = get_terms(array(
|
||||
'taxonomy' => 'news-type',
|
||||
'hide_empty' => true,
|
||||
get_template_part("template-components/heading-box", null, array(
|
||||
"pageIcon" => $pageIcon,
|
||||
"title" => get_the_title(get_queried_object_id()),
|
||||
"description" => __("Qu'y a-t-il de nouveau chez Homegrade ?", "homegrade-theme__texte-fonctionnel"),
|
||||
));
|
||||
|
||||
?>
|
||||
<li>
|
||||
<button class="filter__action-button" data-term-id="all">Tous</button>
|
||||
</li>
|
||||
<?php foreach ($news_types as $typeTerm) : ?>
|
||||
<li>
|
||||
<button class="filter__action-button" data-term-id="<?php echo $typeTerm->term_id ?>"><?php echo $typeTerm->name ?></button>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
|
||||
<?php
|
||||
$post_per_page = 12;
|
||||
$args = array(
|
||||
"post_type" => "post",
|
||||
"status" => "publish",
|
||||
"posts_per_page" => $post_per_page,
|
||||
|
||||
);
|
||||
$posts = new WP_Query($args);
|
||||
|
||||
|
||||
?>
|
||||
<section class="news-container">
|
||||
|
||||
<div class="card-grid-container">
|
||||
|
||||
<?php /* --------
|
||||
FILTERS
|
||||
---------------*/ ?>
|
||||
<ul class="filters-toolbar filters-toolbar--archive-news">
|
||||
<?php
|
||||
foreach ($posts->posts as $key => $post) {
|
||||
$post_thumbnail = get_the_post_thumbnail($post->ID, 'full', array('class' => 'card-news__thumbnail card-post__thumbnail')) ?? null;
|
||||
$news_type = get_the_terms($post->ID, "news-type") ?? null;
|
||||
$news_types = get_terms(array(
|
||||
'taxonomy' => 'news-type',
|
||||
'hide_empty' => true,
|
||||
));
|
||||
|
||||
get_template_part(
|
||||
'template-components/cards/card-news',
|
||||
null,
|
||||
array(
|
||||
'card_variant' => 'activite',
|
||||
'post_ID' => $post->ID,
|
||||
'post_title' => $post->post_title,
|
||||
'post_thumbnail' => $post_thumbnail,
|
||||
'news_type' => $news_type,
|
||||
)
|
||||
);
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<li>
|
||||
<button class="filters-toolbar__action-button" data-term-id="all">Tous</button>
|
||||
</li>
|
||||
<?php foreach ($news_types as $typeTerm) : ?>
|
||||
<?php
|
||||
|
||||
$termIcon = get_field('news_type_icon', "news-type" . '_' . $typeTerm->term_id) ?? null;
|
||||
|
||||
?>
|
||||
<li>
|
||||
<button class="filters-toolbar__action-button" data-term-id="<?php echo $typeTerm->term_id ?>">
|
||||
<?php if ($termIcon) : ?>
|
||||
<img class="icon" src="<?php echo $termIcon['url'] ?>" alt='' />
|
||||
<?php endif; ?>
|
||||
|
||||
<?php echo $typeTerm->name ?>
|
||||
|
||||
</button>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
|
||||
|
||||
<?php /* -------------
|
||||
POSTS CARDS GRID
|
||||
--------------------*/ ?>
|
||||
|
||||
<section class="news-container">
|
||||
<?php
|
||||
$post_per_page = 12;
|
||||
$args = array(
|
||||
"post_type" => "post",
|
||||
"status" => "publish",
|
||||
"posts_per_page" => $post_per_page,
|
||||
|
||||
);
|
||||
$posts = new WP_Query($args);
|
||||
?>
|
||||
|
||||
<div class="card-grid-container">
|
||||
|
||||
<?php
|
||||
foreach ($posts->posts as $key => $post) {
|
||||
$post_thumbnail = get_the_post_thumbnail($post->ID, 'full', array('class' => 'card-news__thumbnail card-post__thumbnail')) ?? null;
|
||||
$news_type = get_the_terms($post->ID, "news-type") ?? null;
|
||||
|
||||
get_template_part(
|
||||
'template-components/cards/card-news',
|
||||
null,
|
||||
array(
|
||||
'card_variant' => 'activite',
|
||||
'post_ID' => $post->ID,
|
||||
'post_title' => $post->post_title,
|
||||
'post_thumbnail' => $post_thumbnail,
|
||||
'news_type' => $news_type,
|
||||
)
|
||||
);
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
|
||||
<?php if ($posts->max_num_pages > 1) : ?>
|
||||
<button id="load-more-news" class="cta cta--outline cta--button mx-auto mb-32">Charger Plus</button>
|
||||
<?php endif; ?>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<?php if ($posts->max_num_pages > 1) : ?>
|
||||
<button id="load-more-news" class="cta cta--outline cta--button mx-auto mb-32">Charger Plus</button>
|
||||
<?php endif; ?>
|
||||
</section>
|
||||
|
||||
<?php
|
||||
get_footer();
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user