Easy-Design.Net forum




Thèmes autres CMS » Wordpress Wordpress, entre création & application d'un thème

hight_tower Membre non connecté

Modérateur

Rang

Avatar

Modérateur(s)

Inscrit le : 17/09/2009 à 11h09

Messages: 2298

Le 21/12/2012 à 18h53
Le sujet se consacrera en trois grosse partie distinctes.

En cours de rédaction

1er Installation d'un thème


Wordpress est comparé aux :pbt bien pensé, non pas en mal mais en mieux. Chaque plugins, chaque thème etc...peuvent être consultés à partir de son propre site web. Le système embarque une personnalisation intégré qui permet à chacun de trouver chaussures à son pied.
Sans aucune connaissance dans le codage, chercher et installer un thème a ce que vous voulez de mieux pour votre site web.

La gestion & l'installation d'un thèmes


Allez dans le panneau d'aministration, "Apparence" puis dans "Thèmes"


Ce panneau se divise en deux onglets:

  • Le premier se nomme "Gérer les thèmes", il vous informe sur le thème actuellement utilisé et affiche d'autres thèmes disponibles.
  • Le seconde se nomme "Installer des thèmes", il vous permettra de trouver le thème qui vous conviendra.




Le premier onglets: Gérer les thèmes



Il affiche le thème installé, mais aussi d'autres critères comme:
  • Son titre
  • Son auteur
  • La description du thème

En cliquant sur "Activer", vous appliquerez le thème au site.
Le bouton "Aperçu", vous chargera une page avec le contenu de votre site avec le thème que vous souhaitez prévisualiser.
le bouton "Supprimer" quant à lui aura la fonction éventuelle de supprimer l'un des thèmes que vous ne désirez plus avoir.


Le second onglets: Installer un thème



Comme son nom l'indique, il permet d'ajouter des thèmes à votre site et de changer toute l'apparence de votre site.

Vous apercevez aussi dans cette page, un système de "filtre de fonctionnalités", il vous permettra d'affiner votre désir à un thème en particulier. Attention, lors de la recherche vous n'aurez pas tous les thèmes de Wordpress. La recherche effectue une recherche à partir des thèmes gratuit proposés sur le site officiel de Wp.

Voilà, vous avez trouver le thème qui vous conviendra le mieux pour votre site web. Avant d'installer vous aurez un "Aperçu" de ce vous aurez sur votre site web. A cela un lien vers "Détails" vous expliquera le design (pas souvent traduit en français).

Wp met en avant ainsi aussi les thèmes les plus récents et mis à jour par la même occassion.



Contribution d'un thème


  • Soit en passant par l'administration, ce que je vous ai expliquez plus bas
  • Soit en passant par des plateformes dédiées
  • Soit en passant par des plateformes de ventes


Citation:
Souvent les thèmes gratuits sont souvent vérolés avec du code malicieux



En passant par l'administration



Dans l'onglets "Installer les thèmes", vous avez un bouton qui se nomme "Envoyer". Très simple d'utilisation, il vous permet de contribuer à proposer un thèmes gratuit vers le site officiel Wp.



Plateformes dédiées



Il est possibles de trouver des thèmes sur des sites spécialisées. En général les thèmes que l'on y trouve sur ce genre oscillent entre 20 & 110€ (ce qui je trouve fort chère comparé à ceux swan). Souvent le prix est le rapports au temps donnée qu'aura passé le développeur à créer le thème.



Plateformes de ventes



Je vais vous présenter trois sites très connues dans le monde de Wp, d'après google se sont les plus grosses plateformes.

  • Themeforest: Vous y trouverez des thèmes de Wp mais aussi pour d'autres CMS
  • Elegant Themes: le spécialiste des thèmes de Wp. La formule est de 39$, en adhérant au site et ainsi avoir accès à une soixantaine de thèmes.
  • Woo Themes: Des thèmes de qualité avec un prix qui s'élève entre 50 & 150€ environ...


Ceux-ci termine la première partie du chapitre sur les thèmes. je suppose que votre engouement au vue des tarifs vous fera passer par le coté design.

Edité par hight_tower Le 22/12/2012 à 12h30



Chez Swan Site design Web phpboost3. Membre depuis 2009 & modérateur depuis 2011.
theviking Membre non connecté

EDN Concerné(e)

Rang

Avatar

Inscrit le : 19/01/2011 à 22h56

Messages: 218

Le 21/12/2012 à 22h01
Bon courage hight.


Site web    
hight_tower Membre non connecté

Modérateur

Rang

Avatar

Modérateur(s)

