Modification de thème WordPress

Résolu

jimmy1120112 Messages postés 713 Statut Membre -
weetabix40 Messages postés 10146 Statut Contributeur - 20 déc. 2012 à 14:55

Bonjour à tous,

Je viens de mettre en ligne une galerie photo rapidement avec wordpress.

Jusque la j'ai put trouver comment m'organiser entre les articles, pages, etc... Mais je ne trouve pas comment modifier le thème au niveau des lien sur images, je m'explique :

Quand vous êtes sur la page d'accueil du mini blog ici : http://www.libertyquad10.com/galerie/
Vous voyez un défiler de photo avec un nom en haut à gauche, pour accéder a l'article don l'image correspond il faut cliquer sur le nom hors je voudrais que l'ont puisse y accéder en cliquant sur l'image entière.

De même que pour les images en dessous qui on le même problème. Comment puis-je faire ?

J'ai fait quelques recherche, je touche un peut le html mais le php j'y comprend pas grand chose.

Merci d'avance !!

Afficher la suite

A voir également:

Modification de thème WordPress
Suivi de modification word - Guide
Logiciel gratuit modification pdf - Guide
Modification dns - Guide
Theme sombre google - Guide
Wordpress download - Télécharger - Blog & CMS

7 réponses

Réponse 1 / 7

weetabix40 Messages postés 10146 Statut Contributeur 1 724

Du mieux de mon coté avec :

#post-loop .post-content h2 a {
display: block;
width: 100%;
height: 420px; 
...

Réponse 2 / 7

weetabix40 Messages postés 10146 Statut Contributeur 1 724

Salut,

Il faut définir ton <a href...> pour la div

Réponse 3 / 7

jimmy1120112 Messages postés 713 Statut Membre 54

Bonsoir,

Oui je viens de voir cela, j'y suis arriver pour le slider mais pas pour les images en bas, d'après ce que je comprend ça ce situe dans le fichier loop.php mais quoi que je définissent le background passe par dessus l'image et donc le lien fonctionne pas, et je ne peut pas mettre <a href="<?php the_permalink() ?>"> dans le style.css car cela ne fonctionnerai pas...

Je continu d'essayer, si quelqu'un a déjà eu ce genre de chose, je suis preneur pour un indice ;)

Merci d'avance !!

Réponse 4 / 7

jimmy1120112 Messages postés 713 Statut Membre 54

Voici le code du fichier loop :

<?php if(have_posts()) : ?>
	<div id="post-loop">
		<div class="container">
			<?php while(have_posts()): the_post(); ?>
				<div <?php post_class('post') ?>>
					<div class="post-background">
						<?php if(has_post_thumbnail()) : the_post_thumbnail('post-thumbnail', array('class' => 'thumbnail')) ?>
						<?php else : ?><img src="<?php print get_template_directory_uri() ?>/images/defaults/no-thumbnail.jpg" width="310" height="420" class="thumbnail" />
						<?php endif ?>
						<a href="<?php the_permalink() ?>"><div class="post-content">
							<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></h2>
							<div class="excerpt">
								<?php the_excerpt() ?>
							</div>
							
							<div class="date">
								<em></em>
								<a href="<?php the_permalink() ?>"><?php print get_the_date() ?></a>
							</div>
							
							<?php $comments = get_comment_count(get_the_ID()); ?>
							<?php if(!empty($comments['approved'])) : ?>
								<div class="comments">
									<em></em>
									<a href="<?php the_permalink() ?>#comments"><?php printf(__('%s Comments', 'snapshot'), $comments['approved']) ?></a>
								</div></a>
							<?php endif; ?>
							
						</div>

						<div class="corner corner-se"></div>
					</div>
				</div>
			<?php endwhile; ?>
			<div class="clear"></div>
			
			<div id="page-navigation">
				<?php if(function_exists('wp_pagenavi')) : wp_pagenavi(); ?>
				<?php else : posts_nav_link(' ', __('Previous Page', 'snapshot'), __('Next Page', 'snapshot')); print '<div class="clear"></div>'; endif;?>
			</div>
		</div>
	</div>
<?php else : ?>
	<div class="page">
		<div class="container">
			<div id="post-main">
				<div class="entry-content">
					<p><?php print so_setting('messages_no_results') ?></p>
				</div>
			</div>
	
		</div>
		<div class="clear"></div>
	</div>
<?php endif; ?>

Merci !!

weetabix40 Messages postés 10146 Statut Contributeur 1 724

