Uppföljning på the_post_thumbnail, skapa en egen definition
En liten snabb uppföljning på mitt inlägg om the_post_thumbnail() där jag skrev lite om grunderna i den nya funktionen.
Problemet som finns är om man utvecklar ett tema så finns det ingen chans att veta vad en användare definierar som storlek i sina inställningar. Det finns två sätt att komma ifrån detta, antingen använder du get_option(); där du kan hämta thumbnail_size_w, thumbnail_size_h, medium_size_w, medium_size_h, thumbnail_crop med mera och läsa av och manipulera det som användaren definierat.
Eller så punktmarkerar du en egen storlek och kommer bort från problemet med att användaren troligtvis gör fel i sina inställningar.
Vad du gör är att i functions.php är att du skapar din egna bild-dimension för just miniatyrer. Detta är enkelt och gör att du har större kontroll på bilderna, du kan ange flera olika bildstorlekar som passar in exakt vart du vill ha dem och du slipper problem med användardefinierade storlekar.
[php]add_image_size( namn, width, height, crop);[/php]
Översättning:
[php]add_image_size( ‘min-egna-bild’, 650, 250, true );[/php]
Vad som kommer hända är att du kan, istället för att använda thumbnail/medium/large i funktionen the_post_thumbnail(), kan använda min_egna_bild istället.
Det enda problemet detta ger är att användaren måste mata in en tillräckligt stor bild för att täcka ytan av denna bilden, det vill säga större än 650×250. Men – du får bättre kontroll och ett bättre flöde i ditt tema.
Serverlösning hemma för under 200 kronor
Bytte arbetssätt här hemma för ett tag sedan, min desktop blev konverterad till en server som jag enbart körde fjärranslutning till när det behövdes lite extra juice i mitt dagliga datoranvändande.
Det fanns dock ett par problem som jag ville motverka:
1. Servern stod under skrivbordet, ivägen för mina fötter.
2. Servern körde nätverk via 802.11G, och inte N som resten av nätverket. Att streama ljud, bilder och filer hade aldrig hastigheten som jag kräver. Att sladd inte används är på grund av avståndet mellan server och router – sladd genom hela lägenheten är ett stort no-no.
3. Chassit i sig gav från sig massa resonans via jobbande hårddiskar och dess 60mm CPU-fläkt.
Klumpig, stationär server
I dag fick jag nog av alla fel på burken och började kolla igenom hur man kunde lösa alla problem till en liten kostnad.
Jag hittade en tom kassett-låda från IKEA som jag ansåg fick duga som chassi. Att kostnaden enbart ligger på 49:- för 2 stycken är bara positivt. Går det fel är det ingen kostnad att köpa en ny. Tillsammans med massa buntband, en sax och en kniv sattes allt igång.
Istället för att skruva fast moderkortet i botten på lådan så tog jag buntband och fäste så moderkortet blev stabilt. Allting annat placerade jag enligt bilden nedan. På baksidan klipptes ett stort hål för att få in strömförsörjning och nätverkskabel. Baksidan justerades efter behov och tejpades sedan tillbaka.
Placering av komponenter i lådan
Fläkten på CPUn byttes ut mot en 90mm som fanns hemma, jag vinklade så att luften även träffar, och kyler, grafikkortet, utvärdering pågår hur eller om jag måste justera detta med hjälp av speedfan.
Allt klart och lådan kommer närmare routern så att en kabel kan användas istället för det slöa trådlösa. Senare kommer lådan även att kopplas in mot TVn och allt bli ett mediacenter samtidigt.
Resultatet
Nu syns knappt dator, och den kan användas till allt vad man behöver. Det enda som behövs innan man ger sig på ett sådant här projekt är att fjärranslutning redan fungerar via nätverket.
Totalkostnaden landar på under 200 kronor för lådor, tejp, buntband och fläkt. Billigt och värt det om man ser till resultatet före och efter.
Relaterade poster i WordPress utan att förstöra kommentarerna
Ett par timmar har gått åt till att få igång en egen relaterade poster funktion till WordPress. Själva scriptet är inte ett dugg konstigt utan kan hittas lite överallt även om jag ville sätta en egen twist på det hela.
Målet var att skapa en funktion som visar bilder samt titeln på inlägget istället för en vanlig tråkig lista. Koden jag använde (utan CSS) blev till slut följande.
[code language="php"]
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'showposts'=>3, // Number of related posts that will be shown.
'caller_get_posts'=>1
);
$my_query = new wp_query($args);
if( $my_query->have_posts() ) {
echo '<div class="related-posts"><h3>Möjligen relaterat innehåll</h3><ul>';
while ($my_query->have_posts()) {
$my_query->the_post();
?>
<li>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<img src="<?php echo get_bloginfo('template_url'); ?>/thumb.php?src=<?php echo catch_that_image('default2') ?>&w=150&h=100&zc=0&q=100" alt="<?php the_title(); ?>"/>
<span><?php the_title(); ?></span></a>
</li>
<?php
}
echo '</ul></div>';
}
}
Jag använder helt enkelt den klassiska funktionen catch_that_image(), med en lite twist för att få olika storlekar på defaultbilden, och thumb.php för att visa bilden och sen är resten som vanligt.
Problemet som visade sig var att även att wp_query() kallades med new, vilket i min bok kallas för en ny instans av objektet, så sattes alla kommentarsvariabler till den senaste relaterade posten med kommentarer. Detta är en sidoeffekt som direkt inte är önskvärd.
Lösningen är väldigt enkel: spara variabler och återanvänd dem. Innan jag börjar min nya loop så sparar jag ner ett par variabler från den gamla loopen.
[code language="php"]
$old_comment = $comments; $old_id = $id; $old_post = $post; $old_withcomments = $withcomments;
Och efter loopen återställer jag helt enkelt värdena som de var innan.
[code language="php"]
$comments = $old_comment; $id = $old_id; $post = $old_post; $old_widthcomments = $withcomments;
Nu får vi fram exakt den effekten som önskades från början, allt som krävs är lite CSS-magi. Resultatet kan du se under detta inlägget.
Smidigaste sättet eller är jag fel ute?
Fixa snyggare inputknappar med css
Internet svämmar över med olika lösningar för hur man modifierar utseendet på sina knappar. Många av lösningarna består rena länkar (a-taggar) som modifieras, vilket går emot hela syftet och funktionen med en knapp.
Resultatet kommer bli så här i alla moderna webbläsare:
Och så här i Internet Explorer 7:
Ska ta upp hur man enkelt stylar en input med ren CSS och en liten ikon.
Först HTML koden där vi skapar två knappar, en submit och en reset, med id b1 och b2:
[code language="css"]
Ganska enkelt? Givetvis. Nu blir det lite mer kod när CSSen ska läggas till.
Först måste du hämta hem ikonerna, de jag använt finns här och här. Båda är släppta under GPL så det är fritt att använda dem.
Vi sätter för det första en ny border vilket tar gör att den gamla layouten försvinner. En padding sätts också och så att knappen blir den storleken vi är ute efter. Om ikonen känns lite malplacerad så justeras den enkelt med background-position:.
Sen kommer fusket, eftersom Explorer inte stödjer border-radius (varken version 7 eller 8), så lägger vi till -moz och -webkit för de som använder Mozilla eller WebKit-baserad läsare.
[code language="css"]
#b1, #b2 {
padding: 3px 12px 3px 27px;
border: 1px #ccc solid;
background: #f9f9f9 url(button_ok.png) no-repeat center left;
background-position: 7px;
color: #333;
font-family: Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#b1:hover, #b2:hover {
background-color: #f5f5f5;
}
#b2 {
background: #f9f9f9 url(button_cancel.png) no-repeat center left;
background-position: 7px;
}
Sådär, nu ska du ha det färdiga resultatet och få alla fördelar med en riktig input utan att behöva hantera javascript, konstiga hack eller andra element.
Tips och tankar om bloggtexter: del 3 – textflöde
Del tre i serien om hur man hanterar och skriver bloggtexter. Den här delen ska behandla hur man hanterar textflöden och lite teorier bakom.
Det stora ämnet där det finns massor med teorier och tankar är om textflöden och hur ögat läser av en text på skärmen. Textflöden är grunden i användbarhet och genom att tänka till lite extra kan man få en läsare att behålla intresset.
1. Tänk på styckeindelningen
Många vill ofta skriva mycket för skrivandets skull, men tänk på att paragraferna ska vara små. Helst bara ett par meningar per stycke. Detta gör läsningen mindre ansträngd. Detta är den största skillnaden mot mer traditionella medier då stycken sällan förekommer i flytande text.
2. Ögats avläsning på skärmen
Enligt efterforskningar från Jacob Nielsen så avläser vi en sida enligt ett F-mönster. Vad det betyder är att ju längre ner man kommer i artikeln, ju mer läsre tappar man. Detta måste man utnyttja genom att lägga det bästa och intressantaste först. Skriver man en slutsats eller tes i början av inlägget så är det större chans att läsaren vill veta mer och se varför författaren har de åsikterna.
F for fast. That’s how users read your precious content. In a few seconds, their eyes move at amazing speeds across your website’s words in a pattern that’s very different from what you learned in school.
In our new eyetracking study, we recorded how 232 users looked at thousands of Web pages. We found that users’ main reading behavior was fairly consistent across many different sites and tasks. [...]
Märk att detta kan användas för att placera annonser, viktig informationstext och annat relevant.
3. Grafik och luft
Luft är bra, det är de flesta grafiker överens om. Erik Pettersson skriver ett bra inlägg hur man kan använda luft i sin design, men detta kan även användas i text. Bra med mellanrum, radavstånd och en textstorlek som är lätt att läsa är grundtankarna. Ett bra inlägg om ämnet är 100e2r där de tar upp en del punkter som är enkla att följa.
Grafik är ett mycket bra hjälpmedel för att avlasta. Grafik gör nämligen att ögat avlastas och kan fokusera på något annat en liten stund. Kom ihåg att använda grafik sparsamt så det inte blir klustrat då effekten kan bli motsatt.
Tips och tankar om bloggtexter: del 2 – ämnen
Del två i serien om bloggtexter som kommer gå igenom ämneshantering och inriktning för din blogg.
Att hålla sig till bestämt ämne i sin blogg kan vara svårt. Speciellt när fingrarna kliar och skriften tycks leva sitt egna liv. Att definiera för sig själv vilket område bloggen ska handla om är ett bra sätt att avgränsa sig och behålla sin genre.
1.Skapa ett blogmotto
Det som menas med att skapa ett motto eller en slogan för sin blogg kan jämföras med att skapa en affärsidé. Tänk igenom alla texter och ämnen och fråga dig själv: ”Ligger detta inom mitt område?”. Området behöver inte vara smalt utan det kan vara stort som att du vill skriva om saker som rör internet eller smalt som att du exakt vill följa hur Ettans snus står sig mot konkurrenterna.
2.Var hängiven
Tro på ditt ämne, tro på det du skriver. Det syns i dina texter. En trovärdig text är ofta de som skrivs av en person som brinner för sitt ämne och tror på sina åsikter. En blogg är ofta ingen journalistisk korrekt sida, en blogg kan liknas mer vid en debattartikel eller en krönika, därför kan du vädra så mycket åsikter du vill och tycka exakt som du vill.
3. Hitta motivationen och inspiration
Det är ganska lätt att förlora sin motivation och sitt intresse, eller bara förlora kreativiteten för nya inlägg. Det finns ett bra sätt att motverka detta – arbeta i förväg.
Ha ett anteckningsblock eller dokument på datorn så du kan skriva upp idéer och brainstorma när du har tid över. Allt kan alltid leda till ett bra inlägg eller ny vinkel på ett gammalt.
Att hitta inspiration är ibland svårt, därför är det bra att läsa andra bloggar inom sitt område för att se vad som är nytt eller om man får en idé utifrån dessa. Personligen läser jag ett 20-tal genom min rss-läsare.
Tips och tankar om bloggtexter: del 1 – språk
Att skriva bra text med bra svenska är svårt, men det finns vissa riktlinjer man kan använda sig av. Beroende på stilen man har valt så kan man välja olika källor till exempel vetenskaplig text, journalistisk text eller talspråk (rekommenderas inte, bättre för bloggar i dagboksform men gör det hela svårare att läsa, förstå och ta in).
Anledningen till den här posten är att jag personligen har ganska svårt för att skriva, tala är mer min grej. Att jag driver cynatic.org som blogg är en bra övning och jag får tillfälle att öva upp mitt skriftspråk.
Läs också de senare delarna:
1. Skriv personligt
Till skillnad mot journalistisk text och vetenskaplig text så är bloggtexter oftast personliga, man vill få ut sin åsikt och förmedla sina tankar om de ämnen man har valt. Märk skillnaden mellan personligt skriven och talspråk. Talspråk är hur man pratar i ett samtal och tyvärr gör sig inte detta sätt bra i text.
Exempel på hur talspråk i dagsboksform kan se ut:
Hej, idag satte jag mig på en stol och började asgarva, hehe. Jag hade skitkul eftersom man sitter så konstigt ibland.
2. Rubrik, rubrik, rubrik …
Rubriken är det viktigaste du har som verktyg, det är inte alltid helt lätt att bygga men övning ger färdighet. Tänk och sträva efter att rubriken ska förklara så mycket som möjligt i en kort mening. För bloggar gäller också baktanken att rubrik är det som folk söker efter, seo-mässigt är det viktigt att använda bra ord som beskriver artikeln.
Exempel:
Fem csstips du borde känna till
Säger mer och är intressantare än:
Lista på bra csstips
3. Kolla upp stavning och avstavning
Kanske den viktigaste punkten, stavfel är fult och ter sig konstigt i en löpande text. Du kanske inte ser det men besökare ser ofta att något ser konstigt ut.
Det finns hjälp att få angående termer och fackspråk. TT-språket är ett hjälpmedel som jag kommer börja använda så mycket jag kan om jag blir osäker. TT-språket är riktlinjer som tidningar oftast följer. Skriver man om teknik så är svenska datatermgruppens ordlista ett måste. De listar hur man bör benämna ord, prylar och termer på svenska och i svenska texter.
Tänk också på att man skriver siffror upp till 13 med bokstäver och att förkortningar är gemener.
Exempel:
I några fall är små bokstäver att föredra därför att besläktade ord brukar skrivas gement. Det gäller särskilt tekniska termer som ofta förekommer i samma texter som orden ovan: adsl, dab-radio, dvd, md (mini disc), gd (generaldirektör), gps, gprs, mms, mp3, vhs, wap.
Enklaste sättet att sätta upp en server med PHP, MySQL och Apache2
Många är frågorna som kommer till min IM klient. Men de flesta brukar handla om den enkla frågan “Varför fungerar inte min PHP med apache?”. Svaret jag brukar ge är att kasta bort all manuell installation om du inte vet vad du gör, det finns så mycket enklare alternativ. Wampserver är en bundle-pack som sköter allt åt dig.
Så här installerar du en WAMP-server (Windows Apache MySQL PHP/Perl) på din dator på enklaste sättet.
1. Börja med att gå till http://wampserver.com, förstår du inte franska så tryck på den lilla engelska flaggan på höger sida.
2. Klicka på download i menyn och klicka på download igen på sidan (eller på direktlänken här).
3. Leta upp exe-filen på din dator och starta installationen. Följ stegen och klicka dig igenom, inga extra uppgifter eller kunskaper behövs egentligen för en fungerande grundinstallation.
4. För att PHP ska fungera med alla script så rekommenderar jag att du ställer om short open_tags till on. Detta gör du med ett musklick (vänsterklick) på den lilla ikonen som dykt upp i aktivitetsfältet, väljer PHP, PHP settings och trycker på “short open tags“. Detta gör att du inte behöver <?PHP i php-filerna utan kan nöja dig med <?. Den här inställningen är oftast inte rekommenderad – men lata programmerare finns det gott om.
Grattis! Nu ska det fungera! Navigera med din favoritläsare till http://localhost/ och du ska se en startsida. Filerna finner du i c:\wamp\www (om du inte ändrat sökvägen vid installationen).
Extra tips som kan behövas är att aktivera mod_rewrite för snygga urls samt att ändra din sökväg till din webbroot.
För att aktivera mod_rewrite, gå in i Wampserver-menyn igen, gå till Apache -> httpd.conf. Sök efter mod_rewrite och ta bort kommentaren framför raden (#). Apache behöver nu startas om, tryck på Restart all Services om du inte vill göra fler ändringar.
Vill du ändra katalogen för din webbroot så navigerar du in httpd.conf igen, navigera nedåt i dokumentet tills du hittar “DocumentRoot”, ändra till din sökväg och byt ut backslashes mot vanliga slashes. Kopiera den slutgiltiga sökvägen och gå ner en liten bit till, du ser en kommentar som det står:
# # This should be changed to whatever you set DocumentRoot to. #
Byt ut den befintliga med din sökväg igen. Starta om Apache och allt ska nu vara klart!
Något ni saknar? Ska jag ta upp något annat? Berätta gärna!
Hur ska man använda sociala medier för exponering
Sociala medier börjar sprida sig mer och mer i Sverige, mycket tack vare att t ex Pusha ökar i popularitet. Men det är fortfarande många som egentligen inte vet hur man bör använda dessa sidor för att få exponering för sin egna blogg.
Sociala medier som jag hittade det började med att delicious kom fram som en het sida inom webb2.0 världen där man kunde spara sina bokmärken online. De hade en startsida som länkade de mest populära bokmärkena just nu. Efter det hittade jag digg, stumpleupon och för ett tag sedan designfloat och den svenska versionen av digg – pusha. Det finns utöver dessa en uppsjö av olika sidor som är mer eller mindre inriktade på olika ämnen eller generella.
Varför ska man då bry sig om dessa sidor? Skriver man på svenska är det egentligen bara pusha som ger något. En amerikansk användare kommer aldrig bry sig om något som är skrivet på svenska. Man får genom dessa sidor egentligen en enorm chans att exponera sig själv och det man skriver i sin blogg.
Content is king skriver många bloggar, och visst är det så – men det är stor skillnad mellan innehåll och innehåll. Detsamma gäller för sociala medier. Vill du skicka in allt du skriver för att få mer exponering så se till att allt du skriver också passar för andra att läsa och att det finns ett intresse för just din text. En artikel som börjar med vad du har på dig just nu eller att du tittade på Nyheterna igår är det inte många som bryr sig om tyvärr.
Vad ska du då skicka in för länkar som du skrivit? Om jag pratar utifrån min läsning av bloggar så är det välskrivna artiklar som har en poäng. Må det vara om Spaniens historia eller Kungens tofflor. Välskrivet är ganska ovanligt även idag och det genererar mer exponering än någonting annat. Jag lägger personligen till enbart de texter på bloggen som jag anser vara mer intressant än de andra. Det blir cirka en text på sex om man räknar ut det.
Det gäller också att hålla ner submit-spam på grund av att så fort du börjar skicka in allt så får du sämre anseende. Man är tyvärr inte anonym som en del kan tror på nätet. Ens blogg kan föregås med antingen bra rykte – eller dåligt rykte, och det är du som har stort inflytande på detta. Speciellt genom hur du beter dig utåt via din profil.
Kort och gott:
- Lägg till de länkar som du tror är av värde.
- Se till att inte spamma site för det kan skada både dig, din site och kanske blir man avstängd.
- Skriv intressant och folk hittar dig och återvänder.
- Allt du skriver kanske inte är intressant, tänk efter innan du skickar in din länk.
Pusha är en grym tjänst för svenska siter. Och förhoppningsvis kommer den hjälpa till att få fram högre kvalité på många bloggar och sidor då besökarantalet och fler får upp ögonen för det man kan tjäna på tjänsten.