WPDK » Hacks

WordPress menu limit – vil ikke vise mere end 15 eller 16 links

Brian Brandt — Wed, 16 Nov 2011 08:40:04 +0000

Du kan efter WordPress 3.0 komme ud for, at det nye WordPress custom menu system brokker sig når du kommer over 15 eller 16 punkter.

Det har jeg ofte oplevet på shared hostings, som fx unoeuro, surftown eller de andre lavpris webhoteller. Det er faktisk bare et lille quickfix der skal til.

Du skal logge på dit webhotel, så du kan ændre i dine filer. Du skal have fat i filen:

.htaccess

Tilføj disse to linier:

php_value suhosin.post.max_vars 2048
php_value suhosin.request.max_vars 2048

Og så er du klar til at tilføje alle de menu punkter du vil.

Relaterede indlæg:

Sådan laver du en dropdown-menu i wordpress Dropdown menuer til WordPress er blevet meget populære, og det...
Hvad man kan, og ikke kan med WordPress Jeg hører flere og flere gange at folk brokker sig...

Fed baggrund til din hjemmeside

Casper — Thu, 30 Jun 2011 11:38:10 +0000

For at gennemgå denne guide bør du have en basal viden inden for HTML og CSS.

I denne guide vil du lære at lave en dynamisk baggrund til din hjemmeside, kun ved hjælp af CSS. Jeg vil forsøge at skabe følgende hjemmeside.

Denne effekt er kendt under navnet: css parallax effect.

Se eksempel her

(Prøv at resize vinduet)

De to baggrunde på denne side vil flyde mod hinanden når man resizer browser-vinduet.

Den basale opsætning:

Start med at sætte selve siden op. Du skal bruge body-tagget og et div-tag inden I body-tagget, som fylder hele bodyen for at skabe to modstridende effekter. Selve HTML-koden for baggrunden kunne se således ud.






Fed css baggrund

Dertil følgende CSS-kode.


body {

width: 100%;

height: 100%;

margin: 0; padding: 0;

background: #cceeff url('images/fugle.png') repeat-x -70% 0;

}

#bg_effect {

width: 100%;

height: 50px;

position: absolute;

bottom: 0;

display: block;

background: url('images/grass.png') repeat-x 200% 0;

}

Først sørger vi for, at body-tagget fylder hele browser-vinduet. Det gør vi ved hjælp af width(bredte), height(højde) og margin/padding (margen).

Så fortæller vi, at den skal hente et billede (fugle) fra mappen images og lægge den ind som baggrund. Vi fortæller den også, at billedet skal gentage sig selv på x-aksen, dvs. kun horizontalt. Igen gælder det samme for bg-effect-div-tagget.

De sidste to tal bestemmer billedets position/placering på siden. Det første tal bestemmer den horizontale (vandrette) placering og det andet tal den verticale (lodrette) placering.

Ved at give baggrunds-billedet i body-tagget en horizontal placering på en negativ procentsats, fortæller vi den, at den skal forholde sig til højre side og derfor bevæge sig modsat af den vej vi resizer vores browser-vindue.

Vi giver så det ander baggrundsbillede en positiv procentsats, for at den skal bevæge sig samme vej som vi resizer browser-vinduet (bare hurtigere end vi gør det).

Forvirret? Bare rolig, du er lige ved at være der.

Nu skal du lave de to billeder du gerne vil have til at bevæge sig mod hinanden.

Jeg har valgt følgende billeder.

(billederne må gerne kopieres til brug i test af parallax effekten)

Jeg ligger dem så ind i min image-mappe, og woila! Nu virker det som det skal…

Du kan se flere eksempler på denne effekt her:

http://haven-online.dk/

http://demo.marcofolio.net/a_parallax_illusion_with_css/

http://css-tricks.com/examples/StarryNight/

http://dromaeo.com/

http://www.sitepoint.com/examples/stretchy/test.php

http://www.silverbackapp.com/

Ingen relaterede indlæg.

Sådan laver du en dropdown-menu i wordpress

Casper — Tue, 14 Jun 2011 13:49:18 +0000

Dropdown menuer til WordPress er blevet meget populære, og det er efterhånden sjældent du ikke finder en hjemmeside med en dropdown i navigationen. Ofte kræver de en masse javascript, men det er faktisk ikke nødvendigt. Herunder vil jeg nu vise trin for trin hvordan du laver en dropdown menu til WordPress.

Trin 1 – Aktiver wordpress standardmenu

For at gøre det muligt, at bruge wordpress’ integrerede standardmenu, skal du indsætte følgende kode i functions.php filen i din tema-mappe.


register_nav_menus( array(
'primary' => 'Primary Navigation'
)	);

Vær opmærksom på, om koden ligger der i forvejen. Koden må ikke være ens to steder.