Inscrit le : 17/09/2009 à 11h09

Messages: 2298

Le 21/12/2012 à 22h51
J'ai un peu chaud, mais c'est vraiment la base



Chez Swan Site design Web phpboost3. Membre depuis 2009 & modérateur depuis 2011.
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 21/12/2012 à 23h07
Purée .. ça c'est du boulot .. Bon , va falloir que demain je m'attèle à la mise en place des bloggy V4 :scratch


swan_signature

Site web    
hight_tower Membre non connecté

Modérateur

Rang

Avatar

Modérateur(s)

Inscrit le : 17/09/2009 à 11h09

Messages: 2298

Le 22/12/2012 à 08h02
je vais essayer après ce coup de maître, si j'y arrive à me mettre la main sur une version 3.0 et de l'adapter en version 4.0, mais cela va être chaud de chez chaud.

Sinon il n'existe aucun tutoriel pour créer un thèmes du :pbt, pourquoi ne pas essayer d'en réaliser un de façon à faire évoluer les tutoriel sur ce sujet.

je veux bien prendre le thème base est essaye de le modifier petit à petit...



Chez Swan Site design Web phpboost3. Membre depuis 2009 & modérateur depuis 2011.
hight_tower Membre non connecté

Modérateur

Rang

Avatar

Modérateur(s)

Inscrit le : 17/09/2009 à 11h09

Messages: 2298

Le 22/12/2012 à 10h01
1er partie terminé

je vais entamer la seconde, en partant du fait que vous n'y connaissez rien.



Chez Swan Site design Web phpboost3. Membre depuis 2009 & modérateur depuis 2011.
hight_tower Membre non connecté

Modérateur

Rang

Avatar

Modérateur(s)

Inscrit le : 17/09/2009 à 11h09

Messages: 2298

Le 22/12/2012 à 12h31
(En cours de rédaction)

2eme partie Création d'un site web simple avec html/css


Afin de vous familiarisez avec le codage, voici notepad++, qui sera votre compagnon de route afin de réaliser tout ce que vous avez besoin pour la suite.

Je pars du principe que vous êtes débutant, pour cela, allons créer un fichier qui se nommera index.html et un fichier qui se nommera style.css, la partie jquery sera en dernière partie afin d'ajouter un peu d'animation à votre contenu, mais chaque chose en son temps.

Voici le rendu final ce que nous allons réaliser:


Une page index.html & style.css



La page html:



Ouvrez notepad++, et créer une page html qui est de type html5.
Code HTML :
 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
 



Ajout de la div "Main"



Cette "div" elle sera définis dans le css comme étant le cadre principale.

Code HTML :
 
<div id="main">
</div>
 



Créons maintenant le fichier styles.css



Code CSS :
 
@charset "utf-8";
/* CSS Document */
 
#main{
width: 600px; /*600 pixels de large*/
margin: 35px auto auto auto; /*25 pixels de marge & marge auto à gauche & à droite*/
font-family: Arial, Helvetica, sans-serif; /*Utilisation d'une police au choix Arial ou Helvetica*/
font-size: 15px; /*Taille de caractère de 15 pixels*/
}


Retournons dans la partie html est ajoutons ceux-ci

Code HTML :
 
<div id="header">
</div>
 

Il aura pour but d'introduire le titre et le slogan du site.

Puis dans la partie css
Code CSS :
 
#header
{
height: 85px; /*Mesure en hauteur*/
line-height: 85px;  /*Mesure de la hauteur d'un ligne de texte*/
background: #fff; /*Couleur de fond blanc*/
}
 


Dans index ajoutons ceux-ci dans la div du header:
Code HTML :
 
<span id="slogan">Slogan du site</span>
<h2><a href="#">Titre du site</a></h2>
 

le h2 possède un lien qui lors d'un clique se souris, permet de revenir sur la page d'accueil du site

Code CSS :
 
#header h2{
text-decoration: none; /*Permet la coloration d'un mot compléter de none qui signifie rien*/
font-size: 30px; /*Permet de donner une taille à l'écriture ici de 30 pixels*/
font-weight: normal;/*Permet de mettre un caractère de manière grasse à l'écriture ici de façon */normal
margin: 0 auto 0 25px; /*Permet de créer une marge ici de hauteur 0, à droite en auto, de bas à 0 & de gauche à 25 pixels*/
}
 
#header h2 a
{
color: #045972; /*Définition d'un couleur en hexadécimal*/
text-decoration: none; /*Permet la coloration d'un mot compléter de none qui signifie rien*/
}
 
