DSPP

Dossier de synthèse professionnel

MARTIN Fabien

Création WP

Création d'un thème Wordpress


  Tout d’abord, il faut savoir qu’un thème pour WordPress est composé de 3 éléments minimum:



La feuille de style:
C’est ce qui va donner le style, l’apparence que vous voulez donner à une page web.
C'est ce qu’on appelle les CSS, (les Cascading Style Sheets).



Les images:
On va trouver dans le thème toutes les images utilisées par la feuille de style pour habiller la page web.



Les Templates:
Ce sont les fichiers, les différents éléments en PHP, qui vont composer la page web.
Les plus connus sont le header, index, sidebar et footer

C'est parti




Créons donc notre dossier et nos template :




Répertoire Création



osaka original

+Cliquez sur l'image



Jetons un oeil dedans



osaka refonte

+Cliquez sur l'image



Les Templates

Le Header

Appel du style css
....link rel="stylesheet" href="?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> 

La fonction bloginfo()
Elle affiche des informations sur le site, la plupart du temps elle recueil à partir des informations fournient dans le profil des paramètres généraux de WordPress.
Elle peut être utilisée partout dans un template .
Elle affiche les informations dans le navigateur.


Header.php





Le menu, la nav dans le language d'initié:

wp_nav_menu ();
est la fonction codex de wordpress pour placer dynamiquement une liste a puce "ul/li"
Dans le cas d'une navigation personnalisée, je place des paramètres dans un tableau virtuel nommé "array" en php..
Voulant utiliser Bootstrap 3 pour créer un template responsive, j'entoure ma NAV WP
des balises responsives "magiques" de bootstrap les fameuses "navbar navbar-default"
et Navbar collaps permettant une reduction sur mobil.
je passerai les detail de bootstrap 3 car il y aurai trop a dire...
Je precise tout de même que j'ai conçu le site sur lequel vous naviguez avec le tout dernier Bootstrap 4 Alfa avec quelques bug encore mais de plus en en plus design.

wp_bootstrap_navwalker est un script utilisé en js pour intégrer une nav responsive sous Wordpress via Bootstrap 3.




Le template function et la nav




La fontion require_once('wp_bootstrap_navwalker.php');
permet de charger en premier le fichier php correspondant a la navwalker responsive hébergeant toutes les fonctions PHP qui lui sont propres.





Le template function et la nav



La fonction
register_nav_menus( array(
'primary' => __( 'Menu PhZx', 'phzx' ),
) );

Elle permet de créer une option dans le panneau d'administration de wordpress,
en l'occurence une nouvelle option de menu qui s'appelle menu PhZx.
voila en réel ce quye ça donne.





La création dans le panneau d'administration



Voila donc les grands principes de la création de thème de A-à-Z. Du moins pour le menu de navigation..
Vous voulez en savoir plus ?
Alors je vous laisse un dernier secret, comment charger ces scripts JS,
ses plugins et même les Css supplémentaire.. ce n'est pas si simple, j'avoue avoir cherché un moment,
les tutos, la page officiel wordpress etc...
et finalement après de multiple test j'ai enfin trouvé ce qui fonctionne a coup sûr.








Chargement des scripts

Ce code permet de charger n'importe quel fichier css dans vôtre thème:


wp_enqueue_style('bootstrap-css', get_stylesheet_directory_uri() . '/css/bootstrap.css' );

wp_enqueu_style définie le type de fichier donc stylesheet css
Entre paranthèse, après avoir ouvert les simples guillemets,
je nommes le fichier (un nom que je prends soin de définir comme bon me simple)
Pour finir, get_stylesheet_directory_uri() ouvre le chemin du fichier,
ici mon fichier se trouve (depuis la racine du thème) sinon il faudra appliquer les ".../")pour les retour en arrières.
donc je répet, il se trouve dans mon dossier css et il s'appel :
bootstrap.css


Vision global