Ønsker du at have mere end en wordpress menu, kan du gøre det i samme kode. Du skal bare tilføje en ny key i dit array.

Det kan for eksempel se således ud.


register_nav_menus( array(

'primary' => 'Primary Navigation'

'secondary' => 'Secondary Navigation'

)	);

På den måde kan du faktisk tilføje så mange menuer du ønsker.

Trin 2 – Indsæt menuen i dit template

I langt de fleste tilfælde, ligger menuen i header.php. Men du kan lægge den lige hvor du synes den skal være. Start derfor med at åbne den fil din menu skal ligge i.

Find da det sted i filen den skal ligge og læg den evt. ind i en div-container, så du kan give din menu en seperat styling.

Du skal bruge følgende kode for at kalde menuen.


 'primary' ) ); ?>

Dette indsætter menuen “Primary Navigation” i din php fil. Ønsker du at indsætte en anden menu skal du bare ændre ‘primary’. Eksempelvis:


 'secondary' ) ); ?>

Trin 3 – Style din menu (før dropdown)

Nu til selve stylingen af din menu. Her arbejder vi med css i din temafil “style.php”.

Lad os antage, at du har kaldt din parent-div for “menu”. Så ser din kode således ud:

'primary' ) ); ?>

Du kan nu i stylingen lave et seperat afsnit af css-koder, kun til menuen.

Start med at target selve parent-div’en i din css.


#menu {

}

I din menu, bliver der automatisk indsat en parent-div til de uordnede lister (ul) og dens list-items (li). Denne parent-div har classen “menu”, som standard. Derfor skal du bruge følgende css-selectors, for at style din menu (vi kommer til dropdown-stylingen i trin 5).


#menu {}

#menu .menu {}

#menu .menu ul {}

#menu .menu ul li {}

#menu .menu ul li a {}

Du kan også, for at lave en dynamisk styling bruge følgende css-selectors.


#menu .menu ul li:hover {}

#menu .menu ul li a:hover {}

De påvirker hvert menu-element, når du bevæger cursoren hen over.

Trin 4 – Et hurtigt eksempel på styling

Hvordan din styling skal være, afhænger 100% af dit design.

Med denne opstilling kan du både lave horisontale og vertikale menuer.

Jeg vil derfor blot give et hurtigt eksempel på, hvordan en menu kunne styles.

Jeg ønsker at opnå følgende resultat.

Med følgende kode.


#menu {

width: 100%;

height: 40px;

padding: 10px 40px;

background-color: #333;

}

#menu .menu {

}

#menu .menu ul {

list-style: none;

}

#menu .menu ul li {

list-style: none;

height: 40px;

margin: 0 8px;

display: inline-block;

}

#menu .menu ul li a {

color: #fff;

font: 18px Arial, sans-serif;

text-transform: uppercase;

text-decoration: none;

}

#menu .menu ul li:hover {}

#menu .menu ul li a:hover {

color: #ff3333;

}

Trin 5 – Dropdown

Din dropdown funktion er allerede sat ind i den kode, du satte ind i trin 1.

Den skal faktisk bare styles.

Din dropdown-menu ligger som en uordnet liste med classen “children”, under den uordnede liste, som ligger i forvejen.

Det er altså sat op på følgende måde.




	Hovedmenupunkt
	Hovedmenupunkt
	Hovedmenupunkt

	Undermenupunkt
	Undermenupunkt
	Undermenupunkt

Du skal derfor bruge følgende css-selectors til at style din dropdown.


#menu .menu ul ul {}

#menu .menu ul ul li {}

#menu .menu ul ul li a {}

VIGTIGT!

Det er en god idé, ikke at have dropdown på, hele tiden. Dette kan klares med en display-none.

Det vil se ud på følgende måde i css’en.


#menu .menu ul ul {

display: none;

}

Nu skal du jo selvfølgelig have kaldt din dropdown frem, hver gang du flytter cursoren hen over et element.

Dette gøres med følgende kode.


#menu .menu ul li:hover > ul {

display: block;

}

Igen kan du selvfølgelig bruge hover-selectors til at lave en dynamisk menu.


#menu .menu ul ul li:hover {}

#menu .menu ul ul li a:hover {}

Du kan altid indsætte et trin mere til din dropdown, ved at indsætte en “ul” mere i din css-selector.


#menu .menu ul ul ul {}

#menu .menu ul ul ul li {}

#menu .menu ul ul ul li a {}

Trin 6 – Et eksempel på dropdown

Jeg prøver at opnå dette.

Med denne kode.


#menu .menu ul ul {

display: none;

}

#menu .menu ul li:hover > ul {

display: block;

}

#menu .menu ul ul {

background-color: #666;

width: 200px;

position: relative;

top: 13px;

margin-left: -15px;

padding: 2px;

}

#menu .menu ul ul li {

