| CMP | Informatie |
|---|---|
| Onderwerp | WordPress 4.1 |
| Opleidingsonderdeel | Crossmedia Publishing |
| Academiejaar | 2014-2015 |
| Docent | Olivier Parent |
| Instelling | Arteveldehogeschool |
| Opleiding | Bachelor in de grafische en digitale media |
| Afstudeerrichting | Grafimediabeleid |
| Keuzeoptie | Crossmedia |
[TOC]
De term WordPress (WP) dekt verschillende ladingen:
- WordPress
De gratis OSS (Open Source Software). - WordPress.org
De officiële website van de OSS. - WordPress.com
Het commerciële hosting platform voor WP-sites van de firma Automattic.
WP is sinds de eerste release in 2003 geëvolueerd van bescheiden Blog Tool, over Publishing Platform tot een geavanceerd CMS (Content Management System) waarvan de functionaliteit uitbreidbaar is met behulp van duizenden plugins.
Bronnen
- 2000-2002
De Corsicaan Michel Valdrighi (@kalaphates) maakt met PHP en MySQL de opensource blogsoftware b2/CaféLog. - 2003 Twee bloggers/programmeurs, de Texaan Matt Mullenweg (@photomatt) en de Engelsman Mike Little (@mikelittlezed1), geven de eerste versie van hun blogsoftware vrij die gebaseerd is op b2/CaféLog.
- 2004 Versie 1.0
- 2005 Versie 2.0 en de lancering van WordPress.com
- 2010 Versie 3.0
- 2014 Versie 4.0
Semantic Versioning, één van de meer gangbare softwareversienummeringsystemen, gebruikt het formaat X.Y.Z:
X: nummer van de Hoofdversie (Major Version) voor grote wijzigingenY: nummer van de Onderversie (Minor Version) voor kleine wijzigingen zoals functionaliteit toevoegenZ: nummer van de Revisieversie (Patch Version) voor het herstellen van fouten in de software
WP heeft echter gekozen om na onderversie 9 naar een volgende hoofdversie te gaan, ongeacht de grootte van de wijzigingen. Daardoor zijn de wijzigingen tussen versie 2.9 en 3.0 of tussen 3.9 en 4.0 minder groot dan bijvoorbeeld tussen 2.6 en 2.7 of tussen 3.7 en 3.8.
Voorbeeldproject Het voorbeeldproject vind je op Bitbucket
We gebruiken Artevelde Laravel Homestead als ontwikkelomgeving. Volg alle stappen zoals beschreven!
OPGELET Zorg ervoor dat je een teksteditor geïnstalleerd hebt die YAML-bestanden kan openen, zoals bijvoorbeeld Brackets.
Open Homestead.yaml met onderstaande opdracht.
$ artestead edit
Verwijder het commentaar (#) in de regels onder Crossmedia Publishing (CMP):
# Crossmedia Publishing (CMP)
# ---------------------------
- map: www.cmp.arteveldehogeschool.local
to: /home/vagrant/Code/cmp.arteveldehogeschool.local/www/wordpress
sh: wordpressOPGELET
In YAML-bestanden heeft de insprong invloed op de betekenis. Verwijder geen spaties!
Start de Vagrant Box op. De eerste keer moet je dit met de optie --provision doen zodat de domeinnaam gekoppeld wordt aan de en de map gekoppeld worden
$ artestead up --provision
Meld je aan op de Virtual Machine.
$ artestead ssh
vagrant@homestead$ _
Na het aanmelden op de Vagrant Box gaan we eerst naar de map Code die in de thuismap (~) staat (als je al in deze map bent mag je ~/ weglaten) met de opdracht cd (Change Directory).
vagrant@homestead$ cd ~/Code/
Daarna maken we de map database aan met de opdracht mkdir (Make Directory) en de optie --parents (of korter -p), zodat ook de bovenliggende mappen (Parent Directories) www en cmp.arteveldehogeschool.be zo nodig aangemaakt worden:
vagrant@homestead$ mkdir --parents cmp.arteveldehogeschool.local/www/database/
Vervolgens gaan we naar de www map:
vagrant@homestead$ cd cmp.arteveldehogeschool.local/www/
Tip Gebruik de
<tab>toets om (bestaande) mapnamen automatisch aan te vullen en de pijltjestoetsen<up>of<down>om doorheen de CLI-history te gaan!
Het resultaat (Met het opdracht vagrant@homestead$ tree -d Code, maar daarvoor moet je eerst Tree installeren met vagrant@homestead$ sudo apt-get install tree):
~/Code/
└── cmp.arteveldehogeschool.local/
└── www/
├── database/
└── wordpress/
WordPress gebruikt een MySQL database.
Meld je aan op de databaseserver als databasebeheerder met onderstaande gegevens.
| Databasebeheerder | Databasewachtwoord |
|---|---|
homestead |
secret |
Daarvoor gebruiken we deze opdracht:
vagrant@homestead$ mysql --user=homestead --password
password: _
mysql> _
Tip Je kan onmiddellijk aanmelden door het wachtwoord op te geven.
vagrant@homestead$ MYSQL_PWD=secret mysql --user=homesteadOPGELET Dit is een veiligheidsrisico want het wachtwoord is zichtbaar in de CLI-history!
OPGELET De databasegebruiker is de gebruiker waarmee WordPress een verbinding maakt met de database. Dit is geen WordPress-gebruiker!
We maken een databasegebruiker aan met onderstaande gegevens.
| Databasegebruiker | Databasewachtwoord |
|---|---|
cmp_db_user |
cmp_db_password |
Daarvoor gebruiken we deze opdracht:
mysql> GRANT ALL PRIVILEGES ON `cmp_arteveldehogeschool_be`.*
-> TO 'cmp_db_user' IDENTIFIED BY 'cmp_db_password';
Tip
Je kan ook een hostnaam of IP-adres toevoegen, bijvoorbeeld:
'cmp_db_user'@'%''cmp_db_user'@'127.0.0.1''cmp_db_user'@'localhost'De standaardwaarde is
%en dat wil zeggen om het even welke host of om het even welk IP-adres. Omdat@'%'de standaard is, mag het weglaten worden.
Meld je af als databasebeheerder met:
mysql> exit
Bye
vagrant@homestead$ _
We melden ons aan als de databasegebruiker die we daarnet aangemaakt hebben.
vagrant@homestead$ mysql --user=cmp_db_user --password
password: _
mysql> _
We gaan een database aanmaken met de naam cmp_arteveldehogeschool_be.
mysql> CREATE DATABASE IF NOT EXISTS `cmp_arteveldehogeschool_be`
-> CHARACTER SET utf8
-> COLLATE utf8_general_ci;
Bekijk alle databases met:
mysql> SHOW DATABASES;
Meld je af als databasegebruiker met:
mysql> exit
Bye
vagrant@homestead$ _
Meld je aan op de server en voer onderstaande opdracht uit:
vagrant@homestead$ MYSQL_PWD=cmp_db_password mysqldump --user=cmp_db_user --databases cmp_arteveldehogeschool_be > ~/Code/cmp.arteveldehogeschool.local/www/database/dump.sql
Tip
Je kan databasedumps ook een timestamp geven, als je een historiek wil bijhouden:vagrant@homestead$ MYSQL_PWD=cmp_db_password mysqldump --user=cmp_db_user --databases cmp_arteveldehogeschool_be > ~/Code/cmp.arteveldehogeschool.local/www/database/dump_$(date +"%Y-%m-%d_%H%M%S").sql
vagrant@homestead$ MYSQL_PWD=cmp_db_password mysql --user=cmp_db_user cmp_arteveldehogeschool_be < ~/Code/cmp.arteveldehogeschool.local/www/database/dump.sql
We gaan versie 4.1.1 installeren in de map
~/Code/cmp.arteveldehogeschool.local/www/wordpress/
Deze map is in Artevelde Laravel Homestead al automatisch gekoppeld aan de domeinnaam http://www.cmp.arteveldehogeschool.local
Mappenstructuur
~/Code/cmp.arteveldehogeschool.local/ └── www/ ├── database/ └── wordpress/ ├── wp-admin/ ├── wp-content/ └── wp-includes/
Je kan de broncode downloaden van http://nl.wordpress.org/ en het bestand decomprimeren in de map wordpress.
Je kan WP ook installeren vanaf de Command-Line Interface.
De eerste en meest eenvoudige manier is met curl
vagrant@homestead$ cd ~/Code/cmp.arteveldehogeschool.local/www/ && curl https://nl.wordpress.org/wordpress-4.1.1-nl_NL.tar.gz | tar zx
Een kopie van de WordPress-broncode staat op GitHub. We gaan met behulp van het Source Code Management-programma Git de meest recente versie downloaden.
vagrant@homestead$ WP_VER=4.1.1 WP_DIR=~/Code/cmp.arteveldehogeschool.local/www/wordpress/ && git clone --depth 1 -b "$WP_VER" git://github.com/WordPress/WordPress $WP_DIR && rm -rf $WP_DIR/.git && unset WP_VER WP_DIR
Tip
De allerlaatste onwikkelingsversie kan je downloaden van de master branch. Deze versie is enkel bedoeld om te testen.vagrant@homestead$ WP_VER=master WP_DIR=~/Code/cmp.arteveldehogeschool.local/www/wordpress/ && git clone --depth 1 -b "${WP_VER}" git://github.com/WordPress/WordPress ${WP_DIR} && rm -rf ${WP_DIR}/.git && unset WP_VER WP_DIR
Een andere manier is door Composer, een package manager voor PHP, te gebruiken. Er is een officieuze WordPress package die door John P. Bloch onderhouden wordt.
vagrant@homestead$ composer create-project johnpbloch/wordpress ~/Code/cmp.arteveldehogeschool.local/www/wordpress/ 4.1.1
Eens de broncode geïnstalleerd, gaan we naar
http://www.cmp.arteveldehogeschool.local/
Kies Nederlands en klik daarna op Continue en daarna op Laten we starten!
| Veld | Waarde |
|---|---|
| Databasenaam: | cmp_arteveldehogeschool_be |
| Gebruikersnaam: | cmp_db_user |
| Wachtwoord: | cmp_db_password |
| Database-host: | localhost |
| Tabelprefix: | wp_ |
En klik op Verzenden.
Daarna klikken we op De installatie starten
| Veld | Waarde |
|---|---|
| Websitetitel: | Crossmedia Publishing |
| Gebruikersnaam: | cmp_gebruiker |
| Wachtwoord: | cmp_wachtwoord |
| Wachtwoord, tweemaal: | cmp_wachtwoord |
| Je e-mailadres: | cmp@arteveldehs.be |
En klik op WordPress installeren.
Daarna klikken op Inloggen.
En inloggen met de WP-gebruikersgegevens.
| Veld | Waarde |
|---|---|
| Gebruikersnaam | cmp_gebruiker |
| Wachtwoord | cmp_wachtwoord |
Dan kom je op Sitebeheer, het beheerdersgedeelte van de WP-installatie. Je komt standaard binnen op het Dashboard.
Klik op Crossmedia Publishing om naar de startpagina van de site te gaan.
Zie ook
Je kan meerdere websites maken met één installatie van WordPress, een zogenaamd Netwerk van sites. De huidige website wordt dan de hoofdwebsite en de bijkomende websites staan dan in een subdomein of een submap.
OPGELET: De webserver moet op poort
80(http) of443(https) draaien. Alternatieve poorten (bijv.8080) zijn niet toegelaten. Hoewel het mogelijk is om de code aan te passen om deze alternatieve poorten toe te laten, is het beter om de serverinstellingen te wijzigen.
Open wp-config.php en voeg volgende code toe:
// …
/* Multisite */
define( 'WP_ALLOW_MULTISITE', true );
/* That's all, stop editing! Happy blogging. */
//…Sla het bestand op en herlaadt Sitebeheer in de browser.
Onder Extra → Netwerk instellen kan je submappen inschakelen. Je krijgt de nodige aanpassingen te zien.
Zie ook
Instellingen → Algemeen
| Instelling | Waarde |
|---|---|
| Website-titel | Crossmedia Publishing |
| Ondertitel | Grafimediabeleid |
| Tijdzone | Europa → Brussel |
| Taal | Nederlands |
Klik op Wijzigingen opslaan
Instellingen → Schrijven
| Instelling | Waarde |
|---|---|
| Standaard berichtcategorie | Geen categorie |
| Standaard berichtformaat | Standaard |
Klik op Wijzigingen opslaan
Instellingen → Lezen
| Instelling | Waarde |
|---|---|
| Startpagina toont | - |
Klik op Wijzigingen opslaan
Instellingen → Reacties
Instellingen → Media
De standaard-URL's van WP tonen enkel het nummer van de pagina. Dat is niet gebruiksvriendelijk, noch SEO-vriendelijk.
Instellingen → Permalinks
| Instelling | Waarde |
|---|---|
| Algemene instellingen | Berichtnaam |
Klik op Wijzigingen opslaan
Binnen een WP-site heeft een gebruiker een bepaalde Rol (Role):
| Niveau | Nederlands | Engels | Rechten |
|---|---|---|---|
| 5. | Abonnee | Subscriber | Lezen |
| 4. | Schrijver | Contributor | Berichten bewerken en verwijderen |
| 3. | Auteur | Author | Berichten bewerken, verwijderen en publiceren |
| 2. | Redacteur | Editor | Alle Berichten bewerken, verwijderen en publiceren |
| 1. | Beheerder | Admin | Alles |
Voor een multisite WP-installatie is er nog de bijkomende rol van Superbeheerder (Super Admin). Deze rol is nog een niveau hoger dan Beheerder. Een Superbeheerder kan een netwerk van sites beheren en is bovendien ook automatisch Beheerder van elke site in het netwerk. De Superbeheerder kan bepaalde dingen zoals bijvoorbeeld Thema's en Plugins op netwerkniveau beheren.
Dashboard → Gebruikers
Berichten staan in antichronologische volgorde op de Berichtenpagina. Deze pagina is standaard als startpagina ingesteld.
Elk bericht heeft:
- Titel (Title)
- Inhoud (Content) die zowel tekst als media kan zijn.
Optioneel kan een Bericht ook nog een Samenvatting (Exerp) hebben.
Een Bericht heeft een bepaalde Notatie:
- Standaard (Standard)
- Aside
- Afbeelding (Image)
- Video
- Audio
- Quote
- Link
- Gallerij (Gallery)
Aan een Bericht kan je Categorieën en/of Tags toekennen.
-
Categorieën (Categories) Een Categorie maakt deel uit van een hiërarchische structuur.
-
Tags (Tags) Een Tag maakt geen deel uit van een structuur, maar bestaat op zichzelf.
Soorten mediabestanden:
- Afbeeldingen
- Audio
- Video
- Niet gekoppeld
Een pagina die door de gebruiker handmatig aangepast moet worden, noemt men in WP een statische pagina. Dit in tegenstelling tot de berichtenpagina die automatisch aangepast wordt van zodra er een nieuw bericht gepubliceerd wordt.
Je kan er geen categorieën of tags aan een pagina toekennen, maar je kan wel een pagina een subpagina maken van een andere pagina.
Pagina's → Nieuwe pagina
- Instellingen → Lezen
- Je kan wel een pagina instellen als voorpagina die dan in de plaats van de standaard startpagina komt.
- Een pagina kan ook dienst doen als …, dan worden de berichten getoond in plaats van de inhoud van die pagina.
Een Thema (Theme) bepaalt de look and feel en ook een deel van de functionaliteiten van een WordPress-website. Je kan één van de bijna 3.000 thema's downloaden van WordPress.org of je kan zelf een eigen thema maken.
Een goed thema is gemaakt volgens de principes van Responsive Web Design. RWD zorgt ervoor dat een website op verschillende toestellen goed functioneert. Zo kan dezelfde website zich optimaal aanpassen aan de elke schermresolutie (bijv. desktopscherm, smartphonescherm) en inputmanier (bijv. muis, trackpad of aanraakgevoelig scherm).
RWD vergt heel wat codeerwerk in HTML en vooral in CSS en JavaScript. Gelukkig bestaan er responsive frameworks die out of the box al heel wat functionaliteiten voor RWD bevatten en die je als basis voor je website kan gebruiken. Enkele van de populairste dergelijke frameworks zijn Bootstrap (oorspronkelijk gemaakt door Twitter voor hun eigen website) en ZURB Foundation.
Twitter Bootstrap integeren in een thema is op zich ook al heel wat werk, maar je kan je baseren op een basisthema dat Bootstrap al integreert en daarvan een Childthema (Child Theme) maken. Een Childthema is een thema dat enkel de wijzigingen aan het Parentthema bevat, en voor de rest gebruik maakt van het Parentthema. Beide moeten geïnstalleerd zijn.
We gaan het Thema DevDMBootstrap3 toevoegen.
Weergave → Thema's en klik op Nieuwe toevoegen.
Typ "DevDMBootstrap3" in.
Hover over het Thema en klik op Installeren.
Eens het Thema geïnstalleerd is, kan je terugkeren naar Thema's.
Het nieuwe Thema staat nu in de lijst. Het moet niet geactiveerd worden, want we gaan het niet rechtstreeks gebruiken, maar wel via een Childthema.
Je kan wel een Preview bekijken.
Zie ook
- WordPress.org / Codex / Theme Development
- WordPress.org / Codex / Child Themes
- WordPress.org / Themes / DevDmBootstrap3
- Danny Machal / DevDmBootstrap3
- Bootstrap
- SitePoint / Understanding Bootstrap's Grid System
Nieuwe documentatie
Alle geïnstalleerde Thema's staan in de map themes
Mappenstructuur
~/Code/cmp.arteveldehogeschool.local/ └── www/ ├── database/ └── wordpress/ └── wp-content/ └── themes/ ├── devdmbootstrap3/ ├── twentyeleven/ ├── twentyfifteen/ ├── twentyfourteen/ ├── twentyten/ ├── twentythirteen/ └── twentytwelve/
Zie ook
Je kan een Thema volledig van nul zelf opbouwen, maar het is eenvoudiger om van een reeds bestaand thema te vertrekken. Als je van een bestaand thema vertrekt heb je een aantal mogelijkheden:
- Het Thema rechtstreeks aanpassen. Bij een automatische update zullen alle wijzigen verloren gaan.
- Een kloon maken van het Thema door het te kopiëren naar een nieuwe map. Dan moeten updates manueel doorgevoerd worden.
- Een Childthema maken. Zo kan het Parentthema nog altijd automatisch geüpdatet worden en dus ook je Childthema.
Een Childthema maken is dus meestal de beste oplossing.
We gaan een Childthema maken op basis van DevDmBootstrap3. Dit Thema is gemaakt door Danny Marchal en is speciaal bedoeld om als basisthema gebruikt te worden. Bootstrap is er reeds in geïntegreerd.
Een Thema moet verplicht een aantal bestanden bevatten:
| Bestand | Beschrijving |
|---|---|
screenshot.png |
Een schermafbeelding van het Thema. |
style.css |
Bevat de metagegevens van het Thema en stijlen. |
Mappen en bestanden
~/Code/cmp.arteveldehogeschool.local/ └── www/ ├── database/ └── wordpress/ └── wp-content/ └── themes/ ├── arteveldehogeschool/ | ├── screenshot.png | └── style.css └── devdmbootstrap3/
We maken een nieuwe map arteveldehogeschool/ in de map wordpress/wp-content/themes/ waarin we de bestanden van ons nieuw Thema gaan zetten.
en zetten er een afbeelding in met de naam screenshot.png. Deze afbeelding moet een verhouding 4:3 hebben en bij voorkeur een afmeting van 880×660 px.
In de map zetten we ook een stylesheet met de naam style.css:
/*
Theme Name: Arteveldehogeschool
Theme URI: http://www.arteveldehogeschool.be/
Description: DevDmBootstrap3 Child Theme
Author: Olivier Parent
Author URI: http://www.olivierparent.be/
Template: devdmbootstrap3
Version: 1.0.0
Tags: arteveldehogeschool, wordpress
Text Domain: devdmbootstrap3-child
*/
/* Vanaf hier mag je stijlen toevoegen */In de commentaar staan de metagegevens van het Thema.
Nadat je style.css opgeslagen hebt, zal het in de Sitebeheer onder Thema's is de lijst verschijnen.
Een Childthema kan je activeren zoals een gewoon Thema.
Voor je een Thema activeert kan je een Live voorbeeld bekijken.
Ga terug naar Thema's door op de knop in de linker bovenhoek te klikken en klik daarna op op de knop Activeren.
Het actieve Thema staat eerst in de lijst.
Je kan een aantal instellingen van het Thema aanpassen door op de knop Aanpassen te klikken, of je kan de details bekijken door op de afbeelding te klikken.
De detailpagina toont de metagegevens die we in styles.css geplaatst hebben.
Het actieve Thema kan je op de website zien.
Een plugin is een stuk(je) software waarmee je de functionaliteiten toevoegt aan WP. Het grote aantal beschikbare plugins die door een levendige community gemaakt wordt, is één van de reden dat WP zo populair is.
Dashboard → Updates, vink de nodige de Plugins aan en klik op Plugins Bijwerken.
Als de Plugins bijgewerkt zijn, kan je naar een andere pagina gaan.
Zie ook
We gaan een nieuwe plugin maken om lijsten met woordvertalingen te maken van Grafische Termen. Deze plugin gaan we gebruiken om een Custom Post Type voor deze grafische termen toe te voegen aan WP.
Je hebt een aantal standaard Post Types (Default Post Types):
- Berichten
- Media
- Pagina's
- Reacties
- Menu's
Maar je kan ook je eigen Post Types (Custom Post Types) maken.
Het is mogelijk om een Custom Post Type te definiëren in een Thema, maar aangezien het uitbreidingen zijn op de functionaliteiten van WordPress betreft en niet rechtstreeks met het uitzicht te maken heeft, is het logischer om er een Plugin voor te maken.
We gaan een Custom Post Type maken voor een Grafische term. Een grafische term heeft deze eigenschappen:
- Naam (de Titel)
- Beschrijving (de Content)
- Vertalingen:
- Frans
- Engels
- Duits
We maken een nieuwe Plugin met de naam arteveldehogeschool_lexicon. Dit doen we door een nieuwe map met deze naam te maken in de map wordpress/wp-content/plugins/ en een PHP-bestand met dezelfde naam erin te zetten.
Mappen en bestanden
~/Code/cmp.arteveldehogeschool.local/ └── www/ ├── database/ └── wordpress/ └── wp-content/ └── plugins/ └── arteveldehogeschool_lexicon/ ├── arteveldehogeschool_lexicon.php └── languages/
Het PHP-bestand arteveldehogeschool_lexicon.php moet deze code bevatten:
<?php
/*
Plugin Name: Artveldehogeschool Grafisch Lexicon Vertalingen
Plugin URI: http://www.arteveldehogeschool.be/
Description: Plugin voor Vertalingen van vaktermen in het Grafisch Lexicon.
Version: 1.0.0
Author: Olivier Parent
Author URI: http://www.olivierparent.be/
Text Domain: arteveldehogeschool
License: GPLv2
*/Bovenstaande code bevat de metagegevens van de Plugin.
Nu de plugin bestaat, moeten we deze activeren in Sitebeheer:
Plugins → Geïnstalleerde plugins
Zoek in de lijst plugins naar Artveldehogeschool Grafisch Lexicon Vertalingen en klik op Activeren.
WP is geschreven in het Engels en daarna vertaald naar verschillende talen waaronder het Nederlands. Wij gaan onze Plugin ook in het Engels schrijven en een Nederlandse vertaling toevoegen.
Een stuk software vertalen duidt men vaak aan met de termen
l10nofi18n.
Term Betekenis Verklaring i18nInternationalization 18tekens tussen deienn).l10nLocalization 10tekens tussenn delenn).
WP gebruikt het opensource Gettext-systeem voor vertalingen. De vertalingen worden in .po-bestanden geschreven die daarna naar .mo-bestanden gecompileerd worden.
| Extensie | Type bestand | Inhoud |
|---|---|---|
.pot |
Portable Object Template | Vertaalbare tekenstrings (voor alle talen). |
.po |
Portable Object | Vertaalde tekenstrings (voor één taal). |
.mo |
Machine Object | Gecompileerde versie van het .po-bestand. |
Tip: Je kan Poedit gebruiken om
.po-bestanden te bewerken en te compileren naar.mobestanden. Bestand → Naar MO Compileren…
We maken in de map languages van onze Plugin een nieuw vertaalbestand voor het Custom Post Type met de naam graphic_term. De naam van ons vertaalbestand moet bestaan uit de naam van het Text Domain (hiervoor nemen we dezelfde naam als die van het Custom Post Type: graphic_term) gevolgd door de taalcode die bestaat uit de ISO 639-1-code voor de taal (nl) plus de ISO 3166-1 alpha-2-code voor het land (NL) voor de variant van de taal:
Maak met een teksteditor het bestand graphic_term-nl_NL.po en geeft het deze inhoud:
msgid ""
msgstr ""
"Project-Id-Version: ArteveldehogeschoolLexicon\n"
"POT-Creation-Date: 2014-09-01 12:45+0100\n"
"PO-Revision-Date: 2014-09-01 12:45+0100\n"
"Last-Translator: Olivier Parent\n"
"Language-Team: Arteveldehogeschool\n"
"Language: nl_NL\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"X-Generator: Poedit 1.7.1\n"
"X-Poedit-Basepath: ..\n"
"X-Poedit-SourceCharset: UTF-8\n"
"X-Poedit-KeywordsList: __;_e;_n:1,2;_x:1,2c;_ex:1,2c;_nx:4c,1,2;esc_attr__;"
"esc_attr_e;esc_attr_x:1,2c;esc_html__;esc_html_e;esc_html_x:1,2c;_n_noop:1,2;"
"_nx_noop:3c,1,2;__ngettext_noop:1,2\n"
"Plural-Forms: nplurals=2; plural=(n != 1);\n"
"X-Poedit-SearchPath-0: .\n"
#: arteveldehogeschool_lexicon.php:30
msgid "Graphic Terms"
msgstr "Grafische termen"
#: arteveldehogeschool_lexicon.php:31
msgid "Graphic Term"
msgstr "Grafische term"
#: arteveldehogeschool_lexicon.php:32
msgid "Add new"
msgstr "Nieuwe grafische term"
#: arteveldehogeschool_lexicon.php:33
msgid "Add new Graphic Term"
msgstr "Nieuwe grafische term toevoegen"
#: arteveldehogeschool_lexicon.php:34
msgid "Edit Graphic Term"
msgstr "Grafische term bewerken"
#: arteveldehogeschool_lexicon.php:35
msgid "View Graphic Term"
msgstr "Grafische term bekijken"
#: arteveldehogeschool_lexicon.php:36
msgid "Search Graphic Terms"
msgstr "Zoek grafische termen"
#: arteveldehogeschool_lexicon.php:37
msgid "No Graphic Terms found"
msgstr "Geen grafische termen gevonden"
#: arteveldehogeschool_lexicon.php:38
msgid "No Graphic Terms found in Trash"
msgstr "Geen grafische termen gevonden in de Prullenbak"
#: arteveldehogeschool_lexicon.php:103
msgid "Translations"
msgstr "Vertalingen"Zie ook
Bovenaan in arteveldehogeschool_lexicon.php gaan we de vertalingen inladen met de functie load_plugin_textdomain(). Het eerste argument van de functie is de naam van het Text Domain (graphic_term, dit komt ook voor in de naam van het vertaalbestand) en het laatste argument is de locatie van de map met vertaalbestanden relatief ten opzichte van de map plugins van WP. Deze locatie is arteveldehogeschool_lexicon/languages, maar het is beter om deze naam met functies te bepalen zodat je de plugin kan hernoemen of verplaatsen zonder dat de code aangepast moet worden.
load_plugin_textdomain('graphic_term', false, basename( dirname( __FILE__ ) ) . '/languages' );Zie ook
In de Plugin gebruik je de functie __() om tekst te vertalen. Het eerste argument is tekenstring die vertaald moet worden en de tweede is het Text Domain waaruit de vertaling gehaald moet worden. Indien geen vertaling gevonden wordt, dan wordt de tekenstring die vertaald moet worden teruggegeven.
Bijvoorbeeld:
__('Graphic Terms', 'graphic_term')
We maken nieuwe functie om de Custom Post Type voor een 'grafische term' te registreren. Deze Custom Post Type heeft als naam graphic_term. We noemen de functie register_graphic_term_post_type():
function register_graphic_term_post_type() {
$text_domain = 'graphic_term';
// Labels voor op de menuknoppen.
$labels = array(
'name' => __( 'Graphic Terms' , $text_domain ),
'singular_name' => __( 'Graphic Term' , $text_domain ),
'add_new' => __( 'Add new' , $text_domain ),
'add_new_item' => __( 'Add new Graphic Term' , $text_domain ),
'edit_item' => __( 'Edit Graphic Term' , $text_domain ),
'view_item' => __( 'View Graphic Term' , $text_domain ),
'search_items' => __( 'Search Graphic Terms' , $text_domain ),
'not_found' => __( 'No Graphic Terms found' , $text_domain ),
'not_found_in_trash' => __( 'No Graphic Terms found in Trash', $text_domain ),
);
$args = array(
'labels' => $labels,
'menu_position' => 25, // @link http://codex.wordpress.org/Function_Reference/register_post_type
'menu_icon' => 'dashicons-media-default', // @link https://developer.wordpress.org/resource/dashicons/
'public' => true,
'supports' => array( 'title', 'editor'/*, 'custom-fields'*/ ),
);
register_post_type( 'graphic_term', $args );
}Zie ook
Deze functie moeten we nu ook nog laten uitvoeren op het juiste ogenblik. WP voert een aantal Acties bij het opbouwen van een pagina. Aan elk van deze acties kunnen we eigen functies vasthaken aan een Hook.
We gaan onze functie register_graphic_term_post_type() vasthaken aan de Hook init, zodat onze functie uitgevoerd wordt tijdens de Actie init.
add_action( 'init', 'register_graphic_term_post_type' );Vanaf nu verschijnt er een nieuw menu in Sitebeheer.
Zie ook
Als een nieuwe Grafische term aangemaakt wordt, dan moet onder het tekstgebied voor de inhoud nog 3 inputvelden getoond worden in een Meta Box. In de standaard WP-lay-out moeten we hiervoor helaas een tabel gebruiken.
function display_graphic_term_meta_box( $graphic_term ) {
$text_domain = 'graphic_term';
$graphic_term_translation = array(
'fr' => esc_html( get_post_meta( $graphic_term->ID, 'graphic_term_fr', true ) ),
'en' => esc_html( get_post_meta( $graphic_term->ID, 'graphic_term_en', true ) ),
'de' => esc_html( get_post_meta( $graphic_term->ID, 'graphic_term_de', true ) ),
);
?>
<table width="100%">
<tr>
<th><?php _e( 'Language', $text_domain ); ?></th>
<th style="text-align: left"><?php _e( 'Translation', $text_domain ); ?></th>
</tr>
<tr>
<td>français</td>
<td><input type="text" name="graphic_term_fr" value="<?php echo $graphic_term_translation['fr']; ?>" /></td>
</tr>
<tr>
<td>English</td>
<td width="100%"><input type="text" name="graphic_term_en" value="<?php echo $graphic_term_translation['en']; ?>" /></td>
</tr>
<tr>
<td>Deutsch</td>
<td width="100%"><input type="text" name="graphic_term_de" value="<?php echo $graphic_term_translation['de']; ?>" /></td>
</tr>
</table>
<?php
}Zie ook
Nu we een functie display_graphic_term_meta_box() hebben om de Meta Box te tonen op de beheerpagina van het Custom Post Type graphic_term , kunnen we deze aanroepen in een nieuwe functie add_graphic_term_meta_box() waarmee we de Meta Box toevoegen aan de pagina.
We geven de Meta Box de titel 'Translations' die naar het Nederlands vertaald wordt als 'Vertalingen'.
function add_graphic_term_meta_box() {
$text_domain = 'graphic_term';
$id = 'graphic_term_meta_box'; // Id van de meta box.
$title = __('Translations', $text_domain); // Titel van de meta box.
$callback = 'display_graphic_term_meta_box'; // Roept de functie display_graphic_concept_meta_box() aan.
$screen = 'graphic_term'; // Toon de meta box op het scherm voor het Custom Post Type 'graphic_term'.
$context = 'normal'; // Context waarin de meta box getoond moet worden. Keuze uit 'normal', 'side' of 'advanced'.
add_meta_box( $id, $title, $callback, $screen, $context );
}Zie ook
We gaan onze functie add_graphic_term_meta_box() vasthaken aan de Hook admin_init, zodat onze functie uitgevoerd wordt tijdens de Actie admin_init.
add_action( 'admin_init', 'add_graphic_term_meta_box' );Zie ook
De gegevens in de Meta Box worden niet automatisch opgeslagen. Daarom moeten we hier zelf een functie voor maken. We moeten van elke vertaling controleren of er een POST-variabele ($_POST) bestaat (isset) en zo ja, moeten we nagaan of deze niet (!) leeg (empty()) is.
Voordat de gegevens opgeslagen kan worden moeten we vermijden dat schadelijke code de database of de website kan beschadigen door de functie sanitize_text_field() op de gegevens toe te passen. Tenslotte kunnen we de gegevens opslaan met de functie update_post_meta().
function save_graphic_term_post_meta_data( $graphic_term_id, $graphic_term ) {
if ( 'graphic_term' == $graphic_term->post_type ) {
// Frans
if ( isset( $_POST['graphic_term_fr'] ) && !empty( $_POST['graphic_term_fr'] ) ) {
$graphic_term_fr = sanitize_text_field( $_POST['graphic_term_fr'] );
update_post_meta( $graphic_term_id, 'graphic_term_fr', $graphic_term_fr);
}
// Engels
if ( isset( $_POST['graphic_term_en'] ) && !empty( $_POST['graphic_term_en'] ) ) {
$graphic_term_en = sanitize_text_field( $_POST['graphic_term_en'] );
update_post_meta( $graphic_term_id, 'graphic_term_en', $graphic_term_en );
}
// Duits
if ( isset( $_POST['graphic_term_de'] ) && !empty( $_POST['graphic_term_de'] ) ) {
$graphic_term_de = sanitize_text_field( $_POST['graphic_term_de'] );
update_post_meta( $graphic_term_id, 'graphic_term_de', $graphic_term_de );
}
}
}Zie ook
De functie save_graphic_term_post_meta_data() moet uitgevoerd worden nadat de Custom Post Type opgeslagen wordt. Daarom haken we ze vast aan de Hook save_post.
De functie heeft 2 parameters ($graphic_term_id en $graphic_term) die elk als argument meegegeven moeten worden, daarom moeten we als vierde argument het cijfer 2 meegeven aan de functie. Hierdoor moeten we ook argument drie meegeven dat de prioriteit (volgorde van uitvoeren) bepaalt. Deze willen we niet wijzigen, daarom geven we null mee (wat eigenlijk 'geen waarde' betekent) zodat de functie de voorafgedefinieerde standaardwaarde (10) gebruikt.
add_action( 'save_post', 'save_graphic_term_post_meta_data', null , 2);Deze functie maakt een uploadpagina met formulier en verwerkt het formulier waneer het verstuurd is. Er wordt enkel een nieuwe grafische term toegevoegd als die nog niet in de database bestaat. De controle gebeurt met de functie post_graphic_term_exists() (zie D).
Zie ook
- PHP / Manual / Function Reference /
isset()- PHP / Manual / Function Reference /
ini_set()- PHP / Manual / Function Reference /
fopen()- PHP / Manual / Function Reference /
fgetcsv()- PHP / Manual / Function Reference /
fclose()- PHP / Manual / Function Reference /
count()- WordPress.org / Code Reference / Functions /
get_current_user_id()- WordPress.org / Code Reference / Functions /
wp_insert_post()
function upload_graphic_terms_page() {
$text_domain = 'graphic_term';
?>
<h2><?php echo __('Upload Graphic Terms', $text_domain); ?></h2>
<form action="" method="post" accept-charset="UTF-8" enctype="multipart/form-data">
<input type="file" name="csv-graphic-terms">
<button type="submit" class="button"><?php echo __('Upload', $text_domain); ?></button>
</form>
<?php
if (isset($_FILES['csv-graphic-terms']) && !$_FILES['csv-graphic-terms']['error']) {
$graphic_terms = array();
// Bestand inlezen, regel per regel
$file_name = $_FILES['csv-graphic-terms']['tmp_name'];
ini_set('auto_detect_line_endings', '1'); // In het geval deze optie in php.ini niet aan zou staan.
$file = fopen($file_name, 'r');
if ($file) {
$i = 0;
while ($line = fgetcsv($file, null, ';')) {
if ($i++ > 0) {
if ($i % 2 === 0) {
$graphic_terms[] = array(
'title' => $line[0],
'content' => null,
'fr' => $line[1],
'en' => $line[2],
'de' => $line[3],
);
} else {
$previous_item = count($graphic_terms) - 1;
$graphic_terms[$previous_item]['content'] = $line[0];
}
}
}
fclose($file);
}
$user_ID = get_current_user_id();
$added_count = 0;
// Ingelezen gegevens verwerken
foreach ($graphic_terms as $graphic_term) {
$post = array(
'post_title' => $graphic_term['title'],
'post_content' => $graphic_term['content'],
'post_status' => 'publish',
'post_type' => 'graphic_term',
'post_author' => $user_ID,
);
// Voer de ingesloten code enkel uit als de grafische term nog NIET bestaat.
if ( !post_graphic_term_exists( $post['post_title'] ) ) {
// Grafische term toevoegen aan de databasetabel 'wp_post'.
$graphic_term_id = wp_insert_post($post);
// Metagegevens (vertalingen) toevoegen voor de nieuwe grafische term aan de databasetabel 'wp_postmeta'.
if ($graphic_term_id) {
$added_count++;
foreach (array('en', 'fr', 'de') as $lang) {
$key = 'graphic_term_' . $lang;
update_post_meta( $graphic_term_id, $key, $graphic_term[$lang] );
}
}
}
}
echo "<p>{$added_count} grafische termen toegevoegd!</p>";
}
}Zie ook
Deze functie voegt een menu-item voor de uploadpagina toe aan het menu. De functie doet dit twee maal: een keer als submenu en een keer als menu. Dit is enkel om het verschil te demonstreren, normaal kies je maar een van de twee.
function add_upload_graphic_terms_submenu_page() {
$text_domain = 'graphic_term';
$parent_slug = 'edit.php?post_type=graphic_term';
$page_title = __('Upload Graphic Terms', $text_domain ); // Titel van de pagina (<title>-element)
$menu_title = __('Upload Graphic Terms', $text_domain );
$capability = 'publish_posts'; // @link http://codex.wordpress.org/Roles_and_Capabilities
$menu_slug = 'upload-graphic-terms';
$callback = 'upload_graphic_terms_page';
$icon_url = 'dashicons-media-spreadsheet'; // @link https://developer.wordpress.org/resource/dashicons/
$position = 27; // @link https://developer.wordpress.org/reference/functions/add_menu_page/
add_submenu_page( $parent_slug, $page_title, $menu_title, $capability, $menu_slug, $callback );
add_menu_page ( $page_title, $menu_title, $capability, $menu_slug, $callback, $icon_url, $position );
}Zie ook
We gaan onze functie add_upload_graphic_terms_submenu_page() vasthaken aan de Hook admin_init, zodat onze functie uitgevoerd wordt tijdens de Actie admin_init.
add_action( 'admin_menu', 'add_upload_graphic_terms_submenu_page' );Zie ook
- WordPress.org / Code Reference / Functions /
post_exists()- WordPress.org / Code Reference / Functions /
sanitize_post_field()- WordPress.org / Code Reference / Functions /
wp_unslash()- WordPress.org / Code Reference / Classes /
wpdb- WordPress.org / Code Reference / Classes /
wpdb/get_var()- WordPress.org / Code Reference / Classes /
wpdb/prepare()
De onderstaande functie is gebaseerd op de standaard WP-functie post_exists(), maar dan aangepast zodat enkel posts van het type Custom Post Type graphic_term gecontroleerd worden. Deze functie gebruikt een normale MySQL-query.
function post_graphic_term_exists($title, $content = '', $date = '') {
global $wpdb;
$post_title = wp_unslash( sanitize_post_field( 'post_title' , $title , 0, 'db' ) );
$post_content = wp_unslash( sanitize_post_field( 'post_content', $content, 0, 'db' ) );
$post_date = wp_unslash( sanitize_post_field( 'post_date' , $date , 0, 'db' ) );
$query = "SELECT ID FROM $wpdb->posts WHERE 1=1";
$args = array();
$query .= ' AND post_type = %s';
$args[] = 'graphic_term';
if ( !empty ( $date ) ) {
$query .= ' AND post_date = %s';
$args[] = $post_date;
}
if ( !empty ( $title ) ) {
$query .= ' AND post_title = %s';
$args[] = $post_title;
}
if ( !empty ( $content ) ) {
$query .= 'AND post_content = %s';
$args[] = $post_content;
}
if ( !empty ( $args ) )
return (int) $wpdb->get_var( $wpdb->prepare($query, $args) );
return 0;
}Zie ook
De meeste PHP/MySQL-webhosting pakketen ondersteunen WordPress, maar controleer eerst of hosting aan de aanbevolen vereisten voldoet:
- PHP 5.4+ (minimum 5.2.4)
- MySQL 5.5+ (minimum 5.0)
- Apache HTTP Server met
mod_rewrite
Op Byethost Free Webhosting kan je gratis je website hosten.
Na registratie krijg je een e-mail met een link om je account te activeren. Daarna krijg je een e-mail met daarin deze gegevens:
- Byethost cPanel
- Username:
b18_00000000 - Password:
mijn_wachtwoord
- Username:
- Your URL: ``
- Byethost FTP
- Server:
ftp.byethost18.com - Login:
b18_00000000 - Password:
mijn_wachtwoord - Byethost MySQL
Je kan eventueel een subdomein aanmaken voor je website via cPanel. Je kan kiezen uit een aantal domeinnamen, maar het gevraagde subdomein moet uiteraard nog beschikbaar zijn op het domein.
Voor elk subdomein wordt een nieuwe map gemaakt op de server, met als naam de volledige domeinnaam. De submap htdocs is de map waarin je alle (publieke) bestanden moet plaatsen. Dus alles wat in je lokale omgeving in de map ~/Code/cmp.arteveldehogeschool.local/www/wordpress/ staat.
Ga nog niet onmiddellijk uploaden via FTP, want eerst moeten er nog een aantal aanpassingen gebeuren aan de database en de WP-configuratie zodat WordPress overweg kan met de (nieuwe) domeinnaam.
Het eerste wat je moet doen is een database aanmaken via cPanel
De database geef je dezelfde naam als je lokaal project (cmp_arteveldehogeschool_be). Byethost zal de naam automatisch met je gebruikersnaam prefixen. Het databasewachtwoord zal hetzelfde wachtwoord zijn als dat van je Byethost account.
Uiteindelijk zullen de gegevens er bijvoorbeeld zo uitzien:
- Byethost MySQL
- Database Name:
b00_00000000_cmp_arteveldehogeschool_be - Username:
b00_00000000 - Password:
mijn_wachtwoord
- Database Name:
Makkelijke manier
De eenvoudigste manier is gewoon een nieuwe installatie uitvoeren. Daarna kan je de gegevens in Extra → Exporteren exporteren naar een XML-bestand (bijv. crossmedia-publishing.wordpress.2015-12-31.xml).
Daarna kan je de gegevens terug importeren in een andere WordPress-installatie. In deze installatie zal je eerst de WordPress Importer moeten installeren via Extra → Importeren: WordPress en de plugin activeren.
Daarna opnieuw Extra → Importeren: WordPress en het XML-bestand selecteren.
Moeilijke manier
Een moeilijkere en omslachtigere manier bestaat eruit de databasetabellen te importeren met PhpMyAdmin en dan onderstaande tabellen te doorzoeken naar de oude domeinnaam (www.cmp.arteveldhogeschool.local) en die een voor een te vervangen door de nieuwe (bijv. cmp.byethost00.com).
wp_sitewp_sitemetawp_blogswp_optionswp_usermeta
Gebruik bij voorkeur Filezilla Client, omdat je met dit gratis FTP-programma zowel de lokale map op je eigen computer als de remote map op de FTP-server kan zien, inclusief alle verborgen bestanden.
- Lokale site:
~/Code/cmp.arteveldehogeschool.local/www/wordpress/ - Externe site:
/cmp.byethost00.com/htdocs
Je kan een aangepaste versie van wp-config.php uploaden, maar het is iets eenvoudiger om via de Byethost cPanel Online File Manager de aanpassing rechtstreeks op de server te doen.
b00_00000000_cmp_arteveldehogeschool_be- Username:
b00_00000000 - Password:
mijn_wachtwoord - Server: zie cPanel