jeudi 8 novembre 2012

Comment développer un thème WordPress efficacement?


Donc, vous voulez créer votre propre thème WordPress parce que vous êtes malade de l'utilisation de thèmes développés par d'autres?Eh bien, c'est une bonne décision et je l'apprécie. Dans ce tutoriel, je vais vous enseigner une méthode simple et facile à développer un thème WordPress. Gardez à l'esprit que ce ne sera pas un thème très haut de gamme parce que d'abord, c'est une bonne idée de commencer avec une simple étape.

Vous devez décider comment le thème ressemble. Dans ce tutoriel, nous allons développer un thème qui va contenir un en-tête, une zone de contenu, une barre latérale et le pied.



Nous serons tenus de créer les fichiers suivants dans le répertoire du thème où tous les fichiers liés au thème seront sauvés.
header.php - Contient le code de la section d'en-tête.
index.php - Ce fichier sera pour la zone principale / le contenu du thème et sera également relier d'autres fichiers les uns avec les autres.
sidebar.php - Il contiendra des informations sur le codage et la barre latérale.
footer.php - Tous les codage de bas de page seront enregistrées dans ce fichier.
style.css - Ce fichier sera chargé de traiter le style de votre thème.

Vous pouvez utiliser le Bloc-notes ou tout autre éditeur HTML pour rendre ces fichiers. Si vous avez acheté un compte d'hébergement, vous trouverez la possibilité de créer des fichiers PHP dans votre cPanel ainsi.



Maintenant, nous allons commencer à créer chaque fichier et de le remplir avec de codage.

Le fichier header.php

Code suivant doit être ajouté dans ce fichier.


thème Tutorial </ title> <link rel = "stylesheet" href = "<php ​​bloginfo ('stylesheet_url');?>"> </ head> <body> <div id = "wrapper"> <div id="header"> HEADER <h1> </ h1> </ div><br><br>C'est l'un des plus simples codes HTML que vous trouverez dans les thèmes WordPress. Ceci définit essentiellement la fonctionnalité d'un thème WordPress. Vous pouvez spécifier le titre de votre site dans ce dossier et également ajouter une description mot-clé pour le site Web que vous créez.<br><br>Juste après la ligne de titre, il est <link rel = "stylesheet" href = "<php ​​bloginfo ('stylesheet_url');?>">, Qui raconte l'WordPress pour charger le fichier style.css ..L'<bloginfo php ('stylesheet_url');?> Est une fonction de WordPress qui va effectivement charger le fichier feuille de style.<br><br>Après cela, un "div" a été ajouté avec wrapper de classe qui agit en tant que conteneur principal du site. En ajoutant la classe pour elle, on peut la modifier en utilisant le fichier style.css plus tard.<br><br>Ensuite, vous pouvez voir une tête d'étiquette enveloppé dans un simple "div" avec l'aide d'une classe "header". Nous en parlerons plus tard dans la feuille de style.<br><br>Le fichier index.php<br><br><br><br><? Php get_header ();>? <div Id="main"> <div id="contenu"> <h1> principales Secteur </ h1> <php if (have_posts ()): while (()) have_posts :????? the_post ();> <h1> <php the_title ();> </ h1> <h4> Posté le <php the_time ('F jS, Y')> </ h4> <p < ? the_content php (__ ('(more ...)'));> </ p> <hr> <php endwhile; d'autre:??> <p <php _e ('Désolé, aucun article ne correspond à vos critères?. ');?> </ p> <php endif;?> </ div> <php get_sidebar ();?> </ div> id="delimiter"> </ div> <php get_footer ( );?><br><br>Vous pouvez voir le code commence par <get_header php ();?> Qui inclut le fichier header.php et le code inséré dans la page principale. Une des fonctions internes WP est utilisé pour ce faire. Ceci sera expliqué en détail plus loin. Vous pouvez également trouver le texte principal domaine dans ce fichier pour spécifier quelle zone de l'écran affiche la page principale.<br><br>Suivant quelques lignes sont pures codes et fonctions PHP WordPress pour vérifier si des messages ont été ajoutés en utilisant le compte administratif afin qu'ils puissent être affichés sur le blog.<br><br>Dans la prochaine étape, nous allons ajouter un nouveau fichier qui sera sidebar.php.Ce fichier permet d'afficher différentes choses comme les messages récents, les archives, les catégories, des pages, etc<br><br>Une division vide est ajoutée après la barre latérale séparée et principale zone de pied de page.<br><br>Les ADDES dernière ligne est - <php get_footer ();?>. Il inclut le fichier footer.php.<br><br>Le fichier sidebar.php<br><br>Code suivant est ajouté dans le fichier sidebar.php;<br><br><br><div id="sidebar"> <h2> <php _e («Catégories»);?> </ h2> <ul> <php wp_list_cats ('sort_column name = & optioncount = 1 & hiérarchique = 0');?> </ ul> <php _e <h2> ("Archives");???> </ h2> <<ul> wp_get_archives php ('type = mois');?> </ ul> </ div><br><br>Interne WordPress fonction est utilisée pour afficher les catégories et les archives dans ce fichier. Ceux-ci sont retournés comme éléments de la liste par fonction WordPress afin fonctions réelles sont enveloppés dans les listes non triées (les balises <ul>).<br><br>Le fichier footer.php<br><br>Ajouter ces lignes dans le fichier footer.php:<br><br><br><div id="footer"> <h1> FOOTER </ h1> </ div> </ div> </ body> </ html><br><br>Avec l'aide de ce code, nous ne faisons qu'ajouter une étiquette pied de page. Vous pouvez également utiliser des liens ou du texte à afficher dans la zone de pied de page.<br><br>Le fichier style.css<br><br>Ajoutez les lignes suivantes dans le fichier style.css:<br><br><br>body {text-align: center;} # wrapper {display: block; border: 1px # A2A2A2 solide; largeur: 90%; margin: 0px auto;} {border: 2px # A2A2A2 solide;} # header # content {width: 75%; border: 2px # A2A2A2 solide; float: left;} # sidebar {width: 23%; border: 2px # A2A2A2 solide; float: right;} # délimiteur {clear: both;} # footer {border: 2px # A2A2A2 solide;} titre {font-size:. 11pt; font-family: verdana; font-weight: bold;}<br><br>Le look de base pour votre thème est spécifié par fichier simple.css. Les lignes ci-dessus font l'arrière-plan de votre page ainsi que les parties principales de votre thème. Selon les codes ci-dessus et des fichiers, votre site doit ressembler à ceci:<br><br><img src="http://www.internet-khazana.com/blog/wp-content/uploads/2012/11/theme-header-footer.jpg"><br><br>Alors, ce fut un tutoriel simple pour vous d'apprendre comment développer un thème WordPress. Je sais que ce n'était pas un thème de conception vraiment impressionnant, mais la raison pour créer ce tutoriel est juste pour vous donner une idée sur la façon de concevoir un thème simple WordPress.</div>

1 commentaire:

Nous vous invitons ici à donner votre point de vue, vos informations, vos arguments. Nous refusons les messages haineux, diffamatoires, racistes ou xénophobes, les menaces, incitations à la violence ou autres injures. Merci de garder un ton respectueux et de penser que de nombreuses personnes vous lisent.
La rédaction

Messages les plus consultés