Lite pill-, konf- och devjox med siten.

Installation
Installerade direkt på one.com. Enda fixet var väl att ange katalogen till www.tillberg.org/blogg snarare än att den defaultade till www.tillberg.org. Dock gillade den inte att man satte BÅDE WordPressadress (URL) och Webbplatsadress (URL) till www.tillberg.org/blogg. Då kraschade siten och ominstallation blev nödvändig. Nu är WordPressadress satt till www.tillberg.org och det är lite oklart varför man inte kunde lägga allt i en underkatalog (det är faktiskt så att ”blogg”-katalogen inte finns i verkligheten). Nå det lirar ju hyfsat just nu.

Fixa: Det verkar finnas en autodir från tillberg.org till tillberg.org/blogg (samma om man prefixar med www). Den skulle man ju vilja få bort, men kan fixas när jag lägger upp en egen frontsida utan wordpress.

Tema-val Kanske lite utan att undersöka jättenoga så föll valet på ”Twenty fifteen”. Liknade mest en traditionell blogg utan en massa spalter och grafik och jox. Men frågan är om det var så klokt – konfigurereringsmöjligheterna i ”Utseende | Anpassa” är väldigt begränsade…så det blev en hel del fix med child-tema, CSS och php-fix. Men visst, alltid kul att lära sig nya saker. Om man har tid.

Child-tema Det finns förvisso en avdelning under ”Utseende | Anpassa” som heter ”Ytterligare CSS…” och där kan man nog pilla in en hel del utan att behöva göra ett child-tema. Men om man vill ändra i php för att t. ex. pilla med meta-data för inläggen (dels kan man få både mer och mindre info där, och framförallt så ligger meta-infon efter inläggen per default men borde naturligtvis ligga under rubriken) – och säkert en massa andra saker i framtiden – så kändes det helt oundvikligt att göra ett child-tema. Bara att följa instruktioner på wordpress hemsida. Det child-tema som nu är valt fick katalognamnet wp-content/themes/twentyfifteen-DT-child och i headern på den egna style.css sattes namnet ”Twenty Fifteen DT Child” vilket är det som syns i wordpress-editorn sen.

I samband med detta skapade man (enligt instruktionen) också en egen functions.php för att overrida my_theme_enqueue_styles() – bara copy and paste från instruktionen och ändra en rad:

$parent_style = 'twentyfifteen-style';

CSS-joxande
De förändringar man vill ha verkar man kunna placera i style.css under childtemat.

Sånt man inte kommer ihåg sådär rakt av:

  • Det finns tre olika ”Selectors”: ”element”, ”id” och ”class”.
    • Den förstnämna skriver man bara som det är, t. ex. ”p { … }”.
    • Den andra skriver man med ”#”, t. ex. ”#site-navigation { … }”. ”Id” kan användas inuti taggar, t. ex. ”<p id=”site-navigation”> … </p>
    • Den tredje inleder man med punkt, t. ex. ”.site-content { … }”.
      En utmärkt guide finns här.

Fixa: Just denna punktlista borde kunna gå att få snyggare. Hur hantera listor i flera nivåer? Varför vertikalt avstånd mellan första punkt och underpunkter?

Flytta post meta data och stuva om den
”Post meta data” är data om posts, dvs data om inlägg. Per default ligger detta efter varje inlägg och såg från början ut ungefär såhär:

Redigera-taggen syns bara när man är inloggad förstås.

Detta var lite mer komplicerat men ändå inte våldsamt om man har lite erfarenhet av programmering. Målen med det jag ville göra var tre:
1) lägg den direkt under rubriken istället för efter inlägget
2) stuva om den lite, kanske ta bort de rätt fula små ikonerna
3) eventuellt dela upp det så att det som står under inlägget bara är datum och författare (ej inloggningsnamn som per default utan riktigt namn) och lägga eventuellt annat i footern.

Sen skulle jag ju verkligen vilja minska höjden på den där footern och det är väl mest en CSS-fråga.

Så här gick det till – och notera att detta bara gäller ”twenty fifteen”-temat. Det går säkert till på nåt annat sätt för andra teman.