Pour le css j'en utilise plusieurs, puisque j'utilise bootstrap,il me faut un reset css, un reset css est un fichier de base css permetant une adaptation standard des styles pour les paragraphes,
les listes a puces et les balises titre sous titres etc...
il ya le fameux reset.css de"meyerweb"
dont je vous laisse le lien de téléchargement en cliquant ICI

Avec bootstrap 3

Il y a normalize.css compris dans le pack de BT3.
Il est un peut moins récent mais plus complet, une mise à jour devrait arriver d'ici peu.
Lien en téléchargement ICI


Le Template Index.php

Il contient le contenu de la page, les articles, les différentes pages.
En fait, il ne le contient qu’indirectement puisque c’est dans le Loop WordPress que l’on va trouver les règles qui vont déterminer,
ce qui doit être affiché dans l’index.
Je vais y venir bientot :) Voici un petit screenshot de mon fichier index:



Index.php




Comme vous voyez c'est une premièere pour moi, Donc je place un maximum de commentaire pour être sûr de pouvoir y revenir sans être perdu.
Dans l'index.php j'appel mes bouts de pages séparées en plusieurs fichiers (LES TEMPLATES) ha!!!! on commence à s'y retrouver.



Une logique dynamique... Je reprends le principe:
En théorie nous avons en HTML & CSS une structure de base...
Le header.
Le corps avec les articles / aside / le contenu entouré de DIV avec leur class..
Le Footer.
Evidement je simplifie sinon ce serait vraiment trop long.
Et bien avec Wordpress, c'est pareil je structure mon contenu avec des div et des class,
pour ce qui est de la structure de base, celle qui est supposée être identique d'une page a l'autre, je les appel avec une fonction qui leur est propre puisque ce sont des fichier isolés.
Un peu comme un bon vieux INCLUDE en pur PHP.

get_header(); ?>
// appel du header, le header stock les meta description le langage et toutes les réferences concernant le site.//

php get_sidebar(); ?>
// La side barre sous worpress est généralement utilisée pour recevoir des widgets.//

php get_footer(); ?>
//Le footer accueil les mentions légales un menu de rappel etc...//

Surtout ne pas oublier la balise d'ouverture PHP avant la fonction,
ici je ne l'ai pas mise pour des raison évidentes de bug potentiels avec le script de mon site.
bien qu'un textarea pourrait faire l'affaire, mais cette balise n'est pas très compatible avec Boostrap 4 .


En conclusion

Pour ce projet, j'ai travaillé seul dans le but simple d'apprendre, comprendre et enrichir mes connaissances..
Pour le moment j'ai preparé le coté blog avec la sidebar porteuse de widjet, chaque articles ou pages créer dynamiquemant s'affichent bien dans le navigateur ce qui est plutot positif.

Wordpress

Wordpress

Service

WHAT WE DO BEST

Applications
Applications

Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.

Productions
Productions

Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.

Web Designing
Web Designing

Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.

CHOSSE YOUR PLAN

Basic

$19/Month

  • 15 Projects
  • 30 GB Storage
  • Unlimited Data Transfer
  • 50 GB Bandwith
  • Enhanced Security
learn more

Business

$29/Month

  • 15 Projects
  • 30 GB Storage
  • Unlimited Data Transfer
  • 50 GB Bandwith
  • Enhanced Security
learn more

Premium

$39/Month

  • 15 Projects
  • 30 GB Storage
  • Unlimited Data Transfer
  • 50 GB Bandwith
  • Enhanced Security
learn more

Ultimate

$49/Month

  • 15 Projects
  • 30 GB Storage
  • Unlimited Data Transfer
  • 50 GB Bandwith
  • Enhanced Security
learn more

OUR VALUABLE CLIENTS

contact

COME IN TOUCH

House -3, Road-2, Block - F,
Akhalia Ghat R/A, Sylhet.
hello@boots4.com
+880 12345 - 67890