Først en advarsel, sidder du og surfer med en ældre browser, så er det muligt at du ikke får det fulde udbytte af denne artikel...

Det er jo privilegeret at få et "Go!" på ens ideer. Opgaven gik i korthed ud på at implementere en talebobbel som man kan taste noget tekst i, opgaven blev defineret som : Et baggrundsbillede, med tekst på.

Den er forholdsvist hurtigt klaret, tegn en tom talebobbel, sæt den som baggrund i et p tag og skriv teksten ind i tagget. Men det giver bare ikke den største frihed. Jeg har for ikke længe siden læst en artikel om figurer i CSS så jeg foreslog kunden at jeg løste opgaven alene ved hjælp af CSS.

Kunden er også en god ven, så det gjorde det nok lidt lettere, her er processen der blev brugt som "proof of concept".

p.talebobble {
  background-color: #FFF;
  background: url('/wp-content/uploads/tanke2.png');
  width: 231px;
  height: 111px;
  text-align: center;
  padding-top: 66px;
}

Og så skrive "At tænke sig" i et p tag der benytter css klassen "talebobble" så ender man med noget lignende :

At tænke sig...

 

som nok kan forbedres stadig

Jeg foreslår en løsning som er rent css baseret, det får som sådan ikke den store betydning for dig, det gør det bare mere fleksibelt. Her er hvad jeg tænker :

Der skal bruges en bobbel, og de små bobler der leder ned til "tanken"

der skal bruges en p tag til at omslutte. Lige som i ovenstående og så skal der tegnes en ramme om tagget, den skal have runde hjørner, meget runde, og som på tegningen giver vi den også noget box shadow.

p.boblen {
	position: relative;
	width: 200px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	margin: 10px 23px 20px 15px;
	background-color: #fff;
	border: 8px solid #666;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	-webkit-box-shadow: 2px 2px 4px #888;
	-moz-box-shadow: 2px 2px 4px #888;
	box-shadow: 2px 2px 4px #888;
}

p.boblen:before, p.boblen:after
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
}

At tænke sig...

Godt begyndt er halvt fuldendt - dette er både fundament for en talebobbel og en tankebobbel, så er der de små bobler, der leder ned til tanken, eller en lille snip der leder ned til talen.

Her skaber en ny klasse, da vi gerne vil opnå begge variationer, det er netop en del af fleksibiliteten i forhold til en tegning :

p.tanke
{
	width: 130px;
	line-height: 100px;
	-webkit-border-radius: 108px;
	-moz-border-radius: 108px;
	border-radius: 108px;
}

p.tanke:before, p.tanke:after
{
	left: 10px;
	top: 70px;
	width: 40px;
	height: 40px;
	background-color: #fff;
	border: 6px solid #888;
	-webkit-border-radius: 28px;
	-moz-border-radius: 28px;
	border-radius: 28px;
	-webkit-box-shadow: 1px 3px 6px #999;
	-moz-box-shadow: 1px 3px 6px #999;
	box-shadow: 1px 3px 6px #999;
}

p.tanke:after
{
	width: 20px;
	height: 20px;
	left: 5px;
	top: 100px;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	border-radius: 18px;
}

Prøver igen med en

<p class="taleboblen tanke">At tænke sig...</p>

At tænke sig...

 

Så har den fået tankebobbel form, men det ser ikke rigtigt ud synes jeg, en talebobbel skal pege mod den største del af indholdet, så jeg vil lave 2 klasser "left" og "right" som hhv er float left og right... Og så lave en tanke-l for left, så er default right som vi ser ovenfor altså meningen at den skal flyde ud til højre som :

At tænke sig...

Og vi kan nu gentage processen og skabe en venstre tanke, som den vil se ud når den flyder ud til venstre og derfor har en "hale" den modsatte vej. Så vi genbruger boblen, og det eneste der ændre sig er placeringen af de 2 små tankebobler "halen".

 

