(klikkaa isommaksi)

Ei Sipping Designsille, mutta toiselle blogilleni on tulossa uusi ilme — kunhan saan wireframen käännettyä WordPress-teemaksi. Roll A Week-valokuvausblogini nykyinen leiska on viime kesältä, ja kyllästyminenhän tässä on ehtinyt syntyä.

Uudella ulkomuodolla haen yksinkertaisuutta ja keveyttä. Värimaailma pysyy harmaan, mutta aavistuksen vaaleampana nykyiseen verrattuna. Jätän tekstuurit, liukuvärit ja kikkailut tällä kertaa kokonaan väliin. Kasvatan kuvaleveyden 500 pikselistä 600:aan.

Samalla reseptillä syntyi kohta puolitoista vuotta sitten tämän blogin ulkoasu, johon en ole vieläkään kyllästynyt.

Google muuten tarjoaa ilmaiseksi käyttöön web-fontteja (www.google.com/webfonts), jotka pystyy kahdella koodirivillä ottamaan käyttöön missä tahansa nettisivuleiskassa. Olen aiemmin käyttänyt Cufón-konetta erikoisfonttien upottamiseen, mutta Google Web Fonts vaikuttaa näppärämmältä, ja se mahdollistaa myös erikoisfontin maalamisen. Fonttien määrä on rajallinen, mutta kivoja fontteja löytyy laidasta laitaan. Kokeilen Google Web Fontsia ensimmäisen kerran Roll A Weekin uudessa leiskassa.

Käytän WordPressin päälle rakennetussa blogissani Sociable-lisäosaa, jolla postauksiin saa jakonapit. Jakonapit saa joko automaattisesti Sociablen asetuksilla jokaisen postauksen (ja halutessaan myös sivun) loppuun, mutta nappien paikan voi myös määritellä itse. Myös näytettävät palvelut voi valita ja järjestää itse melkein sadan joukosta..

Jos Sociable-nappien paikan haluaa määrittää itse, se tehdään ulkoasuteeman tiedostoihin lisäämällä seuraava koodi sopivaan kohtaan.

<?php
if (function_exists('sociable_html')) {
 echo sociable_html();
}
?>

Halutessaan koodin voi laittaa esimerkiksi <div class="share"></div> -tagien väliin helpottamaan CSS-muotoilua. Kun paikan määrittelee itse, kannattaa ruksit ottaa pois Sociablen asetuksista otsakkeen Position alta. Samoin Tagline-rivi kannattaa tyhjentää. Muut asetukset voi laittaa kuten haluaa.

Ja sitten kirjoituksen varsinaiseen aiheeseen…

Sociable-lisäosa tuottaa kullekin jakopalvelulle omanlaisensa linkin, jonka avulla postauksen nimi ja osoite (URL), ja joissain tapauksissa myös postauksen katkelma, siirretään jakopalveluun. Näitä linkkirimpsuja voi halutessaan (osatessaan) muokata haluamakseen. Lisäosaa voi muokata suoraan WordPressin hallintapaneelissa: Lisäosat > valitse Sociablen kohdalta Muokkaa.

Ensimmäisenä WordPressin editoriin aukeaa sociable.php-tiedosto, joka onkin ainoa, joka tarvitsee muutoksia. sociable.php-tiedostossa on jokaisen valittavissa olevan palvelun rimpsut ja jonkin verran muuta koodia. Rimpsut voi halutessaan muokata uuteen muotoon. Kussakin rimpsussa vilahtelee kaksi tai kolme seuraavista: PERMALINK, TITLE ja ENTRY. PERMALINK lisää rimpsuun postauksen osoitteen, TITLE postauksen otsikon ja ENTRY tarvittaessa katkelman.

Jos käytössäsi on WordPressin nätit URLit, jotka ovat muotoa http://www.omaosoite.fi/2010/08/06/postauksen-otsikko, PERMALINK pidentää lopullista rimpsua melkoisesti. Varsinkin Twitterissä merkit ovat kultaakin kalliimpia, koska yksi tweet on maksimissaan 140 merkkiä pitkä, joten lyhyt osoite olisi parempi kuin pitkä. Postauksen osoite pitää tietenkin pitää mukana, joten sitä ei voi rimpsusta poistaa, mutta keksin keinon, jolla linkistä saa lyhyemmän hukkaamatta osoitteesta omaa domainia.

PERMALINKin tuottaman osoitteen muokkaus on yksinkertaista. Etsi sociable.php-tiedostosta seuraava kohta. Siinä $permalink-rivi määrittää, mitä PERMALINKin tilalle laitetaan. Oletuskoodi siis hakee postauksen normaalin osoitteen, on käytössäsi minkälainen WordPress-URL tahansa.

// Clean the excerpt for use with links
$excerpt = str_replace('+','%20',$excerpt);
$permalink = urlencode(get_permalink($post->ID));
$title = str_replace('+','%20',urlencode($post->post_title));

