Affiliatesite med product feed

Under julledigheten så har jag och en klasskompis utvecklat en affiliatesite där vi genom att använda XML-feeds har importerat produkter från olika näthandlare. Flödet uppdateras nu automatiskt varje natt och vi hoppas på att kunna använda siten för att träna på både SEO och SEM.

För att sätta upp webbplatsen så har vi använt WordPress tillsammans med WooCommerce och WP all import. Temat som vi har använt är Mystile, ett tema som är speciellt utvecklat av WooThemes för att användas tillsammans med WooCommerce. Produktflödena har vi skaffat genom att registrera oss hos olika affiliatenätverk och ansöka till de program som är intressant för vår idé. Det har tagit tid, men nu är det igång och fungerar, så nu är det bara att hoppas på att det leder till några försäljningar!

Hur lägger man in en egen header i WordPress?

Idag fick jag en fråga av en klasskompis som jag inte kunde svara på.

“Lynn, hur lägger jag in en header för min blogg när jag använder ett tema som inte stödjer egna headers?”

Ok, jag vet var det ska ändras, och jag vet på ett ungefär hur koden ska se ut, men att svara på en sådan fråga på rak arm utan att kunna se efter ordentligt i koden var inte riktigt min grej. Jag hade dock ett liknande tema på en av mina bloggar hemma, så när jag kom hem blev jag så klart tvungen att prova… Så här kommer en snabbinstruktion.

För teman som inte har stöd för att byta ut header-bilder i det grafiska gränssnittet så ser koden som visar bloggnamnet i header.php vanligtvis ut ungefär som nedan:

<h1 id="header">
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</h1>

För att ta bort bloggnamnet och istället lägga in en bild så tar man bort koden ovan (tänk på att aldrig radera utan att istället koda bort med taggarna <!– och –>) och lägger in koden nedan.

<div id="header">
<div id="headerimg">
</div>
</div>

Sedan lägger man till koden nedan i temats css-fil, men byter ut URL:en till den som leder till bilden som ska användas. När man laddar upp bilden under “Media” och sedan klickar på den så finns hela länken där. Koden “repeat-x top left” kan ändras för att få bilden att ligga till höger, vänster eller centrerad, och efter “height” ställer du in hur många pixlar hög bilden är.

#header {
background: url("/wp-content/uploads/filnamnet.jpg") repeat-x top left;
height: 250px; }

Lycka till!

Tips: Mer information finns som vanligt i WordPress codex.

Skapa en page template med egen sidebar i WordPress

Som jag skrev tidigare så tog det mig flera timmar att skapa en ny sidmall (page template) med en egen sidebar för min sida eftersom det inte finns några tydliga förklaringar över hur det görs. Jag har därför skrivit ihop en instruktion, förhoppningsvis så är den till användning för någon.

För att kunna skapa en sida med egen sidebar i WordPress behöver man ändra i koden på tre platser. Vid det här laget behöver jag väl inte berätta att jag använder childthemes? Bra.

Börja med att kopiera den ursprungliga sidebar.php från ditt parent theme, döp den till sidebar-dittnamn.php och spara den nya filen i ditt childtheme (observera att det är väldigt viktigt att döpa filen rätt och att lägga in ett bindesträck mellan sidebar och namnet). Gå in i editorn och ändra numret i koden nedan till nästa i följd efter de sidebars du har (titta i koderna för dem vad de har för nummer och välj ett högre). Jag hade tre sedan tidigare, så nästa lediga nummer är fyra.

 <?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>

Lägg in koden nedan i functions.php. Om filen är tom sedan tidigare och det här är det första som du lägger in så måste du komma ihåg att börja med <?php och avsluta med ?>. Ändra namnet till det du skrev efter bindestrecket i filnamnet (sidebar-dittnamn.php). Ändra numret för id till samma som du skrev i functions.php. Kopiera koden för before_widget/after_widget och before_title/after_title från din existerande sidebar och byt ut koden nedan mot den.

