sandqvist.place - Min historia

WordPress, hemmalivet, sagor, bygg och fixa, it, web, hosting och Internet

Kategori: Wordpress (sida 1 av 5)

Installerat Gutenberg!

Det här inlägget är skapat med nya editorn Gutenberg. Den här texten är helt vanlig stycketext.

Gutenberg verkar jobba med block, man kan slänga in en massa olika typer av block i inlägg.

Gutenberg
Det här är ett bildblock med en bild föreställande installationserbjudandet i Panelen

Film från Skibbiken

Kort sensommarfilm från Skibbiken

Det finns till och med kolumner att jobba med även om det är i betastadiet så ser det ju lovande ut.

Här hade jag en bild, men jag fick den inte att visas på ett snyggt sätt.

Jag har också testat lägga till ett mediabildgalleri, men då krashar det för mig. Jag tror det har att göra med att bilderna bör vara i mediaarkivet innan man får in dom i blocket.

Coolt att få in bilder också i kolumnerna!


”Jag har kört Gutenberg och lekt lite med detta under dagen och jag gillar det, faktiskt på riktigt. Även om du bara vill slänga in lite text och en bild i ett inlägg så går ju det också och är du mera avancerad och vill ha lite mera finess i dina inlägg så finns ju alla möjligheter!”

Niklas
View this post on Instagram

Visst finns dom. #potatis #mandelpotatis #pärun

A post shared by Niklas Sandqvist (@niklas_sandqvist) on

Kan bädda in enstaka instabilder, men inte en hel profil
Spårbar länk

Komprimera bilder i WordPress

Wow, inser att mina inläggs bifogade bilder ibland är i största laget, måste kolla upp om vi kan fixa det här smidigt på nåt sätt. En bra sida ska ju inte bara vara lätt att hitta utan också smidig att arbeta med. Naturligtvis kan du ju bearbeta dina bilder innan du lägger upp dom i WordPress så att dom blir mindre, men om jag förstått det rätt ska det finnas smarta verktyg för detta!

Pluginet reSmush.it fixar detta

Har hittat ett plugin som faktiskt kan fixa detta. Det finns förstås flera plugin som kan fixa detta, men jag fastnade för ett som va gratis och klarar av att komprimera bilder som har en orginalstorlek på 5MB eller mindre. Vill du komprimera större bilder får du betala för pluginet.

Pluginet jag hittat och leker med heter reSmush.it.

Det här pluginet klarar av att komprimera alla dina tidigare mediafiler om du vill i ditt mediabibliotek, samtidigt som det automatiskt komprimerar alla nya filer du laddar upp till WordPress. Den här bilden t.ex se ut så här i mediaarkivet:

resmushitkomprimering

Bilden är reducerad med 465 KB, vilket då blir 465KB mindre för servern att skicka till besökarens webbläsare och förstås den mängden mindre data även för besökaren att ladda ner till sin enhet. I långa loppet får du alltså generellt lite snabbare webbplats på det här sättet. Jag upptäckte dock att en del bilder som min mobil tar faktiskt ligger över 5 MB och sådana bilder komprimeras alltså inte och bör (men måste inte) komprimeras på annat sätt.

Leverage browser caching i tex pingdom

När man kollar på pingdom och kör ett test kan du bland annat få ett meddelande om Leverage browser caching.

leverage browser caching

Dvs, testverktyget har hittat resurser som har kort livslängd. Rekommendationerna är att sätta längre livslängd på de här resurserna.

Här förklarar jag hur du gör för att ställa in cachekontrollen för detta om du kör din WordPresswebbplats i Windowsmiljö som jag gör!

Under förutsättning att alla objekt som visas i listan är på din domän kan du fixa genom att editera web.config och lägga till följande rad. Det du ser efter cacheControlMaxAge är nu satt till 14 dagar istället.


<staticContent>

<clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="14.00:00:00" />
</staticContent>

När jag väl sparat web.config för min webbplats och laddat om sidan kunde jag direkt köra ett nytt test och fick då grönt ljus i det här testet. Observera att om du har en sida som anropar externa resurser från andra domäner måste någonting liknande fixas på dessa också.

Om du kör din WordPress i en annan miljö (Ngix/Linux mfl) kan du säkert googla dig till hur du fixar det för din webbplats!

AMP-Accelerated Mobile Pages i WordPress

Okej då, jag fattar. Det är väldigt många som faktiskt surfar med sina mobila enheter, och flera blir det. För att kunna leverera en så bra upplevelse som möjligt har man hittat på någonting som kallas för AMP eller Accelerated Mobile Pages eller på svenska då Accelererade Mobilsidor.

Första gången jag dök på AMP

Första gången jag upptäckte detta var när jag i ett vanligt sökresultat såg att vissa träffar hade en liten blixt framför sig. Så här kan det se ut. Notera den där lilla blixten i sökresultatet. Det visar att det är en AMP-sida och den visas förstås då bäst i mobilen.

