[Résolu] Customiser une liste d’articles

  • WordPress :4.7
  • Statut : résolu
15 sujets de 1 à 15 (sur un total de 33)
  • Auteur
    Messages
  • #1637813

    wordpresseuse
    Participant
    Padawan WordPress
    65 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL :
    • Thème utilisé : twenty seventeen
    • Extensions en place :
    • Nom de l’hébergeur : chez moi
    • Adresse du site : pour l’instant c’est en local :((

    Problème(s) rencontré(s) :

     

     

    Bonjour à tous

    J’utilise twentyseventeen et j’aimerais améliorer une page de catégories.
    Je m’explique, j’ai créé un sous-menu « categorie »
    donc dans le front, quand je clique sur ce sous-menu, il s’affichent tous les articles de la catégorie, les uns en dessous des autres.

    J’aimerais améliorer l’affichage :
    – le contenu de l’article sous forme de quote
    – en dessous, le titre et la date sur la même ligne, séparés par une virgule

    tous les articles sont en format « quote »

    pour le moment ça s’affiche comme ça :
    now
    et j’aimerais faire ça :
    idealy
    et dans l’idéal, avec un thumbnail à gauche de chaque article (seulement si ce n’est pas trop compliqué pour moi…)

    comment devrais-je m’y prendre?

    #1637877

    Flobogo
    Modérateur
    Maître WordPress
    13703 contributions

    Bonjour,

    Commencez par créer un thème-enfant si ça n’est pas encore fait.

    Ensuite, informez-vous sur la création de thème, ça vous aidera à comprendre comment ça fonctionne, en particulier avec cet article.

    #1638564

    wordpresseuse
    Participant
    Padawan WordPress
    65 contributions

    Bonjour Flobogo,

     

    merci pour ta réponse. Il me semblait avoir coché « Me prévenir des réponses par e-mail »
    et je n’ai rien reçu, c’est pour ça que je vois ta réponse si tard.

    Effectivement j’avais déjà fait un theme enfant.
    Je me suis penchée sur la question et je me demandais si je devais utiliser les « post format »,  les post types, les pages archives, les post grid? (surtout il faut que ce soit responsive)
    Voilà c’est un peu flou dans ma tête

    merci pour ton article, je vais regarder!

    #1638579

    Flobogo
    Modérateur
    Maître WordPress
    13703 contributions

    Je me suis penchée sur la question et je me demandais si je devais utiliser les « post format »,  les post types, les pages archives, les post grid? (surtout il faut que ce soit responsive)

    –> Euh … je ne comprends pas bien la question …

    Les pages « archives » servent à regrouper des articles soit par catégories (le plus fréquent), soit par date (mois / années), ou encore par auteur …
    Les « posts formats », ce sont … les formats des articles. Donc, pour des citations, le « format quote » est très bien.

    Mais ensuite, tu auras besoin des éléments qui composent ton article (contenu / titre / date) et leur mise en forme dépend du thème ou peut être modifiée dans le thème.

    #1639158

    wordpresseuse
    Participant
    Padawan WordPress
    65 contributions

    Je te remercie,

    je suis en train de chercher du côté des posts format : comment styliser mon format quote.

    Mais avant cela il y a quelquechose que je ne comprend pas.
    Si je créé un article, peut importe le format que je choisis (quote, gallery, image etc.) il a toujours la même tête.

    Pourtant quand j’ouvre les fichiers content-gallery.php ou les autres fichiers correspondants, il est sensé afficher des choses différentes.
    du coup je crois que je ne comprends pas comment fonctionnent les post-format.

    Savez vous ou je pourrais trouver une ressource qui explique comment ça marche dans twenty-seventeen?

    par exemple : comment créer une gallerie dans twentyseventeen en utilisant le post-format?

    parce que j’ai bien trouvé le résultat, à quoi ça doit ressembler ici :
    https://twentyseventeendemo.wordpress.com/2017/02/28/around-the-neighborhood/
    mais je ne vois pas comment y parvenir. Je créé une gallerie dans l’article, mais ça n’a pas cette apparence

    je veux bien créer un autre post dans le forum si besoin

    #1639175

    PhiLyon
    Modérateur
    Maître WordPress
    17023 contributions

    Bonjour.

    Ton exemple a été fait soit avec Jetpack soit avec un plugin de tiled gallery comme celui-ci https://fr.wordpress.org/plugins/tiled-gallery-carousel-without-jetpack/

    Jetpack est également un plugin, il propose d’autres fonctions, mais il est « volumineux ».

    🙂

    #1639191

    wordpresseuse
    Participant
    Padawan WordPress
    65 contributions

    Merci pour l’info PhiLyon
    c’est bien ce que je pensais!

    mais je trouvais ça bizarre que sur la demo officielle de twentyseventeen ils gonflent le template avec des plugins
    merci pour ta confirmation!

    #1639441

    wordpresseuse
    Participant
    Padawan WordPress
    65 contributions

    Bonsoir,

    toujours en quête pour trouver la réponse à ma question de départ.

    • question 1

    Suite à vos conseils, j’ai cru comprendre que je devais me pencher sur les posts formats et donc créer un fichier content-quote.php
    Il y a quelquechose que je ne comprends pas. J’ai trouvé dans twentyseventeen, des fichiers content-gallery.php , content-excerp.php etc. mais pas de content-quote.php

    Alors comment se fait-il que l’affichage est différent pour un article auquel j’applique un format « quote » ? Si je prends le même article et que je lui applique un format « standard » il change de look (il perd son style avec les icônes de guillemets)
    y a t-il un moyen de savoir quel fichier php est appelé? (genre avec l’outil « Examiner l’élément » du navigateur ?)

    • question 2

    si je parviens à modifier l’apparence de mon post format,
    est-ce que cela va modifier l’apparence de la LISTE des posts formats? (car sur la capture que j’ai montré, c’est bien une liste de posts dont je souhaite modifier l’apparence) . Je pense même que le post seul j’aimerai qu’on ne puisse jamais le voir.

    • question 3

    Bref, étant complètement bloquée sur l’apparence du post format quote (je ne vois pas quoi ni comment faire, même en bidouillant avec les autres fichiers php proposés)
    j’ai cherché du côté de l’apparence d’une catégorie. Mes « quotes » sont des articles classés dans une catégorie « press ». Donc je pensais créer un fichier category-press.php
    Je l’ai créé, et ayant cherché des informations sur le web, il était conseillé de copier un fichier qui est le suivant dans l’arborescence.
    J’ai donc dupliqué archive.php que j’ai renommé en category-press.php

    mais là encore je suis complètement perdue. Je ne vois pas où est appelé le titre, ni la date, ni le content.
    il semble que le fichier en appelle deux autres : get_template_part( ‘template-parts/post/content’, get_post_format() );
    le post-format, à ma connaissance il n’y en a pas car je n’ai pas trouvé de content-quote (voir ma question1)
    j’ai donc cherché du côté de content.php

    et là c’est pareil je suis complètement paumée, je ne sais pas quoi faire avec ça.
    J’ai essayé de virer la ligne « get_template_part( ‘template-parts/post/content’, get_post_format() ); »
    et de mettre des bouts de code genre « <div class= »entry »><?php the_excerpt(); ?></div> »

    et là plus rien ne marche, erreur 503 je pense

     

    pouvez-vous m’aider sur ces questions svp?
    si je suis trop loin du compte, pouvez-vous me donner d’autres ressources pour apprendre pas à pas svp?
    j’ai essayé le site de Flobogo que j’ai vraiment bien aimé. Je pense avoir appris beaucoup avec, mais je ne trouve toujours pas la solution à mon problème. J’ai également un livre « WordPress : Conception et personnalisation des thèmes (2ième édition) » de C. AUBRY (ENI)

    mais même avec ça je patauge toujours dans la semoule

     

     

    • Cette réponse a été modifiée le il y a 6 mois et 2 semaines par  wordpresseuse.
    #1639448

    Flobogo
    Modérateur
    Maître WordPress
    13703 contributions

    Bon, la réflexion avance bien, mais atteint mes limites. Quelques indications quand même :

    • Question 1 –> en effet, il n’y a pas content-quote.php, c’est bizarre. 😕

    y a t-il un moyen de savoir quel fichier php est appelé? (genre avec l’outil « Examiner l’élément » du navigateur ?)

    –> Oui, avec l’extension What the file. (merci à Philyon qui m’a fait découvrir cette extension) Il suffit de l’activer, puis d’aller sur la page voulue de ton site, et en haut à droite (dans la barre d’outils admin’), tu as la liste du ou des fichier(s) utilisé(s) pour l’affichage de ce contenu.

     

    • Question 2 :

    si je parviens à modifier l’apparence de mon post format, est-ce que cela va modifier l’apparence de la LISTE des posts formats?

    –> Non. Cette liste des articles, c’est une catégorie. (voir d’ailleurs la question 3)

     

    • Question 3 :

    Mes « quotes » sont des articles classés dans une catégorie « press ». Donc je pensais créer un fichier category-press.php

    –> Oui, c’est tout à fait ce qu’il faut faire. Comme ton thème n’a pas de fichier category.php (ce qui est est pourtant fréquent), il faut en effet utiliser archive.php comme base.

    Et il va donc falloir supprimer cette ligne et la remplacer par les éléments à appeler :

    	get_template_part( 'template-parts/post/content', get_post_format() );

    On va utiliser le fichier content.php, pour appeler ce qu’on veut comme contenu, en copiant ce qui se fait pour un article (et en supprimant ce qui concerne l’article en single).

    Essaie avec ça :

    			if ( 'post' === get_post_type() ) :
    				echo '<div class="entry-meta">';
    					
    						echo twentyseventeen_time_link();
    						twentyseventeen_edit_link();
    
    				echo '</div><!-- .entry-meta -->';
    			endif;
    
    
    				the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );

    Ce morceau de code doit remplacer la ligne qui était plus haut.

    Je ne promets pas que ça fonctionne, ni que ce soit exactement ce que tu veux, mais ce sera la base de travail. Là, il se fait tard (pour moi), tu me diras ce que ça a donné.

     

    #1639551

    stremblaym
    Participant
    Chevalier WordPress
    112 contributions

    Le morceau de code ne fonctionnera pas à coup sur. Flobogo, toi et moi il faut s’asseoir et qu’on jase de code, j’adore ta détermination ! (Non ce n’est pas sarcastique.)

    En deuxième, si tu veux géré le post format Quote, il faut créer un fichier appelé content-quote.php … base toi sur ton fichier content.php pour le codage.

    Regarde ici, https://wpchannel.com/post-formats-wordpress/

     

    Si non, je suis pas trop sur de savoir vous en êtes rendu où… Fait moi un petit breifing de tes besoins et je t’aiderais.

    • Cette réponse a été modifiée le il y a 6 mois et 2 semaines par  stremblaym.
    #1639660

    wordpresseuse
    Participant
    Padawan WordPress
    65 contributions

    Bonsoir à vous 2,

    l’aide a été archi précieuse et utile!
    merci pour le plugin!!!! génial ça m’aide beaucoup. Grâce à lui, tout s’éclaire
    donc pour tirer les 3 points au clair :

    -question1-
    Après analyse j’avais effectivement déjà créé un fichier content-quote.php dans mon thème enfant (j’avais oublié!), qui était bien appelé par la page.
    Dedans je ne sais plus ce que j’ai mis :blush: ça ressemble au code de content-image.php du thème twentyseventeen mais pas tout à fait. Ca tombe bien, ce code m’affiche de jolies quote-marks, exactement ce que je voulais.
    -question2-
    ben en fait après avoir fait un essai, si!
    si je vire mon fichier category-press.php et que j’affiche ma liste de posts, il va bien chercher mon fichier  content-quote.php et m’affiche les jolies quote marks sur chaque citation, c’est d’ailleurs mon screenshot n°1 (tout en haut de cette page)
    -question3-
    grâce à ton magnifique morceau de code, j’ai enfin pu avancer!!
    et là une question existentielle me vient :
    pourquoi pour afficher un truc, on utilise tantot echo, tantot le marqueur de modèle tout seul ?

    dans quel cas on met quoi?
    quelle ressource je peux lire pour comprendre? un manuel de php?

    @stremblaym merci pour ton lien. Je me souviens très bien que je l’avais lu mais j’avais peur qu’il soit trop vieux.
    je vais m’y replonger

     

    • Cette réponse a été modifiée le il y a 6 mois et 2 semaines par  wordpresseuse.
    #1639671

    Flobogo
    Modérateur
    Maître WordPress
    13703 contributions

    On avance, on avance, c’est cool.

    @wordpresseuse :

    • Pour le point 1 : super si content-quote.php fonctionne. WordPress est bien foutu quand même. (par contre, pouquoi Twenty Seventeen a t-il prévu ce format sans prévoir le fichier qui va avec, bizarre 🤔 …)
    • Pour le point 2 : bah en fait, c’est vrai que tout dépend de ce qu’on met dans category.php (ou archives.php) , et comment on le « stylise » en CSS.
      Perso, mes catégories affichent l’image à la une, alors qu’elle n’est pas affichée sur l’article en « single ».
      Mais là, dans ton cas, pas d’image. Et en plus, tu as prévu d’afficher le contenu complet et non l’extrait sur les archives.
    • Pour le point 3 : je ne suis pas sûre d’avoir bien compris la question. (et d’ailleurs, je ne suis pas sûre de savoir bien y répondre)
      En gros, la commande echo permet d’afficher du texte (et de le traduire ensuite grâce au fichier .po si le textdomain est respecté). Mais parfois, echo permet d’appeler « quelque chose » qui sera affiché sous forme de texte.
      Par contre, ce qu’on appelle « marqueur de modèle », c’est du genre if_is_frontpage() ou if_in_category(‘xx’), donc là, c’est pour poser une condition pour savoir dans quel fichier on se trouve.
      Je pense que ta question, c’était plus sur le code avec « get_post_thumbnail » par exemple. Ben là, c’est pour afficher ce qui n’est pas du texte.
      Enfin, là, je te donne des infos qui ne sont pas officielles du tout, c’est ce que j’ai compris peu à peu, je suis à peine plus avancée que toi à ce niveau.
    • Et d’ailleurs, ça donne quoi maintenant ? Tu as réussi à mettre le titre devant la date ?

    @stremblaym : je ne sais pas trop si ton message s’adressait à moi ou à @wordpresseuse … ou aux deux …
    Je veux bien « causer code », mais je ne suis pas codeuse, juste bidouilleuse après 4 ans passés sur ce forum. C’est pour ça que j’ai prévenu qu’on allait atteindre mes limites, là 😕

    #1639724

    wordpresseuse
    Participant
    Padawan WordPress
    65 contributions

    oui pour l’avancée! Smiley Banane
    tout d’abord, je commence à faire certains tests sur le serveur réel donc je vais pouvoir vous envoyer le lien

    point1 : je me suis posé la même question, mais j’arrêterai là l’enquête.
    point2 : peut être par la suite je mettrai un thumbnail mais pas au programme pour le moment
    point3 : ma question c’était parce qu’en essayant de créer le fichier, je ne copiais pas le bon bout de code, et je comprenais pas pourquoi j’avais une erreur (je préciserai dans un prochain message car j’ai pas les exemples précis sous la main)
    merci pour ta réponse, c’est pas encore tout à fait clair pour moi mais quand même je pense comprendre un peu

    Où j’en suis :

    j’ai effectivement réussi à mettre le contenu, et en dessous, sur la même ligne, le titre et la date dans le format que je veux (F Y)
    mais :
    – je n’ai pas réussi à mettre une virgule et un espace entre les 2
    – je n’ai pas réussi à mettre le joli quote-mark

    j’ai également modifié le projet, car je trouve que ce serait judicieux que quand je clique sur le titre, ça redirige vers un URL externe.
    Donc mettre titre et lien directement dans le content, car j’ai pas encore le courage de m’attaquer au custom_field

    J’aimerais donc juste, pour le moment :
    le content avec quote mark

    j’ai essayé de mixer et bidouiller entre les 2 fichiers content-quote.php (qui met les quote-mark) et category-press.php (qui affiche ce que je veux)
    mais pour l’instant je sèche.
    CAR : il faut que le quote-mark soit uniquement sur le « blockquote », ce que fait normalement le fichier content-quote.php mais j’ai beau lire et relire le fichier, je ne comprends toujours pas ce qu’il fait !

    voici la page : http://samratpandit.com/press/

     

    • Cette réponse a été modifiée le il y a 6 mois et 2 semaines par  wordpresseuse.
    • Cette réponse a été modifiée le il y a 6 mois et 2 semaines par  wordpresseuse.
    • Cette réponse a été modifiée le il y a 6 mois et 2 semaines par  wordpresseuse.
    #1639900

    Flobogo
    Modérateur
    Maître WordPress
    13703 contributions

    – je n’ai pas réussi à mettre une virgule et un espace entre les 2
    – je n’ai pas réussi à mettre le joli quote-mark

    –> J’ai l’impression que ce soir, c’est OK, non ? Il y a un tiret entre le titre et la date en tous cas. (sauf que les infos y sont 2 fois 😕 )

    Sinon, pour styliser, il faut appeler le même style CSS que dans content-quote.php. Il faudrait voir le contenu de tes fichiers content-quote.php et category-press.php pour t’aider plus.

    Remarque suite à mon coup d’œil au site en ligne : tu as créé le thème-enfant, ok, c’est très bien. Mais il faut mettre tout ton CSS personnalisé dans ton fichier style.css (à la suite de ce qui y est déjà de base), parce que là, tout le code CSS additionnel est visible dans le code-source (donc, chargé sur chaque page), ce qui est parfaitement inutile.

    #1639905

    wordpresseuse
    Participant
    Padawan WordPress
    65 contributions

    oui je suis en train de bidouiller, effectivement entre-temps j’ai trouvé des pistes!

    mais je ne parviens pas à pouvoir à la fois :
    – styliser mon blockquote (avec le joli quote-mark), pour cela, effectivement, j’ai besoin que le même style css que le content-quote (bien vu)
    – styliser le lien qui est en dessous. parce que du coup il appartient au même style css, je peux pas le dissocier ?

    voici les codes des 2 fichiers de base :

    <?php
    /**
     * The template for displaying posts of the category PRESS
     *
     */
    
    get_header(); ?>
    
    <div class="wrap">
    
    	<?php if ( have_posts() ) : ?>
    		<header class="page-header">
    			<?php
    				the_archive_title( '<h1 class="page-title">', '</h1>' );
    				the_archive_description( '<div class="taxonomy-description">', '</div>' );
    			?>
    		</header><!-- .page-header -->
    	<?php endif; ?>
    	
    	<div id="primary" class="content-area">
    		<main id="main" class="site-main" role="main">
    
    		<?php
    		if ( have_posts() ) : ?>
    			<?php
    			/* Start the Loop */
    			while ( have_posts() ) : the_post();
    			/* ----------------------------------  MY OWN CONTENT   ------------------------------------------- */
    			if ( 'post' === get_post_type() ) :
    				echo '<div class="entry-meta">';
    		
    					echo twentyseventeen_edit_link();
    
    				echo '</div><!-- .entry-meta -->';
    			endif;
    			if ( 'post' === get_post_type() ) :
    				echo '<div class="press-quote-content">';
    		
    					echo the_content();
    
    				echo '</div><!-- .press-quote-content -->';
    			endif;
    
    
    			/* ----------------------------------  END OF MY CONTENT   ------------------------------------- */
    				/*
    				 * Include the Post-Format-specific template for the content.
    				 * If you want to override this in a child theme, then include a file
    				 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
    				 */
    				/*get_template_part( 'template-parts/post/content', get_post_format() );*/
    
    			endwhile;
    
    			the_posts_pagination( array(
    				'prev_text' => twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '<span class="screen-reader-text">' . __( 'Previous page', 'twentyseventeen' ) . '</span>',
    				'next_text' => '<span class="screen-reader-text">' . __( 'Next page', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ),
    				'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyseventeen' ) . ' </span>',
    			) );
    
    		else :
    
    			get_template_part( 'template-parts/post/content', 'none' );
    
    		endif; ?>
    
    		</main><!-- #main -->
    	</div><!-- #primary -->
    	<?php get_sidebar(); ?>
    </div><!-- .wrap -->
    
    <?php get_footer();
    category-press.php

    <?php
    /**
     * Template part for displaying QUOTE posts
     *
     * @link https://codex.wordpress.org/Template_Hierarchy
     *
     * @package WordPress
     * @subpackage Twenty_Seventeen
     * @since 1.0
     * @version 1.0
     */
    ?>
    
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    	<?php
    		if ( is_sticky() && is_home() ) :
    			echo twentyseventeen_get_svg( array( 'icon' => 'thumb-tack' ) );
    		endif;
    	?>
    	<header class="entry-header">
    		<?php
    			if ( 'post' === get_post_type() ) :
    				echo '<div class="entry-meta">';
    					if ( is_single() ) :
    						twentyseventeen_posted_on();
    					else :
    						echo twentyseventeen_time_link();
    						twentyseventeen_edit_link();
    					endif;
    				echo '</div><!-- .entry-meta -->';
    			endif;
    
    			if ( is_single() ) {
    				the_title( '<h1 class="entry-title">', '</h1>' );
    			} else {
    				the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
    			}
    		?>
    	</header><!-- .entry-header -->
    
    	<?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>
    		<div class="post-thumbnail">
    			<a href="<?php the_permalink(); ?>">
    				<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
    			</a>
    		</div><!-- .post-thumbnail -->
    	<?php endif; ?>
    
    	<div class="entry-content">
    
    		<?php if ( is_single() || '' === get_the_post_thumbnail() ) :
    
    			// Only show content if is a single post, or if there's no featured image.
    			/* translators: %s: Name of current post */
    			the_content( sprintf(
    				__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
    				get_the_title()
    			) );
    
    			wp_link_pages( array(
    				'before'      => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
    				'after'       => '</div>',
    				'link_before' => '<span class="page-number">',
    				'link_after'  => '</span>',
    			) );
    
    		endif; ?>
    
    	</div><!-- .entry-content -->
    
    	<?php if ( is_single() ) : ?>
    		<?php twentyseventeen_entry_footer(); ?>
    	<?php endif; ?>
    
    </article><!-- #post-## -->
    content-quote.php

     

    Merci pour ton conseil pour le css. Je ne sais pas pourquoi ça fait cela.
    à vrai dire je colle mon css dans la partie « customize » de l’admin wordpress pour plus de confort, c’est peut être à cause de ça?

15 sujets de 1 à 15 (sur un total de 33)
  • Vous devez être connecté pour répondre à ce sujet.