p.tanke-l
{
	width: 130px;
	line-height: 100px;
	-webkit-border-radius: 108px;
	-moz-border-radius: 108px;
	border-radius: 108px;
}

p.tanke-l:before, p.tanke-l:after
{
	left: 70px;
	top: 70px;
	width: 40px;
	height: 40px;
	background-color: #fff;
	border: 6px solid #888;
	-webkit-border-radius: 28px;
	-moz-border-radius: 28px;
	border-radius: 28px;
	-webkit-box-shadow: 1px 3px 6px #999;
	-moz-box-shadow: 1px 3px 6px #999;
	box-shadow: 1px 3px 6px #999;
}

p.tanke-l:after
{
	width: 20px;
	height: 20px;
	left: 95px;
	top: 100px;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	border-radius: 18px;
}

At tænke sig...

Den er ikke som sådan responsive, den kan heller ikke bruges til meget andet end 3-4 ord på een linie (line-hight: 100px) men f.eks som her til lige at "fremhæve" noget tekst - det var også det opgaven gik ud på.

Det var tankeboblen, jeg vender tilbage med taleboblen.

Selve metoden stammer fra en artikel jeg læste engang af Craig Buckler - jeg har ledt efter den igen, men fik desværre ikke sat den under mine bogmærker, jeg vil lede videre og opdatere denne artikel med et relevant link hvis jeg finder den.

Lav et barn.

Jeg har en kæphest, når det kommer til WordPress, og temaer. Der er rigeligt med temaer i verden til at alle burde være tilfreds, der er faktisk stort set ikke nogen grund til at opfinde den dybe tallerken selv, man kan næsten altid finde et tema der kan anvendes som grundlag for ens eget (eller slutkundens) design.

Men lad være med at tilrette det hentede tema, lav et såkaldt "childtheme" et barn. For mange er det faktisk en uoverstigelig overvindelse, for : "jeg ved ikke noget om programmering", men det er stort set heller ikke nødvendigt, kan du rode rundt i moder temaet, så kan du sagtens klare den.

pkt. 1. - opret en mappe under /wp-content/themes den kan hedde "barnet"

pkt. 2. - opret en fil på din computer, gem den som "style.css"

pkt. 3. - fyld tilsvarende dette i filen :

/*
Theme Name:     barnet
Theme URI:      http://dit-domæne/
Description:    barn efter modertemaet
Author:         Dit Navn
Author URI:     http://dit-domæne/
Template:       modertemaets directory navn - f.eks : twentytwelve
Version:        0.0.1 er et godt sted at starte :)
*/
@import url("../modertema/style.css");

gem den, og upload til biblioteket wp-content/themes/barnet

step2

pkt 4. - log ind til backend på din WordPress, gå til Udseende->Temaer du har nu et tema (uden eksempel) der hedder barnet.

step1

Aktiver det, og du er igang. Man kan naturligvis blive lidt skuffet over at det ligner moderen, men sådan er det, der er ikke ændret et komma, det er det vi kan gøre nu. Vælg Udseende->Editor, du skulle automatisk have åbnet style.css - vælg sidste linie, og tast  :

body {
  background-color: #0000CC;
}

step3

Blåt er altid godt. Gem filen og gå til forsiden af din hjemmeside, den skulle nu have en blå baggrund.

step4

Hvis dette ikke er tilfældet er det fordi selve siden fylder hele landskabet. eller andre årsager. Jeg benytter chrome og hvis du højreklikker på siden et sted har du muligheden for at vælge "Inspect Element" - samme er tilfældet i FireFox. Der vil du oftest kunne se præcis hvad der foregår i CSS Herefter er det "bare" at klø på.

step5

Undgå kommentarer.

Forestiler vi os at du ønsker at undgå kommentar på dine sider, så kopier moderens page.php ind i dit directory. Og refresh din temaeditor. vælg i højre side "page.php" og find linien

comments_template( '', true );

step7

slet den, men kun den.

step8