sökresultat-amp

Sökte efter ”Hur bygger man ett hus”

Vad är AMP?

AMP betyder ju accelererade mobilsidor, men vad innebär det då kan man fråga sig? Dessutom, när man jobbar i WordPress vill man ju också veta rent praktiskt om man kan fixa till detta på sin webbplats?

Accelererade mobilsidor, det är också någonting du bland annat hittar i Googles Search Console, där du får reda på om du har några sådana sidor på din site samt om det är något fel på dom. Om google meddelar att du inte har några AMP-sidor, ja, då kan du fixa det. Jag skriver kan, eftersom det här inte är något krav och vad jag förstått tvistar en hel del utvecklare huruvida det är bra eller inte. Jag tyckte det va småcoolt i alla fall, mera om det snart!

Projekt AMP är ett initiativ, ett öppenkällkods-projekt som siktar på att göra webben bättre för alla. Projektet är tänkt att göra skapandet av webbplatser och annonser (förstås) blixtsnabba, fina och fungera på flera olika plattformar och enheter. Är förstås sponsrat av Google.

Jag tycker inte det är någon mening att jag skriver av en site :-), utan länkar hellre till det här projektet så kan du i lugn och ro läsa mera när du känner för det.

Hur fixar man AMP i WordPress?

Som så mycket annat, genom en plugin! Jag har testat att aktivera en plugin som heter amp for wp, och det kan förstås finnas flera andra som funkar minst lika bra.

Den tycker jag var riktigt nice.Installationen va enkel och man kunde följa en nybörjarguide med de flesta inställningarna. Gällande designen så valde jag en enkel gratis sådan och plugintillverkaren har förstås sina ess i rockärmen där dom vill hjälpa dig med flera av de avancerade alternativen. Är du inte så kinkig och bara vill prova på så fungerar defaultinställningarna hyfsat tycker jag!

Nu har förstås inga data dykt upp i search console ännu, men om jag användare AMP-pluginen i Google Chrome så kan jag se dels att siten är aktiv och sedan att amp faktiskt fungerar som det ska.

Sitter du på mobilen idag och vill ta vara på en snabbare upplevelse av min site, surfa till https://sandqvist.place/amp

Jag testade just pingdom och sidan visades på 280 ms och var på 225 kb!!

Hur man blockar uptime-eu/us/as.net i analytics

Så händer det igen, mera referensspam har dykt upp i min Analytics. Kortfattat så sabbar ju det här din värdefulla statistik som du jobbat för att analysera. Skapa ett filter och blocka den här trafiken på en gång!

Logga in i din analytics och skapa ett filter enligt min bild!

uptime-eu.net|uptime-us.net|uptime-as.net

uptime-eu.net|uptime-us.net|uptime-as.net

Remove Query Strings From Static Resources

Då fortsätter min serie med pagespeed och WordPress, dvs att få WordPress att gå snabbare och även att få bra resultat i de olika mätverktygen som finns på nätet.

I mitt förra inlägg skrev jag om hur man får WordPress snabbare och lämnade detaljen om query strings därhän. Nu tänkte jag ta tag i den grejen också.

Efter lite sökande på nätet hittade jag en funktion i form av en enkel plugin (nähä, går det att lösa med i plugin i WordPress 🙂 Om jag förstått saken rätt så ska det gå att fixa.

Först en koll på vad pingdom knorrar över idag

Pingdom tycker jag ska ”Remove query strings from static resources” enligt nedan.

Resources with a ”?” in the URL are not cached by some proxy caching servers. Remove the query string and encode the parameters into the URL for the following resources:

  • https://sandqvist.place/wp-content/plugins/add-to-any/addtoany.min.css?ver=1.14
  • https://sandqvist.place/wp-content/plugins/add-to-any/addtoany.min.js?ver=1.0
  • https://sandqvist.place/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=4.9.2
  • https://sandqvist.place/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9.2
  • https://sandqvist.place/wp-content/plugins/goog … or-wordpress/assets/js/frontend.min.js?ver=6.2.6
  • https://sandqvist.place/wp-content/plugins/instagram-feed/css/sb-instagram.min.css?ver=1.5.1
  • https://sandqvist.place/wp-content/plugins/instagram-feed/js/sb-instagram.min.js?ver=1.5.1
  • https://sandqvist.place/wp-content/themes/hemingway/js/global.js?ver=4.9.2
  • https://sandqvist.place/wp-content/themes/hemingway/style.css?ver=4.9.2
  • https://sandqvist.place/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1
  • https://sandqvist.place/wp-includes/js/jquery/jquery.js?ver=1.12.4
  • https://sandqvist.place/wp-includes/js/wp-embed.min.js?ver=4.9.2
  • https://sandqvist.place/wp-includes/js/wp-emoji-release.min.js?ver=4.9.2

Plugin löser biffen

Om jag förstått saken rätt ska det finnas ett plugin som heter Remove Query Strings From Static Resources som du kan installera i din WordPress för det här ändamålet, och du ska faktiskt inte behöva göra så mycket mera, än efter installationen tömma cache, vi testar!

pingdom allt grönt

Sådärja, nu börjar det ju likna nåt! Serve static content from a cookieless domain verkar ju fortfarande behöva ses över, men jag är nöjd, hoppas du är det också med din sida!

 

 

Snabba upp WordPress

Det finns en väldig massa sätt att få WordPress att gå snabbare och tipsen varierar verkligen på nätet. Allt ifrån byta webbhotell till att använda olika typer av cachelösningar.

Hur jag löste snabbheten på min WordPress webb

Eftersom jag inte har en affärskritisk webb eller att det är megaviktig att den går snabbt har jag nöjt mig med några relativt enkla förbättringar.

1. installerade ett vanligt cacheplugin som heter WP Super Cache och det är ett vanligt plugin som många använder idag för att snabbare leverera sidorna till besökares webbläsare

2. aktiverar browser caching. dvs saker på din webb som ändras väldigt sällan borde ju dina besökare få cachat tex i sin webbläsare, då kommer din site att upplevas mycket snabbare. På den här siten berättar dom snällt hur du fixar det!

Jag knackade in den här koden i min web.config.

<system.webServer>
<staticContent>
<clientCache cacheControlMode=”UseMaxAge” cacheControlMaxAge=”30.00:00:00″ />
</staticContent>
</system.webServer>

Dump innan fix på min site

sandqvist-before-cache

Efter installationen av cache ser det ut så här:

sandqvist-after-cache

Här kan vi se då att Leverage browser caching är grönt numera och sidan laddades en aningen snabbare. Det finns förstås lite mera att göra som du ser, tex minimera bilder och fixa den röda E grade här ovan, server static content from a cookieless domain.

Vad du mera kan göra för att göra din webbplats snabbare är tex att aktivera varnish (som superwebbhotellet Vildmarksdata kan erbjuda)

Slänger in en liten film här om Varnish cache från youtube som kan berätta lite mera!

Har byggt en liten webbplats nfbr.se

Har byggt en ny liten webbplats för gänget bakom Nalovardo Fatbike Race. Det är en enkel WordPresswebb jag jobbat med under någon månad nu med lite bilder från banprepareringen bland annat. Har också fixat några formulär för kontakt och anmälan. Jag tycker du kan passa på att ge sidan ett besök, men sedan även fysiskt besöka arrangemanget.

Fatbike Nalovardo toppen

Siten hittar du här

Det här med bilder och WordPress

Jag blir så fundersam ibland då jag jobbar med bilder i WordPress och här är ett litet inlägg om detta. Det handlar om Titeln, bildtexten, alttexten, beskrivning och Titelattribut. Det här kan ju ibland låta konstigt, och om någonting är konstigt är det ju värt att ta upp och försöka räta ut några frågetecken.

Första bilduppladdningen direkt i ett inlägg

Stirrar till vänster, skägg, frost

Niklas stirrar till vänster

Här är ett inlägg som ska visa en bild som jag ska ladda upp. Jag har angivit följande:

Så här är inställningarna för ovanstående bild, titel är ”Stirrar till vänster”.

Bildinställningar i WordPress

Så vad är det då av bilden som syns ute på nätet i själva koden

Jo, om vi tittar i koden ser vi bildens url och filnamnet förstås, vi ser också alttexten, men inte beskrivningen och heller inte titeln.

Varför är det så här?

Jo, sedan WordPress version 3.5 har man beslutat sig för att titeln på bilderna inte ska vara med i koden för att det finns vissa läsare som inte klarar av det här med bildtitlar på ett bra sätt. Om du envisas med att ändå vilja ha en titel för dina bilder då kan du i tex ett inlägg klicka på bilden, välja egenskaper och sedan redigera någonting som kallas för titelattribut. Det du skriver in där kommer att namnges som titel i din htmlkod!

Om du vill läsa mera i det här ämnet och varför det är gjort så här som standard hittar du här!

Men varför finns titeln kvar?

Ja, det kan man fråga sig. Antar att det är bra för att kunna söka och hitta bland dina bilder i ditt mediaarkiv i admin.

Om din WordPress blir hackad

Många funderar ju vad som händer om en webbplats blir hackad. Gammalt i tiden gjorde ju hackare detta dels för att visa att dom kan men sen även för att visa någon typ av budskap på hemsidan. Med tiden har detta förändrats. Nu ligger det en hel del ekonomiska motiv bakom det hela, jag ska ge ett litet exempel här:

Häromdagen fick jag ett mail från ”Netflix” med ärendet konto upphängd – kod 99006

Så här såg det ut:

Netflix scam mail

Om man försiktigt pekar på länken (Klicka INTE) logga in till Netflix, går det snabbt att konstatera att länken minsann inte går till Netflix utan till en helt annan webbplats som jag inte nämner vid namn. Då jag inte heller klickat på länken så vet jag förstås inte riktigt hur sidan ser ut, men kan förstås ana att de vill ha mina inloggningsuppgifter till netflix, där man kan ha lagrat sina kortuppgifter förstås.

Var kommer mailet ifrån då?

Nå, hur kom det sig att det här dök upp i min inkorg, och varför har regeringen skickat det? Det förefaller som att faktura@government.se faktiskt skickat det här mailet. En snabb till på whois visar ju att government.se faktiskt ägs av Regeringskansliet, så det är ju en seriös domän eller hur?

Naturligtvis dyker det ju upp en del frågor och funderingar, varför skulle regeringens fakturaavdelning vilja be dig uppdatera betalningsinformationen på Netflix? Haha, lite får man ju skratta i alla fall. Men som sagt, det är en seriös domän och den finns och fungerar….. fast, den har ingeting med det här att göra, alls.

Vem som helst kan sätta avsändare till vad som helst!

Tänk, och märk väl mina ord. Vem som helst kan sätta en avsändare till vad som helst, det är skitenkelt och alla som har outlook kan faktiskt göra det!

Vi tar en djupdykning i meddelandets ursprung och kollar lite

Jag raderar en del rappakalja, men tar med det jag tycker är lite intressant.

Först ser vi att det kommer in till outook.com där jag har min mail

Received: from DB6PR0601MB2375.eurprd06.prod.outlook.com (10.169.213.18) by
Authentication-Results: spf=none (sender IP is 80.88.126.9)
smtp.mailfrom=government.se; vildmarksdata.se; dkim=none (message not signed)
header.d=none;vildmarksdata.se; dmarc=none action=none
header.from=government.se;
Received-SPF: None (protection.outlook.com: government.se does not designate
permitted sender hosts)

Bakåtspårar…

Här ser vi att det gått genom vårt mailfilter

Received: from mail.vildmarksdata.net (80.88.126.9) by
AM5EUR03FT057.mail.protection.outlook.com (10.152.17.44) with Microsoft SMTP
Server (version=TLS1_2, cipher=TLS_ECDHE_RSA_WITH_AES_256_CBC_SHA384_P384) id
15.20.239.4 via Frontend Transport; Sun, 3 Dec 2017 23:27:23 +0000
Received: from smtpfilter.vildmarksdata.net ([80.88.126.19])
by mail.vildmarksdata.net (IceWarp 12.0.2.0 x64) with SMTP id 201712040027248596
for <niklas@vildmarksdata.se>; Mon, 04 Dec 2017 00:27:24 +0100
X-Halon-ID: 804a2ebf-d881-11e7-ade2-00155dfc07cb

Här ser vi nåt intressant, mailets ursprung är ifrån en mailserver som heter s2.mydevil.net

Received: from s2.mydevil.net (unknown [212.91.26.159])
by smtpfilter.vildmarksdata.net (Halon) with ESMTPS
id 804a2ebf-d881-11e7-ade2-00155dfc07cb;
Mon, 04 Dec 2017 00:27:17 +0100 (CET)

Här ser vi att det skickas från s2-servern och taggar från-adressen till faktura@government.se

Received: from localhost
([127.0.0.1] helo=s2.mydevil.net ident=aukcje)
by s2.mydevil.net with esmtp (Exim 4.89 (FreeBSD))
(envelope-from <faktura@government.se>)
id 1eLdfJ-000Elv-CK
for niklas@vildmarksdata.se; Mon, 04 Dec 2017 00:27:17 +0100
To: <niklas@vildmarksdata.se>
Subject: =?UTF-8?B?S29udG8gdXBwaMOkbmdkIC0ga29kOTkwMDY=?=

Här har vi då äntligen hittat källan till eländet! Vi har en webbplats i WordPress som är hackad. Den heter zaklejki.pl (toppdomän i polen) och kör uppenbarligen WordPress, då man ser wp-content i sökvägen, dessutom ser vi ip-nummret på siten!

X-PHP-Script: zaklejki.pl/wp-content/plugins/apikey/w1w.php for 91.142.209.122, 91.142.209.122
X-PHP-Originating-Script: 12939:w1w.php
From: =?UTF-8?B?TmV0ZmxpeCs=?= <faktura@government.se>

Vad kan vi lära oss av detta då?

Säkra upp din WordPress webbplats och se till att alla dina plugins också är uppdaterade. Det kan faktiskt vara så att den här skadliga koden finns på din sida utan att du eller dina kunder vet om det!

Äldre inlägg