Creation de-themes-wp

  • 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 v