Först vill vi hitta funktionen som lägger ut den där raden överhuvudtaget. Den ligger i wp-content/themes/twentyfifteen/content.php och det är bara helt sonika att kopiera över den filen till wp-content/themes/twentyfifteen-DT-child/ och då kommer den filen att användas. Vet inte om det är bra att göra så, men nu blev det så. Vi får väl se vid nästa uppgradering av wordpress och/eller temat.

Funktionsanropet som söks ligger i slutet av den filen (den andra raden är den som lägger till ”redigera”-länken om man är inloggad):

 <footer class="entry-footer">
     <?php twentyfifteen_entry_meta(); ?>
     <?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<span class="edit-link">', '</span>' ); ?>
 </footer><!-- .entry-footer -->

Man kan börja med att testa att kopiera och pasta detta funktionsanrop i samma fil, överst i blocket som börjar med <div class = ”entry content”> så det blir så här:

<div class="entry-content">
 <?php
 twentyfifteen_entry_meta();
 /* translators: %s: Name of current post */
 the_content( sprintf(
 __( 'Continue reading %s', 'twentyfifteen' ),
(osv)

Spara och testa. Nu bör den där raden komma två gånger – en gång precis före inläggets text och så står defaultraden kvar i slutet. Strunta i att formatteringen kan ha blivit knäpp på den som nu blev tillagd, det tar man med CSS senare.

Sådär. Om flytta raden nu var det enda man ville göra så är man i princip klar redan här. Bara kommentera bort raden/raderna ur footern och pilla lite med formateringen.

Men jag vill ju pilla om den här funktionen också som första steg. Att overrida en funktion i wordpress kan vara rätt tjorvigt har jag förstått, man måste enligt några beskrivningar jag såg kopiera funktionen och döpa om på nåt visst sätt, sedan disabla i parent-temat och enabla i child-temat och det ena med det femte. Nu visade det sig trevligt nog att det var väldigt lätt att overrida just den här funktionen. Man lägger helt enkelt till funktionsanropet i  functions.php innan sluttaggen (”?>”). Första enkla test: lägg till följande

function twentyfifteen_entry_meta() {
     printf("stick å brinn");
}

Spara och ladda om sidan. Nu bör båda meta-data-raderna ha försvunnit och ersatts av ett lite giftigare meddelande.

När man kommit så långt så är det en enkel match att kopiera över hela originalfunktionen innanför klamrarna. Den hittar man i wp-content/themes/twentyfifteen/inc/template-tags.php. Det verkar ingen bra idé att ta med raden ovanför som är en ifsats: om funktionen inte finns så… utan ta bara det som står efter ”function twentyfifteen_comment_nav() {” fram tills slutklammern. Sen är det bara att php:a i full fart.

Det finns rätt många delar i den här funktionen och jag gjorde genom att slänga in lite printf-funktioner med siffror en undersökning av vad som anropas när. Fattigmans debug 🙂 De delar i funktionen som jag upptäckte användes modifierades på olika sätt, de som jag inte fann användes lät jag vara med en printf om att det är ”ohanterat case”.

För footern så är det egentligen bara tre saker: kategorier; taggar och redigeralänken. Jag kände mig tvungen att skriva en egen version av ”get_the_category_list” för att kunna få den som jag vill ha den. Passade på att lägga in taggar och redigeralänk där också.

Efter lite CSS-pill (man får pröva sig fram, det är mystiska strukturer det där) så lyckades jag också minska höjden på footern

Tabeller
Det visade sig vara rätt skralt med stöd för tabeller, som jag ville använda under ”rese”-delen av siten. Men efter installation av plug-in:en ”TablePress” var det bara att konfigurera och köra. Själva tabellerna var rätt enkla att hantera, det som tog tid var formateringen. Speciellt före och efter tabellerna. Men med pill på rätt ställen i CSS:en så gick det till slut att lösa. Det där med att göra ”inspect” på det man vill pilla med är ett rätt effektivt trick (högerklicka på den rad man vill ändra, välj ”inspect” så kommer man iallafall i Chrome att kunna tröska sig fram till vad man bör pilla i CSS. Ingen exakt vetenskap för mig men man får prova sig fram lite och hoppas på det bästa).