Jayj.dk » Tips & Tricks

5 WordPress tricks

Jesper — Mon, 29 Jun 2009 13:43:11 +0000

I denne uge har jeg gravet 5 WordPress tricks frem, som jeg vil dele med jer. Der er alt lige fra “shortcodes” til hvordan man gør sit tema oversættelse klar.

Mastering WordPress Shortcodes

WordPress Configuration Tricks

Brug custom taxonomies til at lave en filmdatabase

Fjern en kategori fra dit RSS Feed

Gør dit tema oversættelse klar

Kender du andre gode WordPress tutorials du vil dele med os andre? Så skriv en kommentar med linket til den

Kategori tag cloud

Jesper — Sun, 14 Jun 2009 14:03:58 +0000

Hvis du bruger WordPress kender du garanteret til “Tag cloud”, som er de mest bruge tags i sky-format. Afhængigt af hvordan din WordPress blog er oprettet, kan du have interesse i at vise dine WordPress-tags til dine læsere. Er du bare helt lost og aner ikke hvad jeg snakker om? Ta’ et kig på dette billede, så får du måske en idé om det!

Fra og med WordPress 2.8 som udkom for nogle dage siden er det nu ikke kun muligt at vise tags, det er også muligt at vise kategorier og link kategorier.

Dette er koden til den normale tag sky:

 wp_tag_cloud(''); ?>

Du kan læse i codexet om wp_tag_cloud

Hvis du går ned til taxonomy, kan du se at category er det der laver Kategori skyen

 wp_tag_cloud('taxonomy=category'); ?>

Lav en simpel hjemmeside på få minutter

Jesper — Mon, 01 Jun 2009 13:32:33 +0000

Sad forleden og kiggede på nogle tutorials på Net.tutsplus.com og CSS-tricks.com om hvordan de lavede “screencasts”… Fik selv lyst til at lave en simpel, super nedern en – Så det har jeg gjort

Det er nok en udmærket video for nye, da den hjemmeside er meget simpel. Selve videoen er på 8 minutter, og uden lyd – Så forbred dig på 8 kedelige minutter xD

Se i fuld størrelse

Opdatering 01/11:

Du kan nu downloade en opdateret version her

Download Simpel Hjemmeside
91 downloads

BBKode

Jesper — Mon, 11 May 2009 13:48:49 +0000

Som jeg lovede i mandags, vil jeg i dag skrive hvordan man tilføjer BBkode til gæstebogen (Det kan også bruges til andre ting). Du kender garanteret bbkode fra forums og lignende. Når du for eksempel vil skrive med fed tekst, skriver du [b]din tekst[/b] og det giver så resultatet “din tekst”

Niels Gamborg’s gæstebog
Se demo

I denne tutorial vil jeg gå ind over hvordan du får URL, fed, kursiv, understreget , gennemstreget, overstreget, farvet tekst, og smileys til at virke.
Lav en ny php fil, og kald den bbkode.php (lig den i samme mappe som din gæstebog fil)

Til at tjekke om brugeren har skrevet nogle bbkoder vil vi bruge “preg_replace”. Jeg er ikke ekspert til at forklare, så hvis du vil vide mere om det, kan jeg anbefale videoerne A Crash-Course in Regular Expressions og Diving into php day 7 – Begge af Jeffrey Way. Du kan prøve at google det for at få mere at vide.

Først skal vi lave en funktion.


function bbkode($text)
{
 
} 
?>

Først tjekker vi efter fed tekst. Hvis brugeren har skrevet [b]noget tekst og [/b], laver den dem om til html tagget strong, som giver fed tekst.


function bbkode($text)
{
      // Tjekker efter fed tekst
      $text = preg_replace("(\[b\](.+?)\[\/b])is",'$1',$text);
} 
?>

Det samme skal vi sådan set bare gøre for resten af vores bbkoder.


