quarante-douze/qdouze2-wordpress-theme
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

improvement: ajout featured

Browse source
This commit is contained in:
Kazhnuz 2022-12-18 15:17:25 +01:00
parent 05848519af
commit 21d1103c39
8 changed files with 150 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
components/featured.php
View file

@ -1,34 +1,39 @@
<div id="featured-articles">
<?php
query_posts(array(
query_posts(array(
'post_type' => 'post',
'tax_query' => array(
array(
'taxonomy' => 'category',
'terms' => 'blog',
'taxonomy' => 'niveau',
'terms' => 'featured',
'field' => 'slug',
)
),
'orderby' => 'date',
'post_count' => '1',
'order' => 'DESC',
'posts_per_page' => '1'
'posts_per_page' => '3',
'order' => 'DESC'
));
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div class="card head-primary" id="post-<?php the_ID(); ?>">
<div class="card-header"><h1><?php the_title(); ?></h1></div>
<div class="flex-that mb">
<div class="article-category">
<?php $category = get_the_category();
echo"<a href= '" . esc_url( get_category_link( $category[0]->term_id ) ) . "' class='btn-small btn-info'><i class='fa fa-folder'></i> " . $category[0]->cat_name . "</a>"; ?>
</div>
<time itemprop="datePublished"><em><?php the_time('j F Y') ?></em></time>
</div>
<?php the_excerpt(); ?>
<p class="align-center"> <a href="<?php the_permalink(); ?>" class="btn btn-readmore" title="<?php the_title();?>">Lire l'article</a> </p>
</div>
<article class="preview-featured">
<a href="<?php the_permalink(); ?>" class="preview-link">
<div class="preview-item" style="background-image:url('<?php echo get_the_post_thumbnail_url(); ?>');">
<div class="preview-overlay">
<div class="preview-categories">
<?php $category = get_the_category();
echo"<span class='badge bg-primary'>" . $category[0]->cat_name . "</span>"; ?>
</div>
<h2 class="preview-title"><?php the_title();/*3*/ ?></h2>
</div>
</div>
</a>
</article>
<?php endwhile; ?> <?php wp_reset_query(); /*4*/ ?>
</div>

25
functions.php
View file

@ -26,6 +26,31 @@
* Permet d'afficher les niveaux de post pour les post features
*/
/* 2. Niveau support (for featured posts) */
register_taxonomy(
'niveau',
'post',
array(
'label' => 'Niveau',
'labels' => array(
'name' => 'Niveaux',
'singular_name' => 'Niveaux',
'all_items' => 'Tous les niveaux',
'edit_item' => 'Éditer le niveau',
'view_item' => 'Voir le niveau',
'update_item' => 'Mettre à jour le niveau',
'add_new_item' => 'Ajouter un niveau',
'new_item_name' => 'Nouveau niveau',
'search_items' => 'Rechercher parmi les niveaux',
'popular_items' => 'Niveaux les plus utilisés'
),
'hierarchical' => false
)
);
register_taxonomy_for_object_type( 'niveau', 'post' );
// 1.1 - Enregistrement de la taxonomy pour le flag
register_taxonomy(
'flag',

4
home.php
View file

@ -9,11 +9,11 @@
echo '<h1 class="page-title">' . get_the_title( $page ) . '</h1>';
echo '<div>' . $page->post_content . '</div>';
}
echo '<h1 class="page-title">Dernier article</h1>';
echo '<h1 class="page-title"><i class="fa fa-fw fa-star" aria-hidden="true"></i> À la une</h1>';
include(TEMPLATEPATH . '/components/featured.php');
}
?>
<h1 class="page-title">Publications</h1>
<h1 class="page-title"><i class="fa fa-fw fa-clock-o" aria-hidden="true"></i> Publications</h1>
<?php include(TEMPLATEPATH . '/components/preview-grid.php'); ?>
</main>

1
scss/_global.scss
View file

@ -4,4 +4,5 @@
@import 'custom/global';
@import 'custom/previews';
@import 'custom/featured';
@import 'custom/article';

48
scss/custom/_featured.scss Normal file
View file

@ -0,0 +1,48 @@
#featured-articles {
display:grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: $lineheight;
padding-bottom: $lineheight;
@include xl() {
grid-template-columns: 1fr 1fr 1fr;
}
}
.preview-featured {
font-size: 0.8rem;
.preview-link {
display: block;
padding:0;
border-radius: $card-radius;
overflow: hidden;
.preview-item {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
background-size:100% auto;
background-position: center center;
transition: background-size .5s;
&:hover {
background-size: 120% auto;
}
}
}
.preview-overlay {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
height:100%;
color: white !important;
background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 60%);
padding:$lineheight / 8;
h2 {
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
}
}

4
scss/custom/_global.scss
View file

@ -33,6 +33,10 @@
#page-header {
background: $color-primary url('img/background.png');
margin-bottom:1.5rem;
font-size: 0.8rem;
.fa {
font-size: 1rem;
}
}
header h1 {

2
scss/custom/_previews.scss
View file

@ -59,7 +59,7 @@
}
}
.preview h2 {
.preview h2, .preview-featured h2 {
font-size:1.25rem;
line-height: 1.5rem;
font-family: $titlefont;

46
style.css
View file

@ -2558,7 +2558,10 @@ th {
/* ------------------ HEADERS ------------------- */
#page-header {
background: #e33d22 url("img/background.png");
margin-bottom: 1.5rem; }
margin-bottom: 1.5rem;
font-size: 0.8rem; }
#page-header .fa {
font-size: 1rem; }
header h1 {
border-style: none !important;
@ -2760,13 +2763,13 @@ footer {
aspect-ratio: 16/9;
border-radius: 8px; }
.preview h2 {
.preview h2, .preview-featured h2 {
font-size: 1.25rem;
line-height: 1.5rem;
font-family: Teko, sans-serif;
font-weight: 800;
height: 3rem; }
.preview h2 a {
.preview h2 a, .preview-featured h2 a {
background-color: transparent !important;
color: #212529; }
@ -2776,6 +2779,43 @@ footer {
line-height: 1.25rem;
color: rgba(33, 37, 41, 0.8); }
#featured-articles {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: 1.6rem;
padding-bottom: 1.6rem; }
@media (min-width: 1200px) {
#featured-articles {
grid-template-columns: 1fr 1fr 1fr; } }
.preview-featured {
font-size: 0.8rem; }
.preview-featured .preview-link {
display: block;
padding: 0;
border-radius: 8px;
overflow: hidden; }
.preview-featured .preview-link .preview-item {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
background-size: 100% auto;
background-position: center center;
transition: background-size .5s; }
.preview-featured .preview-link .preview-item:hover {
background-size: 120% auto; }
.preview-featured .preview-overlay {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
height: 100%;
color: white !important;
background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 60%);
padding: 0.2rem; }
.preview-featured .preview-overlay h2 {
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); }
.article img {
max-width: 100%;
height: auto;