#slogan
{
float: right; /*Traduit par une boite flottante ici à droite*/
color: #045972; /*Définition d'un couleur en hexadécimal*/
font-size: 12px; /*Permet de donner une taille à l'écriture ici de 12 pixels*/
margin: 0 25px 0 auto; /Permet de créer une marge ici de hauteur 0, à droite en auto, de bas à 0 & de gauche à 25 pixels*/
}
 


Ajout de quelques propriétés de la page:
Code CSS :
 
body{ /*Body étant le corps de ma page sur index.html*/
font-family: Arial, Helvetica, sans-serif; /*Permet de spécifier la police*/
font-size: 14px;/*Permet de donner une taille à l'écriture ici de 14 pixels*/
background: #141414; /*Couleur de fond noir*/
}



Me voici à la première partie du codage de mon thème
Actuellement ma page index.html et style.css devrait ressembler à ceux-là:
Code HTML :
 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<div id="header">
<span id="slogan">Slogan du site</span>
<h2><a href="#">Titre du site</a></h2>
</div>
</div>
</body>
</html>
 


Code CSS :
 
@charset "utf-8";
/* CSS Document */
 
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background: #141414;
}
 
 
#main{
width: 600px;
margin: 35px auto auto auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
}
 
#header{
height: 85px;
line-height: 85px;  
background: #fff;
}
 
#header h2{
text-decoration: none;
font-size: 30px;
font-weight: normal;
margin: 0 auto 0 25px;
}
 
#header h2 a{
color: #045972;
text-decoration: none;
}
 
#slogan{
float: right;
color: #045972;
font-size: 12px;
margin: 0 25px 0 auto;
}

Voici ce que vous devez obtenir à ce stade du codage:


Ajoutons du contenu dans la page index.html, nous allons y placer la suite du codage qui sera placé juste après la fermeture de la div du header. Il contiendra le titre de l'article ainsi que l'auteur qui publie l'article:

Code HTML :
<div>
 
<div class="postTitle">
<span class="postMeta">Par: hight_tower</span>
<h3>Titre de l'article</h3>
</div>
<div class="postContent">
<p>Contenu de l'article</p>
</div>
</div>


Dans sa partie styles.css, je vais ajouter ceux-ci:
Code CSS :
 
.postTitle
{
position: relative;
cursor: pointer; /*Permet de spécifier la forme du curseur, ici curseur en forme de main avec un doigt déplié*/
height: 85px; 
line-height: 85px; 
}
 
.postTitle h3
{
text-decoration: none;
font-size: 20px;
font-weight: normal;
margin: 0 auto 0 25px;
color: #727272;
}
 
.postMeta
{
float: right;
font-size: 11px;
margin: 0 25px 0 auto;
color: #727272;
}
 
.postContent
{
padding: 25px;
text-align: justify;  
background: #fff;
}
 


Voici le rendu jusqu'à maintenant:



Ajoutons des articles
Code HTML :
 
<div class="postTitle">
<span class="postMeta">Par: Hight_tower</span>
<h3>Wordpress, entre creation & application d'un theme </h3>
</div>
<div class="postContent">
<p>Le systeme embarque une personnalisation integre qui permet a chacun de trouver chaussures a son pied.</p>
</div>
 
<div class="postTitle">
<span class="postMeta">Par: Hight_tower</span>
<h3>Wordpresse, entre fonctionnalite et outils </h3>
</div>
<div class="postContent">
<p>Pour differencier l'un de l'autre, voici une petite note de leur presentation avant de rentrer dans le vif du sujet.</br>
   Les <b>widgets</b> sont de petit outils pour votre blog, par exemple vous y trouverez la Sidebar, les Meta ou encore le calendrier.</br>
   Les <b>plugin's</b> sont des extensions afin d'ajouter de la fonctionnalites, comme eviter les spammeurs,etc...</p>
</div>
 
<div class="postTitle">
<span class="postMeta">Par: Hight_tower</span>
<h3>Wordpress, a la decouverte du menu</h3>
</div>
<div class="postContent">
<p>Le menu pour un visiteur est indispensable, il permet de le faire evoluer dans votre site.</br>
   Il est donc important qu'il soit coherent, un bouton une mauvaise adresse et le visiteur ne viendra plus.</p>
</div>
 
<div class="postTitle">
<span class="postMeta">Par: Hight_tower</span>
<h3>Wordpress, 2 grosses parties </h3>
</div>
<div class="postContent">
<p>Presentaton de la partie client et de la partie administration</p>
</div>
 