function bbkode($text)
{
         // Tjekker efter fed tekst
        $text = preg_replace("(\[b\](.+?)\[\/b])is",'$1',$text);
 
         // Tjekker efter [i] og [/i] Kursiv
        $text = preg_replace("(\[i\](.+?)\[\/i\])is",'$1',$text);
 
        // Tjekker efter [u] og [/u] Understreget
        $text = preg_replace("(\[u\](.+?)\[\/u\])is",'$1',$text);
 
        // Tjekker efter [s] og [/s] Gennemstreget
        $text = preg_replace("(\[s\](.+?)\[\/s\])is",'$1',$text);
 
        // Tjekker efter [o] og [/o] Overstreget
        $text = preg_replace("(\[o\](.+?)\[\/o\])is",'$1',$text);
 
        // Tjekker efter [color] og [/color] Farver teksten alt efter hvilken farve brugeren har indtastet
        $text = preg_replace("(\[color=(.+?)\](.+?)\[\/color\])is","\"color: $1\">$2",$text);
 
        // Tjekker efter [size] og [/size] Gør teksten større er mindre 
        $text = preg_replace("(\[size=(.+?)\](.+?)\[\/size\])is","\"font-size: $1px\">$2",$text);
 
       // Linjeskift med [br]
       $text = preg_replace("(\[br])is","
",$text);
} 
?>

Når vi kommer til links bliver det hele lidt mere kompliceret. Først skal vi tjekke om det rent faktisk er en url. Det er nok ikke den bedste måde at gøre det på, men det virker. Hvis du kender til en bedre metode, så skriv gerne en kommentar!

Bemærk: Du skal stadig skrive denne kode mellem { } (jeg har tilføjet det over den fede tekst)

// Er det en URL?
$URLSearchString = "a-zA-Z0-9\:\/\-\?\&\.\=\_\~\#\'";
 
$text = preg_replace("/\[url\]([$URLSearchString]*)\[\/url\]/", '$1', $text);
$text = preg_replace("(\[url\=([$URLSearchString]*)\](.+?)\[/url\])", '$2', $text);

Nu kan brugeren både skrive [url="http://jayj.dk]Tekst[/url] og [url]http://jayj.dk[/url]. Forskellen er at i den første kan man selv bestemme hvilken tekst linket skal have. Som du nok har set er der tilføjet target=”_blank” i linket. Det gør bare at linket åbner i et nyt vindue, bare fjern det hvis du ikke vil have det.

Du kan også tilføje smileys, men til det kan vi ikke bruge preg_replace. Vi skal bruge str_replace, fordi vi ikke bruger regular expressions. Læs mere om str_replace i PHP Manualen.
Du kan selvfølgelig tilføje mange flere smileys end det her.


// Tjekker efter smileys
$text = str_replace(":)","\"LINK TIL SMILEY\" />",$text);
$text = str_replace(":D","\"LINK TIL SMILEY\" />",$text);

Tilføj så

return $text;

lige før }

Sådan her ser det færdig script ud:

 
// BBkode af Jayj.dk
function bbkode($text)
       {
	// Er det en URL?
            $URLSearchString = "a-zA-Z0-9\:\/\-\?\&\.\=\_\~\#\'";
 
	// Udfører URL søgning 
            $text = preg_replace("/\[url\]([$URLSearchString]*)\[\/url\]/", '$1', $text);
            $text = preg_replace("(\[url\=([$URLSearchString]*)\](.+?)\[/url\])", '$2', $text);
 
            // Tjekker efter [b] og [/b] Fed
            $text = preg_replace("(\[b\](.+?)\[\/b])is",'$1',$text);
 
            // Tjekker efter [i] og [/i] Kursiv
            $text = preg_replace("(\[i\](.+?)\[\/i\])is",'$1',$text);
 
            // Tjekker efter [u] og [/u] Understreget
            $text = preg_replace("(\[u\](.+?)\[\/u\])is",'$1',$text);
 
            // Tjekker efter [s] og [/s] Gennemstreget
            $text = preg_replace("(\[s\](.+?)\[\/s\])is",'$1',$text);
 
            // Tjekker efter [o] og [/o] Overstreget
            $text = preg_replace("(\[o\](.+?)\[\/o\])is",'$1',$text);
 
            // Tjekker efter [color] og [/color] Farver teksten alt efter hvilken farve brugeren har indtastet
            $text = preg_replace("(\[color=(.+?)\](.+?)\[\/color\])is","\"color: $1\">$2",$text);
 
            // Tjekker efter [size] og [/size] Gør teksten større er mindre 
            $text = preg_replace("(\[size=(.+?)\](.+?)\[\/size\])is","\"font-size: $1px\">$2",$text);
 
	// Linjeskift med [br]
	$text = preg_replace("(\[br])is","
",$text);
 
	// Tjekker efter smileys
	$text = str_replace(":)","\"LINK TIL SMILEY\" />",$text);
	$text = str_replace(":-)","\"LINK TIL SMILEY\" />",$text);
	$text = str_replace(":D","\"LINK TIL SMILEY\" />",$text);
	$text = str_replace(":hihi:","\"LINK TIL SMILEY\" />",$text);
	$text = str_replace(";)","\"LINK TIL SMILEY\" />",$text);
	$text = str_replace(":roll:","\"LINK TIL SMILEY\" />",$text);
	$text = str_replace(":P","\"LINK TIL SMILEY\" />",$text);
	$text = str_replace(":ked:","\"LINK TIL SMILEY\" />",$text);
	$text = str_replace(":O","\"LINK TIL SMILEY\" />",$text);
	$text = str_replace(":o","\"LINK TIL SMILEY\" />",$text);
	$text = str_replace(":chok:","\"LINK TIL SMILEY\" />",$text);
             $text = str_replace(":evil:","\"LINK TIL SMILEY\" />",$text);
 
         return $text;
      }
?>

Nu har vi så lavet bbkode funktionen, men vi mangler at tilføje den til gæstebogen. Åben din gæstebog fil.

Find linjen

$foresp = mysql_query("SELECT navn, dato, besked FROM bog ORDER BY nr DESC"); //Data hentes i tabellen bog

Tilføj så denne lille kode ovenover. bbkode.php er filnavnet på bbkode filen, bare ændr den til det din bbkode fil hedder.

require 'bbkode.php';

Nu find linjen

echo nl2br($data["besked"]);     //nl2br = newline oversættes til html breaktag.

Skift den ud med

echo nl2br(bbkode($data["besked"]));

bbkode er navnet på vores funktion.

Download BBkode
142 downloads

Det var så dagens mandags tip om hvordan du tilføjer bbkoder til Niels Gamborg’s gæstebog. Hvis du har spørgsmål eller kommentarer, er du mere end velkommen til at skrive en kommentar. Du er mere end velkommen til at skrive idéer til andre tips!

Hvis du kunne lide tippet, og vil have flere så husk at Abonner på mit RSS Feed, hvor du også har mulighed for at få tippet leveret via mail.

PHP gæstebog

Jesper — Mon, 04 May 2009 13:38:24 +0000

Dagens mandags tip er hvordan man kan lave en PHP gæstebog. Jeg vil ikke skrive et tutorial til hvordan man gør, men derimod anbefale Niels Gamborg’s tutorial.

Scriptet er det samme som jeg bruger i min gæstebog, jeg har dog ændret lidt i den. Har blandt andet tilføjet muligheden for at bruge bbkode, og det er så det næste uges mandags tip handler om. Så glæd dig til i næste uge

Gæstebog scriptet består af 4 dele.

HTML-formular, hvor brugeren indtaster navn og gæsebogsindlæg
PHP script, der gemmer indholdet fra formularen i en database
PHP script, der der viser de tidligere indlæg på siden
MySQL script, der opretter den nødvendige tabel i din database

Linket til Niels Gamborg’s gæstebog script findes her

Så var så dagens ret korte mandags tip, men husk at følg med i næste uge, hvor jeg fortæller hvordan du tilføjer bbkode til den (måske også hvordan man næsten spamsikrer den)

“This video is not available in your country”

Jesper — Mon, 20 Apr 2009 15:46:09 +0000

Kender du det når du skal til at se en video på Youtube, og får beskeden:

This video is not available in your country

Der findes flere forskellige måder at omgå spærringen , og i dagens mandags tip vil jeg skrive om en af dem. Denne metode er faktisk utrolig simpel, det er bare at gå ind på hjemmesiden Hide My Ass!, tro det eller ej men Youtube.com står allerede skrevet i søgefelter

Tryk på knappen “Hide My Ass”, og så er der fuld drøn på videoerne

Du kan også finde andre metoder ved hjælp af en hurtig Google søgning.

Det var så dagens mandags tip. Hvis du har spørgsmål eller kommentarer, er du mere end velkommen til at skrive en kommentar. Du er mere end velkommen til at skrive idéer til andre tips!

Hvis du kunne lide tippet, og vil have flere så husk at Abonner på mit RSS Feed, hvor du også har mulighed for at få tippet leveret via mail.

Sæt lys på Facebook

Jesper — Sat, 18 Apr 2009 14:09:05 +0000

p>Mandags tippet i dag er måske ikke så brugbart, men sjovt er det nu
Faldte over en artikel på Noupe.com for nogle dage siden, hvor de fortalte om et fuldstændig ubrugeligt sjovt lille Facebook trick, der gør at når man klikker kommer der Lens Flare (lysglimt)

I får lige et billede af det – et billede forklarer jo mere end 1000 ord

For at få det til at virke skal du trykke:
Op, Op, Ned, Ned, Venstre, Højre, Venste, Højre, b, a, enter og klik

Ubrugeligt? Sjovt? Helt sikkert!

Mandags tippet: Send en stor fil super nemt

Jesper — Mon, 13 Apr 2009 18:07:18 +0000

Denne uges Mandags tip handler om, hvordan man kan sende en stor fil over nettet utroligt nemt.
Hjemmesiden Drop.io giver dig mulighed for at gemme store filer online i et år. Den er fulstændig gratis, og man behøver ikke engang at oprette en bruger

Når man kommer ind på siden, er der en boks hvor man kan vælge “Drop name”, som er adressen hvor alle ens uploadet filer er. Man har også mulighed for at uploade en fil med det samme, som kan fylde helt op til 100 mb! Man har også mulighed for at vælge kodeord, og hvornår filen skal slettes igen.

Det var så dagens mandags tip. Hvis du har spørgsmål eller kommentarer, er du mere end velkommen til at skrive en kommentar. Du er mere end velkommen til at skrive idéer til andre tips!

Hvis du kunne lide tippet, og vil have flere så husk at Abonner på mit RSS Feed, hvor du også har mulighed for at få tippet leveret via mail.

Mandags tippet: Flyt javascript ned til footeren

Jesper — Tue, 07 Apr 2009 13:28:17 +0000

Så er mandags tippet tilbage, godt nok lidt forsinket. Tippet i dag, er igen et tip man kan bruge, hvis man har en hjemmeside. Det handler om at man kan mindske loadtiderne på sine sider, ved at flytte sit javascript ned til footeren, istedet for i toppen. Du kan læse mere om det på Yahoo’s “Best Practices for Speeding Up Your Web Site”

Her er et eksempel på en side med javascriptet i toppen


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titel</title>
<script type="text/javascript" src="js/javascript.js"></script>
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</body>
</html>

Så flytter vi ganske simpelt javascriptet ned til bunden. Det vil ikke gøre alverdens lige i dette eksempel, men hvis du bruger meget javascript, kan det gøre en forskel.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titel</title>
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
 
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>

Hvis du bruger WordPress, kan du også sænke loadtiderne ved at lade vær med at loade et bestemt javascript, på sider der ikke behøver det. Det gør du med Conditional Tags

Hvis du kun vil loade et javascript på forsiden kan du bruge is_home()

 if(is_home()) { ?>

 }?>

Du kan se flere Conditional Tags på WordPress Codex siden, der handler om det.

Det var så dagens mandags tip, godt nok lidt forsinket. Hvis du har spørgsmål eller kommentarer, er du mere end velkommen til at skrive en kommentar. Du er mere end velkommen til at skrive idéer til andre tips!

Det var altså mandags tippet for denne gang. Hvis du kunne lide tippet, og vil have flere så husk at Abonner på mit RSS Feed, hvor du også har mulighed for at få tippet leveret via mail.

Mandags tippet: Centrer din hjemmeside

Jesper — Mon, 30 Mar 2009 13:26:47 +0000

I dag starter en ny “serie” her på Jayj.dk. Nemlig Mandags tippet. Hver mandag vil der komme et tip af mulige slags.

Dagens tip er til hvordan man får centreret sin hjemmeside. Det er en ganske simpel metode der bruges.

Lad os starte med en simpel side


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Min hjemmeside</title>
</head>
<body>
<h1>Min overskrift</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</body>
</html>

Hvor vi så har dette i vores css:

body {
	background: #ccc;
}

For at kunne få hjemmesiden centreret, skal vi have “rammet den ind”, som gøres ved at vi opretter en div rundt om indholdet.

Nu ser vores HTML sådan her ud:

<div id="ramme">
<h1>Min overskrift</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>

Det vi har gjort, er at vi har lavet en div, hvor side indholdet er. Den behøver selvfølgelig ikke at hedde ramme, men hvis du skifter ID navnet, skal du også huske at rette navnet i css’en.

Men siden er ikke centreret endnu. Det gør vi ved at tilføje følgende til vores css style

#ramme {
        width: 800px;
        margin: 0 auto;
}

Den første linje er det vi har kaldt vores ramme div. Width er bredden på siden, det skal du selvfølgelig rette til efter hvor bred din side skal være.
Margin: 0 auto; betyder at den er 0 px fra toppen og bunden og auto px fra venstre og højre.

I stedet kunne vi også bruge denne kode, men den første er mere simpel

#ramme {
	width: 800px;
        margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

Så skulle din side gerne være centreret. Hvis du har spørgsmål eller kommentarer, er du mere end velkommen til at skrive en kommentar. Du er også velkommen til at skrive idéer til andre tips!

Det var altså mandags tippet for denne gang. Hvis du kunne lide tippet, og vil have flere så husk at Abonner på mit RSS Feed, hvor du også har mulighed for at få tippet leveret via mail