Image 01

The Morning After – modifikationer

3 september, 2009 av Stefan Stenberg

tma141Som jag tidigare antytt är den här installationen av WordPress och TMA på min blogg min första erfarenhet av PHP-script. För att överhuvudtaget hålla någon slags ordning på vad jag sysslar med måste jag ändå hålla koll på vilka modifikationer jag gör i script och CSS-filer. Min tanke var då att jag lika gärna kan lägga ut dom eftersom på den här sidan. Mina vedermödor framstår säkert som löjligt enkla att lösa för de mer erfarna men det kan ju också finnas någon läsare som är på samma nivå som jag. Från början använde jag version 1.3.2 av temat men har nu uppgraderat till version 1.4 – detta påverkar inte vad jag kan se det jag beskrivit nedan med undantag för det som jag speciellt kommenterat).

Mina modifikationer av TMA

Översätta till svenska
Utseende och ikoner
Widgets och plugins
Bildlänkar i högerspalten
Ändra datumvisning
Datumvisning på nya ställen
Veckans låt
Sortera bort dubletter i visning av poster
Bilder i arkivvyn
Mer än en post i ”Latest Post”
Formatera ”Sidor” som ”Kategorier” i högerspalten
Rubriksättning
”Tag Cloud” i vänsterspalt
Uppdatering till version 1.4
RSS-flöden i Sidebar
………………..

Det första jag gjorde efter installationen av version 1.3.2 var att sätta mig och gå igenom PHP-scripten och översätta de viktigaste delarna till svenska. Med tanke på att jobbet får göras om om man uppdaterar har jag inte brytt mig om att översätta allt – ex vis är saker som mouseovers på länkar och en del annat fortfarande på engelska. Det ryktas på forumet om att nästa version av TMA ska vara lokaliserat dvs med en separat textfil att översätta så man slipper sitta och grotta inne i scripten. Enligt uppgift har också en kille i Polen redan gjort en lokaliserad version men eftersom hans blogg av naturliga skäl är på polska begriper jag ingenting. Kan du händelsevis ta dig fram i länkar på polska finns han här på halibutt.pl.
………………..

Nästa steg blev att göra några enkla förändringar i utseendet via den fil som heter ”style.css”. I första läget gjorde jag inget mer komplicerat än att ändra färg på de flesta länkar (utom under ”Categories” där dom fick vara kvar för att skilja ut den delen lite mera från resten av innehållet. Jag bytte också ut några ikoner – Arun använder de fria ikonerna från Twotiny och FamFamFam-Silk vilka man bara kan ladda ner och använda för att komplettera det som redan finns. Jag hade löjliga problem att hitta var grundtypsnittet för hela temat fanns. Alla specialvarianter finns i ”style.css” men inte detta. Jag letade och letade men råkade till slut titta längst upp i filen och fick se att man börjar med att läsa in en annan fil som heter ”compressed.css” och som inte syns i WordPress editor eftersom den ligger i en mappen ”lib”. Där fanns det.
………………..

Efter detta var det dags att aktivera några widgets och leta på WordPress hemsida efter lämpliga plugins för att få till rätt funktioner på bloggen. Läs mera om vilka plugins jag installerat på WP-Plugins-sidan.
………………..

Nästa lilla projekt blev sedan att åstadkomma de bildlänkar som ligger längst ner i högerspalten. Dessa har jag gjort genom att helt enkelt lägga en ”text-widget” där och sedan lägga in HTML-kod i textrutan enligt följande:

<a href=”http://www.centerpartiet.se” target=”_blank”><img src=”http://www.stefanstenberg.se/Bilder/centerpartiet150.jpg” width=”150″ height=”23″ border=”0″ title=”Centerpartiet”></a>

Denna kod upprepas för varje bild. Du får självfallet ändra länkarna, den första ”href” är till den sida du vill länka och den andra ”src” till den mapp där du lagt bilden med det exakta namnet. ”width” och ”height” kan du antingen utesluta eller fylla i den exakta storleken på din valda bild i pixels. ”title” slutligen är det som visas när du för musen över bilden. Upprepar du den här koden gång efter gång under varann i textrutan kommer det att se ut som längst nere till höger.
………………..

Nu var det dags ge sig på PHP-scripten igen – först genom att ändra datumvisningen. Denna tas fram i scripten genom följande kodsnutt: <?php the_time(‘F j, Y’); ?> som placeras in där man vill ha en visning av datum för ex vis när en post är skriven. Det är bokstäverna inom parentesen som avgör vad som visas och i vilken ordning. Jag har helt enkelt valt att låta ”F” och”j” byta plats för att få datum före månad men i övrigt är det fortfarande enligt amerikansk och inte svensk standard helt enkelt därför att jag tycker det ser snyggt ut. Mer info om tidvisningen i WordPress hittar du här i CODEX.
………………..

Nästa steg som visade sig vara lite mer komplicerat var sedan att lägga i datumen på flera nya ställen. Jag ville förutom i ”Recent Posts” också ha datum överst i varje post i ”Latest Post” och ”Asides”. Detta åstadkoms genom att lägga in kodsnutten ovan på rätt ställen i”home.php”. Rätt ställe för ”Latest Post” var inte så svårt att hitta, det vara bara att lägga in följande kod direkt efter rubriken i latest_post-avsnittet:

<div class=”home_recent_date”> <?php the_time(‘j F, Y’); ?></div>

I ”Asides” var det lite svårare eftersom flera poster visas samtidigt. Först gjorde jag likadant som ovan men det fungerade inte. Såsmåningom kom jag istället på att lägga koden direkt efter ”<li>”-taggen i ”asides-avsnittet” – det fungerade. Observera att detta bara fungerar om du vill ha samma utseende på alla ställen eftersom du hela tiden visar mot samma ”class” dvs ”recent”. Vill du ha olika utseenden eller bara bättre ordning i koden måste du döpa om klasserna på varje ställe och sedan lägga till en rad med samma klass i ”style.css” under motsvarande avsnitt.
………………..

Följande projekt visade sig lite krångligare än jag tänkt. Jag ville lägga det som kallas ”veckans låt” längst ner på förstasidan. Början var enkel – jag kopierade helt enkelt hela ”home_featured”-avsnittet i ”home.php” och placerade kopian nedanför ”Asides”. Sedan döpte jag om alla ställen där ”featured” eller ”feat” förekom till motsvarande ”veckans”, ”Veckans låt” eller ”veck”. OBS! – du måste döpa om allt, både ”div id”, ”div class” och hänvisningarna till mappen där bilderna hämtas. Sedan fick jag skapa en ny mapp för bilderna döpt till ”veckans” i mappen ”images” i TMA-mappen, en ny kategori ”Veckans låt” som jag kan spara posterna i och ett nytt Custom Field som hette ”veckans_home_img” (allt detta förutsätter självklart att jag döpt hänvisningarna i scriptet till exakt detta). Efter detta gör man samma sak i ”style.css” dvs tar en kopia på hela avsnittet under ”featured post” och klistrar in nedanför och döper om alla klasser och liknande till exakt samma sak som man tidigare använt i PHP-scriptet. Faktum är att detta fungerade efter första försöket – men nu till det som var mera problematiskt, åtminstone för mig.
………………..

Problemet var den sortering TMA använder för att inte poster ska dyka upp på mer än ett ställe dvs det som syns under ”Asides” och Featured” ska inte synas under ”Latest Post” också. På samma sätt ska ”Recent Posts” inte innehålla varken de båda tidigare nämnda kategorierna eller det som syns i ”Latest Post”. Det här tog ett tag innan jag kom på vad jag letade efter men såsmåningom hittade jag följande kodrader i början på ”home.php”:

<?php $catid = $wpdb->get_var(”SELECT term_ID FROM $wpdb->terms WHERE name=’Asides’”); ?>
<?php $catid2 = $wpdb->get_var(”SELECT term_ID FROM $wpdb->terms WHERE name=’Featured’”); ?>
<?php $catid3 = $wpdb->get_var(”SELECT term_ID FROM $wpdb->terms WHERE name=’Veckans låt’”); ?>
<?php $the_query = new WP_Query(‘cat=-’ .$catid. ‘,-’ .$catid2. ‘,-’ .$catid3. ‘&showposts=1&orderby=post_date&order=desc’);
?>

Här har jag lagt till hela raden som börjar ”<?php $catid3…” och sista delen efter ”new WP Query” som ser ut så här:”-’ .$catid3”. Dessa rader gör att även de poster som ligger under ”Veckans Låt” sorteras bort och inte kommer med dubbelt. Samma sak måste man sedan göra i motsvarande kod i avsnittet ”Recent Posts” längre ner i ”home.php”. Samma sortering görs också under ”Categories” längst upp i ”Sidebar.php” men här har jag inte ändrat eftersom jag vill att ”Veckans låt” ska synas där.
(OBS! – i TMA 1.4 finns inte längre ”-’.$catid2.’,” med efter ”new WP Query” – vill du att det ska fungera som tidigare i 1.3.2 måste du lägga tillbaka denna del av skriptet igen – om detta är en medveten ändring eller en bugg vet jag inte).
………………..

Nästa lilla projekt var hur enkelt som helst eftersom koden fanns på FAQ:n på supportforumet. Det handlar om att visa bilder vid varje post i arkivvyn dvs när jag får upp en lista på poster efter att ha klickat ex vis kategori eller månad. Det var inte krångligare än att lägga in följande kod i ”archive.php” omedelbart före ”´<?php the_excerpt(); ?>”:

<?php if ( get_post_meta($post->ID, ‘thumb_home_img’, true) ) { ?>
<div class=”home_recent_thumb”>
<a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/thumbs/<?php echo get_post_meta($post->ID, ”thumb_home_img”, $single = true); ?>” alt=”<?php the_title(); ?>” /></a>
</div>
<?php } ?>

Detta innebär att man använder de 48px stora ”thumbnails” man redan lagt in för visning i ”Recent Posts”. Läs mer om tipset från Nick Bohle här (scrolla ner till inlägg 57).
………………..

En annan sak att ändra på var att jag ville visa mer än en post i ”Latest Post” på förstasidan. Det är inte svårare än att ändra”showposts” till det antal man vill visa i följande kodsnutt i början av ”home.php”:

<?php $the_query = new WP_Query(‘cat=-’ .$catid. ‘,-’ .$catid2. ‘,-’ .$catid3. ‘&showposts=3&orderby=post_date&order=desc’);

I mitt fall visas alltså de 3 senaste posterna. Problemet är att detta inte blir riktigt snyggt eftersom rubriken ”Latest Post” (eller i mitt fall – ”Senaste Artiklarna”) kommer att komma med överst i varje post istället för att bara stå ovanför den översta av posterna. För att åstadkomma detta var jag tvungen att flytta upp rubriken lite längre upp i koden och placera den direkt under ”<!– start home_left –>” enligt följande:

<div id=”home_left” class=”column span-7 first”> <!– start home_left –>
<h3 class=”mast”>Senaste artiklarna</h3>

För att få lite större avstånd mellan posterna och ett utseende som i ”Asides” fick jag också ändra översta raden i ”Latest Post”-avsnittet i ”style.css” till följande:

#latest_post { padding: 0 0 0.5em 12px; margin: 0 0 0.9em 0; border-bottom: 1px solid #dadada; border-left: 5px solid #dadada;}

Man måste också ändra i sorteringen i ”Recent Posts” så att man tar bort lika många poster som man valt att visa i ”Latest Post” så att de inte visas på 2 ställen. Detta uppnår man genom att ändra ”offset” i nedanstående kod i ”home.php”. I mitt exempel nedan innebär ”offset=3″ att de 3 nyaste posterna inte visas här:

<?php $the_query = new WP_Query(‘cat=-’ .$catid. ‘,-’ .$catid2. ‘,-’ .$catid3. ‘&showposts=10&offset=3&orderby=post_date&order=desc’);
………………..

Du kan lägga till widgets för Archive (Arkiv) och Pages (Sidor) direkt i Sidebar, dessa widgets ingår i standarddistributionen av WP. Problemet ur min synpunkt är att TMA med automatik då formaterar dessa precis som alla andra widgets via ”style.css”. Jag ville istället att de skulle formateras likadant som ”Categories”. Jag hittade inget sätt att särskilja dessa via CSS utan valde istället att lägga in ny kod i ”sidebar.php” enligt följande direkt efter avsnittet ”div id=side_categories”:

<h3 class=”mast”>Separata sidor</h3>
<div id=”side_pages”>
<ul class=”cat”>
<?php wp_list_pages(‘exclude=2,30,459&title_li=’); ?>
</ul>
</div>

<h3 class=”mast”>Månadsarkiv</h3>
<div id=”side_archives”>
<ul class=”cat”>
<?php wp_get_archives(‘type=monthly’); ?>
</ul>
</div>

Detta innebär att koden hamnar omedelbart före följande: ”<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘RightColumn’) ) : ?>” som i sin tur läser in widgetarna så att de här båda arkiven hamnar omedelbart ovanför dessa i högerkolumnen. ”exclude=2,30,459″ anger att sidorna med dessa PageID inte ska visas medan en tom ”title_li=” anger att skriptet inte ska genera någon egen rubrik. Här finns dokumentationen för ”wp_list_pages” och här för ”wp_get_archives”. Jag har dessutom kopierat hela avsnittet ”Category List” i ”style.css” två gånger och döpt dessa till resp. ”side_pages” och ”side_archives”. Iofs kunde man lika gärna lägga hela den nya koden omedelbart före den avslutande div-taggen i ”side-categories” i stället men separata avsnitt i css-filen ger möjlighet att i framtiden ha olika formatering om man vill. (OBS! – efter att jag skrev detta har jag installerat pluginen ”Snazzy Archives” och i och med detta behövs det inget separat månadsarkiv längre – därför har jag tagit bort de sista sex raderna igen).
………………..

