Hjemmesider.DK
DEMO Html5DEMO WORDPRESSDEMO WEBSHOP

Til dig der har en hjemmeside i WordPress el.lign. CMS, er der koder og termer, der kan være nyttige at have kendskab til.

Artiklen er opdateret den: 2. august 2024

Måske er du “gør-det-selv-personen”, der eksperimenterer i WordPress. Installerer plugins og temaer, prøver at forstå hvordan det hele virker.

Eller måske ønsker du, at kommunikere på et mere oplyst grundlag med din webudvikler, eller du er simpelthen almindelig videbegærlig – så kan denne gennemgang være for dig!

Koder til WordPress - HTML, PHP, CSS og Javascript

Web browser

Din web browser eller bare browser, er det program du benytter til at se hjemmesiden i, og  med WordPress også at arbejde i via dit administrations login kaldet “backend”. “Frontend” er det, den besøgende ser når vedkommende er på din hjemmeside. “Backend” er der hvor du som hjemmeside ejer, arbejder med indhold (content).

I dag benytter vi alle webbrowseren konstant og til mange forskellige opgaver. Går i banken, køber tøj, retter skatteoplysninger, ser film og lytter til musik og podcast, plejer vores sociale relationer etc. … den er en uundværlig del af livet i dag!
Vi har næsten glemt at browsere som Google Chrome, FireFox, IE Edge bare er “almindelige” programmer som Word, Excel og lignende.
Et program der skal vise HTML.

HTML

HTML, eller HyperText Markup Language, er et markup-sprog, der bruges til at skabe og strukturere indholdet på hjemmesiden.
HTML definerer strukturen på hjemmesiden ved hjælp af elementer og tags.
Disse elementer bruges til at specificere de forskellige dele af hjemmesiden, såsom overskrifter, afsnit, links, billeder, film, formularer etc.

En udførlig gennemgang af de enkelte HTML elementer og hvordan de bruges kan du læse om på developer.mozilla.org.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hjemmesidens navn</title>
</head>
<body>
    <main>
        <article>
            <header>
                <h1>En overskft</h1>
            </header>
            <p>Almindelige brødtekst ...</p>
        </article>
        <aside>
            <p>Indhold i sidebar ...</p>
        </aside>
    </main>
</body>
</html>

Ovenstående er en almindelige opbygning af en HTML5 side.

CSS

CSS, eller Cascading Style Sheets, er koderne der fortæller hvordan de enkelte HTML elementer ser ud.

Hvor på skærmen de printes, hvilken farve, form og størrelse de har.

Det er her, man som webdesigner bruger mest tid og kreativitet. HTML har en fast struktur og opbygning, mens CSS koderne har “spræl, liv og kunstneriske muligheder”.

main {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    max-width: 1440px;
    padding-inline: 2rem;
}

Ovenstående CSS eksempel opsætter siden så article og aside står pænt ved siden af hinanden.

Javascript

Javascript er et programmeringssprog, der primært bruges til at skabe interaktion mellem den besøgende og selve hjemmesiden.
En formular udfyldes, men et af de “påkrævede” felterne mangler. Her er det Javascript, der kan vise beskeden: “Husk at udfylde alle felter i formularen!”.

Al interaktion uden at hjemmesiden reloader behandles af javascript.

Javascript kan samtidig benyttes til dynamiske elementer på hjemmesiden.
Før CSS blev et så stærkt programmeringssprog som det er i dag, blev mange dynamiske ændringer og effekter på hjemmesiden “udført” af javascript.

I dag møder du som almindelig bruger mest javascripten i interaktion eller som lightbox, slider og lign. visninger.
Et område hvor CSS mere og mere bliver brugt!

Javascript er dog på ingen måde “fortrængt” af CSS, da det i dag benyttes til langt større og mere komplicerede opgaver end at animere elementer på en hjemmeside.

<script>
function menuFunction() {
  var nav = document.getElementById("menu");
  if (nav.style.display === "block") {
    nav.style.display = "none";
  } else {
    nav.style.display = "block";
  }
}
</script>

Javascript eksempel til at vise og skjule mobil-menu

