Share
Wanneer de meeste mensen aan WordPress denken, denken ze aan blogs. Als je naar de voorpagina van WordPress.org kijkt, praten ze ook veel over bloggen. Wat zij u niet vertellen is dat WordPress ook fungeert als een zeer krachtig CMS; je moet het gewoon goed instellen. Het kan ook een beetje lastig zijn om de installatie te krijgen en te werken zoals jij dat wilt. Dat is waar ik binnenkom. In deze 3-delige tutorialserie ga ik je door de drie stappen van het gebruik van WordPress als een CMS.
Deze tutorial bevat een screencast die beschikbaar is voor leden van Tuts + Premium.
Het eerste deel gaat een eenvoudige lay-out ontwerpen in Photoshop. Deel twee zal het coderen van de website als een statische HTML-sjabloon bevatten, en het laatste deel zal u helpen met het instellen van WordPress en het toepassen van ons nieuwe thema op zijn sjabloonsysteem..
Als je een ervaren webontwikkelaar bent, kunnen deze eerste twee delen pinda's voor je zijn, maar doe jezelf een plezier en snuif gewoon de inhoud weg. Je weet maar nooit, je mag iets nieuws oppikken, of een andere manier om dingen te doen.
Je bent waarschijnlijk het lezen beu, dus laten we onze handen vies maken!
Open Photoshop en maak een nieuw leeg canvas. Ik kies meestal gewoon 1024 x 768 uit de vervolgkeuzelijst Web.
Ik ben doorgegaan en heb een snel kleurenpalet gemaakt en het als een bovenste laag vergrendeld. Op deze manier kan ik ernaar verwijzen zonder me zorgen te maken dat ik het verlies in de strijd.
Vul je achtergrond in met de lichtste kleur en maak je klaar om een aantal handleidingen te maken.
We gaan gidsen maken, zodat we het uiterlijk van onze site vooraf kunnen inrichten voordat we beginnen met het vastleggen van grafische elementen. Als je geen linialen hebt, ga je gang en druk je op ⌘-R om ze in te schakelen.
Als u met de muis over de liniaal beweegt, klikt en verplaatst, verandert uw cursor en verschijnt er een horizontale of verticale lijn achter de muis. Dit is een gids. Laat los om aan te maken.
We gaan de zijbalk, de header en het hoofdgedeelte van de content in een lay-out plaatsen. Laat je gidsen eruit zien als die van mij, of een beetje zoals de mijne. We hebben de zijbalkranden en de opvulling die we willen bevatten aangelegd.
Elke site heeft een logo nodig. Het logo gaat recht boven de zijbalk zitten. Als u een logo heeft, plaatst u het daar nu, anders gaan we een logo met een spraakballon maken. Waarom? Ik hou van spraakbellen.
Ik heb er een beetje stevige slagschaduw direct onder toegevoegd voor wat styling. Laten we onze website een naam geven. Ik noem het Geared en gebruik een klein tandwielpictogram.
Onze gebruikers hebben een manier nodig om op onze site te navigeren. We gaan onze navigatie boven onze belangrijkste inhoud plaatsen en naar rechts uitlijnen. Haal onze teksttool tevoorschijn en schrijf wat navigatie-items uit.
We gaan doen alsof we een dienst verkopen. Laten we zeggen dat gear'd een webapp is en dat gebruikers zich kunnen aanmelden om verschillende niveaus van lidmaatschap te kopen.
Onze navigatie gaat onder meer over, plannen en prijzen, veelgestelde vragen en contact opnemen. We willen dat de gebruiker weet op welke pagina ze zich momenteel bevinden, dus laten we een actieve en een zweefstatus maken voor onze navigatieknoppen.
Hiervoor heb ik zojuist een afgerond vierkant gemaakt met een lichtere tekstoptie. De hover-status heeft een lichte kleur, net iets groter dan de achtergrondkleur.

Onze web-app biedt een paar niveaus van lidmaatschap waarvan de gebruiker moet kunnen navigeren. We willen niet echt 100 verschillende hoofdnavigatie-items hebben omdat het lelijk is. Dit is waar de zijbalk binnenkomt.
Laten we dezelfde styling gebruiken die we gebruikten in de hoofd-, zweef- en actieve status van de navigatie en deze toepassen op een navigatie in de zijbalk. De zijbalk navigatie houdt onze secundaire navigatie vast voor de hoofdpagina waar we op staan. Dit omvat prijsinformatie en aanmeldingsinformatie, of verschillende gebieden van over of contact.
De pagina ziet er een beetje leeg uit, laat wat inhoud toe.
We hebben wat koptekst en tekst in de koptekst eronder toegevoegd. Gewoon weer een visuele indicatie van waar de gebruiker zich momenteel bevindt.
Vervolgens hebben we een afgeronde doos toegevoegd over de volledige breedte van ons inhoudsgebied en een afbeelding erin geplaatst.
Ten slotte hebben we onze hoofdtekst toegevoegd.
Onze site begint aardig bij elkaar te komen. We hebben al onze elementen toegevoegd, maar één, onze voettekst.
Onze voettekst zal ons auteursrecht behouden evenals enkele meer pagina's die niet echt enige hoofdnavigatie-ruimte vereisen.
Voeg een regeleinde toe om de pagina een klein beetje op te splitsen en laat dan een aantal auteursrechtteksten erin komen en lijn deze helemaal uit naar de linkergids.
Algemene voorwaarden en privacybeleid zijn enkele pagina's waarvan u wilt dat de gebruiker toegang heeft, maar die niet per se in hun gezicht hoeven te worden gegooid. Het mooie van een voettekst is dat we de gebruiker deze informatie nog steeds kunnen geven, maar hem goed weg kunnen verbergen: P
We hebben zojuist een eenvoudige site gemaakt die we nu kunnen converteren naar een HTML- en CSS-sjabloon. Voel je vrij om de sjabloon op te fleuren, maar omwille van snelheid en gebruiksgemak gaan we verder van hier.
Accentsconagua