Nu har jeg så valgt twentytwelve i denne artikel, det er muligt at dit tema ser noget anderledes ud, men det vil oftest være funktionen "comments_template" man skal lede efter, hvis man helt og holdent ønsker at undgå kommentarer på alle sider, kan man vælge at kopiere kommentar templaten til sit tema og slette indholdet, kun beholde :

<div id="comments" class="comments-area"></div>

Igen det tag ser sådan ud i twentytwelve temaet der følger med en standard WordPress installation, det kan se lidt anderledes ud i andre temaer.

Hvorfor ?

Hvorfor bekymre sig om at lave et barn ? Man kan jo komme lige så langt ved blot at ændre i modertemaets filer.

Det er fuldstændigt korrekt, der er som sådan intet til hinder for bare at klø på i modertemaet, men på et tidspunkt kommer der en lille "reminder cirkel" udfor "opdater" og det kan sagtens være dit modertema, vælger du at trykke "opdater" så er det rigtigt godt at du har husket at tage en backup, for du har netop overskrevet alle dine rettelser, tilbage er den grå baggrund, tilbage er kommentarfelterne.

Du skal omvendt ikke undlade at opdatere, ofte er der en grund og den er ikke nødvendigvis kosmetisk, til at forfatteren opdaterer filerne, meget ofte er det et sikkerheds spørgsmål, der bliver rettet i noget kode for at lukke et hul.

Har du et "barn" så er det moderen der bliver overskrevet, du bør naturligvis læse filen "changelog" igennem for lige at sikre at ikke nogen af de filer du har i dit childtheme er berørt af rettelserne, men som oftest vil du ikke have de store problemer.

Jeg arbejder på en tutorial om at lave et tema fra bunden, det er nok udenfor denne sides scope, men vil komme på sidemageren.

Jeg håber at denne artikel har givet mod på at benytte childthemes. Har du et design selv, og ønsker at få det ind i WordPress, men har du ikke modet til at gå igang med koderne, så er du naturligvis velkommen til at kontakte mig, du finder informationer om hvordan på kontakt siden.

Sikkerhed på nettet er ikke kun et spørgsmål om ikke at surfe pornosider, men også om at styrke ens egen hjemmeside (hvis man har en naturligvis) - denne artikel vil tage udgangspunkt i at det har du (læseren)...

Du har valgt design, du har en host, et lækkert domæne og du har fundet markedets dygtigste og billigste udvikler til at løfte opgaven...

Lad os sige at WordPress er valgt som grundlag, f.eks. lige som denne side... Det første "man" gerne gør som nyslået ejer af et domæne med hjemmeside cms er at finde en masse plugins som kan gøre livet sjovere, lettere i nogen tilfælde også...

Og så naturligvis fylde noget interessant indhold på... Hvis man laver en "out of the box" wordpress installation - så er der lige et par småting man bør rette til...

1. Log ind på dit webhotel/server og find din .htaccess fil - den bør være synlig, men nogen få hosts har jeg oplevet skjulte .htaccess - den er der, blot ikke synlig - og det er noget snavs for du har brug for den i andre sammenhænge også - men inden du tænker: øv jeg har valgt den forkerte host - gå lige ind i din backend i WordPress og til Indstillinger->Permanente Links - ændre indstillingen, det er fuldstændigt ligegyldigt lige nu hvilken du anvender (der ikke er default) - gem ændringer og check din FTP klient igen...

Har du nu en .htaccess fil ? Jeg antager "ja" 🙂 åben denne fil - og tilføj disse linier :

<files wp-config.php>
  order allow,deny
  deny from all
</files>

Grunden til dette er at din wp-config.php indeholder dine databaseoplysninger - og kan man (af andre veje) kompromitere din server, så kan man også komme til dine data - herunder kundeoplysninger...

2. Sørg for at din server er sat til sikre filrettigheder

