Modification de thème WordPress

Résolu/Fermé

jimmy1120112 Messages postés 619 Date d'inscription mardi 30 novembre 2010 Statut Membre Dernière intervention 7 décembre 2014 - 19 déc. 2012 à 23:46
weetabix40 Messages postés 9583 Date d'inscription samedi 12 janvier 2008 Statut Contributeur Dernière intervention 28 novembre 2015 - 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 !!

A voir également:

Modification de thème WordPress
Suivi de modification word - Guide
Logiciel gratuit modification pdf - Guide
Theme sombre google - Guide
Modification dns - Guide
Changer thème iphone gratuit - Télécharger - Thèmes & Fonds d'écran

7 réponses

Réponse 1 / 7

weetabix40 Messages postés 9583 Date d'inscription samedi 12 janvier 2008 Statut Contributeur Dernière intervention 28 novembre 2015 1 724
20 déc. 2012 à 08:59

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 9583 Date d'inscription samedi 12 janvier 2008 Statut Contributeur Dernière intervention 28 novembre 2015 1 724
20 déc. 2012 à 00:14

Salut,

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

Réponse 3 / 7

jimmy1120112 Messages postés 619 Date d'inscription mardi 30 novembre 2010 Statut Membre Dernière intervention 7 décembre 2014 54
20 déc. 2012 à 00:17

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 619 Date d'inscription mardi 30 novembre 2010 Statut Membre Dernière intervention 7 décembre 2014 54
20 déc. 2012 à 00:18

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 9583 Date d'inscription samedi 12 janvier 2008 Statut Contributeur Dernière intervention 28 novembre 2015 1 724
20 déc. 2012 à 00:24

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 619 Date d'inscription mardi 30 novembre 2010 Statut Membre Dernière intervention 7 décembre 2014 54
20 déc. 2012 à 00:29

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 619 Date d'inscription mardi 30 novembre 2010 Statut Membre Dernière intervention 7 décembre 2014 54
Modifié par jimmy1120112 le 20/12/2012 à 00:30

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 9583 Date d'inscription samedi 12 janvier 2008 Statut Contributeur Dernière intervention 28 novembre 2015 1 724
20 déc. 2012 à 00:36

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 619 Date d'inscription mardi 30 novembre 2010 Statut Membre Dernière intervention 7 décembre 2014 54
20 déc. 2012 à 00:38

: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 619 Date d'inscription mardi 30 novembre 2010 Statut Membre Dernière intervention 7 décembre 2014 54
Modifié par jimmy1120112 le 20/12/2012 à 00:59

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 619 Date d'inscription mardi 30 novembre 2010 Statut Membre Dernière intervention 7 décembre 2014 54
Modifié par jimmy1120112 le 20/12/2012 à 14:37

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 619 Date d'inscription mardi 30 novembre 2010 Statut Membre Dernière intervention 7 décembre 2014 54
20 déc. 2012 à 14:42

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 9583 Date d'inscription samedi 12 janvier 2008 Statut Contributeur Dernière intervention 28 novembre 2015 1 724
20 déc. 2012 à 14:55

Cool ;)

Discussions similaires

suggestion de thème rapport de stage en secretariat

deverrouiller un fichier excel verrouiller pour modification par moi meme