WordPress kickstart, del 2

Som jag lovade i kommentarerna till förra inlägget, här kommer scriptet som låter dig sätta upp en WordPress-site under minuten. Perfekt för utveckling och test med andra ord.
Jag förutsätter en del i koden. Till exempel bör du ha nginx som webbserver med en apachelik struktur för virtual hosts, dvs en katalog /etc/nginx/sites-available där alla virtual hosts är definierade, och en katalog /etc/nginx/sites-enabled, där de för tillfället aktiverade servrarna är inlänkade.

Men här är hela härligheten, lycka till. Tänk på att detta använder jag bara på min egen utvecklings-server, inte i någon delad miljö. Det finns ingen kontroll av input eller andra säkerhetsåtgärder. Använd på egen risk.

###########################################
# Constants, set and forget
###########################################
# temp storage for the wordpress tarball
TMP_STORAGE=wptemp

# web root for the wordpress site
WWWROOT=/var/www

# Privileged db use/pwd for creating database and granting rights
DBROOT=badass
DBROOTPWD=badass

# Database owner/pwd for the WordPress tables
DBUSER=dbuser
DBPWD=dbuser

# user:group for the web server
WWWUSER=nginx
WWWGRP=nginx

# network device used for detecting external ip address
DEVICE=eth0

###########################################
# ok, no touching down there

# Get the WordPress stuff, the nightly build, unzip it
cd $TMP_STORAGE
wget http://wordpress.org/nightly-builds/wordpress-latest.zip
unzip wordpress-latest.zip

# Get the site name
echo -n "Domain name? : "
read -e WP_DIR

# mv the WordPress files to their final destination. 
# we will add web server config later
cp -R wordpress ${WWWROOT}/${WP_DIR}
rm -rf wordpress*

