Modifier le rendu par défaut de la page blog/articles de mon thème (Créer un compte)

  • Statut : non résolu
15 sujets de 1 à 15 (sur un total de 19)
  • Auteur
    Messages
  • #556459
    LGphoto
    Membre
    Padawan WordPress
    78 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress : 4.3.1–fr_FR
    – Version de PHP/MySQL : v5.5
    – Thème utilisé : Thème enfant de Snapshot https://siteorigin.com/theme/snapshot/
    – Extensions en place :
    iFeature Slider Free
    Jetpack par WordPress.com
    Master Slider
    Media Library Assistant
    Meta Slider
    FooGallery
    Page Builder by SiteOrigin
    Responsive Add Ons
    SiteOrigin Widgets Bundle
    Snapshot Plus
    – Nom de l’hebergeur : OVH
    – Adresse du site : http://www.lgphotography.fr/wordpress

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

    Après avoir monté tout mon site sur le thème Snapshot, je suis très satisfait du résultat, mais au moment de créer une page de blog, je me rends compte que son rendu ne me convient pas du tout.

    Par défaut, dans mon thème, les articles apparaissent comme des photos, dans des boites où le texte n’est visible que quand on passe la souris.
    C’est assez difficile à décrire, mais bien visible dans la démo, lien Page Templates/Blog : https://siteorigin.com/theme/snapshot/?action=demo#snapshot

    Or je voudrais une apparence de blog traditionnel, comme mon ancien blog, avec les articles l’un en dessous de l’autre : http://blog.lgphotography.fr/

    Est-il possible de modifier mon thème pour obtenir ce rendu ? Via le Custom CSS ?

    Du même éditeur, il y a un thème dont l’apparence générale ne me convient pas, mais la page blog me convient parfaitement. J’ai déjà téléchargé ce thème: https://siteorigin.com/theme/origami/?action=demo#origami (Page Templates/Blog).
    Est-ce qu’éventuellement, il serait possible de copier la partie de ce thème référente aux pages blog ? Si oui, comment la localiser ?

    Sinon, est-ce que vous avez d’autres idées ou est-ce qu’il faut que je reparte à zéro avec un autre thème ?

    Au cas où ça sert, voici le fichier Style.css de mon thème : http://www.lgphotography.fr/Help/style.css
    Et celui du thème Origami: http://www.lgphotography.fr/Help/origami-style.css

    Merci pour votre aide, après plusieurs semaines de galères pour obtenir le rendu que je voulais sur le reste du site, je suis un peu désespéré… 😕

    #1028848
    Flobogo
    Modérateur
    Maître WordPress
    16275 contributions

    Bonjour,

    les articles apparaissent comme des photos

    Quel dommage se serait, pour un site de photographe, de ne pas montrer vos photos d’illustration (et juste elles) en page “Blog” ! Beaucoup de photographes recherchent cet effet pour leur site, et c’est logique.

    Est-il possible de modifier mon thème pour obtenir ce rendu ? Via le Custom CSS ?

    Oui, c’est possible ; mais non, pas en CSS.
    Il faut modifier le fichier index.php du thème

    Du même éditeur, il y a un thème dont l’apparence générale ne me convient pas, mais la page blog me convient parfaitement. (…)
    Est-ce qu’éventuellement, il serait possible de copier la partie de ce thème référente aux pages blog ?

    Oui, c’est possible : il s’agit du fichier index.php
    Mais, selon les thèmes, ce fichier fait parfois appel à des sous-fichiers, donc ça va nécessiter de mettre vraiment les mains dans le cambouis … code 😋

    #1028849
    LGphoto
    Membre
    Padawan WordPress
    78 contributions

    Merci pour votre réponse !

    Les photos sont dans les galeries et pour le blog, j’ai besoin de mettre en avant le contenu texte. Je divulgue des horaires de ours, publications magazine, exposition, et même quand il s’agit de photos diffusées dans le blog, elles sont accompagnées d’un texte de conseils photo.
    Donc pour moi le texte est réellement le plus important dans la partie blog…

    En ce qui concerne le fichier index.php du theme, il n’y a que ça :

    Et celui de “Origami”, l’autre thème dont la présentation me convient mieux ressemble à ça :

    Je vois que dans mon thème original, j’ai aussi ces fichiers :
    – page-blog.php
    – archive.php
    – header.php
    – loop.php
    – slider-home.php
    – footer.php
    (je ne sais pas si c’est à ces fichiers que index.php fait référence)

    Dans Origami, il y a en plus :
    – page-archive.php
    – template-archive.php
    et il n’y a pas slider-home.php

    Je vais essayer dans la journée de remplacer l’un par l’autre pour voir…
    Et/ou peut-être le fichier loop.php

    Savez-vous ce que serait ‘origami’ dans le code du second template ? Je ne vois pas de fichier auquel ça pourrait faire référence…

    #1028850
    LGphoto
    Membre
    Padawan WordPress
    78 contributions

    Dans ma dernière phrase, je voulais dire du second thème.

    #1028851
    LGphoto
    Membre
    Padawan WordPress
    78 contributions

    Ah, juste une question complémentaire, si ne ne me trompe pas dans ce que j’ai lu sue les thèmes-enfants, c’est dans le répertoire de mon thème que je dois déposer le fichier index.php, sans toucher à celui du thème original, c’est bien ça ?
    Et du coup, il remplacera automatiquement celui du thème et si je veux revenir en arrière, il suffit que je le supprime ?

    #1028852
    LGphoto
    Membre
    Padawan WordPress
    78 contributions

    Bon, j’ai retrouvé ce que j’avais lu. Donc il faut bien que je charge les nouveaux fichiers php dans le répertoire du thème-enfant.
    J’ai juste deux doutes :
    -je n’ai pas de fichier function.php dans mon thème enfant. Ai-je besoin d’en créer un ou ce n’est pas nécessaire ?
    – dois-je rezipper l’ensemble et reinstaller le thème ou est-ce que je peux l’envoyer directement evia FTP ?
    Merci !

    #1028853
    LGphoto
    Membre
    Padawan WordPress
    78 contributions

    Test effectué. Les modifs sont prises en compte immédiatement. Remplacer les fichiers index n’a rien changé, si ce n’est que je perds des options dans l’admin.
    Par contre, en remplaçant le fichier loop, il y a bien une différence, mais je perds la colonne centrale et les options d’edit de la page dans l’admin.

    Je vais essayer de faire un mix des deux en essayant de deviner qu’est-ce qui correspond à quoi…

    Si quelqu’un peut m’aider, voilà les deux fichiers loop.php.

    Celui que je veux remplacer, qui remplace les articles par des photos cliquables avec texte qui apparait au passage de la souris :

    
    	<div id="post-loop">
    		<div class="container">
    			
    				<div >
    					<div class="post-background">
    						 ‘thumbnail’)) ?>
    						<img src="/images/defaults/no-thumbnail.jpg” width=”310″ height=”420″ class=”thumbnail” />
    						
    						<div class="post-content">
    							
    							<h2><a href="”></a></h2>
    							<div class="excerpt">
    								
    							</div>
    							
    							<div class="date">
    								<em></em>
    								<a href="”></a>
    							</div>
    							
    							
    							
    								<div class="comments">
    									<em></em>
    									<a href="#comments”></a>
    								</div>
    							
    							
    						</div>
    
    						<div class="corner corner-se"></div>
    					</div>
    				</div>
    			
    			<div class="clear"></div>
    			
    			<div id="page-navigation">
    				
    				<?php else : posts_nav_link(' ', __('Previous Page', 'snapshot'), __('Next Page', 'snapshot')); echo '<div class="clear"></div>‘; endif;?>
    			</div>
    		</div>
    	</div>
    
    	<div class="page">
    		<div class="container">
    			<div id="post-main">
    				<div class="entry-content">
    					<p></p>
    				</div>
    			</div>
    	
    		</div>
    		<div class="clear"></div>
    	

    Et celui dont je pense me servir d’exemple :

    
    	
    		<div >
    
    			
    				<div class="featured-image">
    					 ‘main-image desktop’)) ?>
    					 ‘main-image mobile’)) ?>
    				</div>
    			
    
    			
    				<h1 class="entry-title">
    					
    						
    					
    						<a href="”></a>
    					
    				</h1>
    	
    				<div class="post-info">
    					
    					<?php if(siteorigin_setting('display_post_author')) printf(__('by %s', 'origami'), '<a href="'.get_author_posts_url(get_the_author_meta('ID')).'">‘.get_the_author_meta(‘display_name’).’</a>‘); ?>
    					
    					<?php if(siteorigin_setting('display_comment_counts')) printf(__('<strong>%u</strong> Comments’, ‘origami’), $post->comment_count); ?>
    	
    					
    					– 
    					
    				</div>
    			
    
    			ID, ‘content_columns’, true);
    				if($columns === false) $columns = 2;
    			}
    			else $columns = 1;
    			?>
    			<div class="content column-“>
    				
    					<div class="featured-image">
    						 ‘main-image desktop’)) ?>
    						 ‘main-image mobile’)) ?>
    					</div>
    				
    				
    				
    				<div class="clear"></div>
    			</div>
    			
    			 ‘<p class="page-links content">‘ . __(‘Pages:’, ‘origami’),
    				‘after’ => ‘</p>‘,
    			) )
    			?>
    			
    			ID); ?>
    			
    				<div class="below-content tagged">
    					
    						<div class="tags">
    							<div class="origami-icon-tag"></div>
    							<div class="the_tags">
    								
    							</div>
    						</div>
    					
    					
    					<?php if((!is_singular() && preg_match( '/<!--more(.*?)?-->/’, $post->post_content )) || empty($post->post_title)) : ?>
    						<div class="read-more">
    							<a href="”></a>
    							<div class="origami-icon-more"></div>
    						</div>
    					
    						 siteorigin_setting(‘social_twitter’))); ?>
    					
    
    					<div class="clear"></div>
    				</div>
    
    			
    				<div class="below-content">
    					 siteorigin_setting(‘social_twitter’))); ?>
    					<div class="clear"></div>
    				</div>
    			
    
    			
    				<div class="post-navigation">
    					
    					<div class="clear"></div>
    				</div>
    			
    			
    			
    
    		</div>
    	

    Le même éditeur a encore d’autres thèmes dont le format blog me convient.
    Si vous pensez qu’il peut être plus simple d’utiliser un autre de ces thèmes, je peux faire l’essai. A vrai dire, c’est peut-être ce que je vais faire, pour voir si ça marche mieux ! 😉

    #1028854
    LGphoto
    Membre
    Padawan WordPress
    78 contributions

    Bon, en fait j’ai téléchargé l’autre thème auquel je pensais, et il n’y a que ça dans le fichier loop.php :

    
    
    
    
    	
    	
    
    		
    
    	
    
    	
    
    
    
    	

    #1028855
    Flobogo
    Modérateur
    Maître WordPress
    16275 contributions

    C’est ce que je disais hier soir : le fichier index.php fait appel à un ou des sous-fichier(s), comme ici loop.php
    Plus ce type de fichier est complexe, plus il est difficile de les “copier” / utiliser d’un thème à l’autre. Il faut vraiment savoir coder en PHP et maîtriser les fonctions WordPress … 😕

    Le dernier fichier (votre message de 20 h 50) ne vous aidera pas non plus, car il fait lui-même appel à un autre sous-fichier –> content.php
    C’est un peu comme les poupées russes : plus on croit avancer, plus on découvre autre chose caché derrière la précédente.

    Si vous pensez qu’il peut être plus simple d’utiliser un autre de ces thèmes, je peux faire l’essai. A vrai dire, c’est peut-être ce que je vais faire, pour voir si ça marche mieux !

    Il peut éventuellement être plus facile de changer le contenu d’un fichier de page d’accueil (home.php) plutôt que modifier le fichier index.php et/ou celui qui contient la loop (la boucle) nécessaire à l’affichage du blog / des catégories …

    #1028856
    LGphoto
    Membre
    Padawan WordPress
    78 contributions

    Bon, je suis vraiment perdu, j’ai essayé de remplacer les fichiers index, les fichiers loop, de changer de thème et reprendre les fichiers home, page, etc de snapshot, mais rien ne marche.
    J’ai essayé plein d’autres thèmes, et Snapshot est le seul avec lequel la galerie FooGallery est réellement responsive (test sur mon téléphone).
    Du coup, je ne sais vraiment pas quoi faire.

    Si je fais des modifs dans les fichiers PHP, est-ce que les options liées apparaissent automatiquement dans l’admin ou est-ce qu’il faut modifier aussi un autre fichier pour les insérer ?

    Une idée de ce que je pourrais modifier dans le fichier loop pour avoir un affichage normal ?

    Sinon, j’ai pensé à rechercher un plugin qui transformerait n’importe quelle page en page blog, en affichant automatiquement tous les articles les uns à la suite des autres, mais je n’ai rien trouvé…

    #1028857
    Flobogo
    Modérateur
    Maître WordPress
    16275 contributions

    est-ce que les options liées apparaissent automatiquement dans l’admin ou est-ce qu’il faut modifier aussi un autre fichier pour les insérer ?

    Comme je ne sais pas de quelles options vous parlez, difficile de vous répondre.
    Si ces options sont liées au thème, vous les perdrez en modifiant le fichier.

    Une idée de ce que je pourrais modifier dans le fichier loop pour avoir un affichage normal ?

    Regardez les thèmes par défaut twenty-xxxx –> si l’un d’eux se rapproche de ce que vous souhaitez comme mise en page de blog, on pourra peut-être se baser dessus.

    Mais ça n’est pas facile (et pas sûr qu’on s’en sorte), au vu de la complexité d’organisation du thème que vous avez choisi.

    Sinon, j’ai pensé à rechercher un plugin qui transformerait n’importe quelle page en page blog, en affichant automatiquement tous les articles les uns à la suite des autres, mais je n’ai rien trouvé…

    Ca n’existe pas, puisque c’est une fonction prise en charge par les thèmes !

    #1028858
    LGphoto
    Membre
    Padawan WordPress
    78 contributions

    Merci beaucoup pour votre aide.

    J’ai regardé les thèmes par défaut, et le thème twenty-twelve correspond pas mal à ce que je cherche.
    Je l’ai même activé et pour certaines pages, je le préfère à mon thème Snapshot. Du coup, je ne sais pas s’il est plus simple d’activer Twenty-twelve et de le modifier, ou de laisser Snapshot et d’utiliser la page loop.php de twenty-twelve.

    Je serais bien tenté d’essayer d’adapter twenty-twelve, mais je ne sais pas si les problèmes que je rencontre peuvent être résolus :

    Les galeries ne s’affichaient pas comme je le souhaitais :
    GalerieNon.jpg

    En modifiant le CSS comme ceci

    body .site {
    	padding: 0 2.85714rem;
    	margin-top: 3.42857rem;
    	margin-bottom: 3.42857rem;
    	box-shadow: none;
    }
    
    .site {
    	margin: 0 auto;
    	max-width: none;
    	overflow: hidden;
    }

    je suis arrivé à un résultat qui me convient (bien que je préfèrerais si le titre (Fauna) étais plus à droite :
    FaunaOk-twenty.jpg

    Le problème, c’est que ça se répercute sur tout le thème :
    BlogNon-twenty.jpg

    Alors que la page de blog originale me convient parfaitement (peut-être juste en changeant la couleur fond) :
    Page blog :
    BlogOK.jpg

    Article (j’aime beaucoup cette présentation) :
    ArticleOK.jpg

    J’imagine que ce problème doit pouvoir se corriger plus facilement, avec lest types de pages…

    Celui qui me semble plus difficile à résoudre, c’est le résultat sur téléphone, pour la galerie :
    IMG_20151125_183219.jpg
    => Les vignettes ne sont pas responsive et dépassent de l’écran (morceau de photo en bas)

    Alors qu’avec Snapshot, le résultat est top :
    IMG_20151125_183628.jpg
    => C’est ce résultat que je n’arrive à obtenir avec aucun autre thème…

    Si vous pensez que ces problèmes peuvent être résolus, je préfère partir sur Twenty-twelve.

    Sinon, si je reste sur Snapshot, la présentation des articles et de la page blog de Twenty-twelve me convient parfaitement :
    Page blog :
    BlogOK.jpg

    Article (j’aime beaucoup cette présentation) :
    ArticleOK.jpg

    Il faudrait juste réussir à l’intégrer dans mon site, avec le même header et footer que le reste du thème, en gardant si possible la side-bar à droite telle qu’elle est ici.

    Pour compléter, j’avais réussi a avancer en remplaçant le fichier loop.php de Snapshot par celui d’un autre thème (Vantage) en ne remplaçant que la partie entre les balises

    et

    Mais les articles apparaissaient désorganisés en 3 colonnes et je n’avais pas la même sur le nombre de colonnes dans l’admin (alors que normalement mon thème me permet de le modifier sur les autres pages).

    Ne sachant pas ce qui est utile ou non, voilà ce que j’ai :

    Thème Twenty-twelve
    Não tem fichier loop.php
    Fichier archive.php:

    
    
    	<section id="primary" class="site-content">
    		<div id="content" role="main">
    
    		
    			<header class="archive-header">
    				<h1 class="archive-title"><?php
    					if ( is_day() ) :
    						printf( __( 'Daily Archives: %s', 'twentytwelve' ), '<span>‘ . get_the_date() . ‘</span>‘ );
    					elseif ( is_month() ) :
    						printf( __( ‘Monthly Archives: %s’, ‘twentytwelve’ ), ‘<span>‘ . get_the_date( _x( ‘F Y’, ‘monthly archives date format’, ‘twentytwelve’ ) ) . ‘</span>‘ );
    					elseif ( is_year() ) :
    						printf( __( ‘Yearly Archives: %s’, ‘twentytwelve’ ), ‘<span>‘ . get_the_date( _x( ‘Y’, ‘yearly archives date format’, ‘twentytwelve’ ) ) . ‘</span>‘ );
    					else :
    						_e( ‘Archives’, ‘twentytwelve’ );
    					endif;
    				?></h1>
    			</header><!-- .archive-header -->
    
    			
    
    		
    			
    		
    
    		</div><!-- #content -->
    	</section><!-- #primary -->

    Fichier index.php:

    
    
    	<div id="primary" class="site-content">
    		<div id="content" role="main">
    		
    
    			
    			
    				
    			
    
    			
    
    		
    
    			<article id="post-0" class="post no-results not-found">
    
    			
    				<header class="entry-header">
    					<h1 class="entry-title"></h1>
    				</header>
    
    				<div class="entry-content">
    					<p><?php printf( __( 'Ready to publish your first post? <a href="%s">Get started here</a>.’, ‘twentytwelve’ ), admin_url( ‘post-new.php’ ) ); ?></p>
    				</div><!-- .entry-content -->
    
    			
    				<header class="entry-header">
    					<h1 class="entry-title"></h1>
    				</header>
    
    				<div class="entry-content">
    					<p></p>
    					
    				</div><!-- .entry-content -->
    			
    
    			</article><!-- #post-0 -->
    
    		
    
    		</div><!-- #content -->
    	</div><!-- #primary -->

    Fichier page.php:

    
    
    	<div id="primary" class="site-content">
    		<div id="content" role="main">
    
    			
    				
    				
    			
    
    		</div><!-- #content -->
    	</div><!-- #primary -->

    (je ne sais pas quell fichier définit les proprietés de la galerie, en voici le lien : http://www.lgphotography.fr/wordpress/portfolio/fauna/ )

    Thème Snapshot :
    Fichier loop.php :

    
    	<div id="post-loop">
    		<div class="container">
    			
    				<div >
    					<div class="post-background">
    						 ‘thumbnail’)) ?>
    						<img src="/images/defaults/no-thumbnail.jpg” width=”310″ height=”420″ class=”thumbnail” />
    						
    						<div class="post-content">
    							
    							<h2><a href="”></a></h2>
    							<div class="excerpt">
    								
    							</div>
    							
    							<div class="date">
    								<em></em>
    								<a href="”></a>
    							</div>
    							
    							
    							
    								<div class="comments">
    									<em></em>
    									<a href="#comments”></a>
    								</div>
    							
    							
    						</div>
    
    						<div class="corner corner-se"></div>
    					</div>
    				</div>
    			
    			<div class="clear"></div>
    			
    			<div id="page-navigation">
    				
    				<?php else : posts_nav_link(' ', __('Previous Page', 'snapshot'), __('Next Page', 'snapshot')); echo '<div class="clear"></div>‘; endif;?>
    			</div>
    		</div>
    	</div>
    
    	<div class="page">
    		<div class="container">
    			<div id="post-main">
    				<div class="entry-content">
    					<p></p>
    				</div>
    			</div>
    	
    		</div>
    		<div class="clear"></div>
    	

    Fichier index.php:

    
    
    <div id="page-title" class="archive-title">
    	<div class="container">
    		<h1></h1>
    	

    Fichier page.php:

    
    
    <div id="page-title" class="archive-title">
    	<div class="container">
    		<h1></h1>
    	

    <div id="post-” >

    Fichier page-blog.php:

     $wp_query->get(‘paged’),
    ));
    get_template_part(‘index’);
    remove_filter(‘option_show_on_front’, ‘__return_false’);
    
    wp_reset_query();
    wp_reset_postdata();

    Fichier archive.php:

    
    
    <div id="page-title" class="archive-title">
    	<div class="container">
    		<h1></h1>
    	

    #1028859
    LGphoto
    Membre
    Padawan WordPress
    78 contributions

    J’ai cette option dans Page Builder, peut-être en remplaçant “body” dans le dernier champ par autre chose ?

    PageBuilder.jpg

    #1028860
    Flobogo
    Modérateur
    Maître WordPress
    16275 contributions

    Désolée, mais là, je me perds dans vos captures écran, je ne sais plus ce qui vous convient, ce qui ne va pas, ni sur quel thème.
    En plus, vous utilisez le plugin Page Builder que je ne connais pratiquement pas, je ne vais pas savoir vous aider.
    Il faudrait régler un problème à la fois.

    Par ailleurs, j’ai pensé au plugin Multiple Themes qui vous permettrait de “switcher” entre deux thèmes selon les “parties” du site : accueil / blog / article seul …

    #1028861
    LGphoto
    Membre
    Padawan WordPress
    78 contributions

    Après pas mel de tentatives por arriver à ce que je voulais en corrigeant le CSS, j’ai fini par trouver un code sur un forum, qui m’a donné le résultat que je voulais :

    .site-header,
    footer[role=”contentinfo”] {
    	background: white;
    }
    
    footer[role=”contentinfo”] {
    	border: 0;
    	padding-top: 48px;
    }
    
    body .site {
    	margin: 0;
    	padding: 0;
    	box-shadow: none;
    }
    
    .site-content article {
    	margin-bottom: 24px;
    }
    
    .wrapper {
    	margin-top: 12px;
    }
    
    .site-header hgroup, .site-header nav, .wrapper, footer[role=”contentinfo”] .site-info {
    	padding-left: 10px;
    	padding-right: 10px;
    }
    
    @media screen and (min-width: 600px) {
    	.site-header {
    		padding: 48px 0 0;
    	}
    	
    	.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    		border: 0;
    	}
    	
    	.wrapper {
    		margin-top: 24px;
    	}
    	
    	body .site, footer[role=”contentinfo”] {
    		max-width: 100%;
    	}
    	
    	.site-header hgroup, .site-header nav, .wrapper, footer[role=”contentinfo”] .site-info {
    		margin-left: auto;
    		margin-right: auto;
    		max-width: 920px;
    		padding-left: 20px;
    		padding-right: 20px;
    	}
    }
    
    @media screen and (min-width: 960px) {
    	.site-header hgroup, .site-header nav, .wrapper, footer[role=”contentinfo”] .site-info {
    		max-width: 940px;
    		padding-left: 0;
    		padding-right: 0;
    	}
    }
    
    @media screen and (min-width: 980px) {
    	.site-header hgroup, .site-header nav, .wrapper, footer[role=”contentinfo”] .site-info {
    		max-width: 960px;
    	}
    }

    Il me reste le problème de l’affichage de la galerie sur mobile…

    Je pense que c’est une question de priorité entre le thème et FooGallery. En reduisant prgressivement la taille de la fenêtre sur mon écran, je constate que les vignettes ne changent pas de taille (elles sont configurées à 400px dans FooGallery).
    Pourtant, avec Snapshot, elles s’adaptent à la taille de l’écran…

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