Creation de-themes-wp

  • Published on
    25-Jan-2015

  • View
    4.055

  • Download
    4

Embed Size (px)

DESCRIPTION

Cration de thmes WordPress (confrence).

Transcript

  • Cration de thmes WordPress

    Mohamed Cherif

    BOUCHELAGHEM

    Concepteur et dveloppeur web de

    Annaba Algrie

    Ghilas BELHADJ

    Dveloppeur et Designer Web

    Tizi-Ouzou Algrie

    Par

    &

  • Nous allons voir dans cette prsentation le fonctionnement dun thme

    WordPress simple et par la mme occasion, comment crer le

    vtre, en convertissant une Template HTML statique en un thme

    WordPress utilisable.

    Toutefois, certains prrequis sont ncessaires, savoir :

    Standards Web: XHTML (ou HTML5) et CSS (CSS3), et le cas

    chant JavaScript.

    Des connaissances basiques : PHP

    Des outils de bases : Un diteur de code (Notepad++), un logiciel

    de cration graphique (The Gimp, Photoshop, etc)

    Introduction

  • Web Design

    Le web design moderne divise la page dun site web en sections o en modules

  • Mise en page (The layout)

    Il est toujours mieux et fortement recommand de planifier le design

  • Concevoir son site

    Design visuel aide avoir une ide gnrale sur lapparence de site

  • Dfinir les sections

    Toujours avant de commencer crire des balises (Markup)

  • Suivre les standards web

    Structure en HTML (XHTML o HTML5)

  • Suivre les standards web

    Mise en forme en CSS

  • HTML et CSS valide

    laffichage du site est compatible avec tout les navigateurs majeurs

    Pourquoi le HTML et ne pas coder le PHP directement?

    Sassurer que

  • Conversion en thme

    WordPress

  • Tout les thmes se trouvent dans le dossier /wp-content/themes/

    Cration du dossier de thme

  • Pourquoi tout ces fichiers?

    Du codex

    Les fichiers modles des thmes constituent les pices du puzzle que WordPress assemble pour afficher les pages de votre site. Certains modles (les fichiers d'entte ou de pied de page, par exemple) sont utiliss pour toutes les pages gnres ; d'autres ne sont utiliss que sous certaines circonstances.

  • Comment WordPress gre-t-il tout a?

  • Hirarchie des fichiers modles

  • Avec quoi je peux dmarrer?

    Coller le fichier style.css et index.html dans le dossier de thme et renomme ce dernier en index.php

    index.php style.css

  • 225p

    x

    300px

    Crer un fichier screenshot.png avec la capture cran du site

    Je ne vois pas mon thme dans le slecteur du

    thmes !!

    /*

    Theme Name: Plain & Clean

    Theme URI: http://wpdz.org/

    Description: basic Theme for learning

    Author: Cherif BOUCHELAGHEM

    Author URI: http://wpdz.org/

    Version: 1.0

    */

    Fournir diffrentes informations qui permettent dafficher le thme parmi ceux dj disponibles

    style.css est obligatoire, cest partir de ce fichier que WordPress extrait les donnes ncessaires pour afficher le thme dans le backend

  • Cest Quoi? Classement

    Ce sont de courtes fonctions PHP qui vont appeler dautres fichiers lendroit o ils ont t insrs, ou charger du contenu.

    Marqueurs de l'Auteur

    Marqueurs des Catgories

    Marqueurs des Commentaires

    Marqueurs de la Date et de l'Heure

    Marqueurs Gnraux

    Marqueurs des Liens

    Marqueurs du Gestionnaire de Liens

    Marqueurs des Permaliens

    Marqueurs des Articles

    Marqueurs des Tags

    Marqueurs des Rtroliens

    Marqueurs de Modle (Template tags)

    http://codex.wordpress.org/fr:Marqueurs_de_Modele

  • Les Marqueurs Conditionnels peuvent tre utiliss dans vos Thmes pour dcider du contenu afficher sur une page spcifique ou comment ce contenu doit tre affich en fonction de conditions que remplit cette page. Par exemple, si vous voulez insrer un texte particulier au-dessus d'une srie d'Articles, mais seulement sur la page principale de votre blog, avec le Marqueur Conditionnel is_home(), cela devient facile.

    Ces Marqueurs sont en relation troite avec la Hirarchie des Modlesde WordPress.

    is_home() Quand la page principale est affiche.

    is_single() Quand une page d'Article unique est affiche.

    is_single() Quand une page d'Article unique est affiche.

    is_page() Quand une page est affiche.

    is_category() Quand une page de Catgorie d'archive est affiche.

    Etc

    Marqueurs conditionels (conditional tags)

    http://codex.wordpress.org/fr:Marqueurs_conditionnels

    http://codex.wordpress.org/fr:Hierarchie_de_modeleshttp://codex.wordpress.org/fr:Hierarchie_de_modeles
  • Let the coding begin

  • Fichers de thme

    get_header(): importe header.php

    Contenu de index.php

    style.css

    index.php

    header.php

    The Loop

    footer.php

    single.php

    sidebar.php

    comments.php

    page.php

    search.php

    search-form.php

    Modles de page Importation des

    templates header.php, sidebar.php et

    footer.php

    Afficher le contenu

    de la page

    Afficher un message si rien afficher

    get_footer: accepte chaine de caractre comme paramtre pour inclure les modles de diffrent footer

  • Fichiers de thme

    Contenu de header.php

    style.css

    index.php

    header.php

    The Loop

    footer.php

    single.php

    sidebar.php

    comments.php

    page.php

    search.php

    search-form.php

    Modles de page

    Afficher le titre pour chaque template avec

    conditional tags

    Importer le fichier style.css

    Dfinir le doctype, les attributs de langue dans la balise et dfinir le

    charset

    fournit ici lURL du flux RSS au format RSS 2.0 et lURL des retroliens

    Insertions des

    fichiers JS

  • La boucle (the loop)

    Sil y a des articles on les affiche lun aprs

    lautre

    Affichage des liens vers les anciens article o les

    articles rcents

    Afficher un message sil n y a aucun

    article

    style.css

    index.php

    header.php

    The Loop

    footer.php

    single.php

    sidebar.php

    comments.php

    page.php

    search.php

    search-form.php

    Modles de page

    Fichiers de thme

  • Afficher le contenu de larticle plus les liens

    vers un article prcdent et un suivant

    Affichage du titre en tant que lien vers

    larticle

    Affichage infos relative larticle: date, auteur,

    catgorie... etc

    style.css

    index.php

    header.php

    The Loop

    footer.php

    single.php

    sidebar.php

    comments.php

    page.php

    search.php

    search-form.php

    Modles de page

    Fichiers de thme

    Lintrieur de la boucle (the loop)

  • Contenu de pied de page (footer.php)

    Il peut tre structur avec des sidebar (quon verra par la suite) qui contient des Widgets, nimporte quel Template tag WordPress qui charge du contenu comme des liens en occurrence o texte statique

    wp_footer(): cest la mme chose que wp_head() , mais spcifiquement pour les fichier JS, pour suivre les bonnes pratique dintgration des fichiers JS en bas de page avant la fermeture de la balise

    style.css

    index.php

    header.php

    The Loop

    footer.php

    single.php

    sidebar.php

    comments.php

    page.php

    search.php

    search-form.php

    Modles de page

    Fichiers de thme

    Un site peut contenir plusieurs footer qui peut tre inclus par la fonction get_footer

  • style.css

    index.php

    header.php

    The Loop

    footer.php

    single.php

    sidebar.php

    comments.php

    page.php

    search.php

    search-form.php

    Modles de page

    Fichiers de thme

    Contenu de la vus dun article(single.php)

    Afficher le contenu de

    la page

    Afficher un message et le formulaire de

    recherche si la page nexiste pas

    Afficher le formulaire des commentaire

    Importation des templates

    header.php, sidebar.php et

    footer.php

    Afficher les liens de navigation entre les articles

  • Cette barre peut-tre incluse dans votre page, avec un simple appelle de fonction get_sidebar().

    style.css

    index.php

    header.php

    The Loop

    footer.php

    single.php

    sidebar.php

    comments.php

    page.php

    search.php

    search-form.php

    Modles de page

    Fichiers de thme

    la barre latrale (sidebar.php)

  • Cest ce nom qui vas tre utilis lors de la vrification des Widgets

    ce stade, vous pourrez dors et dj utiliser des Widgets sur votre sidebar depuis le Back-End.

    style.css

    index.php

    header.php

    The Loop

    footer.php

    single.php

    sidebar.php

    comments.php

    page.php

    search.php

    search-form.php

    Modles de page

    Fichiers de thme

    Activation des Widgets Lactivation des Widgets se fait partir du fichier functions.php, en insrant la fonction register_sidebar() avec son paramtre tableau :

  • style.css

    index.php

    header.php

    The Loop

    footer.php

    single.php

    sidebar.php

    comments.php

    page.php

    search.php

    search-form.php

    Modles de page

    Fichiers de thme

    Contenu de la barre latrale (sidebar.php)

    Nom dclar dans le fichier

    functions.php

    Ces fonctions seront utilis sil ny a pas de

    Widgets Acrifes

    Cot code, le fichier sidebar.php ne contient pas grand choses, part la vrification des Widgets et les menus par dfauts.

  • Dans le cas ou vous voudriez utiliser une autre sidebars, vous avez la possibilit lutiliser la mme fonction get_sidebar(secondaire) qui vas appeler le fichier sidebar-secondaire.php

    wp_get_archives() : Permet de lister les dernier articles de votre site.

    wp_tag_cloud() : idal si vous utilisez des tags dans vos articles de lister les plus utilises sous forme de nuage de tags.

    wp_list_categories() : Affiche la liste des catgories de votre site.

    wp_list_bookmarks() : Affiche la liste des liens gr depuis le panneau dadministration.

    get_search_form () : Affiche le formulaire de recherche.

    Vous pouvez avoir lintgralit des fonctions avec leurs paramtres dtaills sur http://www.codex.wordpress.org/

    style.css

    index.php

    header.php

    The Loop

    footer.php

    single.php

    sidebar.php

    comments.php

    page.php

    search.php

    search-form.php

    Modles de page

    Fichiers de thme

    Quelques Fonctions clbres pour la sidebar

  • Appelle de la template comments.php par la fonction comments_template()

    Les commentaires (comments.php)

    style.css

    index.php

    header.php

    The Loop

    footer.php

    single.php

    sidebar.php

    comments.php

    page.php

    search.php

    search-form.php

    Modles de page

    Fichiers de thme

  • Sil y des commentaires

    Si larticle nest pas protg

    Alors, Afficher les commentaires

    Si aucune inscription nest requise

    Si les commentaires sont ouverts

    Alors, Afficher le formulaire

    Structure du fichier comments.php

    style.css

    index.php

    header.php

    The Loop

    footer.php

    single.php

    sidebar.php

    comments.php

    page.php

    search.php

    search-form.php

    Modles de page

    Fichiers de thme

  • Article protg par mot de passe

    Afficher les commentaires sil y en a, sinon un petit

    message

    Afficher le formulaire si les commentaires sont ouverts sinon un petit message

    Dans comments.php, nous aurons besoins de vrifier certaines conditions avant dafficher les commentaires avec la fonctions wp_list_comments()

    Contenu du modle de

    commentaires

    (comments.php)

    style.css

    index.php

    header.php

    The Loop

    footer.php

    single.php

    sidebar.php

    comments.php

    page.php

    search.php

    search-form.php

    Modles de page

    Fichiers de thme

  • Afficher le

    contenu de la page

    Afficher un message et le formulaire de

    recherche si la page nexiste pas

    Afficher le formulaire

    des commentaire

    Importation des templates

    header.php, sidebar.php et

    footer.php

    ressemble au fichier single.php, donc il ny a pas de nouvelles fonctions apprendre dans cette template.

    Contenu de page (page.php)

    style.css

    index.php

    header.php

    The Loop

    footer.php

    single.php

    sidebar.php

    comments.php

    page.php

    search.php

    search-form.php

    Modles de page

    Fichiers de thme

  • ressemble au fichier single.php, donc il ny a pas de nouvelles fonctions apprendre dans cette template.

    Contenu du fichier search.php

    style.css

    index.php

    header.php

    The Loop

    footer.php

    single.php

    sidebar.php

    comments.php

    page.php

    search.php

    search-form.php

    Modles de page

    Fichiers de thme

    Afficher les termes de recherches dans

    la page

    Afficher les rsultats de recherche

    Importation des templates

    header.php, sidebar.php et

    footer.php

  • ressemble au fichier single.php, donc il ny a pas de nouvelles fonctions apprendre dans cette template.

    Contenu du fichier

    searchform.php

    style.css

    index.php

    header.php

    The Loop

    footer.php

    single.php

    sidebar.php

    comments.php

    page.php

    search.php

    search-form.php

    Modles de page

    Fichiers de thme

    Vous pouvez mettre le formulaire de recherche dans son propre fichier pour pouvoir lutiliser facilement sur dautres templates avec la fonction get_search_form() Vous pouvez, par exemple, utiliser cette fonction :

    Dans le fichier 404.php Aprs le else dune boucle. Dans la sidebar Etc

  • Vous pouvez choisir lorsque vous crez votre page, le modle qui lui sera applique (formulaire de contacte, plan du site, etc).

    Pour en crer vous navez qua copier la template page.php et le renommer comme suite : template-nom_du_modele.php

    Ensuite ajouter le code suivant au tout dbut : Nom du modle correspond au nom qui apparaitra dans le back-end

    Les modles de page

    style.css

    index.php

    header.php

    The Loop

    footer.php

    single.php

    sidebar.php

    comments.php

    page.php

    search.php

    search-form.php

    Modles de page

    Fichiers de thme

  • Les modles de page

    style.css

    index.php

    header.php

    The Loop

    footer.php

    single.php

    sidebar.php

    comments.php

    page.php

    search.php

    search-form.php

    Modles de page

    Fichiers de thme

    Maintenant que vous avez votre modle de page par dfaut, vous pouvez lui apporter les modifications ncessaires en terme de style et fonctionnalits PHP.

    Vous pouvez par exemple :

    Supprimez la sidebar

    Ajouter de nouvelles fonctions Wordpress

    Appliquez un style diffrent via CSS

    Etc

    Exemple de page modle :

    Page derreur 404 (404.php)

    Page de liens (links.php)

    Plan du site (sitemap.php)

    Page darchives (archives.php)

    Page Daccueil (index.php)

    Page de contact (contant.php)

    Etc

  • Liens Utiles

  • Les liens incontournable

    Les sites francophones: Documentation officielle :

    codex.wordpress.org/fr:Accueil Tutoriels sur la cration de thmes Wordpress :

    fran6art.com eiffair.fr grafikart.fr

    Forum dentraide Wordpress :

    wordpress-fr.net Ressources :

    geekeries.fr

    http://codex.wordpress.org/fr:Accueilhttp://codex.wordpress.org/fr:Accueilhttp://codex.wordpress.org/fr:Accueilhttp://www.fran6art.com/http://www.fran6art.com/http://www.eiffair.fr/http://www.grafikart.fr/http://www.wordpress-fr.net/http://www.wordpress-fr.net/http://www.wordpress-fr.net/http://www.geekeries.fr/
  • Documentation officielle: Les BloGs:

    codex.wordpress.org

    smashingmagazine.com speckyboy.com tutplus.com

    Tutoriel sur Wordpress : digwp.com wprecipes.com wpbeginner.com wpcandy.com pimpmywordpress.com wpengineer.com wpzine.com wptavern.com

    Les liens incontournables

    http://www.codex.wordpress.org/http://www.smashingmagazine.com/http://www.speckyboy.com/http://www.tutplus.com/http://digwp.com/http://www.precipes.com/http://www.wpbeginner.com/http://wpcandy.com/category/teacheshttp://www.pimpmywordpress.com/http://www.wpengineer.com/http://www.wpzine.com/http://www.wptavern.com/
  • Les Conseils

  • Travailler sur des serveurs locaux

    WampServer LampServer Server2Go MampServer

  • Utiliser les outils de test et de dbuguage

    Raccourci :

    F12 Raccourci :

    Ctrl+Maj+i

    Raccourci :

    F12

    Raccourci :

    F12

  • Vrifier si votre thme respecte les standards du web

  • Equilibrer le Design/Contenu

    Crer des thmes aussi lgers que possible

    Contenu Design