# Create virtual host config for nginx. 
# Use the template below and then replace the site name
ngx_template=$(cat < /etc/nginx/sites-available/${WP_DI
R}.conf
ln -s /etc/nginx/sites-available/${WP_DIR}.conf /etc/nginx/sites-enabled/

# Create mysql database
dbname=${WP_DIR//[\.-]/_}
mysql -u ${DBROOT} -p${DBROOTPWD} < ${WWWROOT}/${WP_DIR}/wp-config.php

chown ${WWWUSER}:${WWWGRP} ${WWWROOT}/${WP_DIR}/wp-config.php
rm ${WWWROOT}/${WP_DIR}/wp-config-sample.php

# Reload web server
/etc/init.d/nginx reload

echo "Done!"
echo "Add this to your hosts file:"
echo ` ifconfig ${DEVICE} | grep inet | grep -v inet6 | cut -d ":" -f 2 | cut -d
 " " -f 1` ${WP_DIR}

WordPress kickstart

Det går ganska fort att installera WordPress. Med ett enkelt bash-script går det ännu fortare.
Så här gör jag för att installera en ny WP-sajt på min gentoo-server med nginx som kör i en virtualbox-image på min Macbook Pro.

Scriptet laddar hem senaste nightly build av WordPress, packar upp den, skapar en ny virtual host, skapar databas och användare samt modifierar wp-config.php. Efter det behöver jag bara lägga in det nya host-namnet i /etc/hosts och sajten är uppe.

Unable to display content. Adobe Flash is required.

Internlänkar i WordPress

En av nyheterna i WordPress 3.1 beta 1 som ”lanserades” idag, är möjligheten att enkelt länka till internt innehåll på sajten, till andra poster eller sidor.

Det fungerar så här, markera din ankartext och klicka på länksymbolen.

 

Du får då upp ett gränssnitt där det är enkelt att söka upp innehåll, välja lämplig post eller sida och skapa länken.

 

Klicka på ”Save link” (eller ”Spara länk” när den svenska översättningen kommer ikapp) och du är klar. Ännu ett kliv mot fullt accepterat CMS är taget.

(läs mer om Easy within-site linking from new content)

WordCamp 2010, en svensk WordPress-konferens

Sveriges första riktiga WordPress-konferens var i helgen på Tekniska muséet i Stockholm. Jag var där och lyssnade på SEO-snack med Nikke Lindqvist, min gamle kollega och vän Kristian Erendi pratade om Aller Medias WordPress-setup (som jag ju jobbat med tidigare), arrangören själv, Thord Daniel Hedengren gav oss inblick i hur man skriver smarta parent/child-teman, John Angelmo tyckte vi skulle byta lösnord ofta och Per Åström på TV4 berättade om hur de jobbar med WordPress. Jag hade gärna gått på fler seminarier men tre parallella spår gjorde att det inte var möjligt, tyvärr.

Vi hade tillgång till muséet hela natten, och ganska många stannade kvar och byggde smarta WordPress-lösningar istället för att stappla hem och vila upp sig. Jag var en av dem som sparade in på hotellpengarna och istället byggde sajten fredagswhisky.nu. Idén till namnet kom från @findub och det tackar jag speciellt för. På sajten hämtar jag de Flickr-bilder som är taggade med termen fredagswhisky, oavsett vem som gjort det, och skapar WordPress-inlägg av dem, med titel, hotlänkad bild och givetvis attribution och länk tillbaka till Flickr.
En helt meningslös sajt alltså, mer som en proof-of-concept för hur man kan skapa en plugin som skapar WP-poster från ett set med flickr-taggar via Flickrs utmärkta (men inte perfekta) API.

Jag tänkte dra in flickr-flöden som nämner ”fredagswhisky” också, samt lägga till autopostningar till Twitter/Facebook men framåt sex på morgonen tog orken slut och jag gick mest runt och drack kaffe och störde de andra.

Så här ser sajten ut och som synes var inte designen något jag prioriterade i steg 0.1-pre-alpha 🙂

fredagswhisky.nu

Hur som helst ett väldigt trevligt arrangemang av @tdhse och @animalin och jag hoppas verkligen att detta blir ett årligen återkommande evenemang. Gärna med bättre spotifylistor till natthacket …

På wpsthlm smakar det bra med en whisky

WordPress-tema till Livebookings

I våras jobbade jag med att utveckla en webblösning åt Livebookings i England. Grundtanken var att det skulle vara en i stort sett färdig sajt som valfri restaurang skulle kunna ha användning av, inklusive en del innehåll. Temat som jag byggt i WordPress har en stor mängd inställningar för utseende och funktioner, alla restaurangsajter ska kanske inte se likadana ut. Det finns givetvis en inbyggd funktion för Livebookings egen bokningswidget, kopplingar till sociala medier, både via bokmärken och länkar till restaurangens profiler i olika sociala medier.
Det finns språkstöd, grundspråket är engelska men den har också översatts till spanska.
Bland de färdiga plugins som använts märks SexyBookmarks, Dynamic Content Gallery och W3 Total Cache

All funktionalitet som jag utvecklat ligger direkt i temat, för att underlätta administrationen.

Och det var en sak till …
Vi är nu live med första sajten! Det är Ibiza 41 som blev först ut. En restaurang i Madrid, som kör på spanska då förstås.
Förhoppningsvis är det fler som följer.

ibiza41.com

Kontakta Magnus Hultberg på Livebookings för mer info. Eller gå till Livebookings i Sverige. De har också en blogg om ”Online marketing” för restauranger.

Nya affärer

Den fjärde juni lanserades bonniersajten nyaaffarer.se. Det är ett samarbete mellan Veckans Affärer och Privata Affärer och målet är att Nya Affärer ska vara Sveriges nya mötesplats för entreprenörer.
Sajten är byggd med WordPress 2.9.2 och det är jag som gjort det jobbet. Jag har utgått från en Photoshop-design av Martin Runfors samt en kravspec av Mikael Zackrisson, webbchef på VA.se och privataaffarer.se.

Nya affärer
Nya affärer

Mer om tekniken:

  • Forumdelen är byggd i bbPress
  • Artiklarna på förstasidan går att sortera i valfri ordning genom ”dra-och-släpp”-funktionalitet i admingränssnittet.
  • Specialfunktionalitet för att visa faktarutor och ”se också”-länkar.
  • Senaste forumdiskussionerna syns på startsidan
  • Cachehantering via WP-Supercache

WordPress shortcodes – enkelt exempel

I WordPress 2.5 introducerades shortcodes men det är nog många som fortfarande inte vet riktigt vad det är och vad man kan använda det till.
Shortcodes tillåter dig exempelvis att skriva [gallery] direkt i ett blogginlägg, och så visas alla bilder som hör till det inlägget som en liten kontaktkarta.
Man kan givetvis definiera egna shortcodes, genom att skriva en funktion i ett plugin eller i functions.php och sen koppla en shortcode till den funktionen.

Exempel 1

function bloginfo_shortcode( $atts ) {
    extract(shortcode_atts(array(
        'key' => '',
    ), $atts));
    return get_bloginfo($key);
}
add_shortcode('bloginfo', 'bloginfo_shortcode');

Funktionen add_shortcode registrerar en ny shortcode, och i exemplet ovan betyder det att om man skriver [bloginfo] i ett inlägg, så kommer funktionen bloginfo_shortcode() att anropas. Just i det här exemplet ska man dessutom skicka med en parameter, det ser ut så här: [bloginfo key=”template_url”]
(Exemplet kommer från Blue Anvil)

Exempel 2

Jag har i ett tidigare inlägg visat hur man kan koppla en spotifylista till en wordpress-post, en metod som jag använder på http://topp30.se.
Jag vill utnyttja det faktum att listorna nu ligger som egna fält, och skapa en sida med alla spotifylistor i en lång (nåja) HTML-lista.
Steg ett är att definiera en funktion som hämtar alla inlägg med ”spotify-fält” och sen generera en lista av dem.
Nästa steg är att koppla en shortcode till den funktionen.

// [spotifylist] - shortcode function
function spotify_sc_func($atts) {
   ob_start();
?>
   
    posts wposts, $wpdb->postmeta wpostmeta WHERE wposts.ID = wpostmeta.post_id AND wpostmeta.meta_key = 'spotify' AND wposts.post_status = 'publish' AND wposts.post_date < NOW() ORDER BY wposts.post_type, wposts.post_date DESC "; $pageposts = $wpdb->get_results($querystr, OBJECT); ?>
  • : spotify | text
  • Not Found

    Sorry, but you are looking for something that isn't here.

Nu återstår bara att skapa en sida som använder vår nya shortcode.

Och resultatet ser blir det här

Läs också Mastering WordPress Shortcodes på Smashing Magazine.

Automatisk spotifylänk i WordPress

På sajten http://topp30.se listar jag och en del vänner och bekanta varje år våra favoritlåtar. Vi har sysslat med detta något nördiga listande i drygt tio år. Förra året började några av oss att bifoga listan i spotify-form, och inte bara text. I år har nästan alla 20 en spotifylista för sin årslista.

Länken till spotifylistan finns i varje inlägg som en vanlig textlänk, men den ligger ofta på olika ställen, har olika ankartext och kan vara lite svår att hitta. Därför la jag till en genererad spotifylänk som alltid hamnar på samma ställe, uppe till höger i varje inlägg. Lättare att hitta, mer konsekvent.

Detta kan man åstadkomma genom att lägga spotifylänken som ett ”eget fält”, ändra i varje template-fil på rätt ställe (index.php/archive.php/search.php etc.) och där läsa in spotify-fältet och visa länken, men det blir opraktiskt att underhålla, lätt att göra fel och lite fult.

En betydligt snyggare lösning är att använda WordPress filterfunktionalitet.

Steg 1:
Lägg spotifylänken som ett ”Eget fält” (för varje inlägg som har en spotifylista).
länk till spotifylista

Steg 2:
Lägg till en funktion (i functions.php), som visar en länkad spotify-logga när det finns en lista tillgänglig.

function spotify_content($content) {
	global $post;
	$meta_key = 'spotify';
	$extra_info = "";
	$spotify_logo = get_bloginfo('template_url') . "/img/spotify.png";
	$meta_value = get_post_meta($post->ID, $meta_key, TRUE);
	if($meta_value != '') {
		$extra_info = <<
				Lyssna på låtarna via Spotify
			
EOT; } return $extra_info . $content; }

Steg 3:
Lägg till ett filter, som anropar spotify_content varje gång WordPress-funktionen the_content anropas. Det är the_content som visar texten i ett blogginlägg så den kommer definitivt att anropas från exempelvis single.php och index.php (det finns undantag, se längre ner)

add_filter( 'the_content', 'spotify_content' );

Steg 4:
Lägg till en css-klass i style.css som lägger din div som du vill ha den. Den allra enklaste varianten blir så här:

.spotify-link {
   float: right;
}

Och det var allt. Resultatet, med en klickbar spotify-logga för varje spotifierat inlägg blir så här:

topp30.se med automatisk spotifylänk
topp30.se med automatisk spotifylänk

Observera att ibland används the_excerpt stället för the_content i mallarna. Det är när man bara vill visa ett utdrag ur inläggen istället för hela texten.
Om man vill ha spotify-länken även i dessa mallar så är det inte svårare än att man lägger in ett filter för the_excerpt också:

add_filter( 'the_excerpt', 'spotify_content' );