2. a Skift alle directories til 755 - det betyder at ejeren af directory (det er din konto) kan læse, skrive og udføre opgaver i det directory, alle der tilhører den gruppe som ejer tilhører - det kan sagtens være flere brugerkonti - kan læse filer og udføre opgaver - og alle andre har samme rettigheder - udføre opgaver betyder dybest set blot kan skifte directory, liste filer (hvis ikke det er forbudt via andre kanaler)... Det vigtige her er at INGEN andre end ejeren har rettigheden "7" - der betyder at de også kan skrive - det er enormt vigtigt faktisk - en del hoteller - jeg har set dette i gamle dage på BlueHost - sætter som standard alle directories og filer til 777 - og det er uhyre "farligt" - da det betyder at "alle" kan skrive til serveren, og det er vi på ingen måde interesseret i, får nogen held til at kompromittere serveren, og lægge en fil op - kan man få alle mulige problemer... Så directories - laveste sikkerhedsniveau - 755.

2. b. Skift alle filers rettigheder til 644 - her fjerner vi lidt rettigheder i forhold til directories - for vi er ikke interesseret i at filer af sig selv om man så må sige kan udføre opgaver, som ikke er initieret gennem webserveren...

"6" betyder ejer har læse og skriverettigheder - kan rette i filen. "4" betyder at gruppen og offentligheden kan kun læse...

Er man iøvrigt tilfreds med sin template - alle php filerne der viser ens hjemmeside kan man sagtens skifte til 444 - for de filer - er det et købt, downloadet eller standard tema som twentysomething - så skal man være opmærksom på at det ikke kan opdateres - men er det ens eget tema - så styrker man sin site ret meget ved at skifte til 444 som rettighed... Jeg holder dog altid styles.css på 644 - da jeg ofte lige tweaker lidt på styles...

3. Fjern adminbrugeren, dette er en standard sikkerheds anbefaling - og du har højst sandsynligt ikke en bruger der hedder "admin" - men har du en sådan - så går du ind i din backend, finder "Brugere" og "alle brugere" - vælg at redigere "admin"...

Det første vil være en god ide er at skifte email da den adresse sikkert skal bruges til en ny administratorkonto, så skift email til "test@example.com" og opret så en ny bruger...

Dette vil være din administrator bruger - denne bruger kan ALT på din side - sørg for at denne bruger har et vildt svært, langt, umuligt at gætte password - det bedste du kan gøre er at anvende en "random password generator" og så naturligvis notere den ned et sted - en fil på din computer er OK - men bedre er en fil på din USB nøgle...

Nu har det hidtil været sådan at WordPress blev angrebet ved forsøg via "admin" brugeren, men en åbenhed i WordPress gør at der er åbnet op for at man kan gætte den nye adminbruger - nemlig ved at undersøge hvem der udgiver indlæg på siden - rigtigt mange blogindlæg har et link til forfatter - men linker til brugernavn ikke navne på brugeren, så er det MyAdmin - så er linket til forfatter : din_blog_url/author/MyAdmin og det er jo noget skidt  - for så begynder angrebene jo bare på "MyAdmin" i stedet for som før "admin".

Man kan i sit tema slå linkfunktionen fra - så det blot er navnet der bliver vist - det er forskelligt fra tema til tema hvor man gør det - men det vil nok være i filen single.php og det er muligt at det er funktionen "get_the_author()" man skal kigge efter... denne funktion skal så enten ændres til "the_author" eller overrides...

Men man kan komme udenom på en lidt enklere måde - nemlig opret en bruger - "skribenten" - og tildel denne bruger "bidragsyder" - så kan du selv når du er logget ind som administrator stadig skrive indlæg, bare husk at tildele dem til brugeren "skribent" - brugeren "skribent" oprettes med en fuldstændigt vandvittig stærk password - evt. gå ind på denne side og tast en vilkårlig tekst, og et password - jeg brugte

3000KopperKoldKaffe

i det tilfælde, og fik :

IM0BQPlI49d+g37v9ug+3pnCV7XD+xewdh4WvUBNEsGri5kUgIyvYGJl7wz3rGSB2ZBhgxlOai0=

