Skip to content

Instantly share code, notes, and snippets.

@HendrikPetertje
Created November 28, 2013 14:37
Show Gist options
  • Save HendrikPetertje/7692875 to your computer and use it in GitHub Desktop.
Save HendrikPetertje/7692875 to your computer and use it in GitHub Desktop.
Alles over de design basis van Concrete 5. Bouw gemakkelijk je html ontwerpen om naar thema's voor content management system concrete5

#Concrete 5 gidsje ##Intro Je begint met het maken van een aantal vasste elementen:

Een perfecte mappen structuur

  • Themanaam
    • default.php
    • description.txt
    • thumbnail.png
    • assets
      • images
        • voorbeeld-foto.jpg
      • movies
      • etc
      • stylesheets
        • style.css
      • javascripts
        • script.js

####Een description.txt met de volgende tekst:

Navigators Leeuwarden Templates
this is the template to apply on mainpages within www.nsleeuwarden.nl
you are not allowed to use any of the theme data for your own commercial or noncomercial purposes.
Used fields in this template:
-global:
header
nav
sidebar
-normal:
main

De eerste regel is de titel van je template de regels eronder leggen uit wat het is, door wie het gemaakt is en belangrijk ook wat voor velden je aanroept in je project. Zo kun je later bij doorontwikkelen meteen zien wat voor veldnamen je ook al weer gebruikte.

####Een voorbeeld foto (voor de installer in het dashboard) De foto met logo van bijvoorbeeld het template logo of je eigen bedrijfslogo moet een grootte hebben van 120 x 90 px en moet thumbnail.png heten.

###Een Default.php de default.php is de paginatemplate die wordt gebruikt als er geen verdere opties worden opgegeven. is je homepagina anders dan de rest van de site? dan maak je nog een extra bestand aan waarin je je homepagina bouwt. Bij voorbaat heet die dan home.php.


##Syntax ###De pagina starten

In plaats van <title></title> schrijf je een zin waarin je de header gaat aanroepen voor ingelogde gebruikers en automatisch pagina titels geeft aan al je pagina's. bij voorkeur zet je de header meteen na het openen van de <head> tag. Zo wordt alles wat daar onder staat automatisch toegevoegd aan je cache (zodat de site sneller laad)

<?php Loader::element('header_required'); ?>

##Afbeeldingen, javascript, filmpjes, muziek, css, etc. koppelen

