Répertorier toutes les catégories sur une seule page et toutes les pagesappartenant à une catégorie dans un curseur jquery dans wordpress
J’ai vraiment besoin d’aide. Je me cogne la tête depuis hier matin en essayant de créer un design personnalisé pour le blog de recettes de pâtisserie et de cuisine de ma petite amie dans wordpress et je suis assez frustré à ce stade.
J’ai suivi le tutoriel Lynda.com sur la création d’un design personnalisé dans wordpress et j’ai réussi à séparer le modèle en en-tête, section principale et pied de page, mais je suis un peu resté bloqué après cela.
Voici une page html brute pour voir à quoi le site devrait ressembler :
http://natalija.co.nf/index.html
Et c’est là que j’ai besoin d’aide. Je veux que la page principale soit divisée en sections, chacune avec un identifiant unique et data-stellar-background-ratio= »0.5″ pour un effet de fond de parallaxe. Ces sections représenteraient des catégories (gâteaux, biscuits, boissons, plats, etc.). Chaque catégorie doit contenir un article avec sa propre classe et data-stellar-ratio= »1.5″. Dans un article, il y aurait une balise h1 avec le titre de la catégorie et un curseur jquery qui contiendrait des liens vers des recettes de cette catégorie.
Ainsi, la structure d’une section devrait ressembler à ceci :
<section id="teroteikolaci" data-stellar-background-ratio="0.5">
<article class="torteikolaci" data-stellar-ratio="1.5">
<h1>TORTE I KOLA?I</h1>
<div class="wrapper">
<ul class="slider">
<li class="slide">
<a href="#">
<img src="wp-content/themes/Natalija/images/torte-i-kolaci-thumb01.jpg" alt="random">
<div class="bubble">
<h5>?oko mousse torta 1</h5>
</div>
</a>
</li>
<li class="slide">
<a href="#">
<img src="wp-content/themes/Natalija/images/torte-i-kolaci-thumb02.jpg" alt="random">
<div class="bubble">
<h5>?oko mousse torta 2</h5>
</div>
</a>
</li>
<li class="slide">
<a href="#">
<img src="wp-content/themes/Natalija/images/torte-i-kolaci-thumb03.jpg" alt="random">
<div class="bubble">
<h5>?oko mousse torta 3</h5>
</div>
</a>
</li>
</ul>
</div>
</article>
</section>
Comme je l’ai dit, j’ai réussi à séparer le modèle en header.php, footer.php et home.php, mais j’ai seulement réussi à placer le code html brut dans home.php que je voudrais remplacer par du contenu dynamique, mais j’ai perdu après le gars du tutoriel. Je ne veux pas que les catégories soient des pages séparées. Je veux qu’ils soient tous affichés dans la page d’accueil. Comment puis-je accomplir cela ? Je suis nouveau sur wordpress, donc le tableau de bord me confond un peu et je ne connais pas les fonctions php de wordpress, donc j’apprécierais vraiment si quelqu’un pouvait me donner des directives sur la façon de procéder.
Éditer:
<?php
$args = array(
'orderby' => 'name',
'order' => 'ASC'
);
$categories = get_categories($args);
foreach($categories as $category) {
?>
<section id="<?php echo $category->slug; ?>" data-stellar-background-ratio="0.5">
<article class="<?php echo $category->slug; ?>" data-stellar-ratio="1.5">
<h1><?php echo $category->name; ?></h1>
<div class="wrapper">
<ul class="slider">
<?php
}
$args = array (
'post_status' => 'publish',
'category_name' => $category->slug,
'nopaging' => true,
);
$custom_query = new WP_Query( $args );
if ( $custom_query->have_posts() ) {
while ( $custom_query->have_posts() ) {
$custom_query->the_post();
// begin your slider loops in here
?>
<li class="slide">
<a href="<?php echo get_permalink(); ?>">
<?php the_post_thumbnail(); ?>
<div class="bubble">
<h5><?php echo get_the_title(); ?></h5>
</div>
</a>
</li>
<?php }
} else {
// no posts found
}
/* Restore original Post Data */
wp_reset_postdata();
?>
</ul>
</div>
</article>
</section>
Solution n°1 trouvée
WordPress récupère les articles/pages à l’aide de l’objet WP_Query (et ce qui est bien, c’est qu’il est bien documenté et que vous avez accès pour l’utiliser et le personnaliser). Je vous recommande de créer une boucle dédiée (en utilisant WP_Query) pour chaque section. Laisse moi te montrer comment…
En utilisant « TORTE I KOLA?I » comme premier exemple, juste avant de commencer cette section, vous pouvez créer une nouvelle boucle comme ceci :
// WP_Query arguments allow you to filter out / sort which posts you want
// In this example, I'm just telling WordPress to give me ONLY posts under the
// TORTE I KOLA?I category and NOT to use paging (so you get ALL posts in that
// category without limits)
$args = array (
'post_status' => 'publish',
'category_name' => 'torte_i_kolaci',
'nopaging' => true,
);
// The Query
$custom_query = new WP_Query( $args );
Remarque : Le category_nameest en fait le slug de la catégorie (et vous pouvez le trouver dans la section admin sous chaque catégorie que vous avez définie).
Il est maintenant temps d’utiliser le $custom_query.
Chaque section aura toujours le code wrapper comme ceci :
<section id="teroteikolaci" data-stellar-background-ratio="0.5">
<article class="torteikolaci" data-stellar-ratio="1.5">
<h1>TORTE I KOLA?I</h1>
<div class="wrapper">
<ul class="slider">
Sauf que maintenant vous allez basculer vers PHP et utiliser des fonctions telles que the_post_thumbnail, get_the_titleet get_permalinkainsi de suite :
<?php
if ( $custom_query->have_posts() ) {
while ( $custom_query->have_posts() ) {
$custom_query->the_post();
// begin your slider loops in here
?>
<li class="slide">
<a href="<?php echo get_permalink(); ?>">
<?php the_post_thumbnail(); ?>
<div class="bubble">
<h5><?php echo get_the_title(); ?></h5>
</div>
</a>
</li>
}
} else {
// no posts found
}
/* Restore original Post Data */
wp_reset_postdata();
?>
Et maintenant que vous avez bouclé tous vos messages, il est temps de fermer l’emballage…
</ul>
</div>
</article>
</section>
Vous pouvez maintenant répéter ce modèle pour chaque catégorie que vous prévoyez de répertorier (SITNI KOLA?I, NAPICI, etc.).
Quelques notes
J’ai supposé que vos messages sont en fait des messages et non des pages (pour chaque élément de la boucle). Si vous avez besoin de pages, vous pouvez modifier votre $argstableau comme suit :
$args = array (
'post_type' => 'page',
'post_status' => 'publish',
'category_name' => 'torte_i_kolaci',
'nopaging' => true,
);
Creusez dans la page WP_Query sur le codex pour voir à quel point ces requêtes peuvent être flexibles.
Vous voudrez peut-être rendre votre code encore plus dynamique et facile à entretenir en récupérant d’ abord vos catégories , puis en les bouclant pour générer le « wrapper externe ». WordPress a une fonction appelée get_categoriesque j’utilise tout le temps. get_categoriespossède également son propre $argstableau, alors jetez un il à la documentation pour voir ce que vous pouvez en faire. Vous structureriez votre code comme suit :
$args = array(
'orderby' => 'name',
'order' => 'ASC'
);
$categories = get_categories($args);
foreach($categories as $category) {
?>
<section id="<?php echo $category->slug; ?>" data-stellar-background-ratio="0.5">
<article class="<?php echo $category->slug; ?>" data-stellar-ratio="1.5">
<h1><?php echo $category->name; ?></h1>
<div class="wrapper">
<ul class="slider">
<?php
}
Et maintenant la partie cool ! Vous pouvez piloter toutes vos boucles internes (en utilisant WP_Query) à partir de la $category->slugvaleur comme ceci…
$args = array (
'post_status' => 'publish',
'category_name' => $category->slug,
'nopaging' => true,
);
Mettre tous ensemble
Voici donc à quoi ressemblerait l’ensemble de l’extrait de code (j’ai ajouté quelques commentaires pour certaines des accolades qui vous aident à voir où certaines boucles commencent et se terminent).
<?php
$args = array(
'orderby' => 'name',
'order' => 'ASC'
);
$categories = get_categories($args);
foreach($categories as $category) {
?>
<section id="<?php echo $category->slug; ?>" data-stellar-background-ratio="0.5">
<article class="<?php echo $category->slug; ?>" data-stellar-ratio="1.5">
<h1><?php echo $category->name; ?></h1>
<div class="wrapper">
<ul class="slider">
<?php
$args = array (
'post_status' => 'publish',
'category_name' => $category->slug,
'nopaging' => true,
);
$custom_query = new WP_Query( $args );
if ( $custom_query->have_posts() ) {
while ( $custom_query->have_posts() ) {
$custom_query->the_post();
// begin your slider loops in here
?>
<li class="slide">
<a href="<?php echo get_permalink(); ?>">
<?php the_post_thumbnail(); ?>
<div class="bubble">
<h5><?php echo get_the_title(); ?></h5>
</div>
</a>
</li>
<?php } // end $custom_query loop
} else {
// no posts found
}
// reset the postdata
wp_reset_postdata();
?>
</ul>
</div>
</article>
</section>
<?php
} // end $categories loop
?>
J’espère que cela vous aidera à vous débloquer, amusez-vous !
0 commentaire