Het ontwikkelen van een WordPress-thema voor een vastgoedwebsite kan een lang proces zijn. In dit artikel zal ik het proces van het maken van een website voor een makelaarskantoor uitleggen en methoden en best practices uitleggen die niet alleen standaard zijn voor WordPress, maar ook om het gemakkelijker te maken om een ​​dergelijke site te ontwikkelen.

Waar dit artikel over gaat

Dit artikel toont een eenvoudige HTML 5-lay-out met wat CSS 3. Het bevat ook de structuur zoals gemaakt door WordPress met een combinatie van WordPress-functies en extra PHP-code. We zullen ook een topnavigatiemenu van WordPress toevoegen.

Planning van de vereisten van de vastgoedsite

We moeten eerst de exacte WordPress-functionaliteit en -functies plannen die we gaan gebruiken naast de HTML 5- en CSS-structuur die we gaan maken.

Planning van de webpagina's en WordPress-code die we zullen maken

Aangezien ons thema zal draaien rond een makelaarskantoor, zullen we de volgende acties uitvoeren:

1. Maak een startpagina met nieuws van het bureau
2. Een zijbalk voor vermeldingen evenals de aanbevolen verkoper van de maand
3. Een topnavigatiemenu om enkele links naar andere pagina's weer te geven.
4. Een voettekst die de huidige datum en andere juridische informatie over het makelaarskantoor weergeeft.
5. Een eenvoudige webpagina om volledige inhoud weer te geven voor aanbiedingen, nieuws en verkopers

Gebruik van de WordPress-functies om onze verschillende webpagina's te maken

De startpagina - Onze startpagina is een eenvoudige HTML 5-webpagina met een hoofdkolom en een zijbalk. Onze hoofdkolom bevat nieuws over het bureau, onderhouden door de WordPress-beheerder die berichten invoert met een categorie "nieuws". De zijbalk bevat de titels van de 10 nieuwste aanbiedingen met links naar de volledige lijst. We zullen ook een verkoper van de maand opnemen met een bio en een foto.

Om vermeldingen en de afgebeelde verkoper te laten verschijnen, zal de WordPress-beheerder alle listingposten toevoegen aan een categorie met de naam "listings". Hoewel alle verkoopmedewerkers worden toegevoegd aan een categorie met de naam 'verkoper', voegt de WordPress-beheerder een tag met de naam 'featured' toe aan de verkoper die wordt weergegeven.

Onze listingpagina bevat vijf van de meest recente listings met een link weergegeven als de titel.

Stap 1: De WordPress-mapstructuur voorbereiden

Voeg een nieuwe map toe aan uw wp-content / themes. Noem het "onroerend goed”. Maak vijf lege PHP-bestanden die voldoen aan de WordPress-standaard voor alle thema's. De bestanden bevatten deze titels:

• index.php - Sinds index.php is het hoofdbestand voor alle PHP-sites, dit bestand wordt het bestand dat altijd wordt gebeld wanneer iemand je website bezoekt en het zal de andere bestanden bellen met behulp van standaard WordPress themafuncties.
• style.css - WordPress-thema's gebruiken normale CSS om uw HTML-indeling op te maken.
• header.php - Alle WordPress-thema's hebben kopteksten en dit wordt precies dat genoemd.
• sidebar.php - Omdat we lijsten en de verkoper van de maand willen hebben, hebben we een zijbalk nodig en dit bestand zal de informatie hier vermelden.
• footer.php - Alle standaard WordPress-thema's hebben een voettekst, dus al uw code zal in dit bestand worden opgenomen.
• single.php - Om volledige berichten van afzonderlijke berichten weer te geven voor lijsten, nieuws en verkopers.

De HTML zal worden opgesplitst in deze bestanden en ik zal elk HTML-bestand met de bijbehorende HTML 5 en PHP doorlopen door de volgende stappen:

Stap 2: Creëren van onze header met header.php

        
  
  
 Welkom bij ABC Real Estate 
 
 

Uitleg van header.php

Hier maak ik eenvoudig de openings-HTML en gebruik ik standaard CSS-attributen in mijn HTML, inclusief wrapper en header.

Sommige opmerkingen over header.php:

1. Ik start de header met die de webbrowser vertelt dat ik wil dat de webpagina wordt weergegeven met HTML 5.
2. Ik wikkel mijn hele header in de tag die nieuw is in HTML 5.
3. Ik heb de standaard toegevoegd tag om mijn te bellen style.css, maar ik heb gespecificeerd bloginfo ( 'stylesheet_url') inplaats van zeggen style.css. WordPress weet hoe deze code te gebruiken om te laden style.css automatisch.
4. Ik begon een
   voor wrapper, maar ik sluit het niet. Ik zal het later afsluiten in mijn footer.php het dossier.

5. Ik gebruik de volgende code:

    if (function_exists ('register_nav_menu')) register_nav_menu ('hoofdmenu', 'Hoofdmenu');  wp_nav_menu (); 

   Om het navigatiemenu te maken en weer te geven en in het WordPress beheerscherm, staan ​​al mijn links in de link van het hoofdmenu. Omdat ik "'Hoofdmenu" gebruik als de tweede parameter in mijn register_nav_menu () functie, wordt deze in het WordPress-beheerscherm weergegeven zodat de beheerder koppelingen kan invoeren.

6. Ik gebruik ook de

Stap 3: Maak de index.php, het bestand dat wordt genoemd wanneer het thema wordt geladen

  
 
 
 Nieuws van ABC Agency 
   
 
geplaatst op 
 
 
  
  
  
 
 

Uitleg van mijn index.php-code

Dit is de volledige HTML 5 die ik in mijn thema gebruik. Omdat ik wil dat er nieuws verschijnt, moeten we er rekening mee houden dat nieuws mogelijk niet beschikbaar is. Anders kunnen we mensen misleiden om een ​​onafgemaakte website te zien en dat is niet professioneel.

Mijn eerste regel:

Hiermee wordt mijn code uitgevoerd header.php.

De volgende drie regels zijn standaard HTML 5 en zijn eenvoudig