Créer un thème WordPress intégralement N°3 : l’index.php

Publié le 3 février 2012 dans Création de sites web, Spécial débutants
 

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

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 :

<?php get_header(); ?> <!– ouvrir header,php –>

Ce que vous voyez en orange n’a pas d’incidence sur votre site, ce n’est qu’une indication : pour cela on l’encadre des symboles <!– et –>.  Cette astuce sert de repère pour la suite : lorsque vous voudrez faire évoluer votre thème, vous trouverez les balises plus aisément.

Ensuite, nous intégrons un espace texte dédié à vos articles, le content :

<div id="content">

Nous laissons la div ouverte puisque nous allons détailler plusieurs choses du content. Notamment les postmetadata : données relatives au contenu comme le nom de l’auteur, la catégorie etc. Elles sont personnalisables :

<p class="postmetadata">

Avant cela, nous intégrons certains renseignements qui s’afficheront en correlation avec l’article : le titre par exemple. La balise h2 est importante pour le SEO : elle est l’une des premières lectures du moteur de recherche qui parcours le site.

En orange le if devra être fermé plus bas avec <?php endif; ?> :

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

<div class="post_content">

Intégrer des commentaires

Nous notons le code suivant, en sachant que si vous souhaitez à l’avenir retirer l’accès aux commentaires il suffit d’enlever ce code du fichier index, page ou single.php, ou les trois, à votre guise! Il va appeler comment.php :

Ensuite nous fermons les div ouvertes précédemment hormis quelques unes car nous n’avons pas tout inséré dans l’index:
<div class="comments-template">
<?php comments_template(); ?>
</div>
</div>
</div>
</div>

<?php endwhile; ?>

Les div sont sources de nombreuses « catastrophes » quant à l’apparence du site : si un jour vous retrouvez votre sidebar en bas de page par exemple, pensez de suite à vérifier vos que vos div sont bien fermées. Le problème est donc solutionné en quelques secondes.

Intégrer la sidebar et le footer à l’index

Nous appelons les fichiers correspondants, au même titre que nous l’avons fait pour le header.php :

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Nous clôturons le if comme précisé tout à l’heure, ainsi que la page que nous avions ouverte dans le header.php, de même que le body :

</div>

</body>

Voilà une bonne chose de faite! Vous verrez que les autres fichiers php iront plus vite à créer car nous reprendrons la majorité des éléments de l’index.php.

Catégorie: Création de sites web, Spécial débutants

Flux RSS | Trackback
Pas de commentaire »

Créer un thème WordPress intégralement N°2 : le header

Publié le 2 février 2012 dans Création de sites web, Spécial débutants
 

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 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 :

 

</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>

Demain vous apprendrez à créer le template index.php, qui est plus fourni!

Catégorie: Création de sites web, Spécial débutants

Flux RSS | Trackback
Pas de commentaire »

Créer un thème WordPress intégralement N°1

Publié le 31 janvier 2012 dans Création de sites web, Spécial débutants
 

Vous faites peut-être partie de ceux qui ont envie de se lancer dans cette  folle aventure : créer son propre thème WordPress. Nous allons ici proposer les bases nécessaires à la compréhension du codage php et css : vous pourrez ensuite évoluer par vous-même.

C’est donc une succession de billets que vous allez voir paraître au fur et à mesure : construire un template demande la compréhension d’un certains nombres de données que nous ne pourrons pas détailler en quelques lignes!

Description des divers fichiers

Un thème WordPress est grosso modo constitué de deux types de fichiers : php et css. Les premiers organisent la structure de votre site : barres latérales, menus… C’est là que vous décidez de l’emplacement des éléments. Le css permet de personnaliser ces éléments : couleur, polices, mise en page, images etc.

1)Les fichiers php

header.php : il correspond à l’entête de la page. Généralement il contient le titre et/ou le logo du site, une image, un menu. C’est aussi dans cette partie qu’on intègre le code de Google Analytics.

index.php : il représente la page d’accueil. Nous y insérerons de nombreuses données pour déterminer la présence ou non de contenants (texte principal, fil d’Ariane, footer…)

