AI als gereedschap
Vandaag was ik op zoek naar een geschikt introductieonderwerp voor mijn blog. Aangezien dit mijn eerste blogpost is, wil ik iets kiezen dat er goed bij past. Momenteel is AI, anno 2023, ontzettend populair. Het is nieuw, helpt ons met schrijven, inspiratie, SEO, spellingscorrecties, informatie, doet de was en maakt onze auto schoon. Kortom, AI wordt een disruptieve factor in de industrie, en je wilt daar graag voorop lopen.
Als vormgever ben ik zelf dan ook best bang voor deze disruptieve factor, en het is dan ook ironisch dat ik het zoveel gebruik. Ik en vele anderen vormgevers zeggen daarom hetzelfde: het is een gereedschap. En een gereedschap is het zeker, want het heeft al veel processen voor mij vereenvoudigd. Ik wil graag praten over een van deze processen: het maken van de blogmodule waarin je nu leest.
Bij het begin van het bouwen
Voordat je begint met het toepassen van een blogmodule, heb je de keuze tussen twee opties. Je kunt kiezen voor een blogplug-in binnen het WordPress-framework, een eenvoudige optie, maar met beperkte mogelijkheden op het gebied van gebruikerservaring. Bovendien wordt het geleverd met veel scripts die de website vertragen vanwege hun neiging om content online op te halen in plaats van lokaal. Een tweede optie is om de blog zelf te bouwen en deze via twee scripts te laten werken: één voor JavaScript en de andere voor PHP. Met behulp van AI koos ik voor de tweede optie.
Mijn kennis van programmeren is minimaal; ik ken de basis en begrijp de codefilosofie. Dat helpt als je aan het begin van het leerproces staat. Het is altijd al mijn wens geweest om te leren programmeren, en dat is ook de reden waarom ik al HTML en CSS via Bootstrap beheers. JavaScript en PHP zijn echter nog onbekende terreinen voor mij. Dus met hoopvolle ogen kijk ik naar ChatGPT-4, en voor een kleine 18 euro per maand kijkt het vriendelijk terug.
Het eerste wat ChatGPT-4 me aanraadde, was het aanmaken van een speciale blogpagina. Hartstikke logisch, want zonder zo’n pagina heb je geen blog. WordPress heeft ook een handige querycode voor zo’n pagina. Deze code bevat een eenvoudige loop die wordt geactiveerd als er blogposts op je website staan. Deze loop publiceert dan de content via hun ingebouwde ‘get’-functie in een rij, opgemaakt met HTML en gekoppeld aan je CSS-bestand.
ChatGPT-4 schrijft deze code nu voor mij, perfect geschreven en voorzien van annotaties, zodat ik niet verdwaal. Het is alsof je een permanent professioneel programmeermaatje bij je hebt dat je altijd graag wilt hebben.
Hier is een voorbeeld van wat het kan schrijven, aan het einde van deze artiekel zal ik de gehele code publiceren, wellicht kan het jezelf wegwijs maken bij het bouwen van je eigen modulen.
<?php
// WP_Query arguments
$args = array(
'post_type' => 'post',
'posts_per_page' => 10, // Pas dit aantal aan om het gewenste aantal berichten weer te geven
);
// The Query
$the_query = new WP_Query( $args );
// The Loop
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
// Hier kunt u de opmaak en inhoud van elk bericht aanpassen
echo '<h2><a href="' . get_the_permalink() . '">' . get_the_title() . '</a></h2>';
echo '<p>' . get_the_excerpt() . '</p>';
}
/* Restore original Post Data */
wp_reset_postdata();
} else {
// Geen berichten gevonden
echo '<p>Geen berichten gevonden.</p>';
}
?>
Wat doen we hier eigenlijk?
Aangezien dit voor mij ook een beetje nieuw is, zie ik dit ook als een mogelijkheid om zelf meer te leren over programmeren. Dus hier is een poging tot een kleine uitleg over het schrijven van PHP in WordPress.
Het is gebruikelijk om herbruikbare code of code die specifieke functionaliteit biedt, in een functie te plaatsen. Dit helpt om je code georganiseerd en modulair te houden. Zo’n functie kun je dan ergens anders oproepen, zonder hem opnieuw te schrijven. In het geval van het weergeven van blogberichten op een aangepaste pagina, kun je een functie maken in je thema’s functions.php en deze aanroepen in je aangepaste paginasjabloon. Hier is een voorbeeld van hoe je dit kunt doen:
<?php blog_display_posts(); ?>Deze plaats je dan in je HTML, en WordPress doet de rest door de code hier uit te voeren. En bam, zonder enige problemen werkt de functionaliteit feilloos.
Thumpnail erbij
Dit is niet het enige wat ontbreekt. In de huidige instellingen mis ik de mogelijkheid om een thumbnail toe te voegen en deze mee te nemen in de query loop. Het zit zo: ik bouw mijn eigen thema’s, wat me veel vrijheid geeft om aanpassingen te maken. Standaard biedt WordPress geen ondersteuning voor het toevoegen van uitgelichte afbeeldingen aan een blog. Om dit mogelijk te maken, voeg je de volgende code toe aan je functions.php-bestand: add_theme_support(‘post-thumbnails’); Deze code stelt me in staat om afbeeldingen als thumbnails toe te voegen, aangezien de functie voor het toevoegen van thumbnails standaard is uitgeschakeld in WordPress.
Nadat je zelf een afbeelding aan de publicatie hebt toegevoegd, wordt deze nog niet weergegeven op je blog. Dat komt omdat de huidige blogfunctie die ChatGPT-4 heeft ontwikkeld, nog niet is aangepast om afbeeldingen te presenteren. Dus ik vroeg, en AI leverde. Ik kreeg een nieuwe code die extra meta-informatie ophaalt, waaronder de afbeelding. Aan het einde van dit artikel zal ik de huidige code delen voor je gemak. Deze code haalt niet alleen de berichten op, maar toont ook de extra informatie voor elk bericht. Je kunt de code aanpassen om de gewenste gegevens op te halen en weer te geven op je blogpagina.
CSS mogelijkheid en paginering
Er doet zich echter nog een probleem voor. Mijn blogmodule kan niet worden gestyled, omdat dit via CSS-klassen gebeurt. Aangezien ik de blog niet bouw met HTML, maar dit automatisch laat gebeuren via PHP, is het noodzakelijk om deze klassen toe te voegen met PHP. En nu we toch zo goed bezig zijn met ChatGPT-4, zou ik ook graag een pagineringssysteem aan de blog willen toevoegen. Op die manier kan een gebruiker door de verschillende pagina’s bladeren.
Wederom zal ChatGPT-4 mij zonder aarzeling de benodigde code verschaffen. Tijdens het proces zijn er wel enkele bugs opgetreden, maar die hebben we op een interactieve manier opgelost. Dit gebeurde vaak door het delen van foutmeldingen die gevonden werden in de console. Meestal weet ChatGPT-4 daar wel raad mee. Straks meer hierover.
Een korrel Javascript erbij
Dit bevat alle PHP, maar er is nog een probleem. Wanneer je op een nieuwe pagina klikt, kom je terug bovenaan de blogpagina. Het probleem is echter dat je daar niet direct artikelen ziet. Je wilt graag dat de blog wordt bijgewerkt met zes nieuwe artikelen wanneer je het pagineringssysteem gebruikt. Dit is prettige feedback, want zo raak je het overzicht niet kwijt. Ook hier heeft ChatGPT-4 mij geholpen en voorzag mij van een stukje JavaScript. Deze code is optioneel, maar het scrollt de gebruiker subtiel terug naar de bovenkant van de blog query en voegt vervolgens de oudere artikelen toe. Hieronder zie je een deel van de code, maar aan het einde van deze post heb ik de volledige code voor je gedeeld.
// Gaat naar top van de blog module wanneer iemand op de pagina knoppen drukt
document.addEventListener('DOMContentLoaded', function() {
const paginationLinks = document.querySelectorAll('.pagination .page-link');
paginationLinks.forEach(link => {
link.addEventListener('click', function(event) {
event.preventDefault();
const href = event.target.getAttribute('href');
if (href) {
window.location.href = href;
scrollToBreadcrumbs();
}
});
});
});
function scrollToBreadcrumbs() {
const breadcrumbs = document.getElementById('breadcrumbs');
if (breadcrumbs) {
breadcrumbs.scrollIntoView({ behavior: 'smooth' });
}
}
Debuggen met ChatGPT-4
Allemaal heel mooi, zo’n stukje code. Maar het komt niet vanzelf tot stand. Je zult vaak met ChatGPT-4 moeten debuggen om fouten te herstellen. ChatGPT-4 is daar uitstekend in en werkt als een echte programmeur.
Ik loop vaak tegen foutmeldingen aan in de debugconsole van mijn browser, en die worden meestal begrepen door ChatGPT-4. Al snel komt er een reactie met een uitleg over wat er misgaat en een mogelijke oplossing. Soms werkt die oplossing echter niet en ga je door meerdere iteraties heen met verschillende creatieve oplossingen waarvan ik zelf nog nooit heb gehoord.
Een voorbeeld hiervan is hoe ChatGPT-4 een onbekende bibliotheek gebruikt om een specifiek probleem op te lossen. Of door verschillende alternatieve programmeeroplossingen te verkennen om een probleem aan te pakken. Als er nadelige gevolgen zijn, informeert ChatGPT-4 je daarover.
Ik heb zelfs meegemaakt dat ik code moest toevoegen die logboekregistraties aan de console toevoegt, zodat ChatGPT-4 überhaupt kon zien of de code wel werkte op mijn website. Soms gebruikt het professionele programmeertechnieken om problemen op te lossen en is het daarin zeer creatief.
Stukje geschreven code
HTML,
<!-- Blog module -->
<div class="container clearfix">
<div class="row-md">
<div class="col-md">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$the_query = mytheme_display_blog_posts($paged);
mytheme_pagination($the_query);
?>
</div>
</div>
</div>CSS,
/* Blog style */
.custom-thumbnail-class {
width: 400px; /* Verander dit naar de gewenste breedte */
height: auto;
}
.pagination{
display: -ms-flexbox;
display: flex;
padding-left: 0;
list-style: none;
border-radius: 0.25rem;
justify-content: center;
margin-top: 60px;
font-weight: 500;
}
.page-link {
position: relative;
display: block;
padding: 0.5rem 0.75rem;
margin-left: -1px;
line-height: 1.25;
color: #ffffff;
background-color: #003858 !important;
border: 1px none #dee2e6;
}
.page-link:hover {
position: relative;
display: block;
padding: 0.5rem 0.75rem;
margin-left: -1px;
line-height: 1.25;
color: #F39433;
background-color: #0a456c !important;
border: 1px none #dee2e6;
}
PHP, opgeslagen als function.php in root
// Enqueue script.js
function enqueue_myscripts() {
wp_enqueue_script('myscripts', get_template_directory_uri() . '/script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_myscripts');
//Blog Query
function mytheme_display_blog_posts($paged = 1) {
$args = array(
'post_type' => 'post',
'posts_per_page' => 6,
'paged' => $paged,
);
$the_query = new WP_Query($args);
if ($the_query->have_posts()) {
echo '<div class="row">';
while ($the_query->have_posts()) {
$the_query->the_post();
echo '<div class="col-md-6 fade-in">';
// Uitgelichte afbeelding
if (has_post_thumbnail()) {
the_post_thumbnail('post-thumbnail', ['class' => 'custom-thumbnail-class']);
}
// Berichttitel
the_title('<h2>', '</h2>');
// Auteur en datum
echo 'Datum: ' . get_the_date() . '<br><br><br>';
// Berichtinhoud
$excerpt = get_the_excerpt();
echo '<p class="pblack">' . $excerpt . '</p>'; // Voeg hier de class direct toe
echo '<hr>';
echo '</div>';
}
echo '</div>';
} else {
echo 'Geen berichten gevonden.';
}
wp_reset_postdata();
return $the_query; // Voeg deze regel toe om het query object te retourneren
}
//Paginering
function mytheme_pagination($the_query) {
$big = 999999999;
$pages = paginate_links(array(
'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
'format' => '?paged=%#%',
'current' => max(1, get_query_var('paged')),
'total' => $the_query->max_num_pages,
'type' => 'array',
));
if (is_array($pages)) {
echo '<nav aria-label="Pagination">';
echo '<ul class="pagination">';
foreach ($pages as $page) {
$page_with_anchor = preg_replace('/href="([^"]+)"/', 'href="$1#breadcrumbs"', $page);
echo '<li class="page-item">' . str_replace('page-numbers', 'page-link', $page_with_anchor) . '</li>';
}
echo '</ul>';
echo '</nav>';
}
}
//Blog functies
add_theme_support( 'post-thumbnails' );
Javascript opgeslagen als script.js in root
// Gaat boven de blog staan wanneer iemand op de pagina knoppen drukt
document.addEventListener('DOMContentLoaded', function() {
const paginationLinks = document.querySelectorAll('.pagination .page-link');
paginationLinks.forEach(link => {
link.addEventListener('click', function(event) {
event.preventDefault();
const href = event.target.getAttribute('href');
if (href) {
window.location.href = href;
scrollToBreadcrumbs();
}
});
});
});
function scrollToBreadcrumbs() {
const breadcrumbs = document.getElementById('breadcrumbs');
if (breadcrumbs) {
breadcrumbs.scrollIntoView({ behavior: 'smooth' });
}
}