height: 20px;

width: 190px;

margin: 0;

padding: 5px;

}

#menu .menu ul ul li:hover {

background-color: #fff;

}

#menu .menu ul ul li a {

color: #fff;

font: 12px Arial, sans-serif;

text-transform: uppercase;

}

#menu .menu ul ul li:hover > a {

color: #333;

}

Trin 7 – Active elements

Din wordpress menu har en funktion, der kan give en anden farve til det menu-punkt du allerede befinder dig på.

Dette gøres med følgende classes.


current_page_item

current-menu-ancestor

current-menu-item

current-menu-parent

For eksempel.


#menu .menu ul li.current_page_item > a,

#menu .menu ul li.current-menu-ancestor > a,

#menu .menu ul li.current-menu-item > a,

#menu .menu ul li.current-menu-parent > a {

color: #ff0000;

}

God fornøjelse med at lave din egen dropdown menu til WordPress. Nu skal du bare tilføre dine egne farver, typografier og størrelser.

Relaterede indlæg:

WordPress menu limit – vil ikke vise mere end 15 eller 16 links Du kan efter WordPress 3.0 komme ud for, at det...
Vis alle indlæg fra en kategori på en side Dette er en af de ting, som jeg ikke har...

Footer der forbliver i bunden

Martin — Tue, 30 Nov 2010 11:52:20 +0000

At lave design der virker crossbrowser, kan til tider være lidt af en opgave. Tit er det de små marginaler der gør en forskel – og andre gange er man nød til oprette et individuelt stylesheet, der refererer specifikt til en bestemt browser.

Jeg stødte forleden på lidt af en opgave, da jeg skulle formå at lave en footer der forblev i bunden, ligegyldigt hvilken højde den øvrige side havde. Det tog sin tid at knække den nød, og jeg har derfor valgt at dele den metode jeg nåede frem til, i håb om folk kan nyde godt af det ved en senere lejlighed.

Problemet

Nu skriver jeg godt nok “Problemet”, men for de fleste hjemmesider er dette ikke et problem, da der for det meste er nok indhold til at fylde et helt skærmbillede. Men er det ikke tilfældet, vil din hjemmeside højest sansynlig se ud som eksemplet forneden.

Se eksempel her.

Løsningen

Vi starter ud med at bygge det grundlæggende HTML op. Sørg for at alt er inden for #wrapper. Undtagen #footer
Dit HTML vil derefter se således ud.


    Header
    Content

Footer

Nu hvor det grundlæggende HTML er på plads, så lad os kigge lidt på CSS-delen.
Først bliver vi nødtil at definere body og html tags med en height på 100%. Det gøres således.

html, body {
     height: 100%;
}

Når det er gjort, skal vi have fat i vores #wrapper. Her definere vi en min-height på 100%, og en margin-bottom på -200px. Som det sidste sætter vi position til relative.

#wrapper {
    min-height: 100%;
    margin-bottom: -200px;
    position: relative;
}

Grunden til vi sætter margin-bottom til -200px, er for at overskrive footeren (som vi kommer til om lidt). Normalt er minus-værdier lidt af et tabu, og jeg bruger det sjældent da det kan giver problemer i de forskellige browsere. Så hvis det kan undgås, hold jer fra det.

Nu skal vi så have fat på footer. Vi starter med at definere height til 200px. Derefter sætter vi position til relative. Det vil se cirka sådan her ud.

#footer {
    height: 200px;
    position: relative;
}

Nu skulle man tro vi var færdig. Vi har defineret de forskellige punkter, udlignet minus værdierne, og positioneret elementerne. Men for at denne metode skal virke, er der endnu en lille ting vi skal ordne først. Der er tale om et såkaldt fix eller et hack. Dette er endnu en af disse FY FY-metoder, som folk tyr til, for at gøre et site crossbrowser-compatible. I dette tilfælde, er det for at udligne bunden, så den ikke overskriver vores indhold på siden.

Først opretter vi endnu en div inde i vores #wrapper. Den div giver vi en class som vi kalder for clearfooter.


    Header
    Content
    


Footer

Derefter åbner vi vores stylesheet og tilføjer definerer clearfooter. Vi ligger ud med at give den samme height som vores footer (200px). Dernæst clear:both for at reset enhver float-værdi.

.clearfooter {
     height: 200px;
     clear: both;
}

Du skulle nu have en footer som forbliver i bunden. Se eksempel.

Denne løsning virker i alle browsere (Internet Explorer 7.0 og op efter).

Ingen relaterede indlæg.

Tekster på flere sprog med qtranslate

Brian Brandt — Fri, 27 Aug 2010 06:00:58 +0000

Jeg er tit ude for at kunder gerne vil have deres hjemmeside på flere sprog, og det er der ofte god mening med. Specielt hvis man har kunder der enten kommer fra udlandet, eller de danskere der ikke læser dansk ligeså godt som de læser engelsk.

