28172 sujets

CSS et mise en forme, CSS3

[Résolu] Thème Wordpress, mettre du css dans les pages

Coucou tout le monde!
Voilà mon problème. Je suis en train de faire un thème wordpress, et j'ai terminé la page d'accueil. J'aimerai, sur les 4 autres pages, garder la mise en forme, etc... mais changer quelques détails. Par exemple, sur les 3 premières pages, je veux la même mise en forme (sidebar, corps, etc...), le même design, mais des articles différents et pas les mêmes choses dans la sidebar.
Dans les deux dernières pages, je ne voudrais pas de Sidebar.
En gros c'est le plan que j'ai en tête.

Maintenant,
Question n°1: j'aimerai savoir s'il y avait un moyen de répéter la mise en forme tout en pouvant changer l'intérieur, sans devoir répéter les opérations à chaque fois.

Question°2: Lorsque je clique sur le titre d'un article, et que je me retrouve donc avec l'article seul sur la page, les mise en formes effectuées sur la page d'accueil disparaissent. Je suis obligée de recommencer la mise en forme, où je peux lier la page à une autre?

Belle soirée!
Hello Poupette Smiley smile
Poupette a écrit :
[…] et j'ai terminé la page d'accueil. J'aimerai, sur les 4 autres pages, garder la mise en forme, etc... mais changer quelques détails. Par exemple, sur les 3 premières pages, je veux la même mise en forme (sidebar, corps, etc...), le même design, mais des articles différents

Vu la façon dont les choses sont présentées, je part du principe que tu pars sur la réalisation d'un thème WP en partant de zéro, et pas à partir d'un autre thème.

Récapitulons rapidement l'anatomie de base (*) de ton thème WordPress :
– un fichier front-page.php, c'est le template utilisé pour ta page d'accueil
– un fichier index.php, utilisé pour l'affichage des articles
– un fichier styles.css, qu'on ne présente pas Smiley smile
– un fichier sidebar.php, qui contient… ta sidebar

On a un fichier front-page.php qui permet de différencier l'affichage et les contenus de la PAGE D'ACCUEIL (la page définie comme "page d'accueil du site" dans les réglages de lecture de WP, dans l'admin). Le fichier index.php est quant à lui utilisé pour tout le reste des contenus dans le cas présent.
Ces fichiers font tous deux appel à header.php en ligne 1 du fichier, à l'aide de la fonction get_header(). Le fichier header.php contenant normalement ton doctype, la partie <head> de tes pages avec… l'appel à ta feuille de style CSS, qui est a priori unique pour l'ensemble des pages de ton site (ce qui répond à ta question 2 : oui, on utilise la même feuille CSS pour tous les contenus du site). Le fichier header.php contient généralement aussi les éléments d'entête communs à toutes les pages comme un logo, une bannière, un menu de navigation principale et tout ce qu'on veut.
Ensuite, dans les deux template front-page.php et index.php, on retrouve la (ou les) boucle(s) WordPress permettant d'aller chercher le contenu voulu dans la BDD. Il y a également un appel à la sidebar au moyen de la fonction get_sidebar()

(*) Attention : je simplifie volontairement les choses et passe les détails pour faciliter la compréhension. Pour comprendre la vraie structure des fichiers de template, voir ce document.

Poupette a écrit :
[…] et pas les mêmes choses dans la sidebar.
Dans les deux dernières pages, je ne voudrais pas de Sidebar.

Dans ton fichier index.php, au moment d'utiliser la fonction get_sidebar qui va appeler sidebar.php, tu peux utiliser ce qu'on appelle un marqueur conditionnel qui va te permettre de ne charger cette sidebar que si on est sur une page précise (ou le contraire, comme tu veux). Ce marqueur conditionnel, c'est is_page() :

// ici, la sidebar ne sera chargée que pour une page bien précise :
if ( is_page('Le nom de ma page') ) {
   get_sidebar();
}

// On peut aussi dire que la page en question est la seule à ne pas contenir de sidebar :  
if ( is_page('Le nom de ma page') ) {
   // sur cette page, on n'affiche rien
} else {
   get_sidebar();
}


Je te laisse adapter ces petits bouts de code de base à tes besoins. Pour plus d'infos sur is_page(), faut aller voir le codex WP

a écrit :
Question°2: Lorsque je clique sur le titre d'un article, et que je me retrouve donc avec l'article seul sur la page, les mise en formes effectuées sur la page d'accueil disparaissent. Je suis obligée de recommencer la mise en forme, où je peux lier la page à une autre?

Ce que tu lie, ce ne sont pas les pages entre elles.
Il faut que tes templates fasse tous appel à ton fichier header.php qui contient –entre autre– l'appel vers ta feuille de styles. Le principe de l'appel d'une feuille de styles commune à toutes les pages du site est entendu avec un CMS, mais c'est exactement pareil pour un site statique en pur HTML… C'est quelque chose qui te parle, non ? Smiley sweatdrop

Bon courage pour la suite Smiley smile
Woaw Smiley eek
Tu expliques vraiment super bien! Merci!!

Par contre, une dernière toute pitite question,
du coup, comme je travaille en local j'ai téléchargé Wordpress en local (jusque là,tout va bien)
Et dans les widgets de la sidebar, que j'ai configuré dans l'administration wordpress,j'ai mis ce que devait contenir la sidebar de la page d'acceuil (pas de problème là-dessus) MAIS; comme je veux changer ce qu'il y aura dans la sidebar sur les autres pages, comment fais-je?

Voilà sinon j'ai absolument tout compris (c'est merveilleux comme c'est clair dans ma tête) Smiley biggrin
Pour avoir la possibilité de créer plusieurs sidebar dans l'admin de WordPress, il faut auparavant les déclarer, généralement dans le fichier functions.php à la racine de ton thème WordPress (si tu n'en a pas, tu n'as qu'à en créer un).
Code php pour la déclaration des sidebars (dans ton functions.php) :