det er et stærkt password - trust me 😉 men da "skribent" aldrig logger på, styrken ligger i det password der anvendes i krypteringen, ikke selve krypteringen - du kan evt. kopiere mit resultat taste mit password (passphrase) ind i password - du behøver ikke taste i confirm, og så trykke "decrypt" - så skulle du gerne få min oprindelige tekst... En hacker skal altså gætte din passphrase, din oprindelige lange lange tekst, samt den krypteringsmetode der er anvendt inden de kan forsøge at komme ind på din side... og logger de på som "skribent" - har de ikke nogen rettigheder på din side alligevel, for "skribent" er jo blot en bidragsyder - som iøvrigt efterfølgende kan degraderes til subscriber...

4. Installer et firewall plugin, eller monitor plugin i det mindste - jeg benytter WordFence det har den fordel at det sender mig en mail når noget har brug for at blive opdateret, det kan vise mig hvor geografisk mine besøgende kommer fra - jeg har en del besøgende fra Kina og Ukraine - det er ikke videre sandsynligt at de vil mig noget godt -  da jeg jo kun skriver på dansk og må formodes at jeg kun har læsere i norden i det mindste...

WordFence tillader mig så at blokere enkelt IP adresser, midlertidigt eller permanent, samt hele netværks grupper - som lande specifikke IP ranges... Men der er helt sikkert mange andre plugins der kan gøre et lige så godt job...

5. Tag backup, tag backup hver gang du ændre i designet, tag backup hver gang du poster et nyt indlæg - og tag jævnligt en backup (hver 2. 3. måned) af alle filer på hele sitet - download din backup - eller smid den på en dropboks, bare få den væk fra samme server som dit site ligger på - det er sket mere end een gang for mig at jeg har mistet en hel række sites fordi min host mistede en harddisk - idag med cloudhosting bør det ikke ske, men better safe than sorry - tag backup...

Jeg har mit eget automatiserede cron job, men jeg ved at der er en del ganske udemærkede backup plugins som dels tillader dig at gemme kun database - det er jo det eneste der er nødvendigt når du lægger et ny indlæg eller retter et, der tillader at tage backup af dine templatefiler (det vil oftest være de du ændre i, om du ændre noget programmeringsmæssigt - og endelig at sende hele sitet som zippet fil til dropboks...

Jeg vil nu altid anbefale også at downloade - fil for fil til en mappe på din computer via FTP - engang imellem...

6. Hold din installation opdateret - hvis du bruger et standard eller købt tema (downloadet) og vil lave om på det - så lav et såkaldt "child theme" - de temaer du ikke selv skaber har en tendens til at blive opdateret ind imellem, og hvis du ikke har et childtheme - så ryger dine rettelser lige i vasken og du kan starte forfra (eller lave en backup restore) - alternativt kan du undlade at opdatere - men hvis det er for at lappe et sikkerhedshul - at man opdatere temaet - så er der en rigtig god grund til at opdatere, og ikke mange gode grunde til ikke at gøre det...

Samme gælder naturligvis dine plugins - hvis du har behov for at rette i et plugin (det har du sjældent) så er det bedre at lave en fork, og skabe din egen kopi af det plugin, tilpas headeren og så arbejd med den, frem for at risikere at dit plugin mister alle dine geniale tilføjelser - jeg vil dog anbefale at beholde det oprindelige plugin som en inaktiv kopi - hvis der laves rettelser der har med sikkerhed at gøre - er det meget troeligt at du har brug for de rettelser også...

Når det så er sagt - hvis du har inaktive plugins (Hello dolly) som aldrig bliver brugt - hverken for at holde rede på rettelser i din fork, eller for det tilfælde at man en dag skulle få brug for... slet dem - de udgør en reel sikkerheds risiko - jo mere kode din side består af jo flere huller har den garanteret - så kode du ikke anvender - væk med det...

Det var sikkerhed for denne gang - men et emne der ikke er færdigt herved - jeg vil vende tilbage med mere om sikkerhed...

 

[fb]

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram