• Placer un article sur toutes les pages

    Parce que je l'ai fait pour un de mes autres blogs (http://papasti.eklablog.fr) et que cette demande a été exprimée sur le forum officiel, je vais vous détailler dans ce tuto le moyen de publier un article qui apparaîtra sur chaque page.

    Sur ce blog par exemple, il s'agit de l'encart situé sous le header.

    Ce tuto fait appel au javascript. Il doit donc être activé sur votre compte pour fonctionner. Si ce n'est pas déjà fait, vous pouvez faire la demande en cliquant sur le logo Eklablog en haut à droite de cet article.

    Le Principe

    On va créer deux modules simples. Le premier qui va servir à mettre l'article ou l'information que l'on veut voir apparaître sur chaque page et le second qui contiendra le script. Là, vous vous dites "bah pourtant on peut mettre le script dans le premier module !". Et c'est tout à fait exact. Je les sépare pour pouvoir modifier l'article sans risque de modifier ou supprimer le script. Cela évite les fausses manipulations.

    Cet article sera doté par le script d'une Id, ce qui va permettre de modifier tout aussi facilement son CSS.

    Mise en place

    En premier lieu, vous devez créer un module simple HTML Que vous nommez comme vous souhaitez.
    Ensuite, vous créez un autre module simple HTML auquel vous donnez le titre de "Script Top Article" ou tout autre titre suffisament significatif pour ne pas le supprimer par erreur ultérieurement. 

    Attention : Il faut bien créer les modules dans cet ordre. Si vous créez le module de script en premier, cela ne fonctionnera pas car le script sera exécuté avant que l'article ne soit créé dans la page et comme il fera référence à un article inexistant...

    Il faut maintenant récupérer l'id des deux modules créés. Pour cela, on va se servir de Google Chrome ou de Firefox avec le module Firebug.

    Vous positionnez votre souris sur le premier module (celui de l'article) et vous faites un clic droit puis Inspecter l'élément.

    Placer un article sur toutes les pages

    Vous obtenez une fenêtre comme ci-contre avec le code HTML de votre page dans la partie inférieure. En déplaçant votre souris sur ces lignes, vous verrez sur votre écran l'élément correspondant qui devient grisé.

    Une fois la souris sur le bon module, il suffit de relever l'id de celui-ci (Dans l'image c'est module_menu106115911).

     

    Notez ce numéro de module puis répétez l'opération avec le module de script.

    Voilà, on dispose maintenant de tout ce dont on a besoin.

     

     

    Dans la fenêtre ci-contre, vous trouverez le script à placer dans votre module script (à l'aide du bouton HTML de l'éditeur). Ce script étant celui de mon blog, il vous faudra remplacer les numéros de modules par ceux que vous venez de relever.

    Vous remplacez donc dans ce script: module_menu111111111  par l'id du module article
    module_menu222222222 par celle du module de script

    Voilà, le boulot est quasiment fini ! Dès que vous enregistrez et que vous raffraichissez votre page, votre article (qui ne contient encore rien à ce stade) se retrouve placé au dessus des autres articles de la page et de toutes les autres pages de votre blog.

    Le script cache aussi les deux modules créés.

    Aïe ! Si mon module article est caché, comment puis-je l'éditer ??????

    Pas de panique l'ami, cela fait l'objet du paragraphe suivant.

     

     

     

     

    Edition de l'article

    Ce module qui va contenir l'article ne sera pas édité comme les autres modules puisqu'il est caché.

    Placer un article sur toutes les pagesPour le retrouver, il suffit avec le menu d'aller dans Placer un article sur toutes les pagesApparence / Gérer Les menus.

    Ici mon module s'appelle Articlesup. Il suffit donc de cliquer sur le crayon d'édition de la ligne correspondant à Articlesup.

    C'est tout ! Alors pas bien compliqué hein ?

     

     

     

     

     

     

     

    Styliser votre article

    Comme je vous l'ai indiqué plus haut, j'ai donné une id à cet article afin de pouvoir lui appliquer facilement les règles de style.

    SélecteurPortée
    #articleauto Ensemble de l'article
    #articleauto .module_menu_titre Zone de titre de l'article
    #articleauto .module_menu_contenu_block Zone de contenu de l'article

     

    Voyez ci-dessous un exemple de code CSS