Création de sites web



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

Créer un thème WordPress intégralement N°1 : création de site.

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! Lire la suite

Créer un site WordPress : comment installer le logiciel et ce qu’il faut savoir.

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 à la création et à 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. Lire la suite

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

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. Lire la suite