Les 6: Child theme en Bloggen
Bloggen
Voorbeeld website van Bloggen: http://www.noordereiland.org/
Belangrijkste deel van deze website bestaat uit berichten.
Als je meer dan 15 berichten hebt, dan is het tijd te geworden om daar wat structuur in te brengen!
Dat doe je dan met categorieën te gaan werken. Net zo als een bibliotheek, winkel of krant.
Op www.noordereiland.org worden berichten over verschillende webpagina’s van de website verdeeld vanwege hun categorieën. Zo is er bijvoorbeeld verschil gemaakt tussen nieuws, activiteiten (archief) en Wijkraad. Zie de desbetreffende pagina’s:
https://noordereiland.org/ (Nieuws)
https://noordereiland.org/wijkraad/
https://noordereiland.org/activiteiten/
+ https://noordereiland.org/opera/
Verschil categorieën en tags
Het doel van categorieën en tags is om de gebruiksvriendelijkheid van je website te verhogen. Tags en categorieën zijn gemaakt om samen te werken. Samen maken ze het eenvoudig voor je bezoekers om berichten terug te vinden.
Categorieën zijn bedoeld om een groot aantal berichten te groeperen. Categorieën zijn de hoofdonderwerpen van je website, vergelijkbaar met de inhoudsopgave van een boek.
Categorieën hebben een hiërarchie, een categorie kan subcategorieën hebben.
Tags zijn bedoeld om specifieke details van je inhoud te omschrijven. Tags zijn de kernwoorden van je website, vergelijkbaar met de index van een boek.
Tags hebben geen hiërarchie.
Ik heb een blog, Portugal Portal, waarin ik over Portugal schrijf. Daarin zijn de categorieën: Land, Cultuur, Taal, Natuur, Reizen, Wonen en Keuken.
Nu schrijf ik een bericht over een restaurant waar ik gegeten heb. Dat kan ik toevoegen aan de categorie “Keuken”. Tags kunnen hier bijvoorbeeld zijn: restaurant, vis, en de plaatsnaam waar het restaurant is gevestigd.
Categorieën moet je gebruiken. Tags zijn niet verplicht.
Als je geen categorie toevoegt aan een bericht, dan komt het bericht automatisch in de categorie “geen categorie”. Deze standaardcategorie kun je hernoemen naar “Overig” of iets dergelijks.
Hoeveel categorieën?
Ik adviseer om met 5 tot 10 categorieën te beginnen. Als je blog groeit komen er misschien nog categorieën bij.
En hoeveel tags?
Ik raad aan om niet meer dan 10 tags per bericht te gebruiken.
Voorbeeld Categorie: http://www.noordereiland.org/category/2015/
Voorbeeld Tag: http://www.noordereiland.org/tag/galerie_wind/
Zorg dat meerdere berichten gebruik maken van een Categorie/Tag, anders kan het een enorme teleurstelling zijn voor de bezoeker die er op klikt, en als resultaat slechts 1 bericht te zien krijgt.
Visual Composer van GoodNews theme info hier: https://vc.wpbakery.com/must-have-page-builder-plugin-for-wordpress-2/
Let op bij bloggen: Hoe ziet het blog er uit (layout)
O.A. de samenvatting (excerpt) dat bij elk bericht komt te staan.
verder:
1. schrijver van bericht
2. datum
3. related bericht(en)
4. terug – verder knop
Mooi voorbeeld = https://pieterenmarliesoppad.nl/
Plaatsen van berichten op jouw website
Extra “recente berichten” Widget voor in sidebar of footer.
2x
1. Recent Posts Widget Extended
Allows you to display a list of the most recent posts with thumbnail, excerpt and post date, also you can display it from all or specific or multiple taxonomy, post type and much more!
+ Shortcode feature for placing postst on webpage (werkt helaas niet in Gutenburg)
Website: https://wordpress.org/plugins/recent-posts-widget-extended/
Uitleg: www.wpbeginner.com/wp-tutorials/how-to-display-recent-posts-from-a-specific-category-in-wordpress/
+
2. Recent Posts Widget With Thumbnails
List the most recent posts with post titles, thumbnails, excerpts, authors, categories, dates and more!
Website: https://wordpress.org/plugins/recent-posts-widget-extended/
+
Posts op pagina met Gutenburg-blok “Nieuwste berichten”
(via + en dan onder tab Widgets) Sinds de update ook met een aanklikbare uitgelichte afbeelding v/d post.
of
Posts op pagina met Gutenburg-COblock “Berichten” en “Carrousel-bericht”
(via + en dan onder tab Coblocks) Met uitgelichte afbeelding.
Plaats juiste blok op webpagina en de eigenschappen invullen.
WordPress app
(onderweg snel aan de slag met WordPress)
Inspiration strikes any time, anywhere. WordPress mobile apps put the power of publishing in your hands, making it easy to create and consume content. Write, edit, and publish posts to your site, check stats, and get inspired with great posts in the Reader. And of course, they’re open source, just like WordPress.
Webpagina: https://apps.wordpress.com/mobile/
ipad/iPhone app: https://apps.apple.com/nl/app/wordpress/id335703880
Via app snel een bericht posten.
Wel eerst jouw website toevoegen aan de WordPress-app.
(Nils zal dit op zijn iPad laten zien).
Handig bij bloggen: Bericht types
Voorbeeld:
afbeelding
http://goodnews.xplodedthemes.com/good-news/blog/2014/08/08/here-is-a-brief-sketch-of-the-economic-proposition-15/
gallery
http://goodnews.xplodedthemes.com/good-news/blog/2014/12/14/best-places-to-travel-in-2015/
Zie ook:
http://dahz.daffyhazan.com/applique/outfit/the-simplest-way-to-look-chic/
Themeforest = http://themeforest.net/item/fashion-blog-theme-applique/13915999
Zie ook:
http://templates.silversite.pl/whiteblack/demo-2/web/
Themeforest = http://themeforest.net/item/whiteblack-a-responsive-wordpress-blog-theme/13344725
of http://www.2035themes.com/artmag/features/
Themeforest = http://themeforest.net/item/artmag-clean-wordpress-blog-magazine-theme/14260086
Afbeeldingen & video:
Gallery Plug-in van http://www.noordereiland.org/2013/onthulling-beeld-tom-poes/
Gallery -> Envira Gallery Lite
The best responsive WordPress gallery plugin. Made lite and free.
website: https://wordpress.org/plugins/envira-gallery-lite/
website: http://enviragallery.com/
Video met: [/embed width="800" height="450"]https://vimeo.com/150805353[/embed]
(eerste / moet dan weg)
of met iframe (in de code tekst zetten)
(iframe ophalen bij Youtube of Vimeo)
<iframe src=”https://player.vimeo.com/video/150805353″ width=”800″ height=”450″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>
Child theme
Het gebruiken van een child theme is vooral handig wanneer je een WordPress-theme gebruikt dat je wilt aanpassen. De aanpassingen maak je dan in je child theme, zodat je aanpassingen niet verloren gaan als het theme dat je gebruikt een update krijgt.
UPDATE: Tegenwoordig heeft de Costumizer een apart venster voor eigen CSS.
Maar je kunt nog steeds gebruik maken van een Child Theme.
meestal maar twee bestanden nodig:
1. screenshot.png maken
2. het style.css bestand voor al je aanpassingen die daardoor ‘apart’ staan bij een ‘moeder’ theme update
(meer info hier )
Child Theme 2017
Deze twee bestanden in een map met naam ’twentyseventeen_child’ en dit vervolgens ingezipt staat hier. (klaar voor New Theme upload)
—
De aanpassingen in het style.css (Was twentyfourteen is nu twentysixteen )
In dit style.css bestand staat: (mijn oranje moet weg)
Theme Name: X Child <-(geef logische naam)
Theme URI: http://skvrbeeldfabriek.nl/start/wp-admin/twentyfourteen/ <-(aanpassen)
Description: X Child Theme <-(wat je wilt)
Author: Ontwerpburo Lichting98 <-(wat je wilt)
Author URI: http://www.lichting98.nl <-(wat je wilt)
Template: twentyfourteen <-(even aanpassen)
Version: 1.1.0 <-(wat je wilt)
*/
@import url(“../twentyfourteen/style.css”); <-(aanpassen! waar staat ‘moeder’ bestand? (EIGENLIJK IS ALLEEN DEZE @import REGEL BELANGRIJK)
/* =Theme customization starts below – Succes (hieronder komen de CSS aanpassingen!)
————————————————————– */
WordPress thema uploaden als ZIP
Deze bestanden moeten in een map, en deze map moet je inzippen, zodat je de knop Upload new theme een zip-bestand kunt aanbieden, om zo een nieuw thema toe te voegen aan jouw WordPress.
Wisselen van thema
Mijn ervaring is dat bij het wisselen van thema de zaken uit de customizer soms niet mee komen.
Daarnaast zijn ook jouw onderdelen v/d widgets weg, vaak zijn ze niet weg, maar staan ze opeens in het “niet actief” deel van de widgets, en moet je ze weer terug zetten in de juiste widgets.
Hou daar AUB rekening mee al je zelf gaat veranderen van thema dat al gevuld is. Zo maak ik vaak een screenshot van de widgets om later te kunnen kijken waar alles precies stond.
Hieronder extra info uit oude lessen:
HTML IN WIDGETS
WIDGET / FOOTER tekst code (HTML dus)= Afbeelding met link
—
De afbeelding hierboven is de html code die WP meteen omzet naar het resultaat, vandaar het vesnter hieronder met de HTML code:
—
<a href="https://twitter.com/Lichting98" target="_blank"><img src="https://www.lichting98.nl/mobile/wp-content/uploads/2015/03/Logo-Twitter.gif" alt="Twitter Lichting98" width="64" height="37" hspace="0" vspace="0" border="0" title="Titel van afbeelding" /></a>
1= URL (link)
2 = nieuw venster
3 = de afbeelding
4 = Alt tag
5 = afmetingen (in pixels)
6 = is de titel
WIDGET / FOOTER tekst code (HTML dus)= Tekst met link
<a href=”http://www.midgetsjoelen.nl/cms-wp/shop/”>Ja, doe mij een bak!</a>
En deze voor een mooie COPYRIGHT in de FOOTER
<hr>© Copyright 2016 <br> <a href=”http://www.Lichting98.nl” target=”_blank”>Ontwerpburo Lichtin98 </a><br>
<br>
Graphic Design + Websites + Multimedia & Concepts in Rotterdam
<hr>
Aanpassen (ChMod) rechten van een bestand op de webserver.
Bijvoorbeeld als deze op “alleen lezen” staat.
Zie meer informatie: www.wordpress.org/Changing_File_Permissions
De 5 stappen:
1. Op de filemanager van de webserver staat het bestand op “644”
2. Binnen FTP (bij dit programma via de rechtermuis knop) krijg je toegang tot ChMod.
3. Binnen FTP verander de rechten van het bestand.
4. Op de filemanager van de webserver staat het bestand nu op “766”
5. In WordPress krijg je nu een “Bestand bijwerken” knop.