Elke keer als je een afbeelding koppelt in je php bestand (die je netjes in een /assets/images) map hebt gestopt kun je makkelijk de prefix `http://www.voorbeeld.nl/themes/je-thema-map aanroepen door onderstaande zin toe te voegen:

<?=$this->getThemePath()?>

Een voorbeeldje met bijvoorbeeld je css bestand (die zou je overigens kunnen koppelen in concrete5 voor caching maar ik vind dat lame).

<link href="<?=$this->getThemePath()?>/assets/stylesheets/default.css" rel="stylesheet" type="text/css" />

<img src="<?=$this->getThemePath()?>/assets/images/header.png" width="960" height="100" alt="AMONFOG dezign life and more" />

Vergeet nooit een extra /-teken tussen het php-scriptje en je afbeelding of element te plakken.

##Local fields local fields zijn velden die op elke in de site opnieuw gevuld moeten worden. in local fields zet je de inhoud van een pagina. Als je de code hieronder ergens in je project plakt (en dan de naamtag VOORBEELDNAAM vervangt met iets logischers) gaat je site daar automatisch een veld maken waar gebruikers blokken in kunnen slepen, maken en bewerken.

<?php $a = new Area('VOORBEELDNAAM'); $a->display($c); ?>

Best pracitce is om het hoofdveld Main content te noemen. themabouwers van het concreteproject gebruiken deze naam ook.

##Global fields Globale velden zijn plekken waar gebruikers blokken kunnen toevoegen. zodra ze op pagina 1 een blok toevoegen zal dat worden gewijzigd op alle pagina's waar die blocknaam ook wordt gebruikt. Hieronder de syntax (ook hier geld even de naam VOORBEELDNAAM aanpassen naar je eigen wensen in normale letters).

<?php $a = new GlobalArea('Small contact'); $a->display(); ?>

Vergeet niet de eerste letter van je naam een hoofletter te geven. Eindgebruikers zien dit namelijk. De meeste ontwikkelaars gebruiken in ieder geval de volgende global velden:

  • Header of Head
  • Nav
  • Footer
  • Footer-nav

Titel van je huidige pagina opvragen

Soms kan het handig zijn aan de gebruiker te laten zien op welke pgina hij of zij zit. Dit doen we vaak met de volgende notatie

<?php echo $c->getCollectionName() ?>

Je zou bijvoorbeeld de pagina titel kunnen geven in<h1> tags:

<h1><?php echo $c->getCollectionName() ?></h1>

##Pagina afsluiten Natuurlijk wil je de pagina afsluiten. maar met al die gekke tags en php stukjes weet de pagina niet waar hij ophoudt supervervelend natuurlijk... daarom plakken we net voor de </body> tag de volgende regel code:

<?php  require(DIR_FILES_ELEMENTS_CORE . '/footer_required.php'); ?>

Hier eindigd de pagina en worden javascripts uitgevoerd die aan de onderkant van de pagina horen. (als je de pagina op internet bezoekt wordt hier bijvoorbeeld ook de google analytics code neergezet als je die in je dashboard hebt toegevoegd)


#Best practices navigatie navigatie is vaak lastig. zeker als je moet werken op een cms (content management system). Want hoe pakt je cms dit aan? wat komt daar bij kijken en wat voor stijlen wijst de cms toe als je je op een pagina bevind?

de standaard structuur van een door concrete5 aangemaakt nav ziet er als volgt uit:

<ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li class="nav-path-selected">item</li>
    <ul>
        <li class"nav-selected nav-path-selected">subitem</li>
    </ul>
</ul>

zorg er dus voor dat je altijd nav-selected een stijl geeft en eventueel het pad ook als je in een sub-menu zit. Verder gewoon lekker experimenteren met dit soort dingen

#Best practices caching caching zorgt er over het algemeen voor dat je site wat sneller wordt, doordat ie alvast dingen gaat klaarzetten in code om snellere requests te doen. Mijn ervaringen met dediated hosting (hosting in een php-hostingpakket) zijn echter dat cache je site gigantisch traag maakt (tenzij je 5000 bezoekers tegelijk hebt). Je kunt je settings aanpassen in:

index.php/dashboard/system/optimization/cache/

#Fancy navigatie steeds je gebruikers laten zien dat ze gebruik maken van php-bestanden is natuurlijk gewoon walgelijk. Zeker als je na het lezen van mijn andere scriptjes hier bezig hoort te zijn met dingen als ruby en rails. Daarom gaan we de notatie index.php verstoppen en net doen alsof we echte dikke paden hebben naar alle sub-pagina's

Ga in je ftp programma naar je server en zorg ervoor dat je public_html, www_root of html_docs map de rechten 755 hebben (lezen schrijven en uitvoeren door admin en uitvoeren en lezen door iedereen.)

Open daarna je map en zoek naar het bestand .htacces zorg ervoor dat ook dit bestand de bestandsrechten 777 krijgen.

Ga vervolgens op je site naar:

index.php/dashboard/system/seo/urls/

en zet daar pretty urls aan als het goed is zou je nu je site en sub-painga's zonder .php moeten kunnen bezoeken. (dit is natuurlijk ook goed voor je Googlebaarheid.

#Google op de hoogte stellen en vaste jobs doen Je site heeft een aantal opties die er voor zorgen dat google er wat meer mee kan en de site lekker snel blijft. je kunt dit soort dingen na het uitvoeren van weiziginen doen via

/index.php/dashboard/system/optimization/jobs/

gewoon op de play-knopjes drukken.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment