WordPress Débutant à maîtriser, 1ère partie

Tout au long de cette série en six parties, du débutant au maître, nous utiliserons les fonctionnalités avancées de WordPress pour créer notre propre portfolio et blog, avec une page d'options, plusieurs styles et la prise en charge des nouvelles fonctionnalités de WordPress 2.7..

Dans la première journée, nous gérons les sections de préparation et d'administration en créant notre page Options.

Aussi disponible dans cette série:

WordPress: Débutant à maîtriser, 1ère partie
WordPress: Débutant à maîtriser, partie 2
WordPress: Débutant à maître, Partie 3
WordPress: Débutant à maître, Partie 4
WordPress: Débutant à maîtriser, Partie 5
WordPress: Débutant à maître, Partie 6

Vue d'ensemble

À la fin de cette série, nous aurons créé Innovation - un modèle WordPress de qualité supérieure, idéal pour présenter un portefeuille et héberger un blog; complète avec les fonctionnalités suivantes:

Page d'options permettant de gérer le caractère avancé du modèle, sans avoir à modifier manuellement les fichiers.
3 jeux de couleurs intégrés - avec une commutation facile entre eux.
Modèles de page d'accueil et de portfolio, avec pied de page et barre latérale prêts pour les widgets.
Compatibilité avec WordPress 2.5+.
Prise en charge des commentaires filés et paginés pour WordPress 2.7.
Un widget personnalisé pour afficher vos derniers messages, avec une image d'aperçu, sur votre page d'accueil.

Le thème viendra avec trois styles intégrés, DeepBlue, RedSpace et SoftLight, mais vous pourrez facilement ajouter vos propres combinaisons de couleurs:

Le plan pour chaque jour:

Page Options de préparation et d'administration.
Mise en page d'accueil. Création d'une boucle WordPress personnalisée. Utilisation des zones de widget. Bas de page.
Boucle des articles de blog. Barre latérale. Un seul blog.
Page de portefeuille. Séparation des pages simples en fonction de la catégorie. Portefeuille unique.
Mise en page des commentaires. Les archives. Chercher.
Lifting - le jeu de couleurs alternatif 'RedSpace'. Création d'un widget personnalisé.