Grunden til jeg lige skriver dette indlæg nu, var fordi jeg så en anbefale qtranslate som et godt plugin. Jeg var egentlig i gang med at skrive en kommentar derovre, men den blev så lang, at jeg tænkte den måtte jeg hvis skrive her i stedet og uddybe lidt ekstra. Man skal nemlig passe på med det plugin.

Du kan læse mere og finde qtranslate plugin her.

Problemer med qtranslate

qtranslate kan skabe nogle gevaldige problemer for dig, hvis du ikke passer på.

Det er meningen at den skal lave nye adresser kun når man har skrevet noget i de andre sprog fanblade, men jeg har oplevet at den alligevel laver nye adresser med fx dansk. Det vil sige du får http://domæne.dk/web.html og http://domæne.dk/en/web.html med nøjagtig samme indhold – altså duplicate content.

Det var faktisk ret kritisk på en enkelt blog hvor det blev brugt – der var duplicate content overalt.

En anden ting ved det plugin er også, at alle widgets og “statiske” elementer ikke blive oversat – og du skal lave et lille hack manuelt på de statiske elementer.

Hvis elementer er sat ind igennem widgets, har du problemet, så kan de typisk ikke oversættes.

Så qtranslate skal bruges med omhu og nok mest hvis det kun er tekster der oversættes, og ikke hele siden. Der vil jeg i stedet anbefale man laver en installation mere på et subdomæne. Det giver en lang større frihedsgrad til at designe og oversætte elementer udenfor de gængse ting du benytter i WordPress. Ja, det giver en smule ekstra arbejder når du skal skrive artikler, da der skal logges ind flere steder.

Der findes dog plugins der gør det muligt at styre flere blogs i en installation, men det kræver at man kan sætte det op rent teknisk – og det vil stadigvæk ikke være ligeså nemt, som qtranslate trods alt er.

Hack af qtranslate titler

Vil du gerne ændre i en titel på en widget, eller en overskrift der er blevet sat ind theme filerne, så kan du med dette lille hack faktisk segmentere hvad der skal vises i forhold til hvilket sprog folk har valgt.

Du skal skrive dette:

<!--:en-->The English Title<!--:--><!--:dk-->Den Danske Overskrift<!--:-->

Det kan du faktisk gøre ved alle de elementer du har lyst til. Det kan også gøres på links og andet tekst.

Ingen relaterede indlæg.

Alvorligt hackerangreb på WordPress – læs hvordan du finder og fjerner

Brian Brandt — Fri, 23 Apr 2010 17:05:20 +0000

Der er for tiden nogle ret onde og meget udspekulerede hackere på spil. De udnytter forskellige huller i din servers sikkerhed, eller huller i din WordPress sikkerhed. Det er klart det værste eksempel jeg endnu har set.

Resultatet af deres hacking er, at alle dine title bliver “cloaked”, og ender med at se ud som på følgende billede:

Det må jo siges ikke at være de sjoveste tekster. Herover er det freelancejournalist Hans Henrik Lichtenberg der er ramt. Hvor mange har lige lyst til at klikke sig ind på sådan en blog?

Analyser om du er ramt

Det første du skal gøre for at se om du er ramt, er at gå på google.dk. Her skal du i feltet skrive

site:www.ditdomæne.dk

Når du gør det, laver du en “site-søgning”, det vil sige du søger kun på din hjemmeside. Hvis alle dine overskrifter har noget med Pharmacy eller andet snusk – så er du ramt og skal tage det meget alvorligt.

Fjernelse af Pharmacy hacket

Nu bliver det kompliceret og ret svært – da jeg efterhånden har set flere forskellige slags eksempler på hvordan ens blog er hacket.

Chris Pearson har skrevet en god artikel om Pharma hacket, som hjalp mig i første omgang med at fjerne et hack – men jeg har opdaget flere slags tilfælde end han beskriver.

