Here is an introduction to templates for beginners from WordPress TV.
Author: Per Thykjaer Jensen
-
WordPress Templates
WP TV. -
JSON Array in WP
This page is a demonstration of the turotial “JSON Band List”. Here the contents of the JSON band list is looped out in my post.
-
Rellax – in practise
Here is a parallax effect made via the Rellax library. Here is the recipe:
- Add the divs that you want to animate.
- At the bottom of the page add the Rellax Library
Also see this page. There you’ll see the actual code.
Images
Convert the image to HTML and add the relevant data.
Rellax in a cover block
-
Parallax Effects by Rellax Js
Demonstration of the Rellax Js Library.
Per’s Rellax Tutorial (ca. 7 minutes) 
Stray <p> tags
If you have whitespace in the code WP will add <p> tags, and such tags may ruin you JavaScript – or at least throw errors in the console. This will happen as soon as you save the page or post. This is most annoying.
That’s why there is no space between the tags in the code above.
In your editor you can install a plugin that will remove whitespace in the code.
You can animate any HTML element, be it <p>, <img>, <article>, <figure> etc.
-
ChatGPT is Not Cheating
On the contrary. It’s desk research – plain and simple! In order to get a good result you must be able to write a high quality prompt. However, if you use Chat GPT state your source as you would with any source.
Chat GPT: cheat or …?
I just had to try. Is ChatGPT able to program a simlpe gallery in jQuery? Since I need a sample like that for a programming class the anwer could come in handy.
I asked for a gallery of five images. At first each image got a <div> with an image tag inside.
Then I rephrased the prompt, and asked for an array of five images, and got a far better result. The improved prompt was:
“create a jquery script that will create a gallery on a web page from an array with five image names“
A few seconds later the answer was ready. Here is a proof of concept. I copied the code to jsFiddle, however I’ve reduced them number of images to four for aestetic reasons:
Chat GPT seems like a fine resource for programmers. After the code there is a fine explanation, how the thing works. Which is fine if you want to understand the details.
“In this example, we’re using jQuery to create a gallery from an array of image names. We first set up the HTML and CSS to create a container for the gallery.
Then, in the jQuery script, we create an array of image names. We also create the overlay container and an image element to show the full-size image when the user clicks on an image. We append these elements to the body of the document.
We then use the jQuery
each()function to loop through the array of image names. For each image, we create a new image container element and set itssrcattribute to the corresponding image name. We also add a click event handler to each image container element to show the overlay with the full-size image when the user clicks on it.Finally, we attach a click event handler to the overlay container. When the user clicks on the overlay container, we remove the
activeclass to hide it again.By adjusting the CSS, you can customize the appearance of the gallery to your liking.” [Code explained by Chat GPT, prompt op.cit.]
The images were added from my experiments with the image AI Stable Diffusion.
Chat GPT and studies
It’s hardly a secret that Chat GPT is a debated subject among teachers and students. According to some journalists you could even pass an exam in Law via Chat GPT.
How does Chat GPT see it’s role in the classroom? I asked and the answer was surprisingly usefull:
“As an AI language model, my purpose is to assist users in generating human-like responses to their inquiries or prompts. However, using me to write essays or school reports without understanding the topic or doing the necessary research may be considered cheating, as it does not reflect the student’s own effort or understanding of the subject matter.
It is essential to keep in mind that while I can provide useful information and suggestions, students should use the information provided by me as a tool to aid them in their research, writing, and learning process. It is always best to use your own words and ideas to showcase your understanding of the subject and demonstrate your skills and knowledge.
Therefore, the use of ChatGPT should be considered as a supplementary tool and not a replacement for personal learning and research.
To use Chat GPT as a research tool or as a starting point makes sense. Today noone would hardly care if Duckduckgo or Google were used during a desk research phase. On the contrary: it’s expected. For programmers Google is a very useful tool.
If you find a good source by search engines they are used as sources and added to the source list, in footnotes and so on. According to academic method Chat GPT is a source among sources. If it’s used for research and inspiration you should mention it in a footnote, e.g. if you’re inspired by the Harward Mehtod in the sources list you could add the source along these lines, [Chat GPY, prompt: “is the use of chat gpt considered cheating for studies or school reports”, 2023 February 25th]
Now the prompt is important, since that’s what give you the answer from Chat GPT. As a coder you should know, that the answer’s quality depend on a combination of your ability to pose the correct question. There is also an element of randomness. If you ask the same question again you will not always get the same answer.
The case with my code for a jQuery above is a good sample. Since I know how to code the first result was not good. However, when my question was rephrased – the answer became more usefull. The quality of the answer depends on the quality of what’s in the prompt.
A clever student will get better answers.
In the future I believe that different AI services will compete. Probably the writing of good prompts will be an essential skill for anyone who works with code or academic research. After all you need to be critical towards anything returned by the Chat GPT prompt. You have to compare and choose the best results. And that’s good old Desk Research …
-
Plugins
Her er nogle af de plugins, jeg bruger ofte:
- Stock Photos (frit tilgængelige billeder): Pexels, Dall E2
- Backup: WP Migrate (træls a Pro versionen kræve så snart man får brug for en backup!)
- W3 Total Cache
- SEO: Yoast eller Slim SEO
- Formularer: Seven Forms, Ninja forms, m.fl.
- Image Optimize: EWWW Image Optimizer
- Blocks Animation: CSS Animations for Gutenberg Blocks
Det er altid vigtigt at have en god backup strategi. Test om det virker inden det er for sent 😉
-
Sådan laver du et WordPress site – en opskrift
Formålet med dette kursus er at bygge en WordPress løsning uden kode. Alt indhold og design skabes ved hjælp af den indbyggede editor Gutenber – suppleret med få plugins.
1) Struktur
Først skal den grundlæggende struktur på plads. Opret de sider, som du får brug for i din informationsarkitektur. Husk, at der skal være en side til indlæg, hvis du har en nyhedsside / blog.
Under Indstillinger / Læsning kan du vælge den side, der skal være din forside. En typisk gårdbutik kan bestå af flere sider, fx:
- Forside
- Kontakt
- Om os
- Butik
- Find vej
- Nyheder
- etc.
2) Farver, Fonte, Layout
Websidens udtråling af elegance eller andre stemninger defineres af farver, fonte og layoutet. Farver hænger sammen med sindstilstande. Vælg et antal farver, som passer til din målgruppe / persona.
Skrifttyper gør noget lignende. Skrifttyper udstråler noget moderne, gammeldags, smart og så videre. Vælg to max tre skrifttyper, og brug dem konsekvent overalt.
Meget bliver lettere, hvis du tidligt beslutter dig for farver, skrifttyper (fonte) og layoutet. Her går du ind i “Rediger Websted” og klikker på den runde sorthvide ikon. Nu kan du redigere baggrundsfarver for hele webstedet. Du kan også gå ind i den enkelte blok og sætte de font, farver mv. som passer med dit design.
3) Navigation
Opret en eller måske flere menuer – både med links til dine sider og til sociale medier.
Navigation skabes på mange måder:
- Menuer
- Sociale Medie ikoner
- Knapper
- Links
- Interne links
Formålet med disse navigationen er at det skal være let for brugeren at finde informationer. Det kan være en styrke, hvis der er flere veje til den samme information.
4) Skabeloner: Header og Footer
De fleste skabeloner består af:
- Header
- Indhold
- Footer
Men, der er undtagelser. Nogle sider kan få deres helt selvstændige design. Det er vigtigt, at brugeren aldrig mister fornemmelsen for at være på det samme website.
Nu kan du lave et antal skabeloner til din webside. Det sker i “rediger websted”. Husk, at dine sider skal knyttes til en skabelon.
Header og footer designes. Husk at bruge sitelogo blokken, så dit logo vises ens overalt. Hvis du bruger den, så bliver billedet samtidig til det lille logo, der vises i websidens faneblad.
6) Indhold
Når den overordnede struktur er på plads, så begynder det virkelige arbejde. Nu skal du lave indholdet. Hver eneste side skal være gennemarbejdet; men husk, at du altid kan vende tilbage og forbedre det du har skabt.
7) Fortsæt …
En webside er aldrig færdig. Hvis du har en nyhedsside, så skal den opdateres jævnligt. Prøv at finde en rytme for publicering af dine indlæg.
-
Landkort
Kort er nyttige for brugeren, der skal finde vej til din adresse. Mange websites bruger Google Maps; men der er bedre alternativer.
Landkort indsættes som regel ved at finde en position på et landkort. Hvis du leder lidt, så findes en “embed” mulighed.
Google Maps
- Find den ønskede position
- Klip på del
- Vælg “Integrer et kort”
- Klik på “Kopier HTML”
- Indsæt en “Tilpasset HTML” Blok
- Indsæt koden i blokken
- Gem siden
Du ser umiddelbart bare noget kode-hejs; men prøv at se siden i forhåndsvis!
Hvis kortet karter ud mod siden, så prøv at lægge et <p> foran og et </p> bagved. Så opfører kortet sig som et tekstafsnit.
OpenStreetMap
Er udviklet af brugerne, og i modsætning til Google m.fl. trackes besøgende ikke. OpenStreetMap bruges især af nyhedstjenester, TV, vejrtjenester fra DMI mv.
Kortet indsættes også ved at klikke på “Del” og derefter vælger du HTML, der igen indsættes som “Tilpasset HTML”.
TIP: Ikonen som markerer positionen kommer frem, når vælger tilføj markør. Du kan trække markøren hen til en pasende position, hvis den rammer lidt skævt.
-
Effekter
Hvorfor bruger vi animationer?
Plugin: “Blocks Animation: CSS Animations for Gutenberg Blocks”
Overdreven brug af effekter kan være mega irriterende. Til gengæld kan de små bevægelser aktivere menneskets “jagtinstinkter” og henlede opmærksomheden på noget.