<?php
if(function_exists('register_sidebar')) {

    // Une première sidebar pour la page d'accueil
    register_sidebar(array(
	'name' => 'Sidebar Accueil',  // Ici on déclare son nom
        'before_widget' => '<div id="%1$s" class="sidebar-item widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<div class="sidebar-title">',
        'after_title' => '</div>'
    ));

    // Une seconde sidebar qui sera utilisée pour les autres pages
    register_sidebar(array(
	'name' => 'Sidebar Pages', // Ici on déclare son nom
        'before_widget' => '<div id="%1$s" class="sidebar-item widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<div class="sidebar-title">',
        'after_title' => '</div>'
    ));

}
?>


Ensuite, il ne te reste plus qu'à mettre les différents widgets voulus dans tes sidebar via l'admin WP.

Pour finir, on va ouvrir notre fichier sidebar.php et remplacer l'appel de la sidebar de ton thème par celui-ci (conserve bien sûr une copie de tes fichiers avant de les modifier pour pouvoir revenir en arrière en cas de pépin/copié-collé raté) :


<div id="sidebar">
	<?php 
        if( is_front_page() ) { 
                // Si on est sur la page d'accueil, on charge 'Sidebar Accueil'
		dynamic_sidebar('Sidebar Accueil');
        }
        else { 
                // Sinon, on charge 'Sidebar Pages'
	        dynamic_sidebar('Sidebar Pages');
        }
</div>

Et tu peux ainsi avoir autant de sidebar différentes que tu veux, en utilisant au besoin d'autres marqueurs conditionnels, comme le is_page() vu tout à l'heure qui te permet de faire un appel spécifique pour une ou plusieurs pages.
> Documentation 'Marqueurs conditionnels' sur le codex WP (francophone)

Poupette a écrit :
Woaw Smiley eek
Tu expliques vraiment super bien! Merci!!

Et c'est maintenant qu'on me dit ça, moi qui quitte les rangs de l'enseignement après quelques années de bons et loyaux services Smiley lol
Merci et n'hésite pas si le dernier point pose souci Smiley smile
Haha! Merci beaucoup! (je vois le bout tu tunnel!!)
Personne en t'a jamais dis que tu expliquais bien? L'admiration se perd de nos jours x)

En tout cas merci énormément, je sais comment faire maintenant! Merci, merci! Je vais réussir à venir à bout de se site!!

Belle journée!
Modifié par Poupette (25 Jul 2013 - 11:59)
Sujet clos
Aller à