[Résolu] Inserer un lien sur l’image header

  • Statut : non résolu
12 sujets de 1 à 12 (sur un total de 12)
  • Auteur
    Messages
  • #461458
    sylvain78
    Membre
    Initié WordPress
    42 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress : 2.6
    – Thème utilisé : Pure 1.3
    – Plugins en place : –
    – Nom de l’hebergeur : Free
    – Adresse du site : http://mariagecocogabi.free.fr

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

    Bonjour,

    Petite question comment mettre un lien sur le header ?

    Merci

    #638785
    Dric
    Participant
    Maître WordPress
    760 contributions

    Pour l’instant l’image de ton header est définie dans le style.css de ton thème (au niveau #page, c’est le header.jpg chez toi). Il faudrait que tu l’enlève et que tu l’ajoutes dans header.php à la place.

    #638786
    bep
    Participant
    Initié WordPress
    47 contributions

    Bonjour,

    Je me permets de contredire Dric et de proposer une autre solution. En effet, la solution proposée par Dric à l’inconvénient qu’il peut de venir ensuite très difficile de positionner l’image. Et que bon, c’est un fond, alors autant le laisser en fond :p

    Je me suis retrouvé dans ce cas il y a quelque temps, et voici la solution que j’avais trouvé, qui est très simple, contrairement aux apparences. 2 petites manipulations de rien du tout.

    Commencer par enregistrer dans votre éditeur de texte favori (comme ça, si ça ne fonctionne pas, vous pourrez utiliser cette sauvegarde que vous ne devrez pas toucher durant la manipulation) le contenu des fichiers header.php et style.css (que vous pouvez récupérer via l’éiteur de thème de l’administration WordPress)

    Dans le fichier header.php, chercher la ligne

    <div id="header">

    (via l’éditeur de thème), et la remplacer par :

    <div id="header" onclick="location.href='’;”>

    Ainsi, c’est tout la zone “header” qui devient un lien pour la page d’accueil (appelée par la commande php echo…).

    Ensuite, afin d’indiquer aux visiteurs qu’il s’agit d’un lien, le meilleur moyen est de faire en sorte que lors du survol, le curseur soit une petite main. Et il faut également que la division “header” ait une consistance, d’où le “height : 104px” que vous allez voir tout de suite.

    Pour ça, il faut toucher au fichier style.css
    cherchez ceci:

    /* Begin Structure */

    et ajoutez ceci à la suite du ‘paragraphe’ sur #page :

    #header {
    	cursor: pointer;
    	height: 104px; 
    	}

    Et voilà ! Normalement, vous devriez avoir une jolie petite main sur une bande de 104px en haut de votre blog !

    Si ça ne marche pas :
    Pas de panique ! Récupérez simplement votre ancien code dans la sauvegarde que vous avez faite de ces 2 fichiers au tout début.

    Et faites ce que conseillait Dric : c’est-à-dire mettre l’image dans le fichier php, entre vos balises de lien dans le header.php.

    Enfin, un petit conseil : pour vous permettre de diffuser le lien http://mariagecocogabi.free.fr/ directement plutôt que http://mariagecocogabi.free.fr/wordpress/

    Soit vous pouvez profiter de la fonction de WordPress dans “Réglages > Général” avec une aide (en anglais) ici : http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory

    Soit vous pouvez utiliser un petit fichier .htaccess.

    Ouvrez bloc-notes (sous windows) ou textedit (sous mac) et inscrivez la ligne suivante (et uniquement la ligne suivante, attention aux majuscules, et aux espaces. Le mieux est de copier-coller la ligne) :

    RedirectPermanent /index.html http://mariagecocogabi.free.fr/wordpress/

    Enregistrer ce fichier sous le nom suivant : fichier.htaccess, au format texte simple (.txt habituellement).

    Rendez-vous sur votre hébergeur avec votre client FTP, copier le fichier fichier.htaccess à la racine de votre site et renommez-le en .htaccess (oui, il n’y a rien avant le .). Il est possible qu’il disparaisse, car les fichiers commençant par un point sont des fichiers cachés sur les systèmes unix. Vous pouvez le réafficher en paramétrant votre client ftp pour afficher les fichiers cachés, si ce n’est déjà fait.
    Ensuite, créez un nouveau fichier vide, et renommez-le index.html : copiez-le à la racine de votre site (dans le même répertoire que le fichier .htaccess et que votre fichier favicon.ico).

    Et voilà, maintenant, les gens qui taperont http://mariagecocogabi.free.fr/ tomberont directement sur le site http://mariagecocogabi.free.fr/wordpress/ !

    Voilà, c’était long, j’espère que ça sera utile :p

    Tous mes voeux pour le mariage !

    #638787
    sylvain78
    Membre
    Initié WordPress
    42 contributions

    Merci à vous deux, et merci beaucoup à bed pour avoir pris le temps de tout me détailler, malheureusement cela ne marche pas, je crois que je vais mettre le header d’origine et mettre le titre au blog, parce que je ne comprend pas bien ce qu’il faut faire. Merci pour la redirection j’était en train de chercher justement ça tombe très bien. Merci encore

    #638788
    bep
    Participant
    Initié WordPress
    47 contributions

    Alors si ma solution ne marche pas pour les liens, essaie celle de Dric : supprime la ligne “background : …” dans la balise #page de ton fichier style.css et rajoute entre tes

    <a href="”></a>

    Le code suivant :

    <img src="http://adresse.com/pletede/limage.jpg" />

    Et normalement ça devrait aller…

    Sinon, le retour au texte s’impose, ou, plus simplement, le rajout dans la sidebar d’un lien ‘retour à l’accueil’, simple mais efficace :p
    Désolé que ma solution n’ait pas fonctionnée. Mais ça ne me surprend pas, il aurait fallu un peu d’adaptation du CSS et du PHP pour que ça fonctionne. Mais bon, après, ça aurait fait un peu long sur un post de forum :p

    Bonne continuation !

    #638789
    Ysabel
    Membre
    Initié WordPress
    49 contributions

    Bonjour,

    Je remonte un vieux sujet parce que je rencontre le même soucis.

    La solution de bep ne fonctionne pas parce que je ne trouve pas /* Begin Structure */ ni de #page dans mon CSS. Du coup j’ai bien le lien sur le header mais personne ne le sait parce qu’il n’y a pas la main.

    Pour la solution de Dric je n’ai pas compris quoi ajouter exactement dans mon header.php ni où exactement.

    Le lien de mon CSS : http://ysabel.fr/maeva/wp-content/themes/colorvoid-fr/style.css
    Mon header.php :

    <html xmlns="http://www.w3.org/1999/xhtml&quot; >

    <meta http-equiv="Content-Type" content="; charset=” />

    » Blog Archive

    <link rel="stylesheet" href="” type=”text/css” media=”screen” />
    <link rel="alternate" type="application/rss+xml" title=" RSS Feed” href=”” />
    <link rel="pingback" href="” />

    Si quelqu’un pouvait m’aider ça serait sympa.

    J’aimerais éviter de mettre le lien de mon blog qui est privé mais si il le faut je vous ferais un compte de test pour pouvoir regarder.

    Merci d’avance

    #638790
    webdevonlinux
    Membre
    Initié WordPress
    36 contributions

    Une solus a ton pb afficher un lien sans texte prenant 100% en largeur et hauteur du div

    dans ton fichier de style.css

    #header a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    cursor: pointer;
    }

    #638791
    Ysabel
    Membre
    Initié WordPress
    49 contributions

    Ah bah oui pas bête ça ! je vais tester et vous tiens au courant.

    #638792
    Ysabel
    Membre
    Initié WordPress
    49 contributions

    PARFAIT !!!

    Avec vos conseils et mes bidouillages tout est impécable, mon blog est comme je le voulais et il ouvre officiellement pour ma famille dans 1h (le temps d’envoyer à tout le monde leurs mots de passe lol).

    Vraiment merci pour ce forum, même si j’y ai pas posé beaucoup de questions j’y ai trouvé beaucoup de réponses grâce aux posts des autres.

    #638793
    bep
    Participant
    Initié WordPress
    47 contributions

    Oui, effectivement, deux petites erreurs dans ma proposition :

    Premièremenet
    A la place de “104px”, il faut mettre, bien sûr, la hauteur de l’image désirée (en pixels, donc).

    Deuxièmement
    Il est possible de ne pas trouver le /* Begin Structure */ ou équivalent : certains créateurs de thèmes codent très bien leur CSS avec des séparations entre les éléments, d’autres pas. Dans ce cas, vous pouvez rajouter le bout de code indiqué (#header { … }) dans votre fichier CSS, ou vous le désirez. Ce ne sera pas très propre, mais bon 🙂 Là, le conseil était adapté au style du blog pour lequel le topic était démarré !

    Troisièmement
    Toujours pareil, c’était adapté au thème du blog en question, donc il est possible que le “background …” en question dans ce message ne soit pas dans #page sur le fichier CSS mais par exemple dans body {…} ou encore toute balise CSS englobant l’intégralité de la page HTML.

    Voilà ! Avec ces indications, ma technique devrait fonctionner du tonnerre pour tout le monde ! Enfin j’espère 🙂

    #638794
    am0000
    Participant
    Initié WordPress
    17 contributions

    @ bep = un grand merci pour ta solution, elle fonctionne à merveille en plus d’être claire et simple 👏

    #638795
    lexpa
    Membre
    Initié WordPress
    1 contributions

    sinon y a plus simple moi j’ai mis ça sur mon site dans header.php avec le thème de base de wordpress

    <a href="http://www.ton lien.com" rel="" target="_self"><img src="” width=”” height=”” alt=”” /></a>

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