De quelle expérience ai-je besoin??
Expérience avec xHTML et CSS est un must (car je ne vais pas passer en revue une grande partie de ce code en détail).
Il serait également très utile d’avoir quelques notions de base sur PHP (telles que l’utilisation de variables, de tableaux, d’énoncés conditionnels et de boucles 'foreach' et 'while'. Découvrez l'excellente série de screencast "Diving into PHP" de Jeffrey.

Avoir une certaine connaissance de WordPress (même juste connaître le tableau de bord!) Améliorerait définitivement votre expérience.. Découvrez la série de screencast "WordPress for Designers" de Drew.

Aller à une section

Commencer
- Préparation des fichiers
- Catégories et pages
- Faire de WordPress un CMS
Page Options
- Catégories déroulantes
- Pages déroulantes
- Stylesheet déroulant
- Le tableau d'options
- Options Back-end
Récupérer les options
Résumé

Commencer

Aujourd'hui, nous allons gérer le code principal de base sur lequel le reste du thème s'appuiera. Vous aurez d’abord besoin d’une nouvelle installation de WordPress, de préférence la dernière version (2.7 au moment de la rédaction); Cependant, le modèle fonctionnera avec toutes les versions supérieures à 2.5. À l'intérieur de / wp-content / themes / dossier, créez de nouveaux dossiers et fichiers avec la structure suivante:

/innovation/
- /modes/
  - /bleu profond/
  - deepblue.css
- functions.php
- index.php
- page.php
- page-home.php
- page-portfolio.php
- style.css
- var.php

functions.php contiendra du code pour notre page d'options et des widgets entre autres.
index.php est utilisé pour afficher les derniers messages.
page.php sera le modèle utilisé pour la plupart des pages simples.
page-home.php sera notre modèle de page d'accueil.
page-portfolio.php sera notre page de portefeuille.
var.php sera utilisé pour récupérer nos options de la base de données.
style.css contiendra la plupart de notre style.
/styles/deepblue.css contiendra le style de notre premier jeu de couleurs.

Ce ne sont pas tous les fichiers dont nous aurons besoin. Nous allons créer les autres au fur et à mesure afin que vous puissiez comprendre à quoi chacun est destiné.

Préparation des fichiers

Les deux page- les fichiers sont des modèles de page personnalisés, afin que nous puissions disposer le contenu différemment sur les pages auxquelles ces modèles sont affectés. Pour que WordPress les reconnaisse, à l'intérieur page-home.php entrez les informations suivantes:

De même, à l'intérieur page-portfolio.php entrer:

Le nom du modèle est le nom utilisé par WordPress lors de la sélection d'un modèle de page.. get_header (); est une fonction WordPress pour charger le header.php fichier (que nous créerons plus tard).

Et ajoutez ce qui suit à page.php. Nous n'avons pas besoin de donner à ce fichier un nom de modèle, car c'est le modèle par défaut.

Nous devons également attribuer des détails tels que le nom, la description et l'auteur à notre thème. Ceci est fait dans un bloc de commentaires en haut de style.css:

 / * Nom du thème: Innovation URI du thème: http://www.danharper.me/innovation Description: Un thème de portefeuille et de blog élaboré par Dan Harper dans le cadre d’une série de tutoriels pour NETTUTS.com Version: 1.0 Auteur: Dan Harper Auteur URI: http://www.danharper.me * /

Catégories et pages

Pour gagner du temps, nous allons créer les catégories et les pages pertinentes dont nous aurons besoin maintenant. Activez le thème dans votre tableau de bord WordPress (il utilisera le nom que nous avons défini précédemment dans le CSS) - ne vous inquiétez pas du fait qu'il soit vide, nous y reviendrons plus tard..

Maintenant, créez trois nouveaux Des pages. L'un nommé "Home" et l'autre "Portfolio". Sélectionnez le modèle de page pour chacun d'eux en tant que "Page d'accueil" et "Portefeuille" respectivement. Nommez la dernière page 'Blog' et utilisez le modèle de page par défaut.

Créez également une nouvelle catégorie nommée 'Portfolio'. C’est ce que nous utiliserons pour publier des éléments de portefeuille dans.

Faire de WordPress un CMS

Depuis votre tableau de bord, accédez à Paramètres -> Lecture. Pour "Affichage de la page avant", définissez Page avant sur la page "Accueil" que vous avez créée et la page Messages sur "Blog":

Page Options

Cela va probablement sembler un peu en arrière, mais nous allons créer une page d’options pour notre thème avant de commencer tout travail sur le front-end. En effet, le thème entier dépend des options de la page et il serait insensé de commencer par les autres parties..

Pour ceux qui ne le savent pas, la page des options est une page supplémentaire dans le tableau de bord WordPress que nous ajoutons et qui contient un certain nombre d’options pour notre thème. Ceux-ci sont:

Schéma de couleur
Catégorie de portefeuille
Page de blog
Code Google Analytics

À l'intérieur functions.php Commencez par ce qui suit. le $ nomme variable définit le nom du thème qui sera utilisé pour le titre de la page dans le tableau de bord (Innovation). Et $ shortname est utilisé pour rendre nos options uniques - si vous changez cela, vous devrez changer plusieurs instances dans le code (donc ne le changez pas;)).

  Catégories déroulantes
 Ensuite, nous allons créer le code qui récupère toutes les catégories à utiliser dans l'option déroulante "Portfolio":
  / * Obtenir les catégories dans une liste déroulante * / $ categories_list = get_categories ('hide_empty = 0 & orderby = name'); $ getcat = array (); foreach ($ categories_list en tant que $ acategory) $ getcat [$ acategory-> cat_ID] = $ acategory-> cat_name;  $ category_dropdown = array_unshift ($ getcat, "Choisissez une catégorie:");
 Ce code utilise WordPress ' get_categories (); pour récupérer une liste de tous les noms de catégories et utiliser un pour chaque(); boucle pour ajouter chaque nom et ID dans un tableau nommé $ getcat pour une utilisation ultérieure dans le code. Enfin, nous utilisons array_unshift insérer "Choisissez une catégorie:" en haut du tableau.
 Pages déroulantes
 Suivant est une autre option déroulante similaire qui sélectionne un nom de page. Le code utilisé est très similaire au précédent:
  / * Obtenir les pages dans une liste déroulante * / $ pages_list = get_pages (); $ getpag = array (); foreach ($ pages_list as $ apage) $ getpag [$ apage-> ID] = $ apage-> post_title;  $ page_dropdown = array_unshift ($ getpag, "Sélectionnez une page:");
 Comme pour les catégories, nous utilisons WordPress ' get_pages (); fonction pour obtenir une liste de tous les noms de page, et le résultat est placé dans le $ getpag tableau pour une utilisation ultérieure.
 Stylesheet déroulant
 Il existe également une option de liste déroulante permettant de sélectionner une feuille de style. Ce code est un peu plus compliqué:
  / * Récupère les feuilles de style dans une liste déroulante * / $ styles = array (); if (is_dir (TEMPLATEPATH. "/ styles /")) if ($ open_dirs = opendir (TEMPLATEPATH. "/ styles /")) while (($ style = readdir ($ open_dirs))!! == false) if (stristr ($ style, ".css")! == false) $ styles [] = $ style;  $ style_dropdown = array_unshift ($ styles, "Choisissez un jeu de couleurs:");
 Le code ci-dessus utilise le PHP opendir (); fonction, suivie de readdir (); pour ouvrir notre /modes/ dossier et obtenir une liste de tous les fichiers là-bas.
 Nous utilisons ensuite stristr (); limiter la liste à la seule .css fichiers (pour empêcher la sortie des dossiers également), et les résultats sont transmis au $ styles tableau.
 Le tableau d'options
 Toutes nos options seront stockées dans leurs propres tableaux afin que nous puissions les traiter en masse plus tard dans le code:
  / * Les options * / $ options = array (array ("name" => "Général", "type" => "title"), array ("type" => "open"), array ("name" = > "Color Scheme", "desc" => "Quel jeu de couleurs souhaitez-vous?", "Id" => $ shortname. "_ Colourscheme", "type" => "select", "std" => "Choisissez une color scheme: "," options "=> $ styles), array (" name "=>" Catégorie de portefeuille "," desc "=>" Sélectionnez la catégorie dans laquelle les éléments du portefeuille sont publiés. "," id "=> $ shortname. "_ portfolio_cat", "type" => "select", "std" => "Choisissez une catégorie:", "options" => $ getcat), array ("name" => "Page de blog", "desc "=>" Sélectionnez la page utilisée comme page de blog. "," Id "=> $ shortname." _ Blogpage "," type "=>" select "," std "=>" Sélectionnez une page: " , "options" => $ getpag), array ("name" => "Google Analytics", "desc" => "Insérez votre code Google Analytics (ou autre) ici.", "id" => $ shortname. " _analytics_code "," type "=>" textarea "), array (" type "=>" close "));
 Chaque tableau est une option et contient prénom, desc, identifiant et type paramètres. L'ID est très important, et c'est ce que nous utiliserons pour référencer l'option plus tard dans le code. Par exemple, pour obtenir la catégorie de portefeuille, nous vérifions la $ ts_portfolio_cat (ts est le nom abrégé que nous avons référencé en haut du document.)
 Options Back-end
 Le code suivant fait apparaître notre page d’options dans le tableau de bord (sous "Design" dans WordPress 2.6 ou inférieur) et enregistre les options dans la base de données..
  
  fonction mytheme_add_admin () global $ nomme, $ nom abrégé, $ options; if ($ _GET ['page'] == nom de base (__ FILE__)) if ('save' == $ _REQUEST ['action']) foreach ($ options comme $ valeur) update_option ($ valeur ['id' ], $ _REQUEST [$ value ['id']]);  foreach ($ options as $ value) if (isset ($ _REQUEST [$ value ['id']])) update_option ($ value ['id']], $ _REQUEST [$ value ['id']]) ;  else delete_option ($ value ['id']);  header ("Emplacement: themes.php? page = functions.php & saved = true"); mourir;  else if ('reset' == $ _REQUEST ['action']) foreach ($ options comme $ valeur) delete_option ($ value ['id']);  header ("Emplacement: themes.php? page = functions.php & reset = true"); mourir;  if (! function_exists ('wp_list_comments')) add_theme_page ($ themename. "Options", $ themename, "edit_themes", nom de base (__ FILE__), "mytheme_admin");  else add_menu_page ($ nom_thème. "Options", $ nom_thème, "edit_themes", nom de base (__ FILE__), "mytheme_admin");  function mytheme_admin () global $ nomme, $ nom abrégé, $ options; if ($ _REQUEST ['saved']) echo ''. $ nomme' paramètres sauvegardés.
