(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.

Uuden version myötä myötä vapaan lähdekoodin sisällönhallinta- ja julkaisujärjestelmään tulee useita uusia ominaisuuksia:

• Käyttäjänimen ja salasanan valinta heti asennusvaiheessa. Aiemminhan WordPress on luonus oletuskäyttäjän admin ja tälle konegeneroidun salasanan. Nyt blogin käyttäjätunnuksen ja salasanan voi valita ennen asennusta, samalla sivulla blogin nimen valinnan kanssa.
• Usean blogin pyörittäminen samalla asennuksella. Aiemmin usean blogin pyörittämiseen on pitänyt käyttää WordPress MU (multi user) -alustaa, mutta 3.0:ssa nämä ominaisuudet on liitetty WordPressin ytimeen.
• Uusi oletusteema. 3.0:n myötä WordPressin oletusteema päivittyy. Uusi on nimetty Twenty Teniksi ja sitä voi demota WordPressin kehitysblogissa.
• Kustomoidut artikkelileiskat (suomennos hakusessa) tulevat kategorioiden ja avainsanojen (tag) rinnalle lokeroimaan artikkeleita. Uuden ominaisuuden avulla eri tyyppiset artikkelit voidaan julkaista omanlaisiensa muotoilujen kera. Esimerkiksi arvostelu-artikkelit ja tuoteuutuus-artikkelit voisivat näyttää erilaisilta. Lisää artikkelikohtaisista leiskoista WP Engineerissä.
• Dynaaminen drag&drop -valikkohallinta mahdollistaa sivuston valikon hallinnoinnin WordPressin Ohjausnäkymästä käsin. 3.0:sta lähtien sivuston valikon järjestystä voidaan hallita samaan tapaan kuin sivupaneelien vimpaimia, raahamalla ja pudottamalla. Lisää uudesta valikkohallinnasta WP Engineerissä.
• Taustakuvien hallinnointi tuodaan uudessa WordPressissä myös Ohjausnäkymään. Ominaisuus mahdollista sivuston taustakuvien vaihtamisen (itse kuva, asemointi, toisto) ilman tyylitiedostosörkkimistä. Ominaisuus vaatii yhden rivin lisäyksen teeman functions.php-tiedostoon: add_custom_background();
• Kirjoittajakohtaiset templaatit tuovat blogeihin laajemmat mahdollisuudet erotella eri kirjoittajien artikkelit. Templaatit nimetään kirjoittajan nimen tai id-numeron perusteella.
• Tästä lähin käyttäjille tarjotaan tervetuloesittely käyttönoton helpottamiseksi, jotta uudet WordPress-käyttäjät pääsevät nopeammin sisälle blogiohjelmistonsa vinkeisiin.
• Lisäosista tulee uuden WordPressin myötä standardisoidumpia (“canonical”), jotta käyttäjien ei tarvitse WordPressiä päivittäessään murehtia, rikkuuko osa sivustosta yhteensopimattomien lisäosien vuoksi.

Via WPcookies, Crenk ja Template Monster Blog.

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.