Développer un thème WordPress pour un site Web immobilier peut être un long processus. Dans cet article, je vais expliquer le processus de création d'un site Web pour une agence immobilière, ainsi que des méthodes et des meilleures pratiques non seulement standard pour WordPress, mais également pour faciliter le développement d'un tel site..

De quoi parle cet article

Cet article présente une disposition HTML 5 simple avec du CSS 3. Il inclut également la structure créée par WordPress avec une combinaison de fonctions WordPress et de code PHP supplémentaire. Nous allons également inclure un menu de navigation en haut de WordPress.

Planification des besoins du site immobilier

Nous devons d’abord planifier les fonctionnalités exactes de WordPress que nous utiliserons en plus de la structure HTML 5 et CSS que nous allons créer..

Planification des pages Web et du code WordPress que nous allons créer

Notre thème étant centré sur une agence immobilière, nous allons réaliser les actions suivantes:

1. Créer une page d'accueil répertoriant les nouvelles de l'agence
2. Une barre latérale pour les annonces ainsi que le vendeur vedette du mois
3. Un menu de navigation supérieur pour afficher des liens vers d'autres pages.
4. Un pied de page qui affiche la date du jour et d'autres informations juridiques sur l'agence immobilière.
5. Une simple page Web pour afficher le contenu complet des annonces, des actualités et des vendeurs

Utiliser les fonctionnalités de WordPress pour créer nos différentes pages Web

La page d'accueil - Notre page d’accueil sera une simple page Web HTML 5 avec une colonne principale et une barre latérale. Notre colonne principale contiendra des informations sur l’agence, gérées par l’administrateur WordPress qui entre des publications avec une catégorie «actualités». La barre latérale comprendra les titres des 10 dernières annonces avec des liens vers la liste complète. De plus, nous allons inclure un vendeur du mois avec une biographie et une photo.

Pour que les annonces et le vendeur en vedette s'affichent, l'administrateur WordPress ajoute tous les articles de l'annonce à une catégorie appelée "annonces". Bien que tous les messages des vendeurs soient ajoutés à une catégorie appelée "vendeur", l'administrateur WordPress ajoutera une balise appelée "en vedette" au vendeur qui sera présenté..

Notre page d'annonces contiendra cinq des annonces les plus récentes avec un lien affiché comme titre..

Étape 1: Préparation de la structure du dossier WordPress

Ajouter un nouveau dossier à votre wp-content / themes. Appeler "immobilier” Créez cinq fichiers PHP vierges qui seront conformes à la norme WordPress pour tous les thèmes. Les fichiers contiendront ces titres:

• index.php - Puisque index.php est le fichier principal de tous les sites PHP. Ce fichier est le fichier toujours appelé lorsque quelqu'un visite votre site Web immobilier. Il appelle les autres fichiers à l'aide des fonctions de thème WordPress standard..
• style.css - Les thèmes WordPress utilisent le CSS normal pour formater votre mise en page HTML.
• header.php - Tous les thèmes WordPress ont des en-têtes et cela s'appelle exactement ça.
• sidebar.php - Puisque nous voulons avoir les listes et le vendeur du mois, nous avons besoin d'une barre latérale et ce fichier listera les informations ici.
• footer.php - Tous les thèmes WordPress standard ont un pied de page, donc tout votre code ira dans ce fichier.
• single.php - Pour afficher les posts complets de posts individuels pour les annonces, les actualités et les vendeurs.

Le code HTML sera décomposé en ces fichiers et je traiterai chacun d'eux avec les codes HTML 5 et PHP correspondants en procédant comme suit:

Étape 2: Créer notre en-tête avec header.php

        
  
  
 Bienvenue chez ABC Real Estate 
 
 

Explication de header.php

Ici, je crée simplement le code HTML d'ouverture et j'utilise les attributs CSS standard dans mon code HTML, y compris le wrapper et l'en-tête..

Quelques notes sur header.php:

1. Je commence l'en-tête avec qui indique au navigateur Web que je veux qu'il affiche la page Web avec HTML 5.
2. J'enveloppe toute ma tête dans la balise qui est nouvelle en HTML 5.
3. J'ai ajouté le standard tag pour appeler mon style.css, mais j'ai précisé bloginfo ('stylesheet_url') au lieu de dire style.css. WordPress sait comment utiliser ce code pour charger style.css automatiquement.
4. J'ai commencé un
   pour l'emballage, mais je ne le ferme pas. Je vais le fermer plus tard dans mon footer.php fichier.

5. J'utilise le code suivant:

    if (function_exists ('register_nav_menu')) register_nav_menu ('menu principal', 'Menu principal');  wp_nav_menu (); 

   Pour créer et afficher le menu de navigation et dans l'écran d'administration de WordPress, tous mes liens seront dans le lien du menu principal. Depuis que j’utilise le menu principal comme second paramètre de mon register_nav_menu () fonction, il apparaîtra dans l'écran d'administration WordPress pour que l'administrateur puisse entrer des liens.

6. J'utilise aussi le

Étape 3: Créez le fichier index.php, le fichier appelé lors du chargement du thème.

  
 
 
 Nouvelles de l'agence ABC 
   
 
Posté sur 
 
 
  
  
  
 
 

Explication de mon code index.php

Ceci est l'intégralité du HTML 5 que j'utilise dans mon thème. Puisque je veux que les nouvelles paraissent, nous devons prendre en compte que les nouvelles peuvent ne pas être disponibles. Sinon, nous pouvons induire les gens en erreur en leur demandant de voir un site Web inachevé et ce n'est pas professionnel..

Ma première ligne:

Ceci exécute mon code de header.php.

Les trois lignes suivantes sont du HTML 5 standard et sont simplement