page.php : WordPress permettant originellement de créer un blog et tout aussi bien un site vitrine, on peut y intégrer des pages simples qui sont régies par ce fichier, et/ou des articles qui sont construits dans single.php et archive.php

single.php : si vous souhaitez donner une apparence différente entre pages et articles, comme par exemple ne permettre les commentaires que sur ces derniers, c’est dans ce fichier que l’on notera les codes adaptés.

archive.php : comme son nom l’indique, il vous permet de contrôler ce qui apparaît dans les archives de votre blog. Par exemple si un internaute clique sur vos archives, vous pouvez choisir qu’il aperçoive les extraits d’articles ou l’intégralité.

sidebar.php : c’est la barre latérale qui est définie ici. On y insère les codes pour l’utilisation de widgets entre autres.

footer.php : dans cet espace situé en bas de page, on note souvent le copyright, le nom de celui ou celle qui a développé le site et aujourd’hui, on voit même bien plus. En effet, c’est l’accès aux catégories, aux liens, aux réseaux sociaux qui se glisse désormais à cet endroit.

function.php : il est en correlation avec d’autres fichiers php comme la sidebar. C’est lui qui détient la clé pour que la barre latérale fonctionne : sans lui ce n’est pas possible. Cela vaut aussi pour le menu principal (sous le header généralement).

comments.php : il accorde la présence de commentaires, leurs structures et fonctions.

searchform.php : grâce à lui vous permettez aux internautes de trouver exactement leur bonheur. Il leur suffit d’effectuer une recherche en inscrivant les mots de leur choix.

2)Les fichiers css

Rassurez-vous, il y en a moins. On peut même dans l’absolu se contenter d’un seul fichier css, qui en revanche est indispensable : la feuille de style.

style.css : magique ou presque, la feuille de style réunit toutes les données visant à customiser votre thème, élément par élément. On y retrouve donc des codes attribués à chaque fichier php. On peut même y programmer des dégradés, des ombres, des bordures…

Voilà, vous avez un aperçu des termes auxquels vous allez être confrontés très régulièrement. Dans l’épisode N°2 de « Créer un thème WordPress intégralement« , vous allez justement mettre la main à la pâte en créant quelques fichiers php.

Vous cherchez un hébergeur pour votre site WordPress ? Voir notre classement des hébergeurs wordpress. Top 10 Hébergeurs recommande les hébergeurs suivant pour votre blog ou site wordpress : Hostpapa, Infomaniak, 1Hebergement, JustHost et OVH.

Catégorie: Création de sites web, Spécial débutants

Flux RSS | Trackback
1 commentaire »

Installer WordPress

Publié le 28 janvier 2012 dans Création de sites web, Spécial débutants
 

Ce logiciel gratuit connaît un franc succès auprès des professionnels du web mais aussi auprès des novices. Installer WordPress ne nécessite pas de connaissances particulières : munissez-vous simplement des données fournies par votre hébergeur, comme suit.

Pré-requis à l’installation de WordPress

Rendez-vous sur le site de votre hébergeur web afin d’accéder au paramétrage. Notez les éléments relatifs à votre base de données, à savoir : le nom et l’ultilisateur de celle-ci, le mot de passe qui vous a été attribué ou que vous avez choisi et l’adresse de l’hébergement.

Par la même occasion, notez vos identifiants ftp disponibles également sur votre compte hébergeur : retenez l’identifiant et le mot de passe. Conservez ces informations que nous utiliserons par la suite.

Télécharger un logiciel ftp

Disponibles sur la toile, vous en trouverez plusieurs avec chacun leurs avantages. Néanmoins le plus réputé est Filezilla : gratuit et tout à fait performant. Téléchargez-le logiciel ftp de votre choix et ouvrez-le. Pour vous connecter à votre serveur, renseignez les données demandées :

  • L’ hôte : votre nom de domaine  sous la forme top10hebergeurs.com
  • L’identifiant
  • Le mot de passe

Si tout se passe bien, vous voyez apparaître la racine de votre site. Si vous n’avez pas attribué de nom au répertoire de votre site, celui-ci apparaît sous le symbole /.

Télécharger puis installer WordPress