Essayes avec ça :

<?php if(have_posts()) : ?>
	<div id="post-loop">
		<div class="container">
			<?php while(have_posts()): the_post(); ?>
				<div <?php post_class('post') ?>>
					
					<!-- TEST NOUVEAU LIEN -->
					<a href="<?php the_permalink() ?>">
					
					<div class="post-background">
						<?php if(has_post_thumbnail()) : the_post_thumbnail('post-thumbnail', array('class' => 'thumbnail')) ?>
						<?php else : ?><img src="<?php print get_template_directory_uri() ?>/images/defaults/no-thumbnail.jpg" width="310" height="420" class="thumbnail" />
						<?php endif ?>
						<div class="post-content">
							<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
							<div class="excerpt">
								<?php the_excerpt() ?>
							</div>
							
							<div class="date">
								<em></em>
								<a href="<?php the_permalink() ?>"><?php print get_the_date() ?></a>
							</div>
							
							<?php $comments = get_comment_count(get_the_ID()); ?>
							<?php if(!empty($comments['approved'])) : ?>
								<div class="comments">
									<em></em>
									<a href="<?php the_permalink() ?>#comments"><?php printf(__('%s Comments', 'snapshot'), $comments['approved']) ?></a>
								</div>
							<?php endif; ?>
							
						</div>

						<div class="corner corner-se"></div>
					</div>
					
					</a>
					<!-- FIN DU TEST -->
				</div>
			<?php endwhile; ?>
			<div class="clear"></div>
			
			<div id="page-navigation">
				<?php if(function_exists('wp_pagenavi')) : wp_pagenavi(); ?>
				<?php else : posts_nav_link(' ', __('Previous Page', 'snapshot'), __('Next Page', 'snapshot')); print '<div class="clear"></div>'; endif;?>
			</div>
		</div>
	</div>
<?php else : ?>
	<div class="page">
		<div class="container">
			<div id="post-main">
				<div class="entry-content">
					<p><?php print so_setting('messages_no_results') ?></p>
				</div>
			</div>
	
		</div>
		<div class="clear"></div>
	</div>
<?php endif; ?>

jimmy1120112 Messages postés 713 Statut Membre 54

Non rien y fait ...

Si je retire :

<a href="<?php the_permalink() ?>"><div class="post-content">
<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></h2>
<div class="excerpt">
<?php the_excerpt() ?>
</div>

<div class="date">
<em></em>
<a href="<?php the_permalink() ?>"><?php print get_the_date() ?></a>
</div>

<?php $comments = get_comment_count(get_the_ID()); ?>
<?php if(!empty($comments['approved'])) : ?>
<div class="comments">
<em></em>
<a href="<?php the_permalink() ?>#comments"><?php printf(__('%s Comments', 'snapshot'), $comments['approved']) ?></a>
</div></a>
<?php endif; ?>

</div>

La photo n'a plus le nom, la date, le commentaire, le fond gris qui viens par dessus mais le lien fonctionne en mettant ceci avant :

<div class="post-background">
<a href="<?php the_permalink() ?>"><?php if(has_post_thumbnail()) : the_post_thumbnail('post-thumbnail', array('class' => 'thumbnail')) ?></a>
<a href="<?php the_permalink() ?>"><?php else : ?><img src="<?php print get_template_directory_uri() ?>/images/defaults/no-thumbnail.jpg" width="310" height="420" class="thumbnail" /></a>
<?php endif ?>

jimmy1120112 Messages postés 713 Statut Membre 54

Plus précisément ceci :
<div class="post-content">

C'est ce qui fait afficher le fond gris qui viens par dessus l'image dite "background" donc derrière.

weetabix40 Messages postés 10146 Statut Contributeur 1 724

Essaye ça :

