Her er den almindelige tekst

Og det her er killing Me Softly (hvis det virker 😀 )

tilbage til normalen

Jeg deltager i forskellige danske og udenlandske debatsider om WordPress og udvikling, og det sker ikke sjældent at jeg besvarer spørgsmålet : Hvordan skjuler jeg indhold for ikke indloggede brugere. Der skal ikke ret meget til faktisk.

Man skal naturligvis vide om brugeren der er på siden er logget ind eller ej, der bruger jeg WordPress indbyggede is_user_logged_in() funktionen returnerer false hvis brugeren ikke er logget ind, så den er handy.

Og så bygger jeg en shortcode, som altså også kan tage specifikke hensyn til rolle (abbonent, redaktør... administrator).

 

add_shortcode( 'logget_ind', 'check_logget_ind_shortcode' );

function check_logget_ind_shortcode( $atts, $content = null ) {
/* check om brugeren er logget ind, om shortkoden har indhold og at det ikke er et feed */
if ( is_user_logged_in() && !is_null( $content ) && !is_feed() ) {
global $current_user; /* $current_user = wp_get_current_user() som er erklæret andet sted i koden*/

$user_roles = $current_user->roles;
$user_role = array_shift($user_roles);

/* i dette system er standard brugeren "subscriber" og vi ønsker at både subscriber og admin kan se indholdet */
if ($user_role == 'subscriber' || $user_role == 'administrator') {
return do_shortcode($content); /* vis indhold */
}
return 'Du skal være logget ind for at kunne se denne side.';
}
}

Jeg indrømmer gerne at det med Search Engine Optimization eller SEO - er ikke noget jeg går frygteligt meget op i, det er en videnskab for sig selv og der findes nørder derude som jo vi kunne banke mig til hver en tid, så jeg holder på min skomager læst...

Nu er jeg så involveret i en side der hedder ethology.eu eller Ethology Institute Cambridge. Det er en side der primært henvender sig til professionelle inden for hunde verden, men kan såmænd på mange punkter anvendes af folk med interesse for andre dyr også - da det er om adfærd og træning af dyr, men specielt hunde dog.

Og siden benytter WordPress indbyggede "SEO" dvs den laver nogen smukke links - og det er forsåvidt alt der er i det. Derudover er der installeret noget google analytics, noget facebook share og et sikkerheds plugin WordFence (det er faktisk rigtigt godt).

Google analytics pluginnet giver os mulighed for at se real time hvad fok foretager sig, og det er jo sjovt nok, men det giver jo også information om hvordan de fandt frem til os.

Ikke underligt er den største kilde facebook det er her de daglige opdateringer kommer, men der ER jo stadig folk der kommer via google søgning. Og her kommer så SEO ind over.

Men - nu er det en side om adfærdstudier, det er en side om dyr (mest hunde, men marsvin og heste er nævnt) siden er på engelsk. Og det er interessant at se hvad der bringer folk til at ankomme til siden, den absolut største gruppe kommer via "big sex picture" det er jo ikke svært at forestile sig skuffelsen i deres ansigter.

Måske ikke underligt - kommer der en hel del ved søgning på "dog sex picture" - men igen de bliver garanteret også fælt skuffet.

Så kommer der igen en ret stor mængde fra "life of Pi"  og den giver hits fordi Roger Abrantes skrev en blog om film og bog.

Men hvad der ikke optræder i søgningerne er sidens absolutte hit -
Do you know what the canine hip nudge behavior means? her havde jeg jo den tanke at "hip nudge" ville være en årsag, når nu folk via søgning altså primært kommer gennem søgning på seksuelt indhold - men det viser sig ved gennemgang af indkomne links at det er en blogger, der nok er populær, som altså har linket til historien - det har til dato givet tæt på en halv million læsninger af den blog alene.

Det ser altså fra amatøren ud til at enten "sex" (her gør google arbejdet) eller at blive refereret i en populær blog er de vigtigste parametre for at få besøg på en side.

Og besøg har siden da - et par hundrede tusind om måneden, det har givet nogen udfordringer i forhold til database serveren, men ser ud til i det mindste for nu at være løst.

Hvis du har interesse i at lære om adfærd, eller teknikker til at træne hunde efter, jamen så er der på siden en masse gratis materiale, og der er da også en demo test (husk at læse materialet godt igennem inden du tager testen, det er en demo men den er ikke så nem endda 🙂 )

Man skal være registreret men det er ganske gratis.

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.

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