<div class="postTitle">
<span class="postMeta">Par: Hight_tower</span>
<h3>Installation de Wordpress </h3>
</div>
<div class="postContent">
<p>Meme si le CMS est presente mainte et mainte fois.<br>
   Ce seond CMS sera mon second choix dans le developpement de petit fichier pour les membres qui utiliseront plus ce cms de type "Blog".</p>
</div>
 


Voici le rendu jusqu'à maintenant:


Ajoutons maintenant un bloc contenant le liens vers des publications anciennes à la suite de ces articles dans la partie index.html
Code HTML :
<div id="navPost">
<a href="#">Articles Suivants</a> | <a href="#">Articles Précédents</a>
</div>
 

Et dans styles.css, vous ajoutez ceux-ci:
Code CSS :
 
#navPost
{
padding: 25px;
text-align: center;  
background: #fff;
color: #045972;
}
 
#navPost a
{
text-decoration: none;
color: #045972;
}
 
 



Puis ajoutons ce que l'on appelle par son terme anglais un footer ou pied de page, qui sera codé comme ceux-ci:
Code HTML :
 
                <div id="footer">
©2009-2013 | easy-design.net
</div>
 


Ajoutons la suite et fin du codage.

Code CSS :
 
#footer
{
padding: 15px;
text-align: center;
color: #333;
}
 


Voici le code final pour index.html & styles.css
Code HTML :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="styles.css" rel="stylesheet" type="text/css">
 
</head>
<body>
<div id="main">
<div id="header">
<span id="slogan">Swan, un design qui vous va bien</span>
<h2><a href="#">Csn Design</a></h2>
</div>
 
<div>
 
<div class="postTitle">
<span class="postMeta">Par: Hight_tower</span>
<h3>Wordpress, entre creation & application d'un theme </h3>
</div>
<div class="postContent">
<p>Le systeme embarque une personnalisation integre qui permet a chacun de trouver chaussures a son pied.</p>
</div>
 
<div class="postTitle">
<span class="postMeta">Par: Hight_tower</span>
<h3>Wordpresse, entre fonctionnalite et outils </h3>
</div>
<div class="postContent">
<p>Pour differencier l'un de l'autre, voici une petite note de leur presentation avant de rentrer dans le vif du sujet.</br>
   Les <b>widgets</b> sont de petit outils pour votre blog, par exemple vous y trouverez la Sidebar, les Meta ou encore le calendrier.</br>
   Les <b>plugin's</b> sont des extensions afin d'ajouter de la fonctionnalites, comme eviter les spammeurs,etc...</p>
</div>
 
<div class="postTitle">
<span class="postMeta">Par: Hight_tower</span>
<h3>Wordpress, a la decouverte du menu</h3>
</div>
<div class="postContent">
<p>Le menu pour un visiteur est indispensable, il permet de le faire evoluer dans votre site.</br>
   Il est donc important qu'il soit coherent, un bouton une mauvaise adresse et le visiteur ne viendra plus.</p>
</div>
 
<div class="postTitle">
<span class="postMeta">Par: Hight_tower</span>
<h3>Wordpress, 2 grosses parties </h3>
</div>
<div class="postContent">
<p>Presentaton de la partie client et de la partie administration</p>
</div>
 
<div class="postTitle">
<span class="postMeta">Par: Hight_tower</span>
<h3>Installation de Wordpress </h3>
</div>
<div class="postContent">
<p>Meme si le CMS est presente mainte et mainte fois.<br>
   Ce seond CMS sera mon second choix dans le developpement de petit fichier pour les membres qui utiliseront plus ce cms de type "Blog".</p>
</div>
 
</div>
 
<div id="navPost">
<a href="#">Articles Suivants</a> | <a href="#">Articles Précédents</a>
</div>
 
        <div id="footer">
©2009-2013 | easy-design.net
</div>
 
 
</div>
</body>
</html>
 


Code CSS :
 
@charset "utf-8";
/* CSS Document */
 
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background: #141414;
}
 
#main
{
width: 600px;
margin: 35px auto auto auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
}
 
#header
{
height: 85px;
line-height: 85px;  
background: #fff;
}
 
#header h2
{
text-decoration: none;
font-size: 30px;
font-weight: normal;
margin: 0 auto 0 25px;
}
 
#header h2 a
{
color: #045972;
text-decoration: none;
}
 
#slogan
{
float: right;
color: #045972;
font-size: 12px;
margin: 0 25px 0 auto;
}
 
.postTitle
{
position: relative;
cursor: pointer;
height: 85px;
line-height: 85px;
}
 
.postTitle h3
{
text-decoration: none;
font-size: 20px;
font-weight: normal;
margin: 0 auto 0 25px;
color: #727272;
}
 
.postMeta
{
float: right;
font-size: 11px;
margin: 0 25px 0 auto;
color: #727272;
}
 
.postContent
{
padding: 25px;
text-align: justify;  
background: #fff;
}
 
#navPost
{
padding: 25px;
text-align: center;  
background: #fff;
color: #045972;
}
 
#navPost a
{
text-decoration: none;
color: #045972;
}
 
#footer
{
padding: 15px;
text-align: center;
color: #333;
}
 


Voici le rendu final pour le pied de page:


Un peu d'animation avec Jquery


Bien que vous y êtes presque, nous allons y ajouter un menu en accordéon. Pour cela nous allons utiliser un framework qui se nomme "JQuery". Allez sur cette page, enregistrez le fichier en le renommant "jquery.js" et qu'il soit à la même hauteur que vos fichiers index.html & styles.css

Maintenant nous allons y placer le futur script avec quelques mots d'explication:

Pour activer la fonction, nous faisons appel au script en inscrivant ceux-ci dans entre le <head> & </head>:
Code JAVASCRIPT :
 
<script src="jquery.js"></script>
 
//On charge dans le framework jquery
<script>
        //Exécution d'une fonction
$(document).ready(function()
                       {
        //Ici on sélectionne toutes les div qui commence par $("div.postContent").hide();       
$("div.postContent").hide();
        //Ici on sélectionne toutes les div qui commence par $("div.postTitle:even").css({'background' : '#d8d8d8'}); pour une div d'un gris clair  
$("div.postTitle:even").css({'background' : '#d8d8d8'});
 
       //Ici on sélectionne toutes les div qui commence par $("div.postTitle:odd").css({'background' : '#c1c1c1'}); pour une div d'un gris clair un peu
$("div.postTitle:odd").css({'background' : '#c1c1c1'});
       //Ouverture et fermeture de la transition 
$("div.postTitle").click(
function(){
$(this).next("div.postContent").slideToggle(300);
}
)
});
</script>
 



Voici le rendu obtenu en y ajoutant le script jquery:


Tous les fichiers peuvent être télécharger ici:
test.zip
Edité par hight_tower Le 29/12/2012 à 09h41



Chez Swan Site design Web phpboost3. Membre depuis 2009 & modérateur depuis 2011.
hight_tower Membre non connecté

Modérateur

Rang

Avatar

Modérateur(s)

Inscrit le : 17/09/2009 à 11h09

Messages: 2298

Le 22/12/2012 à 14h11
Voilà qui termine la deuxième partie.

Bon courage et bonne chance dans le codage



Chez Swan Site design Web phpboost3. Membre depuis 2009 & modérateur depuis 2011.
hight_tower Membre non connecté

Modérateur

Rang

Avatar

Modérateur(s)

Inscrit le : 17/09/2009 à 11h09

Messages: 2298

Le 29/12/2012 à 10h23

3eme Partie, un thème avec l'intégration de Wp


Pour que worpdress reconnaisse un minimum un thème, il lui faut un fichier index.php & un fichier style.css, cela tombe bien, avec cette suite de ce tutoriel, nous allons changer certaines fonctionnalités pour qu'il se mêlent à notre design.

La partie html qui se transforme en partie php



Titre de la page:



Code PHP :
 
<title><?php bloginfo('name'); ?></title>
 

Cette fonction vous renvoie vers le titre de votre site web
Afin qu'il se dynamise un peu, nous allons changer le nom de index.html en index.php



Les liens Jquery & CSS



Un petit mot d'explication les thèmes de wordpress étant stockés dans le dossier "Theme", lui même dans le dosser "wp-content" qui est à la racine de votre site web. Nous devons modifier les liens css & jquery afin qu'il les prennent en compte est utilise ainsi l'API Wp.

Donc changer ceux-ci:
Code HTML :
 
<link href="style.css" rel="stylesheet" type="text/css">
<script src="jquery.js"></script>
 


Par ceux-ci:
Code PHP :
 
<link href="<?php bloginfo('template_directory'); ?>/style.css" rel="stylesheet" type="text/css">
<script src="<?php bloginfo('template_directory'); ?>/jquery.js"></script>
 




Titre et slogan du site



Etant paramétrable dans l'interface d’administration (Réglages puis Général ) et donc dynamiques, l'API va encore une fois nous aidez.

Remplaçons donc ceux-ci:
Code HTML :
 
<div id="header">
<span id="slogan">Slogan du site</span>
<h2><a href="#">Titre du site</a></h2>
</div>


Par ceux-ci:
Code PHP :
 
<div id="header">
<span id="slogan"><?php bloginfo('description'); ?></span>
<h2><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h2>
</div>
 





La partie centrale:



Passons au gros oeuvre, en dynamisant nos articles:

Remplaçons ceux-ci:
Nous allons ajouter une "div", remplacer ceux-ci:
Code HTML :
 
<div class="postTitle">
<span class="postMeta">Par: Olivier</span>
<h3>Bienvenue chez Swan</h3>
</div>
<div class="postContent">
<p>Contenu de l'article</p>
</div>
 


Par ceux-ci:
Code PHP :
 
<div>
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class="postTitle">
<span class="postMeta">Par: <?php the_author(); ?></span>
<h3><?php the_title(); ?></h3>
</div>
<div class="postContent">
<p><?php the_content(); ?></p>
</div>
<?php endwhile; ?>
<?php endif; ?>
 
</div>
 


Explication de ces nouvelles fonctions:
Condition testant la présence d'un article
Code PHP :
<?php if(have_posts()) : ?>


Ouverture d'une boucle itinérante tant qu'il y a des articles
Code PHP :
<?php while(have_posts()) : the_post(); ?>


Création de la div contenant le titre et l'auteur de l'article:
Code PHP :
<div class="postTitle">


On récupère le titre via <?php the_title(); ?> et l'auteur via <?php the_author(); ?>
Code PHP :
<span class="postMeta">Par: <?php the_author(); ?></span>
<h3><?php the_title(); ?></h3>


Fermeture de la div:
Code PHP :
</div>


Ouverture de la div avec le contenu de l'article:
<div class="postContent">

Récupération des articles:
Code PHP :
<p><?php the_content(); ?></p>


Fermeture de la div:
Code PHP :
</div>


Fermeture de la boucle while:
Code PHP :
<?php endwhile; ?>


Fermeture de la structure conditionnelle
Code PHP :
<?php endif; ?>




Articles suivant & précédents:



Remplaçons ceux-ci:
Code HTML :
<div id="navPost">
<a href="#">Articles Suivants</a> | <a href="#">Articles Precedents</a>
</div>


Par:
Code PHP :
<div id="navPost">
<?php posts_nav_link(' &#183; ', 'Articles Précédents', 'Articles Suivants'); ?>
</div>


cette fonction <?php posts_nav_link(); ?>, prend 3 fonctions qui sont (' · ', 'Articles Précédents', 'Articles Suivants')

Le fichier complet ressemble à ceux-ci:
Code PHP :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title><?php bloginfo('name'); ?></title>
<link href="<?php bloginfo('template_directory'); ?>/style.css" rel="stylesheet" type="text/css">
<script src="<?php bloginfo('template_directory'); ?>/jquery.js"></script>
<script>
$(document).ready(function(){
$("div.postContent").hide();
$("div.postTitle:even").css({'background' : '#d8d8d8'});
$("div.postTitle:odd").css({'background' : '#c1c1c1'});
 
$("div.postTitle").click(
function(){
$(this).next("div.postContent").slideToggle(300);
}
)
});
</script>
</head>
<body>
<div id="main">
<div id="header">
<span id="slogan"><?php bloginfo('description'); ?></span>
<h2><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h2>
</div>
 
<div>
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class="postTitle">
<span class="postMeta">Par: <?php the_author(); ?></span>
<h3><?php the_title(); ?></h3>
</div>
<div class="postContent">
<p><?php the_content(); ?></p>
</div>
<?php endwhile; ?>
<?php endif; ?>
 
<div id="navPost">
<?php posts_nav_link(' &#183; ', 'Articles Précédents', 'Articles Suivants'); ?>
</div>
 
</div>
 
        <div id="footer">
©2009-2013 | easy-design.net
</div>
 
 
</div>
</body>
</html>



La partie CSS


Il faut simplement modifier l'entête qui ressemblera à ceux-ci:
Code CSS :
/*
Theme Name: Swan
Theme URI: http://easy-design.net
Description: Un thème vraiment basique, merci à la contribution de Swan
Version: 1
Author: hight_tower
 
 
One by hight_tower || http://easy-design.net
*/


Voici qui termine l'introduction aux nouvelles fonctionnalités qui intégre votre design et Wordpress.

Edité par hight_tower Le 05/01/2013 à 15h01



Chez Swan Site design Web phpboost3. Membre depuis 2009 & modérateur depuis 2011.
hight_tower Membre non connecté

Modérateur

Rang

Avatar

Modérateur(s)

Inscrit le : 17/09/2009 à 11h09

Messages: 2298

Le 05/01/2013 à 16h12

4eme Partie, mise en page avancée


Dernier chapitre de ce tutoriel, qui vous expliquera avez l'introduction de zones dédié et une application plus avancée de WorpPress.

Cela signifie qu'au lieu d'avoir un code à la queuleuleu, nous allons créer plusieurs fichier, ce qui épure tout le codage en faisant appel au page ("template tag") suivant ce que l'on désire réaliser. Ce qui amène aussi à faciliter l'environnement contrairement à phpboost, ou il n'y a que deux fichiers, le header et le footer.

J'évoquais quelques lignes plus haut les mots templates tags, 'est en faite un petit morceau de code en php qui va vous permettre en une dizaine de caractère de charger les différentes parties de nos templates, comme le header, footer, sidebar, etc...

Créons un dossier, ici par exemple "Swan", c'est ne nom que je donne à mon thème, dans ce dossier j'y trouverais tous les fichiers du thème. Vous pouvez le créer où bon vous semble. Ce dossier nous allons le placer dans le fichier "wp-content/themes" de Wordpress ou que nous compresserons et que nous enverront depuis l'interface de Wordpress.


Ajout d'un styles.css


Commentons les première lignes pour y donner la provenance du thème et qui la créée.
Code CSS :
 
/*
Theme Name: Swan
Theme URI: http://easy-design.net
Email: [email protected]
Description: Un thème vraiment basique
Version: 1
Author: hight_tower
 
Swan by hight_tower || http://easy-design.net
*/
 

Pour le reste du codage, à vous de voir ce que vous souhaitez y apporter comme design.


Ajout d'un header.php


Code PHP :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title><?php bloginfo('name'); ?></title>
<link href="<?php bloginfo('template_directory'); ?>/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
 
<div id="header">
<span class="slogan"><?php bloginfo('description'); ?></span>
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
</div>
 
<?php include 'menu.php' ?>

Rien de bien sorcier, nous utilisons l'API de Wp.

Le code renvoie grâce à la balise link vers le fichier styles.css pour les dynamiques du site.
Code PHP :
<?php bloginfo('template_directory'); ?>


Le code récupère le slogan de votre site:
Code PHP :
<?php bloginfo('description'); ?>




Ajout d'un menu.php & function.php



Le fichier menu.php



Dans le fichier header.php j'ai inclus, ce code-ci:
Code PHP :
<?php include 'menu.php' ?>


Ce fichier contiendra donc une div "menu" et une fonction permettant de créer une zonne de menu dans wordpress

Voici le code de menu.php:
Code PHP :
<div id="menu">
<?php wp_nav_menu (array ( 'theme_location' => 'zone-menu-haut') ); ?>
</div>
 


Un petit mot d'explication, je viens d'ajouter le code suivant:
Code PHP :
wp_nav_menu

Cette fonction permet de notifier à Worpdress qu'à cet endroit se trouve une zone prête à accueillir un menu conçu dans l'interface de Wordpress.
Le paramètre "theme_location" nous permet de donner un nom à cette zone au cas ou nous ayons envie de mettre plusieurs zones de menu. Ici je le nomme zone-menu-haut. Vous pouvez lui donner un autre nom, mais tout doit être en minuscule et il ne doit pas avoir d'espaces.


Le fichier functions.php



Il permet d'ajouter de la fonctionnalité à Wp. Dans notre cas nous voulons que wordpress détecte la zone de menu que nous avons mise en place juste au dessus via la fonction wp_nav_menu. Créez et enregistré ce code:
Code PHP :
<?php
 
add_theme_support( 'menus' );
 
function register_my_menus() {
register_nav_menus(
array(
'zone-menu-haut' => __( 'Zone de menu du haut de la page' )
)
);
}
 
add_action( 'init', 'register_my_menus' );
 
if ( function_exists('register_sidebars') ){
register_sidebars(1);
}
 
?>


Explication de cette partie du code:
Nous commençons par ce code-ciadd_theme_support( 'menus' ); qui à pour but que le thème supporte les menus Wordpress.

Le code suivant, permet à Wp de reconnaitre la zone de menu précédemment créer:
Code PHP :
function register_my_menus() {
register_nav_menus(
array(
'zone-menu-haut' => __( 'Zone de menu du haut de la page' )
)
);
}
 
 


Dans cette fonction on lie le nom de la zone de menu "zone-menu-haut" à un nom un peu plus compréhensible pour l'utilisateur de la page menu de l'administration de worpdress.