'; if ($ _REQUEST ['reset']) echo ''. $ nomme' paramètres réinitialisés.
'; ?>  
  réglages
 
 Nous n'allons pas passer par le code, car cela priverait trop ce didacticiel. Copiez-le et copiez-le et considérez-le comme un code magique de WordPress Gods qui permet à votre thème de fonctionner..
 Ce code suivant vérifie chacune de nos options pour leur type attribut, et les styles dans une table. Donc options avec "type" => "select" afficherait une liste déroulante, ou "type" => "textarea" serait sortie en tant que textarea.
    

    
  
 
   "/>          <?php if ( get_settings( $value['id'] ) != "")  echo stripslashes(get_settings( $value['id'] ));  else  echo $value['std'];  ?>                      />            
      
 
  Enfin, à la fin du fichier, insérez:
  require (TEMPLATEPATH. "/var.php");
 nous exiger() notre var.php fichier qui contiendra le code pour récupérer nos options.
Notez que nous devons utiliser TEMPLATEPATH dans exiger() ou comprendre() balises afin qu'il navigue dans notre répertoire de thème, et non dans le répertoire racine WordPress.
 Récupérer ces options
 Maintenant que ces options sont dans le tableau de bord, nous devons pouvoir les utiliser dans notre thème. Insérer le code suivant dans var.php:
  get_var ("SELECT term_id FROM $ wpdb-> terms". "WHERE name =" $ ts_portfolio_cat ""); / * Récupère l'identifiant de la page de blog du nom * / $ ts_blogpage = $ wpdb-> get_var ("SELECT 'ID' FROM $ wpdb-> posts". "WHERE post_title =" $ ts_blogpage "AND post_type =" page "LIMIT 1" ) ?>
 La première section du code récupère toutes nos options de la base de données. Cependant, nous avons un problème: nos options Catégorie et page renvoient le nom de la catégorie ou de la page - mais nous préférerions l'identifiant, car il est plus facile à utiliser dans les fonctions WordPress..
 C'est exactement ce que font les deux parties suivantes du code. Nous exécutons une requête SQL pour obtenir l'ID approprié. Ces options sont maintenant stockées dans le $ ts_portfolio_cat et $ ts_blogpage les variables.
 Nous avons maintenant terminé le côté administrateur, connectez-vous à votre tableau de bord et définissez les paramètres appropriés pour chacune des options. Choisir deepblue.css pour le jeu de couleurs pour l'instant.
  
 Résumé
 Cela termine le premier jour de la semaine WordPress. Demain, nous allons créer notre page d'accueil, créer une 'boucle WordPress' personnalisée et gérer des zones de widgets..
 Partie 2 - Boucles et widgets.



		
			
	   
	




Code