<?php if(have_posts()) : ?>
	<div id="post-loop">
		<div class="container">
			<?php while(have_posts()): the_post(); ?>
				<div <?php post_class('post') ?>>
					
					<div class="post-background">
						<a href="<?php the_permalink() ?>">
						<?php if(has_post_thumbnail()) : the_post_thumbnail('post-thumbnail', array('class' => 'thumbnail')) ?>
						<?php else : ?><img src="<?php print get_template_directory_uri() ?>/images/defaults/no-thumbnail.jpg" width="310" height="420" class="thumbnail" />
						<?php endif ?>
						</a>
						<div class="post-content">
							<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
							<div class="excerpt">
								<?php the_excerpt() ?>
							</div>
							
							<div class="date">
								<em></em>
								<a href="<?php the_permalink() ?>"><?php print get_the_date() ?></a>
							</div>
							
							<?php $comments = get_comment_count(get_the_ID()); ?>
							<?php if(!empty($comments['approved'])) : ?>
								<div class="comments">
									<em></em>
									<a href="<?php the_permalink() ?>#comments"><?php printf(__('%s Comments', 'snapshot'), $comments['approved']) ?></a>
								</div>
							<?php endif; ?>
							
						</div>

						<div class="corner corner-se"></div>
					</div>
					
				</div>
			<?php endwhile; ?>
			<div class="clear"></div>
			
			<div id="page-navigation">
				<?php if(function_exists('wp_pagenavi')) : wp_pagenavi(); ?>
				<?php else : posts_nav_link(' ', __('Previous Page', 'snapshot'), __('Next Page', 'snapshot')); print '<div class="clear"></div>'; endif;?>
			</div>
		</div>
	</div>
<?php else : ?>
	<div class="page">
		<div class="container">
			<div id="post-main">
				<div class="entry-content">
					<p><?php print so_setting('messages_no_results') ?></p>
				</div>
			</div>
	
		</div>
		<div class="clear"></div>
	</div>
<?php endif; ?>

jimmy1120112 Messages postés 713 Statut Membre 54

:D

Identique ... Tout est bien garder mais le lien n'est pas dessus.

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 7

jimmy1120112 Messages postés 713 Statut Membre 54

Regarde si tu veux pour demain :D

J'ai mis dans le css le cadre griser a 50% de la taille de l'image, et quand tu passe ta souris sur l'image le lien marche, mais pas sur le cadre gris...

Donc comment faire pour appliquer le lien également au cadre qui viens par dessus ?

le CSS concernant post loop est le suivant :

#post-loop { 
} 

#post-loop .container { 
 width: 975px; 
  
} 

#post-loop .post { 
 width: 33.3333%; 
  
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box; 
 box-sizing: border-box; 
 float: left; 
 margin-bottom: 14px; 
 overflow: hidden; 
 padding: 0 7px; 
} 

#post-loop .post.sticky { 
} 

#post-loop .post-background { 
 position: relative; 
 height: 420px; 
  
 background: none; 
} 

#post-loop .post-background.loading { 
 background: url(images/slider-loader.gif) no-repeat center center; 
} 

#post-loop .post-background img { 
 width: 100%; 
  
} 

#post-loop .post-content { 
 position: absolute; 
 top: 0; 
 left: 0; 
 width: 50%; << je l'ai appliquer à 50% pour vous montrer le lien qui marche sur l'image et non sur le cadre.
 height: 420px; 
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box; 
 box-sizing: border-box; 
 opacity: 0; 
 overflow: hidden; 
 padding: 5px 20px; 
 background: none; 
 background-color: rgba(28,28,28,0.955); 

} 

#post-loop .post-content h2 { 
 color: #dddddd; 
 font-size: 21px; 
 font-weight: 300; 
 margin: 20px 0; 
 word-wrap: break-word; 
} 

#post-loop .post-content h2 a { 
 color: #dddddd; 
 text-decoration: none; 
} 

#post-loop .post-content .excerpt { 
 color: #dddddd; 
 font-family: "Droid Sans", sans-serif; 
 font-size: 12px; 
 line-height: 1.5em; 
}

Je verrai ça demain aussi parce que ça commence à piquer les yeux, merci !
Cordialement.
Jim

Réponse 6 / 7

jimmy1120112 Messages postés 713 Statut Membre 54

Bonjour Weetabix !

Ça bouge ! XD

Mais le nom ne s'affiche plus ^^ je continu de voir.

Merci

Cordialement.
Jim

Réponse 7 / 7

jimmy1120112 Messages postés 713 Statut Membre 54

Ayé !

A trouver :D

Modifs de ton code :

#post-loop .post-content h2 a {
	color: #dddddd;
	text-decoration: none;
	display: block;
	width: 100%;
	height: 300px; << Réduit pour que le nom remonte car il se positionne en bas de la hauteur.
}

Le nom s'affiche en bas de la photo mais le lien fonctionne !

Merci beaucoup !

weetabix40 Messages postés 10146 Statut Contributeur 1 724

Cool ;)

Discussions similaires

Theme de rapport de stage option comptabilité

suggestion de thème rapport de stage en secretariat

je cherche un théme pour mon mémoire de fin d'etude

Votre réponse

Discussions similaires