Sur le site de WordPress vous accédez systématiquement à la version la plus récente disponible en Français. Décompressez le dossier sur votre bureau dans un premier temps pour faciliter les manoeuvres. Pour que l’installation réussisse, vous devez créer un fichier : ouvrez notepad ou le bloc-note.

Gardez ouvert ce nouveau fichier et ouvrez wp-config-sample.php situé dans le dossier WordPress. Sélectionnez tout le texte et copiez-le afin de le coller dans le fichier créé à l’instant. Regardez l’extrait ci-dessous afin de repérer l’endroit que nous allons transformer en quelques secondes, en y introduisant les identifiants de votre base de données : remplacez ‘ici’ par vos données.

* @package WordPress
*/

// ** Réglages MySQL – Votre hébergeur doit vous fournir ces informations. ** //
/** Nom de la base de données de WordPress. */
define(‘DB_NAME’, ‘ici’);

/** Utilisateur de la base de données MySQL. */
define(‘DB_USER’, ‘ici’);

/** Mot de passe de la base de données MySQL. */
define(‘DB_PASSWORD’, ‘ici’);

/** Adresse de l’hébergement MySQL. */
define(‘DB_HOST’, ‘ici’);

/** Jeu de caractères à  utiliser par la base de données lors de la création des tables. */

 

Veillez à ne pas escamoter la ponctuation très exigeante du langage php : pas d’espaces entre les lettres, ni entre les guillemets et les mots. Sauvegardez ce fichier dans le même dossier que wp-config-sample.php en le nommant : wp-config.php

Retournez sur votre logiciel ftp : à droite vous avez repéré la racine de votre site et à gauche apparaît votre ordinateur et ses dossiers. Cliquez sur le bureau et ouvrez le dossier WordPress : sélectionnez l’ensemble du contenu de ce dossier (sans le dossier WordPress lui-même, il s’agit bien des fichiers php, dossiers wp-include etc…). Copiez-les à la racine de votre site : cela prend quelques minutes avant que vous puissiez vous connecter à votre site!

Votre site WordPress est prêt!

Entrez l’url de votre site dans votre navigateur suivi du suffixe wp-install: http://www.votresite.com/wp-install

Vous arrivez sur une interface de connexion dans laquelle vous êtes libre de choisir vos identifiant et mot de passe afin d’accéder à la  plateforme d’édition WordPress : à vous désormais de découvrir les joies de la création de site!

Pour en savoir plus sur l’hébergement WordPress, rendez-vous sur notre comparatif hébergement wordpress. Top 10 Hébergeurs recommande les hébergeurs suivant pour votre site wordpress : Hostpapa, Infomaniak, 1Hebergement, JustHost et OVH.

Catégorie: Création de sites web, Spécial débutants
Tags:
Flux RSS | Trackback
Pas de commentaire »

Permettre à un contributeur wordpress d’ajouter un média

Publié le 27 janvier 2012 dans Création de sites web, Spécial débutants
 

Les comptes contributeurs sous WordPress offrent l’avantage de permettre à un éditeur ou admin de modérer et éventuellement d’éditer les articles rédigés par ces utilisateurs avant de les publier. Le compte contributeur à cependant un gros inconvénient : il ne permet pas à l’utilisateur d’uploader des images pour les insérer des ses articles.

Heureusement, la solution à ce problème est relativement simple.

Un petit tour dans votre fichier functions.php (vous pouvez l’éditer directement via wordpress, cliquez sur Apparence, puis Editeur, enfin choisissez le fichier functions.php dans la colonne de droite) et vous insérez ces quelques lignes à la fin du fichier.
<?php
//permettre aux contributeurs d'ajouter des images
if ( current_user_can('contributor') && !current_user_can('upload_files') ) {
add_action('admin_init', 'allow_contributor_uploads');
function allow_contributor_uploads() {
$contributor = get_role('contributor');
$contributor->add_cap('upload_files');
}
}
?>

Merci à SoulSizzle pour cette solution.

Catégorie: Création de sites web, Spécial débutants

Flux RSS | Trackback
Pas de commentaire »

Page suivante »

Catégories

Articles récents

Nuage de tags

Recherche

Comparatif Hébergements

Meilleur Hebergeur par categorie

Meta

Facebook