PHP

Din WordPress hjemmeside kræver kodesproget PHP installeret på dit webhotel.

Det er PHP (Hypertext Preprocessor) som sender (printer) tekst og HTML strukturen til browseren.

Når du klikker på et link eller et menupunkt, er det PHP koden der læser i databasen via SQL (Structured Query Language)  hvilke tekst og HTML elementer, den nu skal vise for dig.
Klikker du eksempelvis på menupunktet “Kontakt”, henter PHP fra databasen tekst og HTML struktur, der tilsammen udgør kontakt siden.

Modsat den almindelige HTML løsning hvor du indlæser et helt nyt dokument (HTML fil), når du klikker på et link. Kan man populært sige, at med din WordPress hjemmeside findes der kun en enkelt side, hvor indholdet udskiftes alt efter hvilket link du klikker på.
Det er PHP sammen med databasen der udfører denne opgave.

<?php
if (have_posts()): while (have_posts()): the_post();
    $classes = get_post_class('', $post->ID);
    echo '<article id="post-' . get_the_ID() . '" class="' . esc_attr(implode(' ', $classes)) . '" >';
        if (has_post_thumbnail()) {
            echo '<a href="' . get_permalink() . '" aria-label="' . get_the_title() . '">';
            the_post_thumbnail();
            echo '</a>';
        }
        echo '<h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>';
        the_excerpt();
    echo '</article>';
endwhile;endif;
?>

Et eksempel på et WordPress Loop

Database

Databasen er “hjernen” i WordPress hjemmesiden, hvor alt dynamisk indhold og indstillinger gemmes. 

På dit webhotel vil det typisk være en MySQL database, der er installeret. MySQL er et populært open source relationel-database-system, der bruges til at gemme, organisere og hente data.

Databasen er opdelt i tabeller hvor indholdet gemmes. Her er en kort beskrivelse af de vigtigste tabeller:

  1. wp_posts: Indeholder alle typer af indhold, såsom indlæg, sider, vedhæftede filer, revisioner og brugerdefinerede posttyper.
  2. wp_postmeta: Indeholder metadata for indhold gemt i wp_posts. Metadata kan inkludere brugerdefinerede felter og ekstra oplysninger om hvert indlæg eller side.
  3. wp_users: Indeholder oplysninger om registrerede brugere af webstedet, inklusive brugernavne, krypterede adgangskoder og e-mailadresser.
  4. wp_usermeta: Indeholder metadata for brugere, som kan inkludere brugerdefinerede profiloplysninger og andre brugerindstillinger.
  5. wp_terms: Indeholder termer for taksonomier som kategorier og tags, der bruges til at organisere indhold.
  6. wp_term_taxonomy: Beskriver forholdet mellem termer i wp_terms og de taksonomier, de tilhører.
  7. wp_term_relationships: Angiver forholdet mellem indhold (i wp_posts) og termer (i wp_terms).
  8. wp_options: Indeholder mange af webstedets indstillinger og konfigurationsoplysninger, såsom websitets URL, tidszone, og aktiverede plugins.
  9. wp_comments: Indeholder kommentarer fra besøgende til indlæg og sider.
  10. wp_commentmeta: Indeholder metadata for kommentarer.

Disse tabeller er standard, men plugin og temaer du installere, vil typisk tilføje nye tabeller til databasen.

Webhotel

Du gemmer alle dine filer på et webhotel. De ca. 3.300 WordPress filer, dine billeder, pdf- og Word-filer, plugins du installere etc.
Det lyder voldsomt, men de tager faktisk ikke meget plads på serveren.

Nogle hosting udbyder reklamer ligefrem med hvor meget plads, du kan få på deres webhotel. Lad dig ikke narre af dette salgstrick. Der er langt vigtigere processer på webhotellet end størrelsen på lagerplads til filerne!

Det er også på webhotellet, at din database findes. Databasen som WordPress gemmer alle sine informationer i.

Derudover varetages domæne håndteringen og du har eksempelvis mulighed for at oprette E-mails og tilknytte et SSL certifikat … hvilket i dag er et “must”!

↑