Først skal du lede efter de inficerede filer på dit webhotel. Som Chris Pearson skriver, så kan de komme i en række forskellige former.

]czoxODpcIi5ha2lzbWV0LmNhY2hlLnBocFwiO3tbJiomXX0=[

]czoxNjpcIi5ha2lzbWV0LmJhay5waHBcIjt7WyYqJl19[

]czoxNjpcIi5ha2lzbWV0Lm9sZC5waHBcIjt7WyYqJl19[

]czoxNzpcImNsYXNzLWFraXNtZXQucGhwXCI7e1smKiZdfQ==[

]czoxNDpcImRiLWFraXNtZXQucGhwXCI7e1smKiZdfQ==[

Jeg har dog fundet dem andre steder også. Specielt din “index.php” fil i mappen /wp-content har jeg set ramt flere gange. Du kan se om din index.php er ramt ved at downloade den til din computer og redigere den. Hvis det der kommer frem ser ud som følgende, så er du ramt:

Koden i den fil skal se ud som dette:

// Silence is golden.
?>

Jeg har oplevet at finde onde filer langt inde i plugin mapper, ofte forklædt som rigtige php filer. Læg mærke til på følgende billede, den fil der hedder “functions_last.php” var befæsted med hackerens kode.

Det værste er dog, at jeg har set eksempler på, hvor jeg simpelthen måtte re-uploade alle WordPress core filerne for at få ryddet helt op. Hackerangrebet blev simpelthen ved med at opstå.

Det endte med at vi måtte lave et nyt kodeord, både til FTP login og til Mysql login – først da stoppede angrebene.

Fjernelse af Pharma hacket i databasen

Når du har fået fjernet alle de grimme filer, og der er ikke andet at gøre end at gå alle dine mapper igennem på webhotellet, eller simpelthen at slette alle plugins og starte forfra med en ren upload. Husk at skifte dit FTP login kodeord inden du gør det.

Nu skal du ind i din PHPmyadmin og slette resterne efter WordPress hacket. Log ind og find den tabel der hedder:

wp-options

Igen har Chris Pearson en fin liste du bør bruge. Jeg har kun oplevet den med RSS rækkerne der er blevet tilføjet – men de andre skal man også holde udkig efter:

]czoxMzpcIndwX2NoZWNrX2hhc2hcIjt7WyYqJl19[

]czoyMTpcImNsYXNzX2dlbmVyaWNfc3VwcG9ydFwiO3tbJiomXX0=[

]czoyMjpcIndpZGdldF9nZW5lcmljX3N1cHBvcnRcIjt7WyYqJl19[

]czoxNTpcImZ0cF9jcmVkZW50aWFsc1wiO3tbJiomXX0=[

```
]czozOlwiZndwXCI7e1smKiZdfQ==[
```

]czo1OlwicnNzXyVcIjt7WyYqJl19[

— Attention! In this case, you should delete all matches except

]czoxMjpcInJzc19sYW5ndWFnZVwiO3tbJiomXX0=[

]czoxNTpcInJzc191c2VfZXhjZXJwdFwiO3tbJiomXX0=[

, and

]czoxODpcInJzc19leGNlcnB0X2xlbmd0aFwiO3tbJiomXX0=[

(these are legit WordPress database entries).

I mit tilfælde kom der følgende liste når jeg søgte på RSS_%

Det er ikke et kønt syn vel? Fjern alle de rækker, pånær de to nederste du ser på mit billede. Det vil sige du skal lade “rss_language” og “rss_use_excerpt” være. Der kan være en række mere du ikke skal fjerne, men det afhænger af din indstillinger. Bare fjern alle dem som ser meget mystiske ud.

Konklusion på WordPress hacket

Dette er en meget ondartet en af slagsen, specielt på grund af to ting:

Du opdager den først, hvis du søger i Google efter dit eget website.
Hackerne er meget aggressive og jeg tror dette er et manuelt hack – da jeg alle filerne der er lagt op, ikke rigtig har noget mønster, som en robot ofte vil arbejde efter. Jeg har også fået fjernet alt, og så dagen efter kom de tilbage, da de åbenbart havde fået tillusket sig FTP adgang.

Med mindre du er meget teknisk mindet og du ved hvad du laver i din database og på dit webhotel, så vil jeg anbefale dig at kontakte mig for at få hjulpet dig af med problemet. Der er masser af ting som kan gå galt undervejs.

Se først om du er ramt – hvis ja, så skynd dig at ring 3049 4007

Relaterede indlæg:

WordPress fjerner support til php 4 og Mysql 4 Dette er nok for de fleste måske lidt teknisk snak,...
Hvordan får jeg teksten til at være rundt om billedet Hvis du ikke kan få teksten til at være rundt...
Feedburner og hvordan du ser antal klik fra dit RSS En af de ting man ofte ønsker at måle sin...

Analyser hvor en kommentar kommer fra

Brian Brandt — Sat, 17 Apr 2010 06:00:08 +0000

En af de ting en blog ofte lever på, er de kommentarer man får. Det holder humøret oppe, da man så endelig ved, at folk faktisk læser med. Men hvordan analyserer vi på, hvor kommentar-ophavsmanden kommer fra? Det gør vi selvfølgelig med Google Analytics.

Mål hvor dine besøgende der kommentarer kommer fra

Følgende kommer til at kræve en smule kendskab til at rette i tema-filer, da vi skal ind og lege i comments.php filen. Den finder du under “Udseende -> Editor”. Kig ovre i højre side efter det link der hedder “comments.php”.

Herinde ser du, hvis du ikke ved ret meget om HTML og PHP, en masse mærkelig kode i midten af vinduet. Det du skal lede efter er en linje der ser således ud:

/wp-comments-post.php” method=”post” id=”commentform”>

Det er den linje er sørger for at der sker noget, når man trykker på “Send kommentar” knappen for at sende en kommentar til din blog. Du skal tilføje en ekstra linje, da vi skal sørge for, at der “teoretisk” set åbner en ny side. En ny side som Google Analytics kan registrere et besøg på. Indsæt derfor den følgende kode, som jeg har indsat i rød:

/wp-comments-post.php” method=”post” id=”commentform” onsubmit=”javascript:pageTracker._trackPageview(‘/kommentar’);”>

Nu skal vi så over i Google Analytics og opsætte et mål, så vi kan analysere, hvem der sender kommentaren.

Opsæt et mål i Google Analytics

Tidligere i WordPress analytics serien opsætte vi et mål for din kontaktformular. Du skal ind samme sted, for at sætte et mål op for dine kommentarer.

Igen vælger du “Destinationsadresse”, men denne gang skal du vælge “Hovedmatch”. Derunder angiver du webadressen til /kommentar.

Hvis du stadig er i tvivl om hvordan du opretter et mål, så har jeg beskrevet det lidt mere – mål i Google analytics.

Nu er dit mål sat op i Google Analytics, og nu vil du kunne se hvor dine besøgende kom fra, inden de skrev en kommentar på din blog. Det kan jo være meget rart at vide, hvilket website der giver dig rigtig god og relevant trafik.

Det var slutningen på WordPress analytics serien – håber du fik et par tricks du ikke kendte i forvejen. Er der andre ting du gerne vil vide hvordan man gør, så er du meget velkommen til at kontakte mig, og så vil jeg da se om jeg kan få lavet en guide til det.

Relaterede indlæg:

Hvor skal jeg hoste min WordPress side? Når, så du vil gerne have en WordPress hjemmeside? Men...
Feedburner og hvordan du ser antal klik fra dit RSS En af de ting man ofte ønsker at måle sin...
Google Analytics integration Den første dag i WordPress analytics ugen går selvfølgelig på...
Google Analytics mål for en WordPress kontaktformular I dag skal vi prøve at opsætte et mål i...

Forfatterboks uden plugin

Brian Brandt — Mon, 15 Feb 2010 20:29:17 +0000

Har du et community på en WordPress blog, har du ofte en masse forskellige forfattere, og de er alle med til at skrive indlæg. Det kan være en god ide, at give dem mulighed for at “fremhæve” sig selv, da det ofte indbyder til at engagere sig endnu mere.

Der findes et par forskellige plugins, der kan lave en forfatterboks i bunden af dit indlæg. Men hvorfor bruge plugins der kan risikere at konflikte med andre plugins er derved sløve din WordPress blog ned.

Der findes en lang række “koder” der kan skabe forskelligt information om forfatteren. Du kan finde en komplet liste på WordPress codexet her – Forfatter the_author_meta tags.

Forfatterboks i WordPress

Lad mig prøve at give et eksempel på hvordan du kan bruge nogle af de forskellige author_metas. Jeg skrev godt nok i starten, at det var uden plugins, men lige til denne forfatterboks, har jeg brugt User Photos, som giver de forskellige forfattere mulighed for at uploade et billede af dem selv.

Flere artikler af:

Forfatters Website:

Forfatter beskrivelse:

Der ligger også lidt styling bag i style.css filen. Der skal lige sættes dette ind:

#forfatterboks {background: #000; border: 1px solid #333300; padding: 10px;}
#forfatterboks .forfat-img {float:right; padding-left: 10px; padding-top: 10px;}

Det kommer for eksempel til at se således ud:

Du kan se det levende eksempel ovre på Henning Kristensens Bestrong Træningsblog. En blog du bestemt bør følge, hvis du vil være seriøs med din træning.

Mere skal der egentlig ikke til. Så er det bare op til dig, hvilken information du gerne vil have med.

Ingen relaterede indlæg.

Google Website Optimizer i WordPress

Brian Brandt — Thu, 21 Jan 2010 06:00:15 +0000

Google Website Optimizer er et gratis program fra Google til at lave splittest og multivariante test. Det kræver at man kan indsætte lidt specielt kode på de sider man vil teste og det er som standard ikke ret nemt i WordPress. Heldigvis findes der et rigtig godt plugin til WordPress, der gør det rigtig nemt at bruge Google Website Optimizer.

Google Website Optimizer i WordPress

Det plugin du skal installere finder du her – Google Website Optimizer til WordPress. Eller du kan vælge at installere det igennem din administration. Det er programmeret af en Filippo Toso.

Når du har installeret det, lad os så prøve at lave en A/B splittest i WordPress. Først skal vi have oprettet siderne vi vil bruge i testen. Vi vil lave et eksperiment, hvor vi vil splitte antal besøgende på en side med en kontaktformular. Vi vil prøve at gøre en enkelt overskrift anderledes, for at se om det kan få flere til at udfylde kontaktformularen.

Opret to “næsten” ens sider

Vi laver nu to versioner af den samme side. Den ene side bliver den “officielle”, den anden gemmer vi ved hjælp af “Exclude pages from navigation”. Det plugin installerede vi på dag 2 af denne guide. Ellers skal du gøre det nu.

Jeg laver en side jeg kalder “Kontakt” og den anden kalder jeg bare “Kontakt 2″.

I “Kontakt” laver jeg en overskrift der hedder “Udfyld kontaktformularen og få et svar indenfor 24 timer”. På “Kontakt 2″ laver jeg en overskrift der hedder “Udfyld kontaktformularen og jeg vender tilbage hurtigst muligt”.

Du får derved to forskellige webadresser.

http://wpdk.dk/kontakt
http://wpdk.dk/kontakt-2

Husk også, at du har din “Tak” side fra tidligere. Ellers skal du lave en “Tak” side nu, som er den side folk kommer over på, når folk har udfyldt din kontaktformular.

Det næste du skal gøre, er at oprette dig en konto hos Google Website Optimizer. Du har sikkert allerede nu en Google konto, så hvis du er logget ind der, kan du bare gå til denne adresse – Google Website Optimizer.

A/B splittest i WordPress

Når du er inde i Website optimizer, skal du oprette dit første “eksperiment”. Vi holder det lige simpelt i første omgang, og laver en A/B splittest.

Derefter kommer der et vindue, som du bare accepterer og går videre.

Nu skal du skrive de sider ind, som du lige har oprettet tidligere. Først din originale side (kontakt) og så version 2 (kontakt-2). Til sidst skriver du “konverteringssiden” ind (tak). (Dette er et tænkt eksempel, så der står “page not found” hos mig – men hvis du har oprettet siderne korrekt, så skulle der gerne stå “page found”.

Når du er kommet videre derfra, skal du til at holde tungen lige i munden, da du nu skal indsætte nogle forskellige koder på de tre sider du lige har lavet. Heldigvis har vores plugin gjort det lidt nemmere, da de i bunden af hver side af administrationen har lavet tre felter.

På Google website optimizer siden, skulle du nu gerne have fået en lang række koder, der skal indsættes i ovenstående kasser. Jeg vil prøve at stille det op i rækkefølge og med sidernes navne. Google Website Optimizer = GWO.

GWO Kasse 1 – Control Script

Indsættes på din “kontakt” side i den orange kasse “Control script”

GWO kasse 2 – Tracking Script

Indsættes på din “kontakt” side i den grønne kasse “Tracking script”

GWO kasse 3 – Tracking Script

Indsættes på din “kontakt-2″ side i den grønne kasse “Tracking script”.

GWO kasse 4 – Conversion Script

Indsættes på din “Tak” side i den mørkerøde kasse “Conversion script”.

Det var det. Hvis du er i tvivl om du har gjort det rigtigt, så hjælpe Google Website Optimizer dig heldigvis med at validere dine sider. Det vil sige om de nu er sat rigtigt op. Hvis din validering går godt, så kan du trykke på knappen “Continue” i bunden.

Nu er din a/b splittest sat op og kan nu bare vente et par ugers tid, indtil dit eksperiment / test er færdigt.

Du kan løbende følge med i din Google website optimizer WordPress test i administrationen for GWO.

Du kan sætte lige så mange splittest op som du ønsker.

Duplicate content problem med splittest

Nu kunne man godt tro, at der ville være et problem i at have næsten det samme indhold på to sider. Det skal du ikke bekymre dig om, så længe testen kører skal Google nok sørge for at du ikke bliver straffet. Men når du er færdig med testen, så skal du fjerne den side, som tabte testen. Men husk at lave en 301 redirect på den tabende side. Det gør jeg som regel altid med det fremragende plugin – Redirection.

Held og lykke med at sætte dine test op. Tro mig, der er masser af muligheder for at optimere dine sider til at konvertere flere kunder. Og hvorfor ikke få mere ud af de besøgende du allerede har på din blog. Det er jo kun god logik.

Husk at følge med i morgen, der afslutter jeg med at vi måler på, hvor folk der kommenterer på din blog kommer fra.

Relaterede indlæg:

Google Analytics mål for en WordPress kontaktformular I dag skal vi prøve at opsætte et mål i...
Google Analytics integration Den første dag i WordPress analytics ugen går selvfølgelig på...
Analyser hvor en kommentar kommer fra En af de ting en blog ofte lever på, er...
Feedburner og hvordan du ser antal klik fra dit RSS En af de ting man ofte ønsker at måle sin...

Feedburner og hvordan du ser antal klik fra dit RSS

Brian Brandt — Wed, 20 Jan 2010 06:00:53 +0000

En af de ting man ofte ønsker at måle sin blogs succes på, er hvor mange der følger ens RSS feed. Om det så er ved at blive faset ud, fordi flere og flere bruger Twitter, det er en anden snak.

Men det vil være rigtig lækkert at vide, hvor mange der rent faktisk læser med, og ikke mindst om folk faktisk klikker ind på din side, fra et RSS feed. Det er nemlig sådan, at klikker folk ind fra dit RSS feed, så vil de blive registreret som om de gik direkte ind på din hjemmeside. Du vil derfor som standard ikke kunne registrere i Google Analytics, at folk kommer fra dit RSS feed.

Feedburner integration med WordPress

Feedburner er et program opkøbt af Google, og er fremragende fordi vi kan få en masse statistik ud af dem om vores RSS feed. Det er som regel noget af det første jeg gør, når jeg selv starter en ny WordPress blog, at brænde mit RSS feed om til et Feedburner feed. Lad mig vise hvordan.

Når du har installeret WordPress, vil dit RSS feed som standard altid ligge på domæneadresse.dk/feed. Altså med endelsen /feed. Når du ved det, så tager vi et smut over til http://feedburner.com.

Det kræver at du har en Google konto, men mon ikke de fleste har sådan en efterhånden. Ellers få oprettet en og derefter klik ind på Feedburners hjemmeside igen.

Derinde skulle du nu gerne få en side frem, hvor der vil være en lille kasse du kan skrive dit RSS feed ind i. Skriv det ind, ligesom jeg har gjort, bare med dit domæne i stedet for mit.

Du får derefter mulighed for at give dit feed et navn, og du kan give det et sigende navn. Nogle vil være optagede, det må du bare finde dig i, og lede efter et andet.

Mit RSS feed hedder nu : http://feeds.feedburner.com/wpdesignere

Redirect alle dine RSS feeds

Lige nu hedder dit RSS feed på WordPress stadigvæk /feed. WordPress ved jo ikke, at du lige har været ovre på Feedburner og brænde et nyt. Derfor skal vi lige have redirected dit RSS feed, så den i stedet kommer til at hedde den nye adresse.

Det kan gøres igennem din .htaccess fil, men hvorfor gøre det sværere end det er. Vi installerer lige et lille plugin, der hedder FD Feedburner.

Når det er installeret, får du et nyt punkt ovre på venstre sidemenu under “Plugins -> Feedburner configuration”.

Derinde kan du skrive dit nye feed ind, og så vil den redirecte dit /feed til det nye.

Du vil nu ovre på Feedburner kunne se hvor mange læsere du har til dit RSS feed. Du vil kunne se hvilke dage folk har tilmeldt sig, og endnu bedre, hvornår de rent faktisk har læst dit RSS feed. Det kan jo godt være, at du har 200 RSS læsere, men måske er det kun 20 der rent faktisk læser det, når du skriver noget. Det er punktet “reach”, som du ser på følgende billede.

Feedburner og Google Analytics integration

Men det er jo ikke det eneste vi kan gøre med Feedburner. Vi skal jo have den koblet sammen med Google Analytics, så vi ikke altid behøver gå på Feedburner.com. Det er som standard slået til, men du kan jo lige tjekke om det er. Gå ind under det punkt der hedder “Configure Stats”. Du kan se det nederst til venstre på det billede lige over her.

Derinde skulle det gerne se således ud:

Læg mærke til, at der er klikket af i “Track clicks as a traffic source in Google Analytics”. Dette kræver, at din feedburner konto er den samme som din Google analytics konto.

Du vil nu ovre i Google Analytics kunne se alt den trafik der kommer fra dit Feedburner RSS feed under “Trafikkilder -> Kampagner”.

Derinde kan du se det samlede antal besøg igennem dit RSS feed, men går du over og vælger i dropdown menuen, “destinationsside”, kan du se hvilke indlæg der er mest besøgt og hvor meget de er besøgt.

Det kan jo være rart at vide, hvilke indlæg folk egentlig gad at klikke ind på din blog for at læse.

Det var så slutningen på Feedburner integration med WordPress og ikke mindst Google analytics. I morgen snakker vi om det spændende Google Website optimizer – glæd dig til at vi skal sætte en lille splittest op.

Relaterede indlæg:

Alvorligt hackerangreb på WordPress – læs hvordan du finder og fjerner Der er for tiden nogle ret onde og meget udspekulerede...
Hvordan får jeg teksten til at være rundt om billedet Hvis du ikke kan få teksten til at være rundt...
Google Analytics mål for en WordPress kontaktformular I dag skal vi prøve at opsætte et mål i...