Her er mine danske tutorials, der pÄ denne blog primÊrt handler om WordPress. Hvis du arbejder med WooCommerce, sÄ klik her: woo.thoth.dk
To videoer om den nye version af WP 6.7:
Den nye version af WP kommer selvfÞlgelig med en ny version af standardtemaet, som prÊsenterer de nyeste muligheder med WP. Uanset om du bruger standardtemaet eller noget andet, sÄ er det altid en god ide at sÊtte sig ind i nyhederne.
MÄl: ForstÄ de grundlÊggende principper for lys, vinkler og baggrund.
MĂ„l: LĂŠr at opsĂŠtte et mini-studio for professionelle billeder.
MÄl: ForstÄ hvordan styling pÄvirker prÊsentationen af produktet.
MĂ„l: Opret ensartede billeder til webshoppen.
MĂ„l: LĂŠr grundlĂŠggende redigering for webshops.
MĂ„l: Tag billeder med en smartphone og optimer dem til web.
Grid blokken giver nye muligheder for layout med et CSS-agtigt grid.
Medie og tekst blok
PrĂžv at sĂŠtte en bred border pĂ„ gruppen – og giv denne border samme farve som sitets baggrund!
I princippet handler onepagers om at navigere fra et link til et “anker” (anchor) pĂ„ en webside. Onepagers gĂžr dette pĂ„ en ekstrem mĂ„de. Som regel er ankeret en id i et element.
Du kan tilfĂžje et anchor ved at:
NĂ„r du vil navigere til et anker skal du lave et link. Du kan linke fra mange elementer, fx knapper, billeder, nogle markerede ord etc.
Lad os sige, at du kalder dit html anker hobbies. Da skal det link du laver pege pÄ det sÄdan:
Linket herover er relativt, dvs. en kort form. Hvis din WP-lĂžsning har flere sider, sĂ„ virker det relative link ikke fra andre sider eller indlĂŠg. Derfor vil jeg anbefale, at du bruger absolutte links i stedet for. Et absolut link er hele URL’en til siden eller indlĂŠgget med tilfĂžjelse af #hobbies, fx sĂ„dan:
https://thoth.dk/index.php/background-image/#hobbiesFordi at WP-lĂžsninger sjĂŠldent er rene onepagers, vil jeg anbefale, at du vĂŠlger de absolutte links frem for de relavite.
Knappens link ser sÄdan ud:
https://thoth.dk/index.php/2024/09/10/onepager/#gruOgGysSĂ„dan kan du eksportere dit tema. Resultatet er en *.zip som du kan importere i en anden WP installation og anvende som tema.
Ă bn > Udseende > Editor > “blyant-ikon” > “kebab” yderst og Ăžverst til hĂžjre. Et vindue Ă„bnes, og her trykker du pĂ„ Eksport.
Hvis du redigerer filen style.css – og ĂŠndrer temaets navn, sĂ„ vil WP opfatte dette som et nyt tema. Det er nok den hurtigste mĂ„de til at lave sit eget tema.
Og hvis du redigerer filen screenshot.png til noget, der ligner dit eget design – sĂ„ er det billedet man ser i Kontrolpanelet.
I mappen styles/ ligger en rĂŠkke JSON-filer. Hvis du kopierer en af dem – eller theme.json – og omdĂžber filen til noget andet, sĂ„ kan du lave dine egne varianter af temaets stilarter.
SĂ„dan kunne lĂžsningen se ud, nĂ„r du implementerer en karrusel fra W3 Schools i en “Tilpasset HTML” blok.
Herunder ser du indholdet i blokken "Tilpasset HTML":
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
</style>
<div>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://thoth.dk/wp-content/uploads/2024/01/witch-edited.jpeg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://thoth.dk/wp-content/uploads/2024/01/superwoman-coder-edited.jpeg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://thoth.dk/wp-content/uploads/2024/01/hugin-munin.jpeg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">âź</a>
<a class="next" onclick="plusSlides(1)">âŻ</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</div>
<script>
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>Kilde: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow
Twenty twenty-four bruger som standard templaten “Blog Home” som forside. Du kan definere din egen forside ved at tilfĂžje templaten “Front Page”
Videoen viser, hvordan “Front Page” laves. Videoen slutter med et website, hvor der stĂ„r “Hello World” – og det er sĂ„ forsiden. Resten er dit kreative design đ