function arphabet_widgets_init() {
register_sidebar( array(
'name' => 'dittnamn',
'id' => 'sidebar-4',
'before_widget' => '<aside id="%1$s">',
'after_widget' => '</aside>',
'before_title' => '<h3>',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'arphabet_widgets_init' );

En kopia ska göras av den sidmall som ska användas som grund, det görs i ett ftp-program. I mallen ska koden nedan ändras till namnet för den nya widget-arean.

 <?php get_sidebar( 'dittnamn' ); ?> 

När detta är gjort bör en ny widget-area finnas under Appearance -> Widgets. Där kan du välja vilka widgets som ska visas i din sidebar, sedan är det bara att gå in under sidorna och ändra sidmallen till den nya. Lycka till!

Hur gör man ett WordPress childtheme?

Jag har blivit ombedd att lägga upp en snabb instruktion över hur man skapar ett childtheme, så det kommer här.

  • Se först och främst till att det tema som du vill ändra finns installerat på din webbserver.
  • Skapa en ny css-fil där du lägger in följande rader kod, men lägg in ditt och temats namn istället för John Doe.
/*
 Theme Name:     Twenty Thirteen Child
 Theme URI:      http://example.com/twenty-thirteen-child/
 Description:    Twenty Thirteen Child Theme
 Author:         John Doe
 Author URI:     http://example.com
 Template:       twentythirteen
 Version:        1.0.0
*/

@import url("../twentythirteen/style.css");

/* =Theme customization starts here-------------------------------------------------------------- */
  • Wordpress childtheme, ftpÖppna mappen som innehåller dina installerade teman via ett ftp-program och spara css-filen i en ny mapp som du döper till ”tema-childtheme” (se bilden).
  • När mappen finns sparad på webbservern så kommer ett nytt tema att ha dykt upp under ”Appearance” -> ”Themes”. Aktivera temat eller gå in i editorn för att göra ändringar.
  • Den kod som läggs in i css-mallen för childthemet kommer att skriva över sin förälder. För att göra funktionella förändringar så kopierar du den aktuella filen (t.ex. functions.php) från ditt parent theme och sparar i samma mapp via ftp-programmet.

Om du vill läsa mer om hur man skapar child themes så rekommenderar jag WordPress codex. Lycka till!

Skapa en egen favicon i WordPress

carolyn-loow_favicon

Du vet den lilla bilden som syns framför vissa webbplatsers URL:er i webbläsaren? Den kallas för en favicon och är ganska lätt att själv lägga in på en webbplats i WordPress. En av mina klasskamrater, Malin Göransson, har beskrivit i sin blogg hur man lägger in den via en plugin, men jag tänkte istället beskriva hur man gör det i koden. Att göra förändringar direkt i webbplatsens kod istället för att inställera plugins är att föredra, eftersom varje installerad plugin gör att sidan tar längre tid att ladda. Dessutom är det inte så svårt, och om man (som jag) tycker att det är roligt att koda, så…

Favicon i WordPress

Först och främst behöver du formatera om bilden som du har tänkt använda så att den har rätt format. Om du har sparat bilden som .png så laddar du enkelt upp den i konverteringsverktyget Convertico, som gör om den till en .ico. Därifrån laddar du sedan ner den på din dator.

För att kunna koppla bilden i din kod så behöver den läggas upp på ftpn. Jag har tidigare tipsat om programmet FileZilla. Spara bilden i både huvudmappen för ditt tema och för hela sidan. Den ska alltså sparas på två ställen, när du sparar den i hela sidans rootmapp så kommer den att uppdateras i RSS-läsaren för dina följare.

När det är klart öppnar du Editorn i WordPress, och öppnar din header. Lägg in följande kod precis nedanför <head>:

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

Om koden redan ligger där så kan du bli tvungen att ta bort din gamla favicon via FTP-programmet. Spara filen. För att kunna se förändringarna så kan du bli tvungen att starta om webbläsaren och tömma cachen.

Om du vill ha WordPress hela instruktion till hur man gör detta så hittar du den i WordPress Codex – Creating a Favicon.

Ta bort radbrytningar i WordPress

Nu har jag irriterat mig på radbrytningarna som blir på varje rad i i varje inlägg här i bloggen, så nu la jag tre minuter på att ändra det. Jag letade helt enkelt reda på den här koden i CSS-mallen i mitt parent theme:

.site-content article {
border-bottom: 4px double #ededed;
margin-bottom: 72px;
margin-bottom: 5.142857143rem;
padding-bottom: 24px;
padding-bottom: 1.714285714rem;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

Den kopierade jag och klistrade in i mitt child theme, men ändrade så att den såg ut så här istället. Det löste problemet.

/**Ta bort radbrytningarna i blogginläggen**/
.site-content article {
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;}

Webbkunskap och WordPress childthemes

På måndag har vi som sagt prov i webbkunskap, men istället för att repetera texten i böckerna har jag under den senaste veckan lagt många timmar på att utveckla mitt eget childtheme i WordPress. Jag har läst en kurs i webbplatsutveckling tidigare och kommit fram till att det bästa sättet för mig att lära mig koda är genom att göra det själv.

Jag har använt WordPress för att göra hemsidor tidigare och tycker att det fungerar bra. Det är dock första gången som jag har gjort ett childtheme, och det känns som att jag har lärt mig massor! Hoppas bara att det märks på provet också…

Här har jag försökt beskriva lite kort vad ett childtheme är, vad det är bra för och hur det skapas. Om du vill veta mer rekommenderar jag WordPress Codex.

Varför Childthemes?

Ett childtheme görs för att man ska kunna göra förändringar i ett tema, utan att de försvinner om temat uppdateras. Det enda som egentligen behövs för att skapa ett childtheme är en mapp med en CSS-mall, att öppna ett ftp-program (jag har använt FileZilla under det senaste året och tycker att det funderar bra) och ladda upp mappen på samma plats som dess parenttheme. Det gäller alltså att ha sitt parenttheme installerat, och att döpa mappen med childthemet rätt så att WordPress känner igen och förstår att de hör ihop.

Som sagt så räcker det med att mappen innehåller en CSS-mall där man skriver in alla förändringar som man vill göra, de skriver i sin tur över föräldern. Om man vill göra mer omfattande förändringar av funktioner på sidan så kan man också göra kopior på de olika PHP-filerna och göra förändringar i dem. På det viset kan man skapa olika typer av sidor (till exempel med/utan sidomeny, förändra hur arkiverade inlägg visas eller koppla in Googles typsnitt).

Om man vill göra ett eget Childtheme med större förändringar än bara designen så kan det vara bra att kunna läsa lite PHP-kod, i alla fall tillräckligt för att se var olika funktioner ska klippas in. I övrigt är det bara att testa sig fram!

Mitt WordPress Childtheme

Mitt childtheme är baserat på WordPress egna Twentytwelve, som jag tycker är en bra grund att utgå ifrån. Bland filerna som jag har ligger CSS-mallen, en functions-fil och en egen startsida. Jag har också använt samma tema på en av mina andra webbplatser, där la jag dessutom in en nya fil för arkiverade inlägg per kategori, med några små förändringar.

I functions-filen la jag in kod som gör att rubrikerna visas med Googles typsnitt Montserrat och att startsidan fick en högerkolumn som ser ut som jag ville ha den.