Spécial débutants



Créer un thème WordPress intégralement N°6 : le footer et introduction au CSS.

Pour harmoniser la création de votre site, nous vous conseillons de vous référencer aux numéros publiés dernièrement :

Créer le footer : copyright.

Nous y voilà : la fin de la création de vos templates. Le footer est le pied de page : vous pouvez y indiquer quelques informations. Généralement on y trouve le nom du webmaster, le copyright, des coordonnées et/ou des liens.

Après avoir créé le fichier dans Notepad, ouvrez une div qui permettra plus tard de personnaliser la couleur, le fond, la taille… de votre footer. Pour afficher un Copyright qui indique automatiquement l’année actuelle, onnote : print (date(Y)). Vous pouvez rajouter une petite phrase descriptive, notamment si vous souhaitez mettre en avant le fait que c’est vous qui avez réalisé ce thème! En revanche vous devrez vous procurer les codes nécessaires à la rédaction des accents car ils ne sont pas pris en compte par les navigateurs : Lire la suite

Créer un thème WordPress intégralement N°5 : la sidebar

En espérant ne pas avoir perdu de lecteurs en cours de route, nous allons ici aborder la sidebar ou barre latérale. Pour les voir les 4 premières parties de notre guide création de thème wordpress, c’est par ici :

Principes de bases de la sidebar

Elle a de multiples intérêts : ergonomie (facilite la navigation interne de votre site), référencement, revenus publicitaires, partage via les réseaux sociaux… Elle doit donc être affinée après sa mise en place pour tirer un maximum de bénéfices de ces fonctions. Entrons dans le vif du sujet : comme d’habitude, créez votre fichier sidebar.php. Lire la suite

Créer un thème WordPress intégralement N°4 : pages, archives et articles.

Si vous arrivez en cours de route, il est recommandé de parcourir les billets précédents relatifs à la création de thèmes pour mieux profiter des informations que nous souhaitons mettre à votre disposition ici.

Voir :

Créer la page, les archives et l’article seul.

Dans l’épisode N°3 vous avez eu accès aux explications permettant de créer l’index.php. Pour construire la page nous allons dans un premier temps faire simple : copiez l’ensemble de votre fichier index et collez le dans un fichier nommé page.php. 

Puisque les contenus sont identiques, vous ne verrez aucune différence entre vos pages et vos articles du point de vue  de l’apparence. Par exemple, ils sont tous les deux suivis de commentaires. Or, si vous construisez des pages, c’est sans doute leur souhaitez-vous une apparence autre que celle de vos articles. Lire la suite

Créer un thème WordPress intégralement N°3 : l’index.php, création de sites.

Pour créer l’index.php, nous reprenons quelques informations présentes dans le header.php. N’hésitez pas à relire l’épisode N°2 si quelques notions vous échappent!

L’index peut contenir de multiples informations : vous y intégrerez tout ce qui concerne la page d’accueil, ce qui permet de personnaliser celle-ci indépendamment du reste du site.

Créer l’index.php lors de la création du site WordPress

Comme pour le header.php créé dans le billet précédent, ouvrez un fichier Notepad et appelez-le index.php. Pour que la page d’accueil ouvre le fichier header.php, nous indiquons ceci : Lire la suite

Créer un thème WordPress intégralement N°2 : le header et la création de site

Dans ce deuxième numéro nous allons attaquer les choses sérieuses et créer le header le plus simplement possible. Pour cela, quelques pré-requis sont nécessaires.

Pré-requis à la création du site et des templates.

Pour créer un thème, il faut déjà savoir où vont être stockés les fichiers : rendez-vous dans le dossier WordPress de votre ordinateur. Ouvrez « wp-content » puis « thèmes » : engendrez un nouveau dossier que vous sauvegardez sous le nom qui représente votre futur thème ( ceci est modifiable à tout moment).

Créer le header.php

Ouvrez Notepad et sauvegardez la page en la nommant header.php. Nous allons entrer quelques codes qui sont de précieuses indications pour les moteurs de recherche et navigateurs :

Le DOCTYPE annonce le codage utilisé sur la page. Ne nous encombrons pas avec les détails que vous n’aurez pas à modifier par la suite : copiez le code ci-dessous et intégrez le dans votre template.

Ensuite, copiez le code dans l’image ci-dessous lorsque vous avez saisi l’utilité des éléments…

 Comprendre les termes utilisés dans les codes lors de la construction de site

</head> concerne les données informatives pour les moteurs de recherche. Mais pourqoi y a-t-il / devant le mot? Parce que ce symbole annonce la fin du contenant. Si vous n’avez pas de base en html ni php, comprenez simplement qu’on ouvre une balise avec un symbole, ici <blabla> et pour la fermer on note la même chose avec /, soit </blabla>. Attention la moindre ponctuation inexacte peut rendre votre site illisible donc, cramponnez-vous.

<body> C’est le plus grand contenant : il englobe la page, le header, le footer… Pour qu’il joue ce rôle convenablement, on doit fermer la balise dans un autre fichier : l’ index car il contient le footer et d’autres données.

<div id="header"> Si vous vous souvenez bien, le header correspond à l’entête. Nous allons y insérer menus, images…

<p class="menu"> Voici justement le menu qui se trouve bien à l’intérieur du header, puisque celui-ci est placé en amont et la balise </header> n’est pas encore fermée (elle le sera aussi dans l’index). Dans ce thème, nous avons placé le menu en haut du Header.

Pour que le menu fonctionne, on écrit le code :
<?php wp_nav_menu (); ?></p>

Celui-ci va solliciter function.php lorsqu’il sera créé : il est « la pile » du menu (c’est lui qui rend le menu actif).

Remarquez qu’on a fermé le balise du menu avec </p>.

Pour faire apparaître le titre et la description de votre site, nous rédigeons :

<h1><a href="<?php bloginfo( 'url' ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p class"description"><?php bloginfo('description'); ?>

<div id="page"> Ceci va appeler la page de votre site. Dans l’exemple que vous verrez dans les prochains billets, le contenant page contiendra l’article et la sidebar.On la refermera donc après ces éléments, dans l’index.

Enfin, nous fermons le header avec </div>.

Le code final de notre header est donc :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <title> <?php bloginfo('name') ?> <span></span> <?php if ( is_404() ) : ?> &raquo; <?php _e('Not Found') ?> <?php elseif ( is_home() ) : ?> &raquo; <?php bloginfo('description') ?> <?php else : ?><?php wp_title() ?><?php endif ?> </title> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats --> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /<?php wp_head(); ?> <?php wp_get_archives('type=monthly&format=link'); ?> <?php //comments_popup_script(); // off by default ?> <?php wp_head(); ?> </head> <body> <div id="header"> <p> <?php wp_nav_menu (); ?></p> <h1><a href="<?php bloginfo( 'url' ); ?>"><?php bloginfo( 'name' ); ?></a></h1> <p class"description"><?php bloginfo('description'); ?> <div id="page"> </div> Lire la suite