\n– style.css<\/strong> (obligatoire) sert \u00e0 la mise en forme du site et \u00e0 la reconnaissance du th\u00e8me par WP, par des styles CSS
\n– index.php<\/strong> (obligatoire \u00e9galement) permet l’affichage par d\u00e9faut des pages du site. \u00c0 moins d’un th\u00e8me OnePage, il est toujours compl\u00e9t\u00e9 par de nombreux autres fichiers PHP, sp\u00e9cialis\u00e9s dans l’affichage des articles, archives, etc.
\n– functions.php<\/strong> (quasi obligatoire, il existe dans tous les th\u00e8mes) regroupe les fonctions PHP n\u00e9cessaires au fonctionnement du site, pour l’affichage du contenu, par exemple les menus, les sidebars ou les images \u00e0 la une
\n– screenshot.png<\/strong> (facultatif, mais recommand\u00e9) est une image de 600×450 pixels (le codex recommande 1200×900 pixels pour les \u00e9crans haute r\u00e9solution) donnant \u00e0 voir \u00e0 quoi ressemble le th\u00e8me. Cette image apparait dans le Tableau de bord \u00e0 387×290 pixels au moment du choix d’un th\u00e8me.<\/p>\n
Les autres fichiers g\u00e9n\u00e9ralement pr\u00e9sents dans un th\u00e8me sont header.php, footer.php, sidebar.php, home.php (la page d’accueil quand ce fichier existe), page.php (pour l’affichage d’une Page WP), single.php (pour l’affichage du d\u00e9tail d’un seul article), etc. Ces fichiers sont hi\u00e9rarchis\u00e9s de sorte que si l’un d’eux n’est pas pr\u00e9sent, il est automatiquement remplac\u00e9 par un autre de niveau sup\u00e9rieur. Vous pouvez voir cette hi\u00e9rarchie dans ce sch\u00e9ma : Enfin, on peut rencontrer d’autres fichiers dans un th\u00e8me, du code javascript ou autre. Il est tr\u00e8s instructif d’ouvrir le dossier des th\u00e8mes que vous t\u00e9l\u00e9chargez pour en examiner le contenu.<\/p>\n Ce fichier, obligatoire, doit commencer par un commentaire sur plusieurs lignes pour la d\u00e9claration du th\u00e8me. C’est ce qui permettra \u00e0 WordPress de le reconnaitre et de l’afficher dans le Tableau de bord.<\/p>\n La seule information obligatoire de ce commentaire est le nom du th\u00e8me (Theme Name:), mais les autres informations sont souvent utiles (auteur, version, description, mots cl\u00e9s, etc.). Voyons ci-dessous un exemple de code correspondant au commentaire de d\u00e9claration du th\u00e8me au d\u00e9but du fichier style.css. Notez qu’il ne faut pas mettre d’espace avant les deux points de chaque cat\u00e9gorie d’information :<\/p>\n [pcsh lang=\u00a0\u00bbcss\u00a0\u00bb tab_size=\u00a0\u00bb4″ message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n [\/pcsh]<\/p>\n Le nom du th\u00e8me (Theme Name:) est libre. Faites simple, souvent un seul mot. Une description (Description:) concise aide \u00e0 comprendre les atouts du th\u00e8me. La version (Version:) est tr\u00e8s utile, pour suivre les mises \u00e0 jours n\u00e9cessaires. Des mots-cl\u00e9 (Tags:) aident \u00e0 trouver votre th\u00e8me lors d’une recherche. Il vaut mieux indiquer les tags en anglais, surtout si vous souhaitez distribuer votre th\u00e8me. Enfin, le domaine (Text Domain:) sert \u00e0 la traduction et correspond au nom du dossier de votre th\u00e8me.<\/p>\n \u00c9videmment, le fichier style.css sert \u00e9galement \u00e0 contenir les r\u00e8gles CSS de mise en forme de votre site. Il est recommand\u00e9 d’y placer des commentaires pour chapitrer votre code et mieux vous y retrouver. Certains th\u00e8me contiennent m\u00eame un sommaire en commentaire, juste apr\u00e8s la d\u00e9claration du th\u00e8me. Voir \u00e0 ce propos le fichier style.css des th\u00e8mes fournis par d\u00e9faut par WordPress (twentyfifteen par exemple).<\/p>\n WordPress utilise des fichiers PHP pour afficher le contenu du site. Une page HTML (index.html par exemple pour la page d’accueil d’un site statique) se compose de deux parties principales, head<\/em> et body<\/em>. Puis, dans body<\/em> le contenu se r\u00e9partit en zones bien identifi\u00e9es, un conteneur global (div #wrapper<\/em>), un header<\/em> pour l’en-t\u00eate de la page avec le nom du site et le logo, la nav<\/em> pour le menu principal, souvent int\u00e9gr\u00e9 au header<\/em>, puis une ou plusieurs sections de contenu, avec ou non une colonne lat\u00e9rale sidebar<\/em>, et enfin un footer<\/em> en pied de page.<\/p>\n Ces zones se retrouvent dans WordPress r\u00e9parties en plusieurs fichiers qui seront ensuite assembl\u00e9s en PHP selon les besoins. Voir \u00e0 ce sujet, une introduction simple \u00e0 l’\u00e9laboration des fichiers d’un th\u00e8me : Prenons un fichier HTML de base :<\/p>\n [pcsh lang=\u00a0\u00bbxml\u00a0\u00bb tab_size=\u00a0\u00bb4″ message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n [\/pcsh]<\/p>\n Il commence par le Doctype puis la balise <html><\/em> qui contient les deux balises de base <head><\/em> et <body><\/em>. La partie <head><\/em> comporte 4 lignes : Le <body><\/em> comporte quatre parties : Toutes ces zones comportent un identifiant id<\/em> pour les grandes bo\u00eetes ou une classe class<\/em> pour les autres et sont incluses dans une <div><\/em> globale avec un id #wrapper<\/em>. Bien entendu, cette configuration n’est qu’un exemple, et d’autres configurations sont envisageables, selon vos besoins.<\/p>\n Une grande partie du contenu est cod\u00e9 \u00ab\u00a0en dur\u00a0\u00bb, c’est-\u00e0-dire que le contenu est indiqu\u00e9 directement dans le code, \u00e0 commencer par le titre par exemple. Il va falloir remplacer tout cela par du code PHP qui va appeler le contenu de la Base de Donn\u00e9es et rendre le site dynamique. Le code PHP correspondant \u00e0 ce fichier HTML va se r\u00e9partir dans plusieurs fichiers PHP li\u00e9s entre eux. C’est ce que nous allons voir dans la deuxi\u00e8me partie de cet article.<\/p>\n <\/p>\n <\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" Avantages et inconv\u00e9nients Cr\u00e9er un th\u00e8me complet soi-m\u00eame est une t\u00e2che ardue pour un designer. Nous allons en d\u00e9couvrir les principes fondamentaux, mais pour obtenir un th\u00e8me parfaitement fonctionnel, il faut de bonnes connaissances en d\u00e9veloppement HTML, CSS, PHP et \u00e9ventuellement Javascript. Il est cependant possible de r\u00e9aliser un th\u00e8me simple et fonctionnel. Nous allons … Continuer la lecture de Cr\u00e9er un th\u00e8me complet – part 1<\/span>
\nhttp:\/\/wordpress.bbxdesign.com\/wp-content\/uploads\/2014\/12\/hierarchie-theme-wordpress.jpg<\/a><\/p>\n![\"hierarchie-theme-wordpress\"](\"http:\/\/wordpress.bbxdesign.com\/wp-content\/uploads\/2014\/12\/hierarchie-theme-wordpress.jpg\")
<\/p>\nLe fichier style.css<\/h4>\n
\/*\r\nTheme Name: Engins de Chantiers\r\nAuthor: Gilles\r\nAuthor URI: http:\/\/monsiteweb.com\r\nDescription: Le plus beau des th\u00e8mes sp\u00e9cialement con\u00e7u pour les passionn\u00e9s d'engins de chantier !\r\nVersion: 1.0\r\nTags: chantier, portfolio, tractopelle, jaune, 3 colonnes, responsive\u2026\r\nText Domain: chantier\r\n*\/<\/code><\/pre>\nPasser d’un fichier HTML \u00e0 un fichier PHP<\/h4>\n
\nhttp:\/\/www.wppourlesnuls.com\/notions-de-base-pour-creer-un-theme-wordpress\/<\/a><\/p>\n<!DOCTYPE html>\r\n<html>\r\n\t<head>\r\n\t\t<meta charset="utf-8">\r\n\t\t<meta name="viewport" content="width=device-width, initial-scale=1">\r\n\t\t<title>Titre du site<\/title>\r\n\t\t<link rel="stylesheet" href="style.css">\r\n\t<\/head>\r\n\r\n\t<body>\r\n\t\t<div id="wrapper">\r\n\t\t\t<header id="en-tete">\r\n\t\t\t\t<img src="images\/logo.png" alt="logo">\r\n\t\t\t\t<h1>Nom du site<\/h1>\r\n\t\t\t\t<h2>Slogan<\/h2>\r\n\t\t\t\t<nav class="menu_principal">\r\n\t\t\t\t\t<!-- ici le menu en html -->\r\n\t\t\t\t<\/nav>\r\n\t\t\t<\/header>\r\n\t\t\t\r\n\t\t\t<section id="projets">\r\n\t\t\t\t<<article class="vignette">\r\n\t\t\t\t\t<img src="images\/projet001.jpg" alt="">\r\n\t\t\t\t\t<h3>Titre de l'aricle<\/h3>\r\n\t\t\t\t\t<p class="extrait">bla bla<\/p>\r\n\t\t\t\t<\/article>\r\n\t\t\t<\/section>\r\n\r\n\t\t\t<aside id="en-plus">\r\n\t\t\t<\/aside>\r\n\r\n\t\t\t<footer id="pied-de-page">\r\n\t\t\t\t<p>Copyright<\/p>\r\n\t\t\t\t<nav class="reseaux_sociaux"><\/nav>\r\n\t\t\t<\/footer>\r\n\t\t<\/div>\r\n\t<\/body>\r\n<\/html><\/code><\/pre>\n
\n– la ligne 4 pour l’encodage des caract\u00e8res
\n– la ligne 5 pour l’affichage correct sur smartphone (utile mais pas suffisant pour rendre le site responsive). Pour en savoir plus, consulter ce lien :
\nhttp:\/\/www.alsacreations.com\/article\/lire\/1490-comprendre-le-viewport-dans-le-web-mobile.html<\/a>
\n– la ligne 6 pour le titre du site qui apparait dans l’onglet de la fen\u00eatre du site et dans les moteurs de recherche
\n– la ligne 7 pour le lien vers le fichier CSS<\/p>\n
\n– un en-t\u00eate <header><\/em> regroupant ici un logo, le titre du site et le sous-titre, param\u00e9trables dans WordPress et une <nav><\/em> pour le menu principal
\n– une <section><\/em> pour le contenu principal, ici des articles contenant une image, un titre et une l\u00e9gende de portfolio
\n– un <aside><\/em> pour des informations compl\u00e9mentaires, ou dans WordPress, pour l’affichage des Widgets (archives, articles r\u00e9cents, tags, etc.)
\n– un <footer><\/em> pour le pied de page, avec par exemple un copyright et le menu r\u00e9seaux sociaux.<\/p>\n