Kun koodi muutetaan seuraavaan muotoon (korvaa http://omaosoite.fi omalla domainillasi ilman www:tä), pitkäksi venähtävän osoitteen tilalle sijoitetaan WordPressin oletusmuotoinen URL http://omaosoite.fi/?p=10. Alla olevassa koodissa $post->ID tulostaa osoitteeseen postauksen ID-numeron, joka on juokseva numero ykkösestä eteenpäin.

// Clean the excerpt for use with links
$excerpt = str_replace('+','%20',$excerpt);
$permalink = 'http://omaosoite.fi/?p='.$post->ID;
$title = str_replace('+','%20',urlencode($post->post_title));

WordPress-blogisi osaa ohjata lyhennetylläkin linkillä oikeaan osoitteeseen ilman, että sinun tarvitsee tehdä muita muutoksia. Muutoksen jälkeen kaikkissa valitsemissasi jakolinkeissä postaukseen osoittava linkki on lyhyttä muotoa.

Lyhentämällä linkit näin, lyhennetty linkki on luotettavamman näköinen kuin verkosta löytyvillä URL-lyhennyspalveluilla toteutetut linkit, jotka ovat yleensä sekalaisten merkkien jono.

Esimerkiksi tämän postauksen lyhennetty URL on http://sippingdesigns.com/?p=1151. Toimii!

Lisämuutoksia

Itse olen muokannut myös Twitter-rimpsua erikseen, koska haluan, että Twitter-nimimerkkini näkyy vierailjoiden jakamissa tweeteissä, jos he eivät sitä poista. Alla on oletusmuotoinen Twitter-rimpsu.

'Twitter' => Array(
'favicon' => 'twitter.png',
'awesm_channel' => 'twitter',
'url' => 'http://twitter.com/home?status=TITLE%20-%20PERMALINK',
'spriteCoordinates' => Array(343,55),
'supportsIframe' => false,
),

Olen muokannut sen seuraavaan muotoon. Olen lisännyt oletusrimpsun alkuun “RT @perminna: “-pätkän. Rimpussa välilyönnit pitää korvata %20-merkinnällä. Rimpsun alkuosaan ei saa kajota, jos haluaa että Twitter-jakolinkki toimii oikein. Muutoksia saa tehdä =-merkistä alkaen.

'Twitter' => Array(
'favicon' => 'twitter.png',
'awesm_channel' => 'twitter',
'url' => 'http://twitter.com/home?status=RT%20@perminna:%20TITLE%20-%20PERMALINK',
'spriteCoordinates' => Array(343,55),
'supportsIframe' => false,
),

Alla olevaan kuvakaappaukseen olen merkinnyt punaisella kohdat, jotka näkyvät lopullisessa tweetissä, jossei sitä jakaja muokkaa.

Samaan tapaan voisi muokata myös muiden jakopalvelujen rimpsut.

Niin ja se blogi… sen nimi on Roll A Week ja sen osoite on www.rollaweek.com. Uusi blogi tulee keskittymään pelkästään valokuvaukseen ja siihen liittyviin tekniikoihin ja laitteisiin. Valokuvauksen piti olla pieni osa Sipping Designs -blogia, mutta viime kuukausien aikana valokuvajorinat ovat täyttäneet sen melkein kokonaan. Päätin siis avata kuva-asioille oman blogin ja ne poistuvat käytännössä kokonaan tästä blogista.

Uudessa blogissa yritän jälleen englanniksi kirjoittamista, mikä tyrehtyi parissa kuukaudessa Sipping Designsissa.

Sivujen lisäksi suunnittelin yritykselle logon ja käyntikortin ja kuvitin yrityksen prosessikaavion.

Kun aloitin opinnot Vaasan yliopistossa, toteutin yliopiston www-palvelimelle ensimmäiset vähän oikeammat kotisivut, oikeaoppisesti rakenteen ja tyylitiedoston erillään pitäen, XHTML- ja CSS-tekniikoita käyttäen. Nämä olivat yliopistokotisivuinani koko opintojeni ajan (kuvakaappaus oikealla). Vielä syksyllä nekin olivat verkossa, mutta näemmä nyt ne on poistettu palvelimelta.

Kesällä 2006 ostin ensimmäisen verkko-osoitteeni ja siihen www-palvelintilan. Osoite oli www.thatsabsurd.net, joka toimii edelleen, ohjaten tähän uuteen domainiin. Thatsabsurd.netin alla pyöritin kotisivujani ja blogejani useamman vuoden ajan. Ajoittain sivuston ulkoau ja nimi muuttui. Viimeisimmät ajat (1,5-2 vuotta) blogi ja sivusto oli nimeltään Minnan nettikolo ja sillä olikin melko laaja lukijakunta. Kiinnostui johtui pääosin runsaasta tietotekniikkakirjoittelustani, erityisesti suosiota toi miniläppärijorinat.

Keväällä 2007 aloitin suunnittelemaan nettisivuja myös asiakkaille. Perustin Thatsabsurd.netin alle web-suunnittelua varten esittelysivut. Keväällä 2009 ostin oman domainin ja palvelintilan web-suunnittelua varten. Minnaperala.comissa on tällä hetkellä toisen generaation ulkoasu, jonka päivitykseen 2.5G:ksi haluaisin löytää aikaa, vaikka olen sivujen nykyiseen tilaan kuitenkin pääasiassa tyytyväinen.

Syksyllä 2009, turhautumisen vimmassa päätin vetää thatsabsurd.netin blogin sileäksi. Jäljelle ei jäänyt mitään. Ajattelin, että verkko-osoitteen ja kielen vaihtaminen ja blogin uudelleenbrändääminen auttaisi tuskaan. Toteutin uudelle blogille uuden, mielestäni melko onnistuneen harmaan ulkoasun.

Nyt olen kuitenkin tässä, eri tilanteessa. Päädomain on uusi, se jonka syksyllä 2009 hankin thatsabsurd.netin rinnalle, mutta olen palannut tuttuuun kotimaiseen. Nykyinen ulkoasu on vähintään kymmenes erilainen, jonka olen omaa käyttöäni varten toimivaksi asti toteuttanut. Toivon, että kehitystä on ollut havaittavissa.

WordPress-julkaisujärjestelmän otin käyttöön muistaakseni alkuvuodesta 2008. Siihen asti toteutin sivut PHP-XHTML-CSS-pakettina, melkein staattisina sivustoina, mikä toki onnistuu tarvittaessa vieläkin.

Kerään tähän listaa uuden leiskan bugeista eli vioista ja muista tuunausta vaativista kohdista. Korjaan näitä mahdollisimman nopeassa tahdissa. Mikään ongelma ei ole maata järisyttävän suuri, joten toivottovasti kukaan ei hermostu moisista pintavirheistä.

• IE7-selaimella (en enää tue IE6:sta, joten sen tolasta en tiedä) vasemman reunan välilehdet eivät pysy selaimen/ikkunan reunassa, vaan tulevat postauksien päälle.
• Sivut, joita ei tällä hetkellä ole näkösällä yhtäkään, eivät vielä näytä hyvältä.
• Oikean palstan Flickr-kuvien hoverointi tuottaa rumaa poukkoilua, koska sivupalstasta ei ole poissuljettu kuvien kohdalta alareunan punaista viivaa mouse hoverin aikana.
• Caption- eli kuvatekstit eivät vielä näytä kuvateksteiltä.
• Code- ja pre-merkityt tekstit ovat tylsän alkuperäisiä, joten näitä pitää (todennäköisesti) jotenkin säätää.

Jätä kommenttia, jos huomaat muita outouksia.

Modern WordPress content management system offers several built-in tools for modifying the look of your comments. The features have been there for awhile now and in 2.8 they added also the threaded commenting. At the moment the newest version of WordPress is 2.9.1.

One of the easiest ways to modify the comment list is to make the post author’s comments to stand out. Another easy way is to adjust even and odd comments to look different. Modifying the look of comment list and individual comments is not difficult but it requires that you understand how CSS (Cascading Style Sheets) syntax flows and how (X)HTML ((Extensible) Hypertext Markup Language) selectors work.

Below is an example of comment list where all the comments look exactly the same. Of course gravatars and names help to identify the comment writers but if there are dozens of comments, it may be difficult or at least slow to find the post author’s comments which usually are replies to other comments.

In the second example I’ve used different background color in the post author’s comment so that it can be spotted quickly. This is just a simple example and of course the author’s comment could be modified in any way CSS allows.

The WordPress function that prints the post or page comments is (specification):

<?php wp_list_comments(); ?>

This function displays the comments inside <li></li> elements by default and therefore it’s recommended to wrap the function with <ul></ul> or <ol></ul> if the default output is used. I’m not going to talk about modifying the structure of the comment list in this post but if you are interested you can find an example in WordPress Codex.

The small bit which we need to about the wp_list_comments() function is that in the default mode it embeds a lot of (X)HTML selectors into the <li></li> tags. We can use these selectors (classes to be more exact) to direct CSS styling into specific comments. If you are building your custom output you can use the following function to print the same selectors:

<?php comment_class(); ?>

Each comment (li element by default) will get comment class but there will be a bunch of other useful selectors too:

even / odd
thread-even / thread-odd
depth-1 / depth-2 / ... / depth-x
byuser
comment-author-name
bypostauthor

Okay, so you have your style sheet ready but how to make modifications to the post author’s comments? Now that we have the selectors in the list above, we can pick the correct one and use .bypostauthor in the style sheet to direct the style changes into specific comments, the post author’s comments. In the example only the background color is changed so we need to add the following into our style sheet:

.bypostauthor {
background-color: #284d39;
color: #cccccc;
}

The second line is not necessary to make the background green but it is necessary if you want to write valid CSS code. Valid CSS requires that if a background color is defined, also the text color must be defined, and vice versa. Now you will have free hands if you want to make more detailed changes. By the way, the even / odd class can be used to make even and odd comments to look different!

I’m going to introduce more built-in WordPress features in the future too. Plug-ins are useful but it’s always better to get the same features implemented in the WordPress core so that they are properly specified and the compatibility can be guaranteed. You can make suggestions for short tutorials in the comments.

Credits: The background texture in the example pictures is made using one of the brushes from KeReN-R’s Grunge Brushes 3 set.