Nästa lilla projekt var att se över rubriksättningen på sidorna. Jag har stuvat om en del och lagt till en del nya och standardiserat på två olika som jag använder konsekvent, dels den röda som i standarddistributionen av TMA fås med taggen ”<h3 class=”mast”>…</h3>” och dels den gråa understrukna som fås med ”<h2 class=”post_cat”>…</h2>”. Jag har gjort ändringar i ”archive.php”, ”page.php”, ”single.php” och ”author.php” men har ingen lust att visa alla 4 utan visar ändringarna i ”archive.php” som exempel. Den del av scriptet som styr kategoriarkivets vänsterspalt ser numera ut så här:

<?php if (is_category()) { ?>
<h3 class=”mast”>Kategoriarkiv</h3>
Välj kategori till höger så ser du alla artiklar i denna kategori i mittenspalten.
<div class=”archive_meta”>
<h3 class=”mast”>RSS Feed</h3>
<div class=”archive_feed”>
<?php $cat_obj = $wp_query->get_queried_object(); $cat_id = $cat_obj->cat_ID; echo ‘<a href=”‘; get_category_rss_link(true, $cat, ”); echo ‘”>RSS feed för den här kategorin</a>’; ?>
</div>
<?php $cat_count = $cat_obj->category_count; ?>
<div class=”archive_number”>
Den här kategorin innehåller <?php echo $cat_count . ($cat_count==1?” artikel”:” artiklar”) ?>
</div>
</div>

De inledande raderna av den del av scriptet som styr mittenspaltens utseende ser numera ut så här:

<div class=”column span-8″>
<h2 class=”post_cat”><?php echo single_cat_title(); ?></h2>
<?php while (have_posts()) : the_post(); ?>

Mittenraden gör att den aktuella kategorin eller taggen visas som en grå understruken rubrik i mittspalten.
………………..

Jag tyckte också att det kunde vara lämpligt att ha en ”tag-cloud” i vänsterspalten i tagarkivet. Eftersom jag använder en plugin som heter ”Simple Tags” som går att anropa direkt i php-scriptet ser den delen av ”archive.php” som styr vänsterspalten av tagarkivet numera ut så här:

<?php } elseif (is_tag()) { ?>
<h3 class=”mast”>Sökordsarkiv</h3>
Välj sökord (tag) nedan så ser du de artiklar som är kopplade till sökordet i mittenspalten.
<div class=”archive_meta”>
<h3 class=”mast”>Sökord</h3>
<?php st_tag_cloud(‘cloud_selection=count-desc&cloud_sort=name-asc&format=list&number=100&title=&largest=22&smallest=10&unit=px&maxcolor=#336633&mincolor=#999999′); ?>
</div>

Dokumentationen för vilka ”selectors” man använder för ”st_tag_cloud” hittar du här på Google Code . Vill du slippa punkterna före varje post i listan måste du också lägga till följande rad någonstans i ”style.css”:

ul.st-tag-cloud { list-style-type: none }

Lämpligen placeras den under ”Archive styles” så den är lätt att hitta.
………………..

Jag har nu uppdaterat till version 1.4 av ”The Master Plan”. Tanken var att denna version skulle vara lokaliserad men det var den inte. I och med att jag har översatt den tidigare versionen direkt i php-scripten så hade jag ingen lust att göra om detta. Jag har alltså därför inte gjort en ren uppdatering av de nya filerna utan istället jämfört versionerna i ett program som heter ”ExamDiff” och sedan klippt och klistrat för hand, ändringarna är faktiskt inte så stora.

Framför allt är det en anpassning till den möjlighet som nu finns i WP att ha trådar i kommentarerna som gjort att en del script gjorts om, men det handlar ex vis också om att möjliggöra Avatarer och om en del buggfixar. Det handlar därför framför allt om att ändra scripten ”comments.php”, ”functions.php”, ”singel.php” och ”home.php”. Det finns också ganska mycket ändringar den centrala css-filen ”style.css” men de ändringarna består av 2 delar: dels handlar det om att styra upp de nya funktioner som lagts till i uppdateringen, men dels också om finjusteringar i utseendet (om man vill göra dessa sistnämnda eller inte är ju valfritt).

Jag kan inte se att ändringarna påverkar de modifieringar jag beskrivit ovan. Dessa modifieringar gäller fortfarande bortsett från en sak – den sortering som används för att de poster som syns i ”Featured Post” och ”Asides” inte ska synas i ”Latest Post” och Recent Posts” har också ändrats – enligt min mening till det sämre (se vidare kommentaren ovan).
………………..

Jag anser att man ska vara sparsam med att lägga in RSS-flöden från andra sajter på sin egen men ett flöde från mitt eget parti på riksplanet tycker jag man borde kunna ha med och detta ville jag lägga i ”Sidebar”. Jag började med det enklaste vilket var att aktivera den RSS-widget som levereras med WP men åtminstone hos mig ville det inte fungera (problem med visningen av ÅÄÖ och oändligt långa mouseovers bl a).

Nästa variant var att själv lägga in den kod (fetch rss) som finns här i Codex direkt i php-scripten på lämplig plats men det innebär att man får peta med klasser och tillägg i Css-filen. Först då slog det mig att jag kunde leta bland plugin-programmen och jag hittade mycket riktigt ”PHP Code Widget” som låter dig lägga in egen php-kod även i Sidebar på lämpligt ställe.

I och med detta var det inte krångligare än att aktivera denna widget och sedan klistra in koden från ”fetch php” så får man det som nu finns i högerspalten på bloggen.
………………..

Taggar: ,

Lämna en kommentar