Dans le cas ou vous souhaitez enregistrer plusieurs zones de menu, il suffit de dupliquer la ligne, en voici un exemple:
Code PHP :
<?php
 
add_theme_support( 'menus' );
 
function register_my_menus() {
register_nav_menus(
array(
'zone-menu-haut' => __( 'Zone de menu du haut de la page' ),
'zone-menu-milieu' => __( 'Zone de menu du milieu de la page' ),
'zone-menu-bas' => __( 'Zone de menu du bas de la page' )
 
)
);
}
 
 
?>


N'oubliez pas les virgules à la fin de chaque ligne, sauf la dernière.
Il ne vous restera plus qu'à placer la même ligne dans le fichier "menu.php".

La dernière ligne de code qui est "add_action( 'init', 'register_my_menus' );", une demande à Wp d'enregistrer ces zones de menu à l'initialisation. Ici "init" est ce que l'on appelle un hook, un évènement se produisant à un moment donné dans le chargement de Wp.

Pour en savoir plus sur les hooks: http://codex.wordpress.org/Plugin_API/Action_Reference


Ajout d'un index.php


le header et menu sont prêt, passons au template principal
Code PHP :
<?php get_header(); ?>
 
<div id="content">
 
<?php get_sidebar(); ?>
 
<div id="leftColumn">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class="articleMain">
<div class="articleTitle">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</div>
<div class="articleContent">
<p><?php the_content(); ?></p>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
 
<div id="navPost">
<?php posts_nav_link(' &#183; ', 'Articles Précédents', 'Articles Suivants'); ?>
</div>
 
<?php get_footer(); ?>

Toutes les explications ont été données au chapitre 3.

Les seules choses que vous ne connaissez pas encore sont:
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Ces lignes sont des fonctions de l'API de Wp permettant de de faire rapidement et dynamiquement (au niveau de l'URL), un include des fichiers "header.php", "sidebar.php" & "footer.php"

Plus d'informations à cette adresse: http://codex.wordpress.org/Template_Tags



Ajout d'un sidebar.php


la sidebar est remplie avec les widgets "Catégories, "Archives" & "Meta" et sera elle aussi dynamique, c'est à dire que son contenu dépendra des éléments que vous aurez placés dedans via le menu "Widgets" de Wp.
Code PHP :
<div id="rightColumn">
<ul>
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar(1)) : ?>
<?php endif; ?>
</ul>
 
</div>


Vous voulez créer une deuxième zone pour identifier vos widgets, voici le code:
Code PHP :
<div id="rightColumn">
<ul>
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar(1)) : ?>
<?php endif; ?>
</ul>
<ul>
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar(2)) : ?>
<?php endif; ?>
</ul>
 
</div>

Dans function.php vous devrez ajouter ceux-ci:
Code PHP :
if ( function_exists('register_sidebars') ){
register_sidebars(2);


le second widgets ne doit pas forcément se trouver dans la sidebar.php. Elle peut se trouver dans footer.php, par exemple.



Ajout d'un footer.php


Code PHP :
<div id="footer">
<p>&#169; <?php print(date(Y)); ?> - <?php bloginfo('name'); ?></p>
</div>
 
</div><!-- Fermeture de la div content -->
</div><!-- Fermeture de la div main -->
</body>
</html>

Juste pour une information, voici le code suivant: &#169, il symbolise le C de copyright.



Ajout d'un single.php


Facultatif, il est utilisé lorsque l'internaute clique sur le titre d'article et arrive donc sur la page de l'article en question. Si ce template n'existe par, l'article s'affichera dans le template "index.php", il est strictement du même codage que l'index.php à un détail prèt. Ici je n'affiche pas la barre des liens "Articles suivants/précédents".

Voici son code:
Code PHP :
<?php get_header(); ?>
 
<div id="content">
 
<?php get_sidebar(); ?>
 
<div id="leftColumn">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class="articleMain">
<div class="articleTitle">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</div>
<div class="articleContent">
<p><?php the_content(); ?></p>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
 
<?php get_footer(); ?>
 
[title=2]Ajout d'un footer-pagestatique.php[/title]

Code PHP :
<div id="footerOneColumn">
<p>&#169; <?php print(date(Y)); ?> - <?php bloginfo('name'); ?></p>
</div>
 
</div><!-- Fermeture de la div content -->
</div><!-- Fermeture de la div main -->
</body>
</html>


Voilà j'espère que vous avez lire ce dossier consacré à la création d'un thème sous Worpdress.



Chez Swan Site design Web phpboost3. Membre depuis 2009 & modérateur depuis 2011.
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie