CONNEXION
  • RetourJeux
    • Sorties
    • Hit Parade
    • Les + populaires
    • Les + attendus
    • Soluces
    • Tous les Jeux
    • Gaming
  • RetourActu Gaming
    • News
    • Astuces
    • Tests
    • Previews
    • Toute l'actu gaming
  • RetourBons plans
    • Bons plans
    • Bons plans Smartphone
    • Bons plans Hardware
    • Bons plans Image et Son
    • Bons plans Amazon
    • Bons plans Cdiscount
    • Bons plans Decathlon
    • Bons plans Fnac
    • Tous les Bons plans
  • RetourJVTech
    • Actus High-Tech
    • Intelligence Artificielle
    • Smartphones
    • Mobilité urbaine
    • Hardware
    • Image et son
    • Tutoriels
    • Tests produits High-Tech
    • Guides d'achat High-Tech
    • JVTech
  • RetourCulture
    • Actus Culture
    • Culture
  • RetourVidéos
    • A la une
    • Gaming Live
    • Vidéos Tests
    • Vidéos Previews
    • Gameplay
    • Trailers
    • Chroniques
    • Replay Web TV
    • Toutes les vidéos
  • RetourForums
    • Hardware PC
    • PS5
    • Switch 2
    • Xbox Series
    • Switch
    • Pokemon pocket
    • FC 25 Ultimate Team
    • League of Legends
    • Tous les Forums
  • PC
  • PS5
  • Xbox Series
  • Switch 2
  • PS4
  • One
  • Switch
  • iOS
  • Android
  • MMO
  • RPG
  • FPS
En ce moment Genshin Impact Valhalla Breath of the wild Animal Crossing GTA 5 Red dead 2
Liste des sujets

Wordpress : deux colonnes d'articles.

Cainzer
Cainzer
Niveau 10
25 juin 2011 à 20:35:45

:salut: à tous !
J'envisage sérieusement de refaire le design de mon site web : http://4-games.fr pour le début des vacances.
Seulement ce n'est pas la première fois que j'envisage de le faire. Il y a déjà longtemps, j'avais demandé sur le support wordpress comment faire pour disposer mes articles sur deux colonnes. J'ai eu des réponses et j'ai fais comme ils ont dit mais ça n'a jamais fonctionné :( Je demande maintenant ici sur le forum de jeuxvideo.com.
J'aimerais donc, comme dit ci-dessus, mettre mes articles sur deux colonnes. J'aimerais aussi que le première article soit étendu sur la largeur des deux colonnes. Pour ce dernier truc, je ne pense pas que ça soit trop compliqué, il me semble qu'il faille juste toucher au loop de wordpress. Mais pour les articles sur deux colonnes, c'est vraiment impossible pour moi.

Pourriez vous s'il vous plait, me dire en détail comment procéder, ou alors me donner un thème vraiment très basique qui a déjà cette fonction afin que je puisse le personnaliser par la suite. Ou alors carrément me donner le codage tout fait pour que je le met au bon emplacement.
:merci: d'avance :)

Voila le schéma de ce que je voudrais faire : http://s3.noelshack.com/uploads/images/16155168391593_shma.jpg

killahblup
killahblup
Niveau 8
25 juin 2011 à 20:46:57

A priori, tu auras sur ta page index.php deux boucles :

<?php $my_query = new WP_Query('showposts=1');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>
<!-- Faire des trucs... -->
<?php endwhile; ?>

<?php if (have_posts()) : while (have_posts()) : the_post();
if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>
<!-- Faire des trucs... -->
<?php endwhile; endif; ?>

La première affiche le dernier post et la seconde affiche tous les articles sauf celui qui est déjà affiché plus haut.
A vérifier car je nesuis pas un pro de wordpress. Bon il y aura des trucs a adapter à ton cas hein mais ça peut peut être t'éclairer un peu ...

Cainzer
Cainzer
Niveau 10
25 juin 2011 à 21:11:30

:merci: pour cette réponse rapide :)
Bien, il me semble aussi que c'est ça.
Reste à savoir pour les articles sur deux colonnes. Ce qu'il va se passer dans la loop.

PS : sur le support ils m'ont toujours dit qu'il n'y avait pas besoin de toucher au loop pour faire 2 colonnes. Mais avec cette méthode je n'ai jamais réussi.

killahblup
killahblup
Niveau 8
25 juin 2011 à 21:40:29

Alors pour ça c'est relativement simple, tu as ton loop qui n'affiche qu'un article dans un bloc, dont tu définis la largeur.

Et en dessous tu as un deuxième bloc qui contient tes articles a priori si tu met un "float: left" aux articles contenus dans ce bloc en CSS et en définissant la largeur ça devrait fonctionner, faut voir dans tout les cas ça se réglera en CSS.

Encore une fois tu devras certainement tatonner un peu pour que ça marche mais ça devrait pas être trop loin de ça :)

Cainzer
Cainzer
Niveau 10
25 juin 2011 à 21:45:22

Bon je pense que tu es dans le véridique puisqu'au support on m'a dit exactement la même chose.
Je vais donc réessayer encore une fois.
Si jamais vous avez d'autres astuces ou même un thème n'hésitez pas.

:merci: beaucoup KillahBlup pour tes deux réponses éclairs :) C'est vraiment plaisant parce que sur ce forum j'ai jamais eu l'habitude d'obtenir une réponse le jour même :)

killahblup
killahblup
Niveau 8
25 juin 2011 à 21:50:20

^^ de rien, après c'est vrai que le forum "création de site web" est beaucoup moins actif que celui de CoD Black Ops ^^

Enfin si tu rencontre d'autres soucis n'hésite pas.

Cainzer
Cainzer
Niveau 10
25 juin 2011 à 22:13:55

KillahBlup :d) :ouch: J'ai réussi à coller mes deux articles :ouch: J'en reviens pas. :merci: beaucoup :coeur:
Comme ça, ça semble bizarre mais dit toi que j'avais cherché pendant un mois et je n'avais jamais trouvé. Là, je demande par hasard sur JV.com et j'y arrive ! Bon j'essaierais pour le changement de loop demain mais normalement ça ne devrait pas poser de problème :ok:

killahblup
killahblup
Niveau 8
25 juin 2011 à 22:33:51

xD ben content que tu aies réussi :)
C'est jamais très compliqué, c'est une logique a prendre.

Bon courage puis tiens moi au courant ^^

Cainzer
Cainzer
Niveau 10
26 juin 2011 à 10:16:10

Bon c'est bon j'ai réussi :)
J'ai eu un peu de mal au début, c'est pourquoi ce je me suis aidé de ce tuto (pour ceux qui auraient le même problème que moi) : http://www.fran6art.com/tutoriels/tutoriels-wordpress-modifier-lapparence-de-la-page-daccueil-1ere-partie/

Ceci dit j'aurais deux autres questions qui ne concernent pas tout à fait mes questions initiales. Donc je ne sais pas si je vais avoir des réponses, auquel cas je referais un topic :
:d) J'aimerais réaliser un slideshow, mais je ne trouve aucun tuto "bien" sur google. Auriez vous un tuto à me donner, ou alors pourriez vous m'expliquer ?
:d) J'aimerais que lorsque l'on passe la souris sur le logo de mon site, le logo change de couleur. Bon alors là je me suis dit aucun problème ! J'ai juste à faire une image et faire un "truc:hover". Le problème c'est que j'ai inséré mon image dans du code HTML. Donc si je fais un "truc:hover" et que je met un background l'image du "hover" va en dessous de l'image initiale. C'est assez logique :( Mais moi j'aimerais qu'elle soit au dessus :p) Pourriez vous m'expliquer comment faire :question: Ou alors, est-ce que je me trompe de méthode ?

:merci: d'avance !

killahblup
killahblup
Niveau 8
26 juin 2011 à 13:11:06

Heum faire un slideshow en partant de rien c'est relativement compliqué. A mon avis tu devrais en trouver un sur le net (y'en a à foison ^^) qui ressemble a peu près à ce que tu envisage de faire. Puis de le modifier en conséquence.

Ensuite pour le logo alors la technique la plus efficace que je connaisse c'est en fait de mettre les deux logos sur une même image l'une au dessus (ou a côté) de l'autre, comme ça :

http://mirabellezaden.eu/images/navigation/nav_a_move.jpg

Ensuite dans le css tu définis la taille de ton logo de façon à ce qu'on ne voit que le premier logo, il sera mis en background. Pour afficher le premier logo il suffit de modifier la position du background ...

Je te donne un exemple ça sera plus clair :

h1 a {
background:url('ton_logo.png') no-repeat;
width: 456px;
height: 32px;
display:block; (très important)
}

h1 a:hover {
background-position : 0 32px 0 0;
}

Ca ressemblera a quelque chose comme ça, le h1 évidement à adapter mais il me semble que sur Wordpress le logo est dans le h1.

Bref donc je t'explique maintenant que tu as le code sous les yeux ^^

Le width et le height correspondent à la hauteur et à la largeur de ton logo (donc pour qu'on en voit qu'un). Le display block permet de fermer le bloc image et d'empêcher que ça ne dépasse.

Et pour finir le Backgound-position du hover permet de redonner une position a ton image, c'est à dire qu'il bougera ton background de tant de pixels. SI ton logo fais 40pixel de hauteur ça donnera : -40px 0 0 0; ou 0 0 40px 0; (je pense que les deux fonctionnent mais à tester).

Voila j’espère que ça t'aidera un peu

Cainzer
Cainzer
Niveau 10
26 juin 2011 à 14:39:28

:merci: pour ta réponse :)

En ce qui concerne le slideshow, j'avais cherché avant de demander mais j'en ai trouvé aucun "tout fait". Enfin, peut être que si mais comme tous les liens sont en anglais je ne comprend pas très bien. Enfin bon je vais recherché et je finirais pas trouver. Au pire je chercherais du côté du support wordpress. Après si jamais vous en avez un en stock je suis preneur :ok:

Sinon pour l'image, c'est vrai que c'est super astucieux ! Je n'y avais pas du tout pensé.
Mais je ne sais pas si ça va fonctionner puisque mon logo est inséré via du code HTML. Comme ça :
<div id="logo"><a href="http://4-games.fr"><img
src="http://img10.hostingpics.net/pics/2858184game
s.png" width="737" height="143" /></a></div>
Et non comme ça :

  1. logo {

background-image: url(url);
}

killahblup
killahblup
Niveau 8
26 juin 2011 à 15:55:13

Ca pose pas de soucis, il suffit de l'insérer en CSS. c'est aussi pour ça que le "display: block;" à son importance. 9a ne changera rien visuellement, mais dans ton code si.

Du coup dans ta balise <div id="logo"></div> tu n'auras rien. Ce qui ne pose aucun soucis :). Enfin évidement ça implique que tu télécharges l'image pour la rebalancée sur ton serveur.

En ce qui concerne le slideshow je regarderais ce que j'ai :) mais je garanti rien ^^

Cainzer
Cainzer
Niveau 10
26 juin 2011 à 16:20:52

:merci: beaucoup.
Pour ce qui est du titre, ça fonctionne parfaitement :)
Mais il y a encore un truc que j'aimerais faire la dessus. Avant, lorsque je passais pas souris dessus, la flèche de la souris formait une main afin de cliquer et d'être redirigé vers l'accueil. Maintenant que j'ai tous mis en CSS, le lien apparait comme ça mais n'est pas intégré dans l'image. Et c'est normal. Mais alors pourriez vous me dire comment faire pour l’intégrer :svp:

Cainzer
Cainzer
Niveau 10
26 juin 2011 à 16:21:52
  • lorsque je passais la souris par dessus*

:desole: du double post :p)

skyboys
skyboys
Niveau 10
26 juin 2011 à 17:28:47

euh si j'ai bien compris ta juste a mettre cursor:pointer; dans ta div #logo

Cainzer
Cainzer
Niveau 10
26 juin 2011 à 19:19:18

:merci: pour ta réponse. Mais ce n'est pas encore terminé :-(

Code HTML :
<div id="logo"><a href="http://4-games.fr"></a></div>

CSS :

  1. logo {

background-image:
url(http://img10.hostingpics.net/pics/2858184games
.png);
float: left;
width: 739px;
height: 143px;
display: block;
cursor: pointer;
}

Donc là, à la rencontre de l'image le curseur se transforme en main mais si je clique aucun lien ne vient.
Comment faire pour qu'un lien vienne :question:

killahblup
killahblup
Niveau 8
26 juin 2011 à 19:41:39

c'est dans ton code HTML, en fait pour t'expliquer que tu comprennes ce que tu fais ^^

Tous tes attributs CSS sont actifs sur ton <div id="logo"> donc enfait la seule chose a faire c'est de tout mettre sur le <a>

ce qui donne dans ton HTML :

<div><a id="logo" href="tonlien.fr"></a></div>

tous tes paramètres se retrouvent donc sur ton lien et non plus sur le <div> qui encadre ton lien ^^

Normalement le reste ne devrait pas bouger :) vouala vouala

Cainzer
Cainzer
Niveau 10
26 juin 2011 à 19:51:27

Ah bah oui maintenant ça fonctionne :p)

:merci: beaucoup pour toute l'aide apportée dans ma quête :lol:

killahblup
killahblup
Niveau 8
26 juin 2011 à 19:54:00

xD de rien, bon courage pour la suite ^^

Sous forums
  • Aide à l'achat Mac
  • Macintosh
  • Création de Jeux
  • Programmation
  • Création de sites web
  • Linux
  • Internet
  • Steam Deck